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 da...
Netscape ... no, Internet Explorer!
                                 Firefox ... no, Safari!
                             ...
Gradients
Drop shadows
Reflections
Rounded corners

                  Hello!
Big type
Bright colors

                    !
...
❖ Are all the links underlined? I prefer most links that’s aren’t “buttons”   ❖ For content heavy sites — does it have a w...
“   (The elements that make a successful home page
    are) anything that accomplishes the site’s
    objectives and goals...
“                                     ”
    It is purpose that drives us.
                        Agent Smith
            ...
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


...
<table summary=quot;a unholy messquot; border=quot;0quot; cellspacing=quot;0quot; cellpadding=quot;0quot;> <tr> <td colspa...
<table summary=quot;a unholy messquot; width=quot;553quot; border=quot;0quot; cellspacing=quot;0quot; cellpadding=quot;0qu...
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      peuge...
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;
     li...
scalable Inman Flash Replacement


Display your font on
their computer while
using standards

... but there is
always a ca...
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


           ...
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 te...
Because visitors will slog through hell
     to get to what they want ...
    if they want it badly enough


       Why ta...
Thanks! Questions?
           richardcornish.com/goodwebdesign.pdf

                 rich@richardcornish.com
             ...
What makes good web design?
What makes good web design?
What makes good web design?
What makes good web design?
What makes good web design?
What makes good web design?
What makes good web design?
What makes good web design?
What makes good web design?
What makes good web design?
What makes good web design?
What makes good web design?
What makes good web design?
What makes good web design?
What makes good web design?
What makes good web design?
What makes good web design?
What makes good web design?
What makes good web design?
What makes good web design?
What makes good web design?
What makes good web design?
What makes good web design?
Upcoming SlideShare
Loading in …5
×

What makes good web design?

2,458 views

Published on

A presentation I gave for a job interview defining what I believe makes good web design. Some of it is has dated since spring 2007, but much of it has timeless concepts.

Published in: Design
1 Comment
2 Likes
Statistics
Notes
  • Hi ,Richiec I am participating in a contest and your slide I liked very much,because in my company we work with web design and SEO, so I invited, to visit my slide and if it likes, please addme to your favorites, thank you very much

    Check out this SlideShare

    http://slidesha.re/5Td1I5

    Please Addme to your favorite ’♥’ bye bye
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
2,458
On SlideShare
0
From Embeds
0
Number of Embeds
101
Actions
Shares
0
Downloads
41
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

