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.
11. Project: A Web site
Tool: Design, technology
Goal: To sell stuff,
To read about a game,
To get a date
... to connect people
12. 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
14. ❖ 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
15. “ (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
16. “ ”
It is purpose that drives us.
Agent Smith
The Matrix Reloaded
21. 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
23. <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 <table>, one for <td>, one for <ul> and one for <li>.</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>
43. scalable Inman Flash Replacement
Display your font on
their computer while
using standards
... but there is
always a catch
June 2006
mikeindustries.com/sifr
69. 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
70. Because visitors will slog through hell
to get to what they want ...
if they want it badly enough
Why take that chance?