Your SlideShare is downloading. ×
What makes good web design?
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

What makes good web design?

2,246
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.

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,246
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
39
Comments
1
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. What makes good web design? Richard Cornish rich@richardcornish.com
  • 2. Project: A house Tool: A hammer Goal: A home to live in
  • 3. I don’t make a house because I like the hammer. I make a house because I need to live in it!
  • 4. Function followed form Form followed function
  • 5. Function followed form Form followed function
  • 6. From chaos ...
  • 7. ... came order
  • 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. 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. Gradients Drop shadows Reflections Rounded corners Hello! Big type Bright colors ! Cute icons Star shapes Beta
  • 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. “ (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. “ ” It is purpose that drives us. Agent Smith The Matrix Reloaded
  • 14. islostarepeat.com
  • 15. fsa.usda.gov/haynet (old)
  • 16. Expand when necessary Contract when possible ... just like your pants
  • 17. Good web Good design + Good web design
  • 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. <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. <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. Smaller files Faster-loading pages Less-costly bandwidth More page views ... ?
  • 22. Better screen readings Better search engine rankings Easier to maintain and redesign
  • 23. Identity
  • 24. speed travel strength earth halo athletics transit cars energy cars nike tube peugeot bp toyota
  • 25. Identity appeals to feelings and transcends text
  • 26. Consistent identity creates trust
  • 27. Just be careful You’re you — be proud of it
  • 28. Grid
  • 29. Hierarchical Categorical flickr.com/photos/andwar
  • 30. Typography
  • 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. 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. Colo(u)r credit: flickr.com/photos/minarets
  • 34. wellstyled.com/tools/colorscheme2/index-en.html
  • 35. Let nature decide ... mezzoblue.com
  • 36. ... or let the pros decide pantone.com
  • 37. Imagery
  • 38. The flirty Customer Service Gal Operators are standing by to take your call ... and your heart credit: fortymedia.com
  • 39. Uh, no. We can do better than that.
  • 40. That’s OK if you’re not an award-winning photographer Just get real with your images
  • 41. Never underestimate the power of an image sxc.hu everystockphoto.com yotophoto.com your own digital camera (seriously)
  • 42. Media
  • 43. March 2006
  • 44. So, is design the second coming? As a designer, I wish.
  • 45. Crappy sites succeed despite their bad design (not because of it) Why?
  • 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. Because visitors will slog through hell to get to what they want ... if they want it badly enough Why take that chance?
  • 48. Thanks! Questions? richardcornish.com/goodwebdesign.pdf rich@richardcornish.com +1 (630) 890-0307

×