10 Sites with Great Example CSS Layouts - dummies

10 Sites with Great Example CSS Layouts

By John Paul Mueller

One of the best ways to learn how to use CSS to perform various tasks is to see how other people are configuring their sites. The following list presents various layouts that you can use to create your own site. It also discusses the layout type and special features about each site that you should note.

  • Astronomy Picture of the Day: The Astronomy Picture of the Day (APOD) is an outstanding example of a fluid design. Try resizing the page and you’ll be amazed at how the page content responds. (The graphic in the center doesn’t work well on a cellphone, but the text certainly does.) It presents a good combination of font styles and shows how to use links well to enhance content.

  • USA Today: This is a good example of a two or three column adaptive design. Notice that when you resize the page, the third column on the right tends to disappear when the page gets too small. Notice the arrows on each side of the presentation. You can use them to move between newspaper sections, which is an excellent use of this special effect.

  • Yahoo! Maps: Map sites can be notoriously difficult to use because they rely on a complex interface or the information isn’t in a form that is easy for users to input. Yahoo! Maps gets around this problem by providing three simple fields. The majority of the interface is actually devoted to displaying the map. The control system for the map is easily understood and doesn’t require any wording. This is a great example of a graphics-oriented application. This is also one of the few examples of a responsive design that you’ll find correctly implemented.

  • Thesaurus.com: This fixed with layout site provides a good example of how to use tabs in a unique way. There are actually multiple sites associated with this single site. By clicking one of the tabs at the top, you’re transported to other sites such as Dictionary.com and Dictionary.com Translator. Notice the use of a complex layout for this site. The three column layout is split into subsections as needed to convey additional information.

  • Go Convert: This is a good example of a three column elastic design. The implementation isn’t perfect, but notice how the content consumes the entire page no matter how large you make it. You can also make the page relatively small before you see any sign of a scroll bar because the content shrinks to fit the available space. This page also features a two menu system (one on the left used to access conversion functions and one on the right to access site features).

  • JC Penney: Many sales sites provide layers of content. In this case, you see a vendor heading at the top, a nice interactive menu next, the latest sales next, the current site path, and finally the two column sales information. This is a fixed width presentation, so it doesn’t scale well when the size of the browser changes. The focus is on presenting the images on the page in the best possible way.

  • Petter Hesselberg.com: Unlike most sites today, this one uses absolute positioning effectively (it also breaks the rules by using tables to hold content — the site would be better if it used CSS exclusively). Presentation of tabular data can be difficult. This site shows one effective way to display tabular data that isn’t too busy or difficult to see. It isn’t always necessary to use borders when displaying tabular data — sometimes subtle coloring is all you really need.

  • Sourceforge: In some cases, you need to create a setup for distributing information in some other format, such as .ZIP files. This is an example of an information distribution strategy that uses HTML5 techniques and features such as unordered lists for menus. The fixed width layout doesn’t resize very well, but the site itself is quite flexible. Notice how this site effectively uses a two column layout with header and footer.

  • GetHuman: Databases are searched more often than they’re changed. When the database is large, trying to find a specific piece of information becomes incredibly difficult and frustrating. This fixed width site demonstrates a telephone directory search technique that could be applied to other sorts of sites that tend to rely on just one or two keys to display a range of information. Notice the use of special effects to show which line is selected. The site also presents a tabular appearance without actually using tables (view the source code to see for yourself).

  • John’s Random Thoughts and Discussions: This site presents you with a perfect example of the two column layout used in a blog environment. You see how the entries in the sidebar column on the left make it possible to access the content entries in the right pane with greater ease. In addition, this site helps you understand the pros and cons of the classic fixed width layout.