What makes good web design?

What makes good web design?

Richard Cornish

rich@richardcornish.com

A house

A hammer

A home to live in

Project:

Tool:

Goal:

I don’t make a house because I like the hammer.

I make a house because I need to live in it!

Form followed functionFunction followed form

Form followed functionFunction followed form

From chaos ...

... came order

A Web site

Design, technology

To sell stuff,To read about a game,To get a date

... to connect people

Project:

Tool:

Goal:

Netscape

Firefox

HTML

Transitional

CSS 1

XML

Javascript

Perl

MySQL

RealAudio

Shockwave

PDFs

vCards

WCAG 1.0

Ruby on Rails

Web 1.0

... no, Internet Explorer!

... no, Safari!

... no, XHTML!

... no, Strict!

... no, 2 ... no, 3!

... no, RSS ... no, ATOM!

... no, AJAX!

... no, PHP!

... no, PostgreSQL!

... no, Podcasts!

... no, Flash!

... no, eBooks!

... no, hCards!

... no, 2.0!

... no, Sapphire on Spaceships!

... no, 2.0 ... no, 3.0!

<img> <img />

xhtml1-strict.dtdxhtml1-transitional.dtd

{ text-indent } { text-shadow }

<?xml?>

type="text/javascript"

!

Web 1.0

Hello!

Gradients

Drop shadows

Reflections

Rounded corners

Big type

Bright colors

Cute icons

Star shapes

Beta

!

❖ Are all the links underlined? I prefer most links that’s aren’t “buttons” underlined.

❖ Is there a specified a visited link state?

❖ Are buttons fully clickable? I see semi-clickible buttons all the time and they bug the heck outta me.

❖ Are fly-outs functioning properly? Easy to click? Spaced far enough apart? I find these hard to use all the time, but when they’re done well they don’t frustrate me though.

❖ Are you using color for any important information? Don’t forget the colorblind may have a problem with that.

❖ Are alt attributes specified for non-ornamental images? Do they describe the image accurately where it’s helpful to do so?

❖ Is there relevant meta information?

❖ Is there a proper doctype?

❖ Are there proper margins, line height and letter spacing?

❖ Does content maintain a good default line length and font size (especially for small serif fonts) for reading?

❖ Are fonts relative and scalable?

❖ Is there decent contrast for text?

❖ Do borders give enough room to text and/or important visual elements?

❖ Is there a good use of whitespace?

❖ Do headlines look like headlines? Do they make sense in relation to the content?

❖ Are navigation labels straightforward and easy to understand?

❖ Do the pages look good cross browser? Cross platform? Check if you can!

❖ Is there a proper page title for each page? Hopefully relevant to the page itself and its content?

❖ Is there an “About” page? Most every site should have something!

❖ For content heavy sites — does it have a well categorized archive and search? Depending on the site, search should be on every page. Either way, it’s good to accommodate both browsers (as in people browsing a site) and searchers on content rich sites.

❖ Do you have dates and authors for anything like an article or post? Something that kills me about many of blogs. I like to know when and by whom when reading something.

❖ Does the content print well?

❖ Is there up-to-date and easy-to-find contact information?

❖ Do you have a custom 404 page? These can be a real help.

❖ Do you have a working link to RSS feeds if available?

❖ Did you check content for passive voice?

❖ Have you checked your spelling “gotchas”? I miss these all the time.

❖ Are links checked and working?

❖ Are there any typos in images? Typos in alt attribute text?

❖ Is there a copyright on every page?

❖ Is there a text equivalent for any important graphical information?

❖ Is there a link to home (or whatever you use for home) from every page?

❖ is there generic about information or link to it from every page for those coming in via search engine?

❖ Are PDFs and other “non-html” files labeled properly?

❖ Are advertisements labeled as such, or obvious as advertisements?

❖ Does the design work well in 800×600?

❖ Are all forms functioning properly? Are they easy to fill out?

❖ Do error messages make sense?

❖ Is feedback easy for visitors to give?

❖ Does the back button always work?

D. Keith Robinson

7nights.com/asterisk/archive/2004/ 07/the-big-web-design-details-list

(The elements that make a successful home page are) anything that accomplishes the site’s objectives and goals.

Really, that’s all it comes down to at the end of the day. I wish it were as simple as ‘The Seven Habits of Highly Effective Homepages,’ but no single list will work for every possible Web site strategy.”

“

Cameron Moll, March 2005

digital-web.com/articles/cameron_moll

It is purpose that drives us.”“ Agent Smith

The Matrix Reloaded

islostarepeat.com

