Web design, SQL, and .NET for the young, up-and-coming developer - Dot Net Yuppie - Blog Archive » Ten Commandments of Exceptional Web Design
Web design, SQL, and .NET for the young, up-and-coming developer Dot Net Yuppie

In an effort to garner web design inspiration, I frequently visit CSS galleries to increase my design vocabulary and see new, cutting-edge design trends. Often times, however, these websites are consistently making the same amateur design mistakes that shouldn’t ever be done by gallery-worthy web designs.

  1. Thou shalt preload all CSS:hover images If you’re willing to put the time into changing an image on :hover, isn’t it worth your time to do it right? Often, users won’t even notice your :hover efforts because it’ll take too long to load a new image on-demand. To read more about preloading background images, check out Please preload your CSS images
  2. Thou shalt build content-oriented designs If your design contains a greater percent of advertisement real estate than content area, you need to go back to the drawing board. I understand the need to monetize your site, but sometimes less is more.
  3. Thou shall not animate favicon.ico Animations on the web are difficult to deal with as it is — a fancy, dancing web icon at the top of my browser does nothing more than distract my attention away from your content. Instead, create a tastefully done, static icon.
  4. Thou shalt not design an all-Flash website Flash may have some place in web design, but its utility is diminishing very quickly with the growing popularity of javascript frameworks like jQuery and with HTML5 on the horizon. All-Flash websites are a nightmare for maintenance, SEO, and accessibility. Leave Flash for games, media, non-critical navigation, and eye candy visual effects only.
  5. Thou shalt not play sounds It seems like modern websites, particularly those being accepted to CSS Gallery websites, would have phased out this practice many years ago. This practice is especially common in Flash-oriented websites. See commandment #4.
  6. Thou shalt not create a dark (#000000) design While there are some very few exceptions to this rule, black backgrounds are usually extremely difficult to pull off. At the very least, a tasteful, artistic collection of gray and black can sometimes save a design, but you’re usually better off with something lighter. And please, just say “no” to black backgrounds with dark gray text.
  7. Thou shalt not use background-attachment: fixed; Again, there may be some very rare artistic exceptions, but for the most part, very few web designs can pull off a fixed background image. Fixed backgrounds remove the sense of motion while scrolling a page and hardly ever add to the creativity of a design.
  8. Thou shalt beware the removal of text-decorations Years ago, it was quite popular to remove the underline text decoration from links. While this can still be tastefully done, it can become problematic when your links are hard to differentiate from your text content. Links, when placed within a paragraph, should pop out so the user can find them easily while scanning. Although less common, some sites rely on link color alone to differentiate links from text. This practice can become problematic for colorblind readers who may rely on bolding or underlining for links.
  9. Thou shalt create a meaningful <TITLE> ‘Untitled Page’ and ‘[Your Website Name]‘ are simply unacceptable. <TITLE> tags are free SEO fodder, so take advantage by using your <TITLE> to describe the content, not the title of your website.
  10. Thou shalt avoid CSS hacks at all costs In almost all situations, CSS hacks will eventually come back to haunt you. Not only do many hacks invalidate your CSS, but they also require a design update when a new browser is released. Unless in very rare cases, you’re much better off sticking to CSS cannon and learning clever IE/Firefox workarounds, not hacks.

Leave a Reply