How to Make Your Site Look Good Naked

There are a lot of web browsers out there that have limited CSS support, including most mobile browsers and older desktop browsers (like Netscape 4). Also, shutting off stylesheets is popular with those who are miserly with their bandwidth. So chances are there are plenty of people that have seen your site without styles. How can you keep your site sexy when the styles are stripped away?

Keep the styles separate from the content. Use external stylesheets and link to them from the HTML. Use proper markup for your content. Make sure headlines are within <h1>-<h6> tags, paragraphs are within <p> tags, and so on. If your site is built using the best practices of web standards, it’s already more than halfway there.

Pay attention to the default rendering of elements. Taking away CSS means all headlines will be bold, all paragraphs will have a double-space between them, and all lists will be indented. There are no floats or positioning, so content will be in its source code order. Every block element will start on a new line, and every inline element will flow with text. Choose your markup wisely and always plan ahead.

Don’t be afraid of <hr/> and <br/> (yes, they’re still part of XHTML strict!). Using horizontal rules to divide sections of your site can make it a lot easier to use. They are also easily hidden with CSS, so you don’t need to show them when not needed. Line breaks should be used any time you have text on different lines that is still part of one paragraph (such as a street address).

A naked webpage will have a white background, and so should your logo. In CSS, show the logo for the styled page as a background image. Add the logo with the white background as an <img> tag in the markup and hide it with CSS. That way, the appropriate logo will show according to whether styles are turned on or off. (This technique can also be used with print stylesheets.)

Every web page is different, so they don’t all have to look the same when styles are taken away. Experiment to find unique ways of designing content without CSS. Remember, your website is going to run around naked every once in a while. Be sure its warts aren’t showing.