Designing Web Pages

Summary:
A collection of tips and thoughts about creating a well designed web site. Assembled for MLCUG, Feb 11, 2006.

Content

• Content is King
  How do you make a quality website? Three words. Content, content, and content. Give the audience a reason to care. Too many web pages are like tales told by idiots, full of sound and fury, signifying nothing. Do you want to be interesting? Then forget the graphics and the glitz. First and foremost, have something to say.
• Writing
  To create a document worth reading and worth looking at, you must have some writing skill. You must have information to present. You must do some information design.

  Quality content requires iteration. You have to be willing to write, rewrite, and rewrite again to produce an excellent document. Nothing is right the first time. You have to tweak, fidget, and adjust at least a little. Quality requires a time investment. First drafts are rarely perfect drafts.

• Write what you know
  You can make your pages look absolutely fabulous but if they don't say anything, nobody's going to care. Give the world your art, your music, your poetry, your political rants, your short stories, your first grade photos, your shareware and freeware, your archives of hobby stuff, your hints about how to make great tie-dye, your really handy Perl script, your list of the ten best bookstores in the Greater Podunk area. You know something that nobody else knows. You can do something that nobody else can do quite the same way. You've made something that the rest of the world has never seen. Share it. Put it in your web page.
• Writing and Design
  Most will find that it is easier to write interesting content that it is to design a visually appealing presentation. Design work encompasses usability issues as well as aesthetics. Starting with good content and a simple, standard presentation will yeild a page that gets your info out there in a way your audience will most likely understand.

Know your audience

• Who is reading?
  Identify the potential readers of your Web site so that you can structure the site design to meet their needs and expectations. The knowledge, background, interests, and needs of users will vary from tentative novices who need a carefully structured introduction to expert "power users" who may chafe at anything that seems to patronize them or delay their access to information. A well-designed site should be able to accommodate a range of users' skills and interests.
• Examples:
  • Mlcug - Static audience, dynamic content.
  • Penn Pages - Dynamic audience, static content.
  • Motorcycle Stand - Inherited from another author
  • Giesler Engineering - Comercial Sales
  • Cheshire House - Tourism/Rental

Presentation

• How does it look?
  A web page is like any presentation - there has to be the right level of eye candy/entertainment and content and no negatives/turn-offs. The page has to load in a reasonable amount of time and should be easy to navigate. It's nice when the navigation tools don't scroll off the page on longer pages.
• HTML = Hyper Text Markup Language.
  It defines the ways you can tag text and objects. It includes style-defining tags (like <i> for Italics and <b> for bold) and content-describing tags (like <h1> header, <p> paragraph, or <blockquote> quotes). Tags should be thought of as ways to *identify content* instead of how it should be *displayed*. This will also help to bring structure to the document.
• Browsers
  The browser decides how to display your HTML, not you. Design decisions about displaying tags are made by the programmers who wrote the browser. Some browsers display the <em> tag as italics; some display it as underlined text. You, the document author, have no control. You can't pick good fonts. You can't decide how far to indent that block quote.
• Users
  The viewer can also influence the appearance of the page by changing the brower's behavior.

Document/Site Structure

• Home or Index Pages
  Short (1-3 screens) page that act as a table of contents. Many links to other areas of the site. General info about site.
• Menus and navigation
  User should be able to move around the page and/or site via a common set of links used throughout.
• Identify links, new and visited
  Links should be easily identified. Standard colors help user know a new link from one previously visited.
• One monolithic page vs. Many sub pages
  Depends on content. Users might shy away from a long home page but would rather read a lengthy article without having to click "Next.." every screeen.
• Design Considerations
  Use of white space, headers, lists, and tables to make page attractive to look at. Similiar principles apply to any document prep. Style sheets can aid in document design and consistancy.
• Site Maps
  Lets users see and navigate everything at a glance.

Markup Tags

• html
• head
• title
• body
• Headings
• Paragraphs
• Lists
• Preformatted text
• Forced line break
• Horizontal rule

Linking

• Relative Pathnames Versus Absolute Pathnames
• URLs
• Links to Specific Sections
• Mailto

Images

• Image Size Attributes
• Aligning Images
• Alternate text for Images
• Images as Hyperlinks
• External Images, Sound, and Animations

Tables

• Putting stuff in boxes.

Editors

• Text Editor
• Mozilla and the like
• Word Processors that can "Save as html"
• Front Page and friends

Validators

Browsers follow the second half of this maxim by accepting Web pages and trying to display them even if they're not legal HTML. Usually this means that the browser will try to make educated guesses about what you probably meant. The problem is that different browsers (or even different versions of the same browser) will make different guesses about the same illegal construct; worse, if your HTML is really pathological, the browser could get hopelessly confused and produce a mangled mess, or even crash.

That's why you want to follow the first half of the maxim by making sure your pages are legal HTML. The best way to do that is by running your documents through one or more HTML validators.

One such beast is the W3C Validator.

Common Mistakes

• Unreadable text/background combinations.
  High contrast colors are easier to read.
  Low contrast colors are harder to read.
  
• Blinking text. The <blink> tag is evil. Same for <marquee>. Very distracting.
• Gratuitious animation, garish backgrounds - see above.
• "Resize Your Browser To..." instructions. You as author have no idea how the viewer uses their browser. Don't force your preferences on others.
• "Best Viewed With..." messages. Web pages are meant to be cross platform documents.
• Use of meaningless text for links. (eg. Click Here.) Use text that says something about the content of the link.
• Using graphics for text info.
• "Under Construction" notices. We know a web page is a dynamic evolving document. It should be.
• Be wary of bandwidth. Graphics take much longer to load than text. If images are the point of your page, use thumbnails, distribute the images over multiples pages, learn the options of the <img> tag (width="xxx", height="yyy")
• Frames. Splitting a page into frames is very confusing for users since frames break the fundamental user model of the web page.

Cascading Style Sheets

• What is CSS
  HTML elements enable Web page designers to mark up a document as to its structure. The HTML specification lists guidelines on how browsers should display these elements. For example, you can be reasonably sure that the contents of a strong element will be displayed bold-faced. Also, you can pretty much trust that most browsers will display the content of an h1 element using a big font size... at least bigger than the p element and bigger than the h2 element. But beyond trust and hope, you don't have any control over how your text appears.

  CSS changes that. CSS puts the designer in the driver's seat. It allows for consistant look across multiple documents. Affords the author more control on how the pages looks. Common tasks with CSS are setting colors and backgrounds, fonts, white space around elements, margins, and links.

• Using CSS
  • In-line style directives
    CSS is built in to every HTML tag. If you want to add a style inside an HTML element all you have to do is specify the desired CSS properties with the style HTML attribute.
    

    <p style="background: blue; color: white;">

  • Included in <head> section at top of document (like this one)
  • Separate document
• Browsers
  Not all Browsers can render every aspect of CSS properly. Test your page on as many platforms as possible.

  Useful hack for IE: Use a conditional statement to modify CSS -

  //themain stylesheet
  <!--[if ie 6]>
  //ie hack stylesheet
  <[endif]-->
         

• Page Style
  This page uses multiple style sheets. To see them (in Firefox) use the "View ->Page Style" menu option and choose "Alt 1" or "Alt 2"

• Web Style Guide
• Eric Raymond's HTML Hell Page
• Web Pages That Suck
• Top Ten Mistakes in Web Design
• Why the Web Sucks II
• NCSA's A Beginners Guide to HTML
• W3C - The World Wide Web Consortium
• Steadfast Suggestions for Web Design