What makes good web design?

  1. 1. What makes good web design? Richard Cornish rich@richardcornish.com
  2. 2. Project: A house Tool: A hammer Goal: A home to live in
  3. 3. I don’t make a house because I like the hammer. I make a house because I need to live in it!
  4. 4. Function followed form Form followed function
  5. 5. Function followed form Form followed function
  6. 6. From chaos ...
  7. 7. ... came order
  8. 8. Project: A Web site Tool: Design, technology Goal: To sell stuff, To read about a game, To get a date ... to connect people
  9. 9. 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=quot;text/javascriptquot; 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
  10. 10. Gradients Drop shadows Reflections Rounded corners Hello! Big type Bright colors ! Cute icons Star shapes Beta
  11. 11. ❖ 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
  12. 12. “ (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
  13. 13. “ ” It is purpose that drives us. Agent Smith The Matrix Reloaded
  14. 14. islostarepeat.com
  15. 15. fsa.usda.gov/haynet (old)
  16. 16. Expand when necessary Contract when possible ... just like your pants
  17. 17. Good web Good design + Good web design
  18. 18. 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
  19. 19. <table summary=quot;a unholy messquot; border=quot;0quot; cellspacing=quot;0quot; cellpadding=quot;0quot;> <tr> <td colspan=quot;9quot; width=quot;553quot; height=quot;1quot; background=quot;images/1dot.gifquot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;1quot; width=quot;1quot; /></td> </tr> <tr> <td rowspan=quot;3quot; width=quot;1quot; background=quot;images/1dot.gifquot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;1quot; width=quot;1quot; /></td> <td width=quot;11quot; height=quot;10quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;9quot; width=quot;11quot; /></td> <td width=quot;150quot; height=quot;10quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;150quot; /></td> <td width=quot;20quot; height=quot;10quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;20quot; /></td> <td rowspan=quot;3quot; width=quot;1quot; background=quot;images/1dot.gifquot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;1quot; width=quot;1quot; /></td> <td width=quot;11quot; height=quot;10quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td width=quot;338quot; height=quot;10quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;338quot; /></td> <td width=quot;20quot; height=quot;10quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;20quot; /></td> <td rowspan=quot;3quot; width=quot;1quot; background=quot;images/ 1dot.gifquot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;1quot; width=quot;1quot; /></td> </tr> <tr valign=quot;topquot;> <td width=quot;11quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td width=quot;150quot;>This could really be done much more simply.</td> <td width=quot;20quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td width=quot;11quot;><img src=quot;images/ spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td width=quot;338quot;>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=quot;20quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> </tr> <tr> <td width=quot;11quot; height=quot;20quot;><img src=quot;images/ spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td width=quot;150quot; height=quot;20quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;150quot; /></td> <td width=quot;20quot; height=quot;20quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td width=quot;11quot; height=quot;20quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td width=quot;338quot; height=quot;20quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;338quot; /></td> <td width=quot;20quot; height=quot;20quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> </tr> <tr> <td colspan=quot;9quot; width=quot;553quot; height=quot;1quot; background=quot;images/1dot.gifquot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;1quot; width=quot;1quot; /></td> </tr> <tr> <td rowspan=quot;3quot; width=quot;1quot; background=quot;images/1dot.gifquot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;1quot; width=quot;1quot; /></td> <td width=quot;11quot; height=quot;10quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></ td> <td width=quot;150quot; height=quot;10quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;150quot; /></td> <td width=quot;20quot; height=quot;10quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td rowspan=quot;3quot; width=quot;1quot; background=quot;images/1dot.gifquot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;1quot; width=quot;1quot; /></td> <td width=quot;11quot; height=quot;10quot;><img src=quot;images/ spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td width=quot;338quot; height=quot;10quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;338quot; /></td> <td width=quot;20quot; height=quot;10quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td rowspan=quot;3quot; width=quot;1quot; background=quot;images/1dot.gifquot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;1quot; width=quot;1quot; /></td> </ tr> <tr valign=quot;topquot;> <td width=quot;11quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td width=quot;150quot;>There are way too many table cells and spacers in here.</td> <td width=quot;20quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td width=quot;11quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td width=quot;338quot;>And all of the dotted borders are done with a <code>background</code> attribute on table cells, which won't validate. <table summary=quot;listquot; width=quot;338quot; border=quot;0quot; cellspacing=quot;0quot; cellpadding=quot;0quot;> <tr> <td width=quot;10quot; height=quot;10quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;10quot; /></td> <td width=quot;328quot; height=quot;10quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;328quot; /></td> </tr> <tr valign=quot;topquot;> <td width=quot;10quot;>•</td> <td width=quot;328quot;>A nested table? What for?</td> </tr> <tr> <td width=quot;10quot; height=quot;10quot;><img src=quot;images/ spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;10quot; /></td> <td width=quot;328quot; height=quot;10quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;328quot; /></td> </tr> <tr valign=quot;topquot;> <td width=quot;10quot;>•</td> <td width=quot;328quot;>To make a bulleted list? You're kidding, right?</td> </tr> </table> </td> <td width=quot;20quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; / ></td> </tr> <tr> <td width=quot;11quot; height=quot;20quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td width=quot;150quot; height=quot;20quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;150quot; /></td> <td width=quot;20quot; height=quot;20quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td width=quot;11quot; height=quot;20quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td width=quot;338quot; height=quot;20quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;338quot; /></td> <td width=quot;20quot; height=quot;20quot;><img src=quot;images/ spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> </tr> <tr> <td colspan=quot;9quot; width=quot;553quot; height=quot;1quot; background=quot;images/1dot.gifquot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;1quot; width=quot;1quot; /></td> </tr> <tr> <td rowspan=quot;3quot; width=quot;1quot; background=quot;images/1dot.gifquot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;1quot; width=quot;1quot; /></td> <td width=quot;11quot; height=quot;10quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td width=quot;150quot; height=quot;10quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;150quot; /></td> <td width=quot;20quot; height=quot;10quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td rowspan=quot;3quot; width=quot;1quot; background=quot;images/1dot.gifquot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;1quot; width=quot;1quot; /></td> <td width=quot;11quot; height=quot;10quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td width=quot;338quot; height=quot;10quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;338quot; /></td> <td width=quot;20quot; height=quot;10quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td rowspan=quot;3quot; width=quot;1quot; background=quot;images/ 1dot.gifquot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;1quot; width=quot;1quot; /></td> </tr> <tr valign=quot;topquot;> <td width=quot;11quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td width=quot;150quot;>This could all be done with 8 table cells and 4 CSS rules.</td> <td width=quot;20quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td width=quot;11quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td width=quot;338quot;>Seriously. 8 cells and 4 css rules, that's all it takes. <table summary=quot;listquot; width=quot;338quot; border=quot;0quot; cellspacing=quot;0quot; cellpadding=quot;0quot;> <tr> <td width=quot;10quot; height=quot;10quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;10quot; /></td> <td width=quot;328quot; height=quot;10quot;><img src=quot;images/ spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;328quot; /></td> </tr> <tr valign=quot;topquot;> <td width=quot;10quot;>•</td> <td width=quot;328quot;>Oh no, another table masquerading as a bulleted list.</td> </tr> <tr> <td width=quot;10quot; height=quot;10quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;10quot; /></td> <td width=quot;328quot; height=quot;10quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;328quot; / ></td> </tr> <tr valign=quot;topquot;> <td width=quot;10quot;>•</td> <td width=quot;328quot;>Just mark up your bulleted lists as bulleted lists and let CSS do the rest.</td> </tr> </table> </td> <td width=quot;20quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> </tr> <tr> <td width=quot;11quot; height=quot;20quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td width=quot;150quot; height=quot;20quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;150quot; /></td> <td width=quot;20quot; height=quot;20quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; / ></td> <td width=quot;11quot; height=quot;20quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td width=quot;338quot; height=quot;20quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;338quot; /></td> <td width=quot;20quot; height=quot;20quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> </tr> <tr> <td colspan=quot;9quot; width=quot;553quot; height=quot;1quot; background=quot;images/ 1dot.gifquot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;1quot; width=quot;1quot; /></td> </tr> <tr> <td rowspan=quot;3quot; width=quot;1quot; background=quot;images/1dot.gifquot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;1quot; width=quot;1quot; /></td> <td width=quot;11quot; height=quot;10quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td width=quot;150quot; height=quot;10quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;150quot; /></td> <td width=quot;20quot; height=quot;10quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td rowspan=quot;3quot; width=quot;1quot; background=quot;images/ 1dot.gifquot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;1quot; width=quot;1quot; /></td> <td width=quot;11quot; height=quot;10quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td width=quot;338quot; height=quot;10quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;338quot; /></td> <td width=quot;20quot; height=quot;10quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td rowspan=quot;3quot; width=quot;1quot; background=quot;images/1dot.gifquot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;1quot; width=quot;1quot; /></td> </tr> <tr valign=quot;topquot;> <td width=quot;11quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td width=quot;150quot;>You need a rule for <table>, one for <td>, one for <ul> and one for <li>.</td> <td width=quot;20quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td width=quot;11quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td width=quot;338quot;>That's it. Once you have those you're golden. <table summary=quot;listquot; width=quot;338quot; border=quot;0quot; cellspacing=quot;0quot; cellpadding=quot;0quot;> <tr> <td width=quot;10quot; height=quot;10quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;10quot; /></td> <td width=quot;328quot; height=quot;10quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;328quot; /></td> </tr> <tr valign=quot;topquot;> <td width=quot;10quot;>•</td> <td width=quot;328quot;>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=quot;10quot; height=quot;10quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;10quot; /></td> <td width=quot;328quot; height=quot;10quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;328quot; /></td> </tr> <tr valign=quot;topquot;> <td width=quot;10quot;>•</td> <td width=quot;328quot;>Excellent! The last fake bullet.</td> </tr> </table> </td> <td width=quot;20quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> </tr> <tr> <td width=quot;11quot; height=quot;20quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td width=quot;150quot; height=quot;20quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;150quot; /></td> <td width=quot;20quot; height=quot;20quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td width=quot;11quot; height=quot;20quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> <td width=quot;338quot; height=quot;20quot;> </td> <td width=quot;20quot; height=quot;20quot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;10quot; width=quot;11quot; /></td> </tr> <tr> <td colspan=quot;9quot; width=quot;553quot; height=quot;1quot; background=quot;images/1dot.gifquot;><img src=quot;images/spacer.gifquot; alt=quot;quot; height=quot;1quot; width=quot;1quot; /></td> </tr> </table>
  20. 20. <table summary=quot;a unholy messquot; width=quot;553quot; border=quot;0quot; cellspacing=quot;0quot; cellpadding=quot;0quot;><tr valign=quot;topquot;><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=quot;topquot;><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=quot;topquot;><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=quot;topquot;><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>
  21. 21. Smaller files Faster-loading pages Less-costly bandwidth More page views ... ?
  22. 22. Better screen readings Better search engine rankings Easier to maintain and redesign
  23. 23. Identity
  24. 24. speed travel strength earth halo athletics transit cars energy cars nike tube peugeot bp toyota
  25. 25. Identity appeals to feelings and transcends text
  26. 26. Consistent identity creates trust
  27. 27. Just be careful You’re you — be proud of it
  28. 28. Grid
  29. 29. Hierarchical Categorical flickr.com/photos/andwar
  30. 30. Typography
  31. 31. 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
  32. 32. scalable Inman Flash Replacement Display your font on their computer while using standards ... but there is always a catch June 2006 mikeindustries.com/sifr
  33. 33. Colo(u)r credit: flickr.com/photos/minarets
  34. 34. wellstyled.com/tools/colorscheme2/index-en.html
  35. 35. Let nature decide ... mezzoblue.com
  36. 36. ... or let the pros decide pantone.com
  37. 37. Imagery
  38. 38. The flirty Customer Service Gal Operators are standing by to take your call ... and your heart credit: fortymedia.com
  39. 39. Uh, no. We can do better than that.
  40. 40. That’s OK if you’re not an award-winning photographer Just get real with your images
  41. 41. Never underestimate the power of an image sxc.hu everystockphoto.com yotophoto.com your own digital camera (seriously)
  42. 42. Media
  43. 43. March 2006
  44. 44. So, is design the second coming? As a designer, I wish.
  45. 45. Crappy sites succeed despite their bad design (not because of it) Why?
  46. 46. 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
  47. 47. Because visitors will slog through hell to get to what they want ... if they want it badly enough Why take that chance?
  48. 48. Thanks! Questions? richardcornish.com/goodwebdesign.pdf rich@richardcornish.com +1 (630) 890-0307

×