Why Your Site Should be Developed with CSS and Semantic Markup

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. If you need help moving from your current tables-based site to a CSS-based one, please feel free to contact me at vp3media@gmail.com or call me toll free at 1-877-320-4349 and Ill be happy to discuss your site with you.

James Kendall has been developing websites for over a decade and has founded and co-founded several companies concerned with web development since 1994. Currently he runs VP3Media and focuses on one on one interaction with select clients.

---

Website Polls For You And Your Visitors

Setting up a survey on your site is extremely simple... Read More

How To Choose A Website Designer

Now that you have decided that it is time to... Read More

Positive Design Attributes for a Successful Website

Designing a website is hard job, and requires you to... Read More

Tips on How to Design a Great Site

Have you ever walked pass a shop that, for some... Read More

Long Copy Sales Letters on the Web: Hype or Not?

I have written before about long sales copy on the... Read More

The Best Simple Software For The Busy Webmaster

Here are a few programs I can't do without. They're... Read More

How Not To Get Web Design Work

I get the occasional web design lead from my website.... Read More

Business Opportunity for Graphic Designers

As a graphic designer, you are sitting on a gold... Read More

Make it Clear What Your Website is About

Just about every list of the "Top 10 Web Design... Read More

Put Up A Website And Start Promoting In About An Hour

I can't figure out people who have products or information... Read More

Web Site Templates and Their Benefits

Unarguably, the most important part of your website is content.... Read More

Using Graphic Design on Your Website

Almost everything is available on the web? products, services, e-books,... Read More

How To Use Unsafe Web Colors With Minimum And Safety And Maximum And Profit

Do you want to use unsafe web colors without offending... Read More

Fast Web Design For The Skint Webmaster

About two years ago, I had a go at commercial... Read More

Create Favorite Icon

Favorite icon appears to the left of your link in... Read More

Website Sales: 10 Strategic Tips To Maximize Your Profits

If you've a website but not making a lot of... Read More

Secrets to Using Color on Your Website and Common Pitfalls to Avoid

Colors have long been known to have psychological affects on... Read More

One-Product Sales Sites: Avoid These Top Blunders

One product, one long web page: this kind of web... Read More

Content is Crucial!

Content is undoubtedly the most important element of a website.... Read More

Do You Own Your Web Site Design?

Your web site has been up for a few months... Read More

Why Choose A Professional Web Designer?

It seems that almost every Tom Dick and Harry do... Read More

Very Cheap Website Design Services

Are you looking for somebody to build you a website,... Read More

How Your Business Can Win Online

There are lots of websites out there that do little... Read More

How Not to be Ripped Off by Your Website Designer

As web designer my self, I have had the unfortunate... Read More

Dont Lose The Sale In The Internets Last Three Feet

In retailing there is a saying that sales are made... Read More

Maximising Web Site Viewability - Resolution

This is my second article on maximising web site viewability.... Read More

Do You Really Need A Website?

Nope. You certainly don't need a website.But you don't need... Read More

File Types For Icons Explained

An application is not ready for use unless you have... Read More

Dos and Donts in Web Design - part 1 (design)

Do use a consistent look and feel Your site should... Read More

Is Your Website?s Copy Up to the Mark?

The Internet is a relatively new medium. What works for... Read More

Title Tags - How to Make Them More Effective

The title tags of your web pages are more important... Read More

So Much About META Tags!

I've written about META tags in the past, and I... Read More

When Your Graphic Designer Costs You Money

So how do you know when your graphic designer costs... Read More