CSS – Compatibility and SEO

An XHTML layout embraces forward compatibility, if built correctly the website should be able to work across multiple browsers, platforms and devices and will continue to work in future browsers and devices whereas a table based layout designers have to come up with different layouts for different displays, for this reason development costs can be higher and if a new device comes out then the cycle starts again.

With xhtml, by separating content from presentation, it makes your website much more device-independent allowing mobile phones and PDAs to access the Web, and more accessible to users with disabilities. Visitors using screen readers do not have to wade through countless table cells and spacers to get at the actual content of our pages, whereas with tables When a text only device reads the content of a site, it starts at the top and works down the page line by line. When it comes to a table, it starts at the top left and works left to right, row by row. For obvious reasons when nested tables are used to display chunks of text in the desired layout, that content can become nonsensical when read in this manner.

Perhaps one of the biggest advantages to using CSS over tables from an accessibility point-of-view is the ability to serve different style sheets to different mediums and devices. Because information on a screen reader or personal data assistant appears differently than on a computer’s web browser, it is important to include alternative style sheets that include basic formatting rules for a particular device.  By making your website more accessible using CSS, not only are you making content consumption and site navigation easier for users, but you’re also accommodating those with various disabilities.

SEO

When building a site the importance of bearing in mind SEO and compliancy is always at the forefront of a developers mind.

XHTML/CSS built sites are superior for seo, the smaller file size make it easier for Search Engine Spiders to crawl through your website. Less junk markup makes it easier for Search Engine Spiders to decipher between code and content. Ideally, try to keep your content-to-code ratio as high as possible (more content than code, obviously). Structural organization is greatly improved by using h1, h2, h3 tags ensuring that the Search Engine Spiders know what you’re trying to show them. In addition, if you’d like your h1 information to appear after your body tag (or near the top of the page’s code) but don’t necessary want the h1 information to be visually displayed at the top of the page, then CSS will allow you to using absolute positioning which gives the designer freedom to place the h1 information practically anywhere on the web page.