Benefits of CSS/HTML design – tips to improve SEO, accessibility & manageability

Summary: This article aims to briefly discuss the benefits of CSS over table based layouts, and offers best practice CSS tips to improve SEO, accessibility & manageability.

Overview

CSS has become an integral part of modern web design and brings with it many inherent benefits. CSS (aka Cascading Styles Sheets) can dramatically improve a websites manageability, SEO and accessibility. What’s more is that CSS can work together with several additional technologies to help support a valuable user experience.

CSS can be a web developer’s best friend, but can also reduce maintenance costs for website owners.   These days, the majority of professional web designers & developers favour CSS design over table based design (if not they should do). However, there are still a surprising amount of sites built in tables. Admittedly, several of these may be legacy sites – nevertheless website owners should know that this is not best practice and may cause problems for certain user groups and search engines.

This article aims to briefly discuss the benefits of CSS over table based layouts, and offers best practice CSS tips to improve SEO, accessibility & manageability.

A bit of history

In the early days, most websites were created using tables and HTML for layout and appearance.  The majority of content, code and presentation elements were embedded and duplicated within every HTML document.  For that reason, web pages did not adopt a semantic flow due to ‘junk’ mark-up.  Table based design was notorious for taking an age to maintain, and for being largely inaccessible to many users and technologies.  Pages were often code heavy, which resulted in slow page loads and frustrated users.

As websites & functionality became more complex, and audiences more demanding – table based design proved beyond impracticable and far more time consuming to manage.   Tables also raised barriers for evolving search engines and many assistive technologies,

Step forward CSS…

Firstly let’s define CSS as quoted by the W3C…

“Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. “

The key principle of CSS design is to enhance web accessibility and improve page mark up by using HTML for semantic purposes only. The presentational elements are no longer embedded within the HTML, but are controlled by the external CSS.

There are three types of CSS styles:

• inline styles
• embedded styles
• External

For this article, I will only refer to external styles sheets since this is best practice for reasons you will see below.

External CSS documents can be shared site wide by a including a simple line of code in the head of a HTML page.  The CSS document provides a set of presentational rules that relate to elements within a HTML document. The two distinct documents separate web content from formatting and presentation – this can vastly improve website manageability, accessibility and SEO (search engine Optimisation).

Main benefits of best practice CSS

• Faster and more efficient to code and maintain due to modular code.
• Better for Search engine rankings. Google favours lightweight web pages and gives priority to content with less extraneous mark-up code. Making it easier for Google to differentiate between content code ratio.
• Improved audience reach and more accessible to people with disabilities
• Compatible across a wider variety of devices and assistive technologies
• Reduces bandwidth allowing for faster download speeds for users
• Cheaper hosting costs due to smaller file sizes and bandwidth reduction
• Site wide visual consistency due to one style sheet
• Enhanced print and customisation options
• Competitive edge and moral obligation to certain user groups

Some tips to improve Accessibility using CSS

• Contrast is Key: Create sufficient contrast between text and background. Text should always be clear and legible. Try using this tool to test the contrast between colours http://www.snook.ca/technical/colour_contrast/colour.html
• Make use of non-fixed units: For relative, ‘%’ and ‘em’ are equally good. For absolute, always use ‘px’. Never use ‘pt’ for on-screen use. ‘Pt’ should only be used to fix font sizes for print style sheets.
• Keep your focus: Use the: focus element to accommodate and highlight user tabbing.  Some users simply tab through a web page. This may apply to navigation lists, body links, form elements   etc.
• Offer print style sheets: include CSS print styles sheets in the head of your document.  There is often no need to offer a separate ‘print link’ for users unless the content necessitates.  Remove most presentational elements and only include images that are relevant to the content.
• Make all links and visited links obvious: Make all hyperlinks visually prominent and obvious to the user.
• Keep non content images external: Images that do not represent actual content and do not require an alt tag should be kept in the external CSS document.
• Space elements & content: Ensure your content is sufficiently spaced out so readability is good and elements are not cluttered.

CSS best practice to improve SEO

• Use external CSS:  Always try to use External CSS. Google much prefers lighter (less code) web pages with no unnecessary code. External CSS is not embedded as it’s stored in a separate file, therefore size is reduced.
• Leverage important keywords with CSS: Position significant content at the top of a document to leverage keywords and important HTML tags.
• Enhance Headings (h1-h6): anchor text and targeted keywords using CSS with bold, colours and font size.
• Position accordingly: Utilise absolute positioning for gimmicks and insignificant content.
• Paginate content with CSS:  Separate long pieces of content into multiple pages and use CSS for visual pagination cues.
• Utilise Lists: Make good use of the list (ul, li) element.  Google loves semantics! Structure elements such as navigation using css.
• Use CSS to build Navigation:  Following on from above, make your webpages more crawlable by using CSS to create eye catching navigation in favour of JS.

CSS best practice to improve manageability

• Keep your CSS and inheritance organised. Try to avoid casually adding classes and IDs.  Always try to declare universal items as paramount, followed by the singular items (if required).  Utilise inheritance and try to stick to this pattern.
• Author the document: Record dates, versions, titles and amendments.  This will help future proof your document and assist future developers to understand your design.
• Create libraries and Snippets: If you have a great layout that works cross browser, strip it down to its bare essentials, save and reuse it.  This could apply to CSS fixed, liquid and hybrid layouts. As well as simple rollovers and so forth. Why reinvent the wheel!
• Avoid over-using classes to style common tags. Always attempt to group elements and try not repeat yourself to save time coding and compiling. Take advantage of the inheritance potential and try to utilise shorthand to reduce file size, speed up coding and boost your efficiency.
• Keep it clean!  If you need to use browser specific styles sheets, keep them separate and appropriating named. Use a conditional statement to call the specific files when needed.
• Optimise for lightweight code.   Do as above and save valuable bytes/kilobytes and bandwidth consumption.  The fewer lines of code the faster the page loads.   Loose what is unneeded, and remember white space also effects the size fo the document.
• Utilise naming conventions:  A good naming convention system can dramatically improve productivity when adapting a design. Try to use names that have meaning to semantic elements and can be rolled across the design.
• Use hyphens in favour of underscores.  Applying underscores to CSS can cause backward compatibility issues. Save valuable time when modifying code for older browsers and get in the habit of using hyphens to describe your selectors.
• Use a validator.  If your CSS is giving you a headache and you cannot spot the problem, try using a validator.  A validator can help detect issues such as syntax errors that are sometimes difficult to see (especially after staring at it for hours).

And finally…

So there you have it – CSS can positively influence a website on many levels. If managed and executed properly, CSS can especially reduce production costs, improve accessibility and help maximise SEO.