Guidelines and Tips for Pure CSS Layouts
Here are some basic guidelines and tips for developers working on websites that want to achieve pure CSS layouts, as demonstrated by the CSS Zen Garden website.
See the difference yourself. First, view the unstyled HTML:
http://www.csszengarden.com/zengarden-sample.html
Now view that same HTML with a stylesheet:
http://www.csszengarden.com/?cssfile=026/026.css
Big difference. Why do it this way?
“While I understand that for many, learning standards based development is difficult, particularly for creative people who have not been required to work with code before, I believe that the time has now passed for those working with old fashioned methods to be called web professionals. There are now so many web sites, blogs or publications devoted to helping people learn standards and accessible techniques that there are now no excuses not to work with semantic code or CSS. Those people still delivering nested table layout, spacer gifs or ignoring accessibility can no longer call themselves web professionals.”
-- Andy Clarke
1. Use the simplest HTML you can
Every bit of HTML rendered to the page should be the simplest possible HTML that works. Our goal is to separate content and presentation-- so only basic content tags should be used:
<div>
<span>
<p>
<br>
<ul>
<ol>
<li>
<h1>
Get in the right frame of mind – pretend that you’re writing HTML 2.0 for Netscape Navigator 1.0. Stick to the basics.
For real world examples of simple HTML within a pure CSS layout, try viewing source on these web sites:
http://www.espn.com
http://abcnews.go.com
http://www.sprint.com
2. Avoid the <table> tag
Unless you are actually presenting data in tabular format, avoid the <table> tag like the plague. There are still valid reasons to use <table>, but they should be rare— say, for stock quotes, or the weather forecast for the next week. Here’s an example of proper <table> use from a recent A List Apart article:
3. Know exactly what you’re rendering to the page.
Don’t trust ASP.NET to render minimalist, table-less HTML on your behalf. Check the output using view source, and write custom user controls if you need to. Don’t be afraid to get your hands dirty and override Render methods. You are the master of your domain, not ASP.NET.
4. Use <div> and <span> to organize your content
Your go-to layout elements are div and span. The only difference between the two is that <div> is a block-level element, like a paragraph, whereas <span> is designed for inline content, such as a sentence or word.
Any user controls should be emitted as <div>s, for example.
Here’s a screenshot of a typical two-column page layout with the various <div>s named and highlighted in red:
5. A few things you need to worry about
a) HTML order may be significant.
Although CSS allows you to more-or-less arbitrarily reposition elements on the page, the physical ordering of the <div>s in the HTML can still affect rendering order in some cases. CSS alone isn’t always enough.
Render order is also significant for older or less capable browsers. If a user browses to the page from a handheld device, you may want content to appear first on the page for those users—instead of the navigation menu.
b) Hierarchy may be restrictive.
A common tool for advanced CSS layout is <div> nesting. For example, you may have a <div id=”branding”> at the top of your page, which contains several child <div>s positioned absolutely within that parent.
There’s nothing wrong with hierarchy, but remember, this also means those child <div>s can’t escape their parent.
Consider very carefully when you set up a <div> hierarchy—how modifiable does this be in the future? For starters, take a look at the visual CSS Zen Garden hierarchy:
c) don’t give your elements presentational names.
Avoid calling your <div>s things like “left”, “right”, “header”, or “footer”. These names imply physical location, and therefore presentation. Wouldn’t it be awkward if someone moved the <div> named “leftnav” to the right side of your page via CSS?
Instead, use content oriented names like “navigation”, “secondarynav”, “branding”, “branding-tagline”, “content”, “search”, “siteinfo”, and so forth.
6. Get the right tools
If you use Internet Explorer 6 to debug CSS layouts, you’re bound to learn bad habits. It’s simply too old and has too many rendering quirks. You’ll need the latest version of Firefox installed, which has much more modern support for CSS.
It’s very important to check your CSS layouts in Firefox first, then check them in IE6 and fix any rendering bugs you encounter.
There are also two Firefox add-ins which are absolutely essential for troubleshooting CSS layout:
Here’s a view of the ABC News website with a few aids from the Web Developer Extension enabled. Specifically:
- Display Topographic Information
- Outline <div>
- Display ID & Class Details
7. Modifying CSS in real time
One of the coolest features of the Firefox Web Developer Extension is the real time CSS editing.
Just click CSS, Edit CSS, and you’re presented with a sidebar pane of the CSS for whatever page you happen to be viewing.
This CSS is live-- as you make changes to it, the right pane will refresh to show the effects of your edits in real time! This is a great way to troubleshoot CSS issues.
The Aardvark extension lets you manipulate the HTML on the page via keyboard shortcuts.
- Activate Aardvark via the Tools, Start Aardvark menu (note that you’ll have to do this every time you refresh the web page, or navigate to a new page)
- Hover your mouse over elements on the web page
- Use one of the Aardvark keyboard shortcuts to manipulate the page. Start with “V” for view source and “R” for remove.
Here’s a screenshot of Aardvark in action; I just pressed “U” to undo the “I” Isolate command I performed on the image.
8. Go play with CSS layouts!
The best way to learn this stuff is to try it. Luckily, there are a ton of great resources on the web for advanced CSS layout. Here are a few we liked: