CodeinWP CodeinWP

25 Classic Web Design Articles That Significantly Impacted the Way We Code

Classic CarOver the years there have been hundreds, if not thousands of articles published online that have each had a tremendous impact on the world of web development and design. Some have been truly memorable, and have remained quite relevant for years, and remain so today. Others have outlived their usefulness, but we remember them because of the impact they had on our code and on the way we think about web design.

Occasionally, while reading or doing research, I still stumble upon “classic” web design articles. So I thought it would be a great idea to list what I feel are some of the most important articles that have been published in the relatively short history of the web development industry.

Originally, I had started with the idea of listing 10 articles — but when I began the research, I slowly started to realize that was not going to do justice to this list. So I settled on 25. I think this is a good collection of some of the more significant articles that have been produced over the past 13 years or so.

I know I’ve left out some good ones, and I’ve probably included a few that you personally feel shouldn’t have made the cut — so I will look forward to reading everyone’s comments to hear of any that I missed!

I tried to make the list diverse, so some of what I’ve included technically wouldn’t even qualify as an “article” — but I felt their importance was strong enough to justify their inclusion. And no matter how hard I tried, I couldn’t stop A List Apart from absolutely dominating the results. I also included a few modern classics that I felt were a good addition.

The list is in chronological order by original publication date (or else the earliest date according to and marked with an asterisk). If anyone has a more accurate publication date for any of the items with an asterisk, please contact me.

I’ve said enough! Please enjoy this trip down “web design and web standards” memory lane.

1. Top Ten Mistakes in Web Design

Top 10 Mistakes in Web Design Author: Jakob Nielsen

Original Publication Date: May, 1996

My article from May 1996, Top Ten Mistakes in Web Design is still surprisingly relevant today… The article has become a minor Web classic with about 400,000 page views so far [in 1999].

View Original Article >>

2. Revenge of the Menu Bar

Revenge of the Menu Bar Author: Mike Hall

Original Publication Date: January 24, 2001 *

This article details the construction of a menu bar like the one used on the main pages of this site. It’s built from standard HTML elements using CSS to define the look and layout and JavaScript to handle the action of the drop down menus.

View Original Article >>

3. HTML Utopia! Design Websites Without Tables

Design Websites Without Tables Author: Julian Carroll

Original Publication Date: April 12, 2001

A few weeks ago I stumbled upon a site that really inspired me. It was beautifully designed and presented. It was not until I looked at the code behind it that my heart truly skipped a beat.

View Original Article >>

4. CSS Design: Size Matters

Size Matters Author: Todd Fahrner

Original Publication Date: May 11, 2001

The Cascading Style Sheets (CSS) standard includes seven font-size keywords intended to give designers a simple means of setting font sizes without creating accessibility problems. Sizes range from xx-small to xx-large and are relative to users’ preferred “medium” settings.

View Original Article >>

5. Box Model Hack

Box Model Hack Author: Tantek Çelik

Original Publication Date: June 2, 2001 *

User agents which misinterpret the CSS1 box model by placing border and padding inside the specified width would result in a total width of only 300px, and a content width of only 200px.

View Original Article >>

6. CSS Talking Points: Selling Clients on Web Standards

Selling Standards Author: Greg Kise

Original Publication Date: July 6, 2001

To advance Standards it is critical to start building [standards compliant] sites for real, paying clients, not just for ourselves. A solid Party Line will help us present [standards compliance] to our clients not as something scary, but as a natural “best practices” approach to building their website.

View Original Article >>

7. Doctypes and Their Respective Layout Mode

Doctypes Author: Matthias Gutfeldt

Original Publication Date: July 21, 2001 *

Doctypes and their layout modes in various browser versions.

View Original Article >>

8. Complex Spiral Demo

Complex Spiral Demo Author: Eric Meyer

Original Publication Date: September 20, 2001 *

Remember: as you look this demo over, there is no Javascript here, nor are any PNGs being used, nor do I employ any proprietary extensions to CSS or any other language.

View Original Article >>

9. Alternative Style: Working With Alternate Style Sheets

Alternate Stylesheets Author: Paul Sowden

Original Publication Date: November 2, 2001

These style sheets can be selected by the visitor as alternatives to the preferred style sheet. This allows the visitor to personalize a site and choose his or her favorite scheme. They can also be used for accessibility.

View Original Article >>

10. Flash of Unstyled Content (FOUC)

FOUC Author: Rob Chandanais

Original Publication Date: December 12, 2001

Some pages that use the CSS @import rule experience a curious display quirk in the Windows version of MS Internet Explorer: a momentary flash of unstyled page content. The unimaginative creature that I am, I call this phenomenon Flash of Unstyled Content or FOUC for short.

View Original Article >>

11. Fix Your Site With the Right DOCTYPE!

Fix Your Site With the Right Doctype Author: Jeffrey Zeldman

Original Publication Date: April 12, 2002

You’ve written valid XHTML and CSS. You’ve used the W3C standard Document Object Model (DOM) to manipulate dynamic page elements. Yet, in browsers designed to support these very standards, your site is failing. A faulty DOCTYPE is likely to blame.

View Original Article >>

12. IE6 Peekaboo Bug

Peekaboo Bug Author: John Gallant

Original Publication Date: July 7, 2002

A liquid box has a float inside, and content that appears along side that float. All is well, until it’s viewed in IE6. “Wah? Where’s my content?!” You reload the page, and nothing. When you scroll down, or perhaps switch to another window, upon returning to the ‘scene of the crime’ there it all is, fat ‘n sassy!

View Original Article >>

13. CSS Design: Taming Lists

Taming Lists Author: Mark Newhouse

Original Publication Date: September 27, 2002

