Think of CSS as synonymous to Web Standards Compliance?
A client just pointed out an error to me. I had been using CSS as a short-hand way of referring to Standards Compliance. The use of Cascading Style Sheets (CSS) is such a large part of Web Standards Compliance, they have become almost synonymous to me, but they are not, in fact, synonymous.
Advantages to CSS
Sites will often use CSS to control content styling for things like fonts, headers, links, and tables. This separates many of the style attributes from the page content. There are a number of advantages to doing this:
- Pages easier for search engines to index and can be faster to load.
- Having style controls located in one place promotes stylistic consistency and makes it easier to maintain or change styles.
Advantages of Web Standards Compliance
It is possible (and even common), to have a site that utilizes CSS that does not adhere to web standards. Such sites, therefore, do not reap the full benefits availed through compliance to web standards. Benefits like:
- Better Search Engine Indexing
- Better Accessibility for wider range of browsers and devices
- Better accessibility for wider range of users
- Faster load times
- Ease of update and maintenance
- Ease of printing
Sites that use CSS will often use tables for layout
Generally, what we find is that although a site uses CSS for styles, the site layout is implemented using a complex system of nested tables.
Problems stemming from table-based layouts.
Content is not optimized
One principle to search engine optimization is to prevent code crowding the true page content in undesired ways. Ideally, the code for the page should be almost as readable as the final html is. All of the html tags necessary to build nested tables adds bulk to the page and hinders search engine indexing.
Content is not served in the correct order
Search engines read tables from left to right one row at a time which is often not how you want your content read. Many sites are implemented with a left hand navigation, when this is done via tables, the search spider and screen readers almost always have to wade through the full navigation on every page before reaching the true content.
Content is split in undesired ways
Also, with table-based layouts, related content that appears side by side on a page, like an image and teaser spoltlight, might be contained in two distinct tables within a larger table. For screen readers, the content can be rendered virtually incomprehensible as related pieces of content are presented in seemingly random order.
Increased Maintenance Costs
Updating content within nested tables is time consuming, tedious and can be risky. The potential cost of forgetting even just one closing tag could be to break your entire page design.
Slower download times
As mentiond above, the html tags necessary to build nested tables adds to the overall size of the page. The complexity of rendering nested tables also adds to the browser rendering time adding even more time to the overall time it takes to render the page.
Reduced accessibility for other devices
Content in tables will often have fixed width tables and columns. That can make it more difficult, if not impossible, for mobile device users.
Other things to consider:
Use of Javascript menus
Sometimes we will find that when a menu is implemented with javascript, all the links below the top level are contained within the javascript. Search engines don’t run or read the javascript. Search can crawl all of your secondary pages to see what lies below the top level, in that situation the secondary pages get lower rankings because as far as the search engine can tell, they are not linked to from the homepage.
Semantic markup
There are html elements that indicate the different kinds of content – header tags for headers, paragraph tags for paragraphs, lists for lists and tables for true tabular data. These tags, when used correctly, can help search engines make sense of your pages. Search engines can’t look at the top row of the table, see that the font is bold and interpret that it is probably a header, but it can see the header tag and correctly interpret that it is a header.
Efficiencies with Valid Code
Valid code renders faster than code with errors. As browsers become more standards compliant, the need to test cross browsers should decrease as valid code will render consistently across standards compliant browsers.
So, although CSS is a large part of compliance to web standards, the benefits of true standards compliance far outstrips those of simply using CSS to control styles.
Post new comment