Why your site should be developed with CSS and semantic markup
One thing that I have learned in over a decade developing web
sites is that the Net is continually changing, and to keep up
you need to change with it. One of the more recent developments
in web design is the use of CSS and semantic markup. CSS and
semantic web design has several benefits: clarity in code,
browser and other web-enabled devices compatibility, seperation
of content and presentation, smaller burden on bandwith, and
better visibility to search engines.
Back in the day, we designed sites with tables and hacked those
tables into doing things that they were never meant to do. The
table tag was designed to display tabular data, not as a way to
render the layout of a website. Unfortunately, a better
alternative did not exist, so we used tables. This made for
inefficient, slow loading sites with code that was very hard to
read and maintain. Wikipedia
defines sematic markup like this:
Sematic pages: supply information for Web search
engines using web crawlers. This could be machine-readable
information about the human-readable content of the document
(such as the creator, title, description, etc., of the document)
or it could be purely metadata representing a set of facts (such
as resources and services elsewhere in the site). (Note that
anything that can be identified with a Uniform Resource
Identifier (URI) can be described, so the semantic web can
reason about people, places, ideas, cats etc.)
These days, hip designers and developers use CSS extensively to
create beautiful, fully standards compliant sites. CSS-based
layout allows us to develop sites that will degrade
effectively--that is that they will be viewable on all types of
devices such as PDAs, cell phones, T.V.s--and will work
correctly on devices that dont even exist yet as long as they
are standards compliant.
Most importantly, developing sites with CSS allows us to
effectively separate content and presentation. Have you ever
looked at the source code of HTML pages that were created with a
table-based layout and wondered what the heck is going on here?
You see lots of opening and closing of tables and table rows all
mixed together with textual content and graphics. With a clean,
CSS-based layout you can create pages that are easily understood
by looking at the source, making them easier to understand,
maintain, and update. Look at the source of my company site http://www.vp3media.com and
then look at the source code of this site that uses a tables
based layout: http://webservices.org/. Big
difference, huh?
If you have a site with high traffic, you can significantly
reduce the amount of bandwdth used by transitioning from a
table-based site to a CSS-based layout. If a visitor to your
site doesnt have to load all of the code needed to render those
tables and spacer gifs, you are transmiting less data.
CSS also offers search engine optimization benefits over tables.
If you have a tables based business site that relys on Internet
traffic to turn a profit or aquire new clients you will see real
advantages by switching to CSS. When a search engine spiders
your tables-based site, they retrieve a large amount of content
that has nothing to do with you business. When search engines
spiders a clean CSS-based site, the majority of content
retrieved will be textual content that describes your business.
The ratio of content-to-code is higher with CSS-based
layouts.
Weve all seen search engine descriptions that dont make any
sense; thats because search engine spiders use a top down method
for retrieving information. Whatever is topmost in your
document, the search engines are going to think is the most
important part of the document, and therefore should be used as
the description. Since we seperate content and presentation with
CSS, we can put the most important information at the top of a
document no matter where it is actually displayed on the page.
Try that with tables!
I hope this article gives you an overview of why it is important
to transition from your current tables-based layout to a fully
valid CSS implementation. If you dont have a web site, but are
planning on launching one in the near future, make sure you tell
your developers you want a CSS-based implementation.