What makes good web design?
Richard Cornish
rich@richardcornish.com

Project: A house
Tool: A hammer
Goal: A home to live in

I don’t make a house
because I like the hammer.
I make a house because I
need to live in it!

Function followed form Form followed function

Function followed form Form followed function

From chaos ...

... came order

Project: A Web site
Tool: Design, technology
Goal: To sell stuff,
To read about a game,
To get a date
... to connect people

Netscape ... no, Internet Explorer!
Firefox ... no, Safari!
HTML ... no, XHTML!
<img> <img />
Transitional ... no, Strict!
xhtml1-transitional.dtd xhtml1-strict.dtd
CSS 1 ... no, 2 ... no, 3!
{ text-indent } { text-shadow }
XML ... no, RSS ... no, ATOM!
<?xml?>
Javascript ... no, AJAX!
type=\"text/javascript\"
Perl ... no, PHP!
MySQL ... no, PostgreSQL!
RealAudio ... no, Podcasts!
Shockwave ... no, Flash!
PDFs ... no, eBooks!
vCards ... no, hCards!
!
WCAG 1.0 ... no, 2.0!
Ruby on Rails ... no, Sapphire on Spaceships!
Web 1.0 ... no, 2.0 ... no, 3.0!
Web 1.0

Gradients
Drop shadows
Reflections
Rounded corners
Hello!
Big type
Bright colors
!
Cute icons
Star shapes
Beta

❖ Are all the links underlined? I prefer most links that’s aren’t “buttons” ❖ For content heavy sites — does it have a well categorized archive and
underlined. search? Depending on the site, search should be on every page.
Either way, it’s good to accommodate both browsers (as in people
❖ Is there a specified a visited link state?
browsing a site) and searchers on content rich sites.
❖ Are buttons fully clickable? I see semi-clickible buttons all the time
❖ Do you have dates and authors for anything like an article or post?
and they bug the heck outta me.
Something that kills me about many of blogs. I like to know when and
❖ Are fly-outs functioning properly? Easy to click? Spaced far enough by whom when reading something.
apart? I find these hard to use all the time, but when they’re done well
❖ Does the content print well?
they don’t frustrate me though.
❖ Is there up-to-date and easy-to-find contact information?
❖ Are you using color for any important information? Don’t forget the
❖
colorblind may have a problem with that. Do you have a custom 404 page? These can be a real help.
❖ Are alt attributes specified for non-ornamental images? Do they ❖ Do you have a working link to RSS feeds if available?
describe the image accurately where it’s helpful to do so? ❖ Did you check content for passive voice?
❖ Is there relevant meta information? ❖ Have you checked your spelling “gotchas”? I miss these all the time.
❖ Is there a proper doctype? ❖ Are links checked and working?
❖ Are there proper margins, line height and letter spacing? ❖ Are there any typos in images? Typos in alt attribute text?
❖ Does content maintain a good default line length and font size ❖ Is there a copyright on every page?
(especially for small serif fonts) for reading?
❖ Is there a text equivalent for any important graphical information?
❖ Are fonts relative and scalable?
❖ Is there a link to home (or whatever you use for home) from every
❖ Is there decent contrast for text? page?
❖ Do borders give enough room to text and/or important visual ❖ is there generic about information or link to it from every page for
elements? those coming in via search engine?
❖ Is there a good use of whitespace? ❖ Are PDFs and other “non-html” files labeled properly?
❖ Do headlines look like headlines? Do they make sense in relation to ❖ Are advertisements labeled as such, or obvious as advertisements?
the content?
❖ Does the design work well in 800×600?
❖ Are navigation labels straightforward and easy to understand?
❖ Are all forms functioning properly? Are they easy to fill out?
❖ Do the pages look good cross browser? Cross platform? Check if you
❖ Do error messages make sense?
can!
❖ Is feedback easy for visitors to give?
❖ Is there a proper page title for each page? Hopefully relevant to the
❖ Does the back button always work?
page itself and its content?
❖ Is there an “About” page? Most every site should have something!
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 web
Good 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

speed travel strength earth halo
athletics transit cars energy cars
nike tube peugeot bp toyota

Identity appeals to feelings
and transcends text

Consistent identity creates trust

Just be careful
You’re you — be proud of it

Grid

Hierarchical Categorical
flickr.com/photos/andwar

Typography

p{ font-family: arial, sans-serif;
font-size: 150%;
font-variant: small-caps;
line-height: 1.5em;
text-align: justify;
text-indent: 1em;
}
text-transform: uppercase;
w3c.org

scalable Inman Flash Replacement
Display your font on
their computer while
using standards
... but there is
always a catch
June 2006
mikeindustries.com/sifr

Colo(u)r
credit: flickr.com/photos/minarets

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

Let nature decide ...
mezzoblue.com

... or let the pros decide
pantone.com

Imagery

The flirty Customer Service Gal
Operators are standing by to take your call ...
and your heart
credit: fortymedia.com

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 current
application 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