In this article, I’ll demonstrate how to use CSS to bring unwieldy lists under control. It’s time for you to tell lists how to behave, instead of letting them run wild on your web page.

View Original Article >>

14. Flash Satay: Embedding Flash While Supporting Standards

Flash Satay Author: Drew McLellan

Original Publication Date: November 9, 2002

When I recently published a site in XHTML, my dissatisfaction with the markup grew as I realized that it simply wasn’t valid in this context and was bloating my pages to unacceptable levels. A leaner, standards-compliant method of embedding Flash movies was called for.

View Original Article >>

15. Using Background-Image to Replace Text

Using Background-Image to Replace Text Author: Douglas Bowman

Original Publication Date: March 7, 2003

With a few simple style tricks and a little cautious planning and testing, type on the Web can be guiltlessly beautiful and equally accessible and perfectly indexable, all at the same time.

View Original Article >>

16. The Box Model Problem

The Box Model Problem Authors: John Gallant and Holly Bergevin

Original Publication Date: June 21, 2003 *

When breaking out of using tables and moving toward using Cascading Style Sheets (CSS) positioning for laying out elements on a page, it is important to become familiar with the W3C Box Model. At first, the box model may be confusing, but it is a necessary concept to grasp.

View Original Article >>

17. Sleight of Hand (Alpha Transparency in IE5.5+)

Sleight Author: Drew McLellen

Original Publication Date: July 8, 2003

I’m sure most readers are aware of of youngpup’s Sleight code snippet for achieving PNG alpha transparency in Win IE 5.5+ … On a project today, we wanted to implement a translucent PNG effect on some dropdown menus. Youngpup’s code only deals with inline images, not background images so I had to roll my own.

View Original Article >>

18. Fast Rollovers Without Preload

CSS Rollovers Without Preload Author: Petr Stanicek

Original Publication Date: July 8, 2003

When using CSS image rollovers, two, three, or more images must be loaded (and often be preloaded for best results). We’ve got one image for each state (normal, hover, active, visited etc). Putting all states into one image makes dynamic changes faster and requires no preload.

View Original Article >>

19. Sliding Doors

Sliding Doors Author: Douglas Bowman

Original Publication Date: October 20, 2003

It’s time to take back control over the tabs which are continually growing in popularity as a primary means of site navigation. Now that CSS is widely supported, we can crank up the quality and appearance of the tabs on our sites.

View Original Article >>

20. Faux Columns

Faux Columns Author: Dan Cederholm

Original Publication Date: January 9, 2004

One of the questions I get asked the most often regarding my personal site’s design is the following: “How do you get the right column’s background color to extend all the way down the page?” It’s a simple concept, really — one that many of you may already be familiar with. But for those who aren’t, the following technique can be a handy little trick.

View Original Article >>

21. No More Tables

No More Tables Author: Douglas Bowman

Original Publication Date: July 21, 2004

Data (Good).
Layout (Not so Good).

View Original Article >>

22. Nifty Corners: Rounded Corners Without Images

Nifty Corners Author: Alessandro Fulciniti

Original Publication Date: March 16, 2005

Rounded Corners with CSS are a hot topic in web design: I think that there are hundreds of articles on them. This page is intended to present the solution I came up, that doesn’t requires images, extra markup nor CSS.

View Original Article >>

23. On Having Layout

On Having Layout Authors: John Gallant and Holly Bergevin

Original Publication Date: June 30, 2005

A lot of Internet Explorer’s rendering inconsistencies can be fixed by giving an element “layout.” In this article, the authors focus on some aspects of this complicated matter.

View Original Article >>

24. What Beautiful HTML Code Looks Like

What Beautiful HTML Code Looks Like Author: Chris Coyier

Original Publication Date: November 1, 2007

I have an addiction. I can’t help but view source on every nice looking website I see. It’s like if you had x-ray glasses that allowed you to see any person you ever saw in their underwear at will. How could you not?

View Original Article >>

25. Do Web Sites Need to Look Exactly the Same in Every Browser?

Same in Every Browser? Author: Daniel Cederholm

Original Publication Date: December 12, 2007 *

[Web sites don’t need to look exactly the same in every browser.]

View Original Article >>

9 Responses

  1. Frank says:

    Thank you so much for posting this. This gives me some ideas on how to create my own CSS-website.

  2. Andris says:

    It’s been fun reading this articel and interesting to see how long this debate actually runs. Thanx for the collection.

  3. Kamrul says:

    Really, from the beginning to the end! Every web related people should know.

  4. Rae says:

    This was a very informative article. It’s nice to see all of these classic, yet pertinent articles in one place.

    However, I was almost persuaded to leave your site without visiting some of them because your site is constructed in such a way that forces me to open the link in a new window and go to that window.

    You should take some of the usability advice of the author of #1 and allow your visitors to choose how to open a window. Don’t choose for them.

  5. bryan k says:

    Can’t say the grid is everything/everywhere, but it made an impact in the design community.

  6. langbakk says:

    Well. I’ve been in this game too long. Most, if not all of these, I’ve already read. Then I’ve re-read them, and probably gone back to them on and off for many years.

    There are some really excellent picks here, and I can’t really remember any that springs to mind which should have taken up any of the places on the list.

    @rae: you can perfectly well chose how you want to open the links on the page. At least if you use a decent browser ;) All I have to do is either right-click and chose “open in new tab” or just Ctrl-click on it, and it opens in a new tab. Different browser windows is a thing of the past, or Internet Explorer, mostly :)

  7. thanks for posting the article… very very interesting. still got lots of point to be consider.

  8. Ovi Dogar says:

    Very interesting and informative article!

    Ovi Dogar

  9. joe says:

    thank you very much for sharing! This article remind me something basic but important.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).