CSS turned off: a good approach to web development

Turning CSS off is a good way to check whether the underlying HTML structure is well-structured and makes sense without any styles. There are several reasons for following this approach. The first, and most important, is SEO: search engines spiders behave exactly as textual browsers (like Lynx) and all they see is a bare HTML structure. For example, if you've put your navigation bar first in the source, and then shifted it to left with floating or positioning, the spiders will parse it first so that there are reasonable chances to see a list of links in your search results (and this is not what you want), especially when you didn't provide a good description in your meta tags.

Another reason is accessibility and this topic is strictly related to SEO. In fact, assistive technologies read a web document exactly as a spider and you should bear this in mind when you structure your document. So if you have the aforementioned list of links before the main contents of your site, a screen reader will be forced to read aloud every single link of your list. To mitigate this problem, you can either choose to put a skip link before the navigation bar or move this list elsewhere on the page. One last thing: don't forget to take care of textual browsers by putting an hr element just after the end of each section of your page. This aids readability and provides a better user experience to those who use this kind of browsers.

Finally, keep in mind that all we said earlier also applies to mobile devices, especially those with a limited bandwidth. Not all the users of this kind of devices owns the latest version of their platform, so it's a best practice to make sure that the whole content of your document is still usable with CSS turned off.

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

2 thoughts on “CSS turned off: a good approach to web development”

  1. What you should really do is:

    1. Write your content

    2. Put the proper HTML tags around the content

    3. THEN add the CSS

Leave a Reply

Note: Only a member of this blog may post a comment.