Importance of Proper Code & Use of CSS

AN ARTICLE

The way in which a site is coded, is incredibly important for several reasons.  The code affects how quickly a page loads, how easy the site is to maintain, how the search engines read your site and whether or not your site is accessible to persons with disabilities.

Why Use CSS?

The old way of creating a visual design typically depended upon using tables for layout.  A page table would be used, with columns, rows and cells determining where each element of the page was to be located.  The code for generating tables is incredibly long, and very tedious.  Along with this, the text, or your content, inside the table code is not in reading order.  Page readers and search engines read the site from the code, not by the way it is visually represented in your browser.  This means that your content can be completely out of order when read in this manner.  Also, some search engines place a higher importance on text that is nearer to the top of the page, so the order in which it appears in the code is extremely important.

When a site is created using CSS (Cascading Style Sheets) for layout, the code that determines the appearance of the site in the browser, is held in a separate file that is referred to by each individual page.  This method of layout has many useful benefits:

  • The text/content of the page is in actual order, or can be re-ordered to put the most important information at the top of the page, and leave supporting information, such as menus and footer information at the bottom of the page.
  • The code is very readable, meaning that screen readers and search engines can go through the page without getting hung up.
  • Maintenance is very easy, as the code is clean and clear cut, and the visual aspects are managed by a single referring page, allowing for updates to be done in one location instead of on a page by page basis.
  • Navigation using CSS is clean and clear cut, easily read by search engines as opposed to using javascript for menus.
  • The size of the page, in lines of code is dramatically decreased.  This allows for faster page loads and a more efficient site.

Existing Sites - Re-write

If you already have an existing site that needs to be re-written in this way, it can be quite costly, pretty much as expensive as a completely new website.  This is because the work is actually more time consuming than starting a new site from scratch with this method.  All of the existing content needs to be pulled out of the existing code, and placed into the new.  As you can imagine, removing and modifying code is more work than simply doing it right the first time.

Of course, there is the added effort of creating the initial layout that will drive the site.  Even though one may not be doing a visual re-design, re-creating the current design into a CSS layout requires some effort and is the same as doing on from scratch.

Code Examples

Here are some examples from a code view of the difference between traditional table based code, and using CSS for layout.  These are very dramatic examples, as the original page had 676 lines of code, and the new page has 93 lines of code.  The new page has only 14% of the lines!  This is an amazing improvement.  The new page even includes descriptive elements for search engine optimization.  Click on the links below to view both sets of code and compare how the page reads from a coded view.

Original Table Layout      CSS Based Layout

Most of the elements that are common to every page on the site have been moved off to separate files that are referred to by the page, such as the header information, menu systems and footer.  This reduces the amount of code on each page, and also makes for very efficient maintenance.  Originally, the menu code was put on each individual page.  This meant that for a 100 page website, the webmaster would need to change 100 pages everytime something changed with the menu.  With this method, common elements are moved to their own pages, so when a change comes for the menu, the webmaster makes a change to the menu file, and the change is automatic across all of the pages.  This is called using Server Side Includes and can be done in any web language with the exception of pure HTML.

Additional Articles on the Benefits of CSS

Adobe Article - Why Use CSS?
Mozilla Developer Center - The Business Benefits of Web Standards
100Best - Benefits of Using CSS

 

Merlee Bos
WebVentive™
Taking you in the right direction™

Copyright information - This article may be reproduced on your website only, however, it must be reproduced in its entirety and this copyright statement must remain intact.