fsa.usda.gov/haynet (old)

Expand when necessary

Contract when possible

... just like your pants

Good webGood design

Good web design

+

The ideas

The Web as a platform

Cooperation, not control

Collective intelligence and experience

Effective communication

The grit

Semantic markup

Separation of content and presentation

Accessibility

Usability

<table summary="a unholy mess" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="9" width="553" height="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> </tr> <tr> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> <td width="11" height="10"><img src="images/spacer.gif" alt="" height="9" width="11" /></td> <td width="150" height="10"><img src="images/spacer.gif" alt="" height="10" width="150" /></td> <td width="20" height="10"><img src="images/spacer.gif" alt="" height="10" width="20" /></td> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> <td width="11" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338" height="10"><img src="images/spacer.gif" alt="" height="10" width="338" /></td> <td width="20" height="10"><img src="images/spacer.gif" alt="" height="10" width="20" /></td> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> </tr> <tr valign="top"> <td width="11"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="150">This could really be done much more simply.</td> <td width="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="11"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338">Guess how much markup there is in this little table? 13.7k. There are 17 rows and 9 columns in this thing. And did I mention all of the spacer GIFs?</td> <td width="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> </tr> <tr> <td width="11" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="150" height="20"><img src="images/spacer.gif" alt="" height="10" width="150" /></td> <td width="20" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="11" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338" height="20"><img src="images/spacer.gif" alt="" height="10" width="338" /></td> <td width="20" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> </tr> <tr> <td colspan="9" width="553" height="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> </tr> <tr> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> <td width="11" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="150" height="10"><img src="images/spacer.gif" alt="" height="10" width="150" /></td> <td width="20" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> <td width="11" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338" height="10"><img src="images/spacer.gif" alt="" height="10" width="338" /></td> <td width="20" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> </tr> <tr valign="top"> <td width="11"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="150">There are way too many table cells and spacers in here.</td> <td width="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="11"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338">And all of the dotted borders are done with a <code>background</code> attribute on table cells, which won't validate. <table summary="list" width="338" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="10" height="10"><img src="images/spacer.gif" alt="" height="10" width="10" /></td> <td width="328" height="10"><img src="images/spacer.gif" alt="" height="10" width="328" /></td> </tr> <tr valign="top"> <td width="10">•</td> <td width="328">A nested table? What for?</td> </tr> <tr> <td width="10" height="10"><img src="images/spacer.gif" alt="" height="10" width="10" /></td> <td width="328" height="10"><img src="images/spacer.gif" alt="" height="10" width="328" /></td> </tr> <tr valign="top"> <td width="10">•</td> <td width="328">To make a bulleted list? You're kidding, right?</td> </tr> </table> </td> <td width="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> </tr> <tr> <td width="11" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="150" height="20"><img src="images/spacer.gif" alt="" height="10" width="150" /></td> <td width="20" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="11" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338" height="20"><img src="images/spacer.gif" alt="" height="10" width="338" /></td> <td width="20" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> </tr> <tr> <td colspan="9" width="553" height="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> </tr> <tr> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> <td width="11" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="150" height="10"><img src="images/spacer.gif" alt="" height="10" width="150" /></td> <td width="20" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> <td width="11" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338" height="10"><img src="images/spacer.gif" alt="" height="10" width="338" /></td> <td width="20" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> </tr> <tr valign="top"> <td width="11"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="150">This could all be done with 8 table cells and 4 CSS rules.</td> <td width="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="11"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338">Seriously. 8 cells and 4 css rules, that's all it takes. <table summary="list" width="338" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="10" height="10"><img src="images/spacer.gif" alt="" height="10" width="10" /></td> <td width="328" height="10"><img src="images/spacer.gif" alt="" height="10" width="328" /></td> </tr> <tr valign="top"> <td width="10">•</td> <td width="328">Oh no, another table masquerading as a bulleted list.</td> </tr> <tr> <td width="10" height="10"><img src="images/spacer.gif" alt="" height="10" width="10" /></td> <td width="328" height="10"><img src="images/spacer.gif" alt="" height="10" width="328" /></td> </tr> <tr valign="top"> <td width="10">•</td> <td width="328">Just mark up your bulleted lists as bulleted lists and let CSS do the rest.</td> </tr> </table> </td> <td width="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> </tr> <tr> <td width="11" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="150" height="20"><img src="images/spacer.gif" alt="" height="10" width="150" /></td> <td width="20" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="11" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338" height="20"><img src="images/spacer.gif" alt="" height="10" width="338" /></td> <td width="20" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> </tr> <tr> <td colspan="9" width="553" height="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> </tr> <tr> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> <td width="11" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="150" height="10"><img src="images/spacer.gif" alt="" height="10" width="150" /></td> <td width="20" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> <td width="11" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338" height="10"><img src="images/spacer.gif" alt="" height="10" width="338" /></td> <td width="20" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> </tr> <tr valign="top"> <td width="11"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="150">You need a rule for <table>, one for <td>, one for <ul> and one for <li>.</td> <td width="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="11"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338">That's it. Once you have those you're golden. <table summary="list" width="338" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="10" height="10"><img src="images/spacer.gif" alt="" height="10" width="10" /></td> <td width="328" height="10"><img src="images/spacer.gif" alt="" height="10" width="328" /></td> </tr> <tr valign="top"> <td width="10">•</td> <td width="328">That's better than using 8 more table cells to make a fake bulleted list, which ends up being much less accessible.</td> </tr> <tr> <td width="10" height="10"><img src="images/spacer.gif" alt="" height="10" width="10" /></td> <td width="328" height="10"><img src="images/spacer.gif" alt="" height="10" width="328" /></td> </tr> <tr valign="top"> <td width="10">•</td> <td width="328">Excellent! The last fake bullet.</td> </tr> </table> </td> <td width="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> </tr> <tr> <td width="11" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="150" height="20"><img src="images/spacer.gif" alt="" height="10" width="150" /></td> <td width="20" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="11" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338" height="20"> </td> <td width="20" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> </tr> <tr> <td colspan="9" width="553" height="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> </tr> </table>

