The Big Web Design Details List
July 28, 2004 | 
34 Comments
In response to my post on paying attention to detail I got a couple e-mails asking for some more detail on what I considered to be the details that go into a good Web design.
I also talked to my friend and fellow Web designer Kyle Fox (who’s a talented and experienced Web designer with no Web site, imagine that…) a bit and he suggested making a list of details that I look for in Web sites.
I thought that was a great idea, so I decided to make, or rather — start — a list of questions you may want to ask yourself when designing, building and/or maintaining a Web site.
It’s a very generic list. Not everything on it will apply to every Web site out there, and thats just fine. Some questions apply to design, some to content and some to development. Some apply to something else all together. All apply to Web sites in some fashion.
A few questions are subjective, some reflect my personal preference. Many have more than one answer, but the question at times is what’s important!
They’re in no way meant to imply rules, or even guidelines of any sort. The list is just a place to go to get ideas of details to look into — not a place to define best practice.
These questions also assume at least a minimal level of Web design experience. Many are pretty rough and while I do explain what I mean by a few of them, in the main you’ll be left to interpret them as you wish.
Take what you want from it, maybe it’ll trigger something that helps — I hope so. If not, check back next time and please, please, feel free to add your own questions to the list. Have fun.
- 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?
Filed under: Web Design
Comments
1. Craig C. said:
Another excellent post, you’re having a good week. Two more details regarding forms:
* Can you easily tab through your forms, and is the tabbing order logical? (For instance, hitting tab after filling in the First Name field should send you to the Last Name field.)
* Are required fields clearly labeled?
And one regarding non-HTML files (PDFs, videos, any file downloads):
* Do you indicate the size of the targeted file, or an estimated download time?
Posted on July 28, 2004 11:24 AM | #
2. David Bisset said:
First time (poster), long time (reader).
HHhmmm…. good article for thinking, especially right after a heavy lunch! Wish I had some of these when i built the first version of my flex-mx.com blog.
I’ve always had these two questions, pretty general but they’ve helped me avoid some big UI blunders and other errors:
1) Could the beta version of the site pass the “Mom test”? My mother barely uses the Internet, but is pretty sharp. Just by watching her (or someone else who hasn’t been brainwashed by bad design) helps me understand how some navigational and other elements SHOULD work or SHOULD look.
2) Similar to the Mom test, but you could even get away by doing this yourself if you’re honest enough: The homepage of the site - could you tell pretty darn good what the site/company is promoting or what it does? A clear, straight-forward message (usually helped along by a great tagline or primary graphic) should pop out, allowing the surfer to get the idea of the site in less than 5 seconds. If you don’t get that feel, maybe a little rework of content and marketing?
Cheers!
Posted on July 28, 2004 11:51 AM | #
3. Dave P said:
Keith:
What do you mean by this?
Posted on July 28, 2004 12:06 PM | #
4. Tom said:
Good article.
I hate supporting 800x600, but for a while, it’s a must.
Oh, and I have one:
Is there something to focus on? Does the site look to find things or is it too clutered?
Posted on July 28, 2004 12:08 PM | #
5. erica said:
i think the “fully clickable” thing is in reference to the full area of the button. sometimes people make buttons where only the actual word inside the button is clickable.
very good list; i’ll be referring back to this often!
Posted on July 28, 2004 12:17 PM | #
6. Keith said:
Dave P – What I mean by that is when you have a “button” like I do at the top of this page, it needs to be clickable throughout the whole button “area” – if that makes sense.
I see this all the time. Someone creates a “CSS button” where only the text is clickable. Microsoft’s various sites used to do this. If you are going to create a CSS button – make it look, act and work just like a button.
I hope that helps answer your question.
Posted on July 28, 2004 12:19 PM | #
7. Dave P said:
Keith: Understood and onside! :-)
Posted on July 28, 2004 01:26 PM | #
8. Allen Armstrong said:
great list. I will often refer to this.
One item maybe added…
If a business site takes any client info, make sure you have the company’s privacy policy statment available.
More of a legal thang’ than design.
Posted on July 28, 2004 01:55 PM | #
9. Simon Fodden said:
Agreed. Except: I cannot bring myself to use underlining. It was a bad typewriter substitute for italics or bolding. It looks… crappy.
Cheers,
Simon
Posted on July 28, 2004 02:04 PM | #
10. Keith said:
Simon – To each his own I suppose, and to a certain extent I agree, but no matter what you and I may think underlining a link in content is a Web convention and, in my mind anyway, just about as close as you can get to a rule on the Web.
Oh and you should apologize to all the colorblind folks who visit your site and have to mouse around looking for your links. ;)
Posted on July 28, 2004 02:15 PM | #
11. Jon Kennedy said:
Of all the “must-have” lists on any usability website, I can’t recall of any that touched on the “back button must work” aspect.
All too often, especially when perusing corporate websites, the navigation is accomplished with tricky javascript and a sneaky redirect. If the navigation system is top notch, and I can get by without using the back button (gestures), then I seldom make a scene.
On the other hand, what if a site presents itself as someone’s “good idea at the time” mess of JS and domain-switching redirects WITHOUT suitable navigation? I go insane and start telling people nearby who can give 2 asses of a rat about my problems.
Thank you for pointing this out, be sure to spread the gospel, brother. Toss an em on that point, will ya? (I kid, I kid…)
—
It’s great how you take your time to read, and, if applicable, respond to each post is a lesson in networking. I too was wondering about the “semi-clickable” thing. I’m not the brightest light in the spectrum though. Something more along the lines of #FDFDFD.
Posted on July 28, 2004 02:57 PM | #
12. Rimantas said:
Good post and nice addition from Craig. I should really pay attention to the last one. We use quite a few PDFs on our sites and none have size specified.
Posted on July 28, 2004 03:00 PM | #
13. Keith said:
Jon – What you talk about (that auto-forwarding, detection when it’s not needed) bugs me as well. As far as me responding. I do what I can. I aim to please! ;)
Posted on July 28, 2004 03:38 PM | #
14. Tom said:
About the fully clickable buttons…
I made a fluid layout that had even widthed navigation buttons with padding (padding in the block level link tag, width in the wrapping li tag) and I couldn’t get it to be fully clickable in IE because it needs a width.
Stupid IE.
Posted on July 28, 2004 04:13 PM | #
15. Destry said:
What you have there is a nice set of Web design heuristics, which is not a novel tool, but certainly one that every designer needs to keep taped on the fridge, because when it’s out of sight the range of things to consider are out of mind. It reminds me, in fact, of quite a few things I yet need to improve upon with my own site. Every item in that list could be further broken down to specifics, but then you start the next book on Web Usability. Nice post Keith. *Now where’s that tape?*
Posted on July 28, 2004 05:28 PM | #
16. phnk said:
That’s a very nice list of questions. I recently published a survey where I ask 25 similar questions and test them on 10 target web sites famous in the world of web design :
http://phnk.com/design/survey/ (clicking my name should bring you there too)
The results are that 75% of web design is built on either explicit (W3C) norms, but also on implicit common practises.
May I use some of your questions to make the next version of my survey more complete ? Please feel free to email me if you have any comments and/or suggestions about this.
Posted on July 29, 2004 05:27 AM | #
17. meryl said:
Is the Reset button necessary? Can’t tell you how many times I accidentally hit it instead of Submit.
Grammar Mom kicking in: I prefer most links that’s aren’t “buttons” underlined.
That’s needs to lose the ‘s. :)
Posted on July 29, 2004 05:38 AM | #
18. Ste Grainer said:
What do you consider a properly labelled PDF link? I’ve seen several different methods of doing this from simply including ‘(PDF)’ in the link text to having an icon after the link to giving PDF links a different style. I’m curious what others think about this. Also, should other non-HTML links (doc, mov, rm, etc.) be identified as well? Should each be differentiated from the others? :)
Posted on July 29, 2004 06:25 AM | #
19. Chris said:
I guess Ste (#21) they mean something similar to this:
http://www.shropshireonline.gov.uk/shropshirecc.nsf/open/contact%20us
(scroll down to the attachments section)
The attachment is clearly displayed with size, estimated time and even a link to view it online via the access adobe site.
Posted on July 29, 2004 06:50 AM | #
20. Andrew said:
Another thing I try to ensure is that the site looks close to normal in 256-color mode.
Also it’s good to check that all abbreviations are marked up accordingly.
Posted on July 29, 2004 07:30 AM | #
21. Jennifer Grucza said:
This is a great checklist - it’s nice to have all this written down in one place.
I don’t understand why passive voice is so vilified, though. It’s not like it’s ungrammatical. And I rather like using it once in a while. :)
And re: comment 21, I would say something like a “(PDF)” after the link would be great. It’s simple and to the point. And it would be nice if it were used for any non-HTML (or image) file, especially if they’re big files. Wouldn’t be bad if it were used with mailto links, either, if it’s not obvious what they are.
Posted on July 29, 2004 08:22 AM | #
22. c said:
I don’t feel underlines are always 100% necessary. In most circumstances, as long as links look distinct from the rest of the text, that is good enough.
Posted on July 29, 2004 09:52 AM | #
23. Craig C. said:
Ste, I would fear that having each media type stylistically differentiated would get confusing. If each different type of link were a different color, for example. It would just generate more inconsistency and confusion.
All non-HTML links should be indicated as such because of user expectations. When you click a link, you expect to go to another page. If that link instead prompts a download, opens a media player app, or generates an error because of a missing plugin, you throw your users for a loop. An unobtrusive little “(PDF, 90k)” or “(Quicktime, 1.2MB)” after the link or within the link text is a sufficient warning.
Posted on July 29, 2004 10:36 AM | #
24. Faruk Ates said:
Keith (et al) - if there is a distinct menu section where the links are NOT underlined (though they are everywhere else), does that bother you, or do you feel that for menu items it’s not as imperative as it is for all other links?
I’d like your (everyone’s) thoughts on that, if it’s not a bother. ;)
Posted on July 29, 2004 01:32 PM | #
25. Destry said:
Faruk (else),
It certainly doesn’t bother me. My take on it is this (but the issue is certainly subjective): I consider navigational elements (primary horizontal menus, secondary vertical menus, whatever) to be discrete components of a Web page that everyone, even the casualest of Web users, understands to be just that–navigational elements, no matter what. Along the same line, I think even the same casual users understand that the navigational elements will appear (styled) differently than the links of the main content area (MCA). Bottom line: nobody thinks twice about it.
I think different styling approaches makes sense not only from an aesthetic standpoint, but also a usability one as well. If everything is styled the same, then the components of a page (e.g., header, columns, MCA, etc.) all start melding together in a visually distracting way.
I think it’s perfectly acceptable to use separate styling approaches between the navigational elements and the MCA. But as with any approach, the grace is in the way it’s done.
Posted on July 29, 2004 04:47 PM | #
26. sTEVEN sTREIGHT said:
I agree with all your guidelines. I’m shocked you haven’t been inundated with “it’s my creation, so I can do whatever I want” type replies, so common on other design blog sites.
One of my pet peeves is when a PDF file is not labeled as such, and when I select the file, suddenly that Adobe Acrobat message comes on screen, and I must decline it.
For some reason, the program keeps “wanting to run” and it makes me jump through hoops to shut down my computer: “Other users are currently logged on, etc.” message.
Another guideline I’d add is make it immediately clear what your site is about and what can be accomplished at it.
Orient users based on type, whenever possible: “If you’re [user type], go to [section]” as is done nicely at the Library of Congress site and the Parliament site (www.loc.gov and www.parliament.uk)
Posted on July 29, 2004 08:11 PM | #
27. Andrei Herasimchuk said:
Please… It’s not common and to suggest so is both demeaning to designers and pointless in the grand scheme of things, adding nothing to the conversation.
Posted on July 30, 2004 01:29 AM | #
28. Noah said:
Great list. Here’s one that always bugs me: are your RSS feeds easy to find? Too many links to RSS feeds are buried deep in some obscure place in the site. If you produce content that people would be interested in syndicating, do everyone a favor and put that feed link where users don’t have to go digging.
Posted on July 30, 2004 09:53 PM | #
29. Katie Dixon said:
Excellent list!
Posted on July 31, 2004 10:30 AM | #
30. Tirtho said:
Damn good article
However, could anybody elaborate on this:
“Do you have a custom 404 page? These can be a real help.”
Posted on August 5, 2004 01:25 PM | #
31. RockOfVictory said:
I definitely like my fluid website design, but does anyone think I need more whitespace - at least a nice shadowed border as a “margin”?
Tirtho, about the 404 errors, check out this SitePoint article & comments about it. It’s actually something I haven’t gotten to on my own website, but I used to have this one.
Posted on August 5, 2004 08:41 PM | #
32. manoj said:
Any discussion on web design should include topic on colours and its combination.the use of color wheel should be used by all web designers.
Posted on August 17, 2004 07:45 AM | #
33. Lance said:
While playing around with CSS, I added some rollover effects to the headers on a navigation list on our intranet site. The headers are not “clickable”. Every person who has seen this has commented on how happy they are about the rollover effects until they realize the effects are just that, effects.
To many users, anything that changes when they pass their mouse over it must be a clickable link.
That said, my addition to the list would be:
– Kindly avoid “button-like” images that are not really buttons.
Posted on August 18, 2004 12:34 PM | #
34. Martin said:
I’d add: design the URL scheme so that it will be stable in the future. Think about expansion up front; avoid putting implementation details (.php, .asp) in the URL.
W3C says something about this…
Posted on October 13, 2004 08:52 PM | #
Comments are now closed