<table summary="a unholy mess" width="553" border="0" cellspacing="0" cellpadding="0"><tr valign="top"><td>much better</td><td>Guess how much markup there is in this little table? 2.1k. There are 4 rows and 2 columns in this thing. And no spacer GIFs.</td></tr><tr valign="top"><td>just right</td><td>And all of these dotted borders are done with CSS and are perfectly valid.<ul><li>This is a list item now</li><li>Just the way it's supposed to be</li></ul></td></tr><tr valign="top"><td>This is all done with 8 table cells and 4 css rules.</td><td>Seriously. 8 cells and 4 css rules, that's all it takes.<ul><li>Hooray for bulleted lists</li><li>Why not just mark up your bulleted lists as bulleted lists and let CSS do the rest?</li></ul></td></tr><tr valign="top"><td>You need a rule for &lt;table&gt;, one for &lt;td&gt;, one for &lt;ul&gt; and one for &lt;li&gt;.</td><td>That's it. Once you have those you're golden.<ul><li>I just love bulleted lists</li><li>Excellent! no more fake bullets</li></ul></td></tr></table>

Smaller files

Faster-loading pages

Less-costly bandwidth

More page views ... ?

Better screen readings

Better search engine rankings

Easier to maintain and redesign

Identity

strength earth halotravelspeed

cars energy carstransitathletics

peugeot bp toyotatubenike

Identity appeals to feelings

and transcends text

Consistent identity creates trust

Just be careful

You’re you — be proud of it

Grid

flickr.com/photos/andwar

Hierarchical Categorical

ypographyT

font-family:font-size:font-variant:line-height:text-align:text-indent:text-transform:

w3c.org

arial, sans-serif;150%;small-caps;1.5em;justify;1em;uppercase;

p {

}

mikeindustries.com/sifr

scalable Inman Flash Replacement

June 2006

Display your font on their computer while using standards

... but there is always a catch

Colo(u)r

credit: flickr.com/photos/minarets

wellstyled.com/tools/colorscheme2/index-en.html

mezzoblue.com

Let nature decide ...

pantone.com

... or let the pros decide

Imagery

credit: fortymedia.com

The flirty Customer Service GalOperators are standing by to take your call ...

and your heart

Uh, no.

We can do better than that.

That’s OK if you’re not an

award-winning photographer

Just get real with your images

Never underestimate the power of an image

sxc.hu

everystockphoto.com

yotophoto.com

your own digital camera (seriously)

Media

March 2006

So, is design the second coming?

As a designer, I wish.

Crappy sites succeed despite their bad design

(not because of it)

Why?

Windows

A fatal exception occurred at 0137:BFF9A07C. The currentapplication will be terminated.

* Press any key to terminate the current application* Press CTRL+ALT+DEL again to restart your computer. You will lose and unsaved information.

Press any key to continue

Because visitors will slog through hell

to get to what they want ...

if they want it badly enough

Why take that chance?

Thanks! Questions?

richardcornish.com/goodwebdesign.pdf

rich@richardcornish.com+1 (630) 890-0307