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.

---

Caveat Scriptor: Use the Advice of Those Who Know Before You Build a Site

~A man [woman] is a success if he [she] gets... Read More

Web Crimes: how to avoid common website design mistakes

Thinking about designing your own website? Think again about adding... Read More

How To Get A Pay Raise From Your Web Site

How many of the visitors to your web site take... Read More

Do Your Website Yourself - 4 Simple Steps to Get Your Dreams on the Web

Many people hire professional web site designers for as much... Read More

Why Ugly Sites Sell More Than Pretty Ones

What the heck is going on lately? Most internet websites... Read More

Successful Websites Don?t Set Out To Sell

What are websites? Are they sales tools for vendors and... Read More

Shameless Flashers - Using Flash Tools To Create Spectacular Websites

Flash is a powerful technology that can help you create... Read More

Browser Compatibility

Internet Explorer, created by microsoft has been the most popular... Read More

Successful Flash Tips

Ever browse across a website that took ten million years... Read More

A Web Site That Sells Is All One Needs To Have A Successful Online Business!

There are more than billions of Web Sites, running Online... Read More

Website Design For Small Businesses

There are many different website design companies, offering different facilities... Read More

Getting Along With Your Web Designer

You're all ready to get started creating your web presence... Read More

How to Convince Your Visitors to Return Often

One visit does not make a sale. Be sure to... Read More

How Not to be Ripped Off by Your Website Designer

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

So Much About META Tags!

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

Custom Icons For Your Specific Brand

Developing a software application is not easy at all; apart... Read More

3 Tips You Can Use Right Now to Improve Your Web Sites Usability

Studies done by Jakob Nielson the man touted as the,... Read More

Is A Picture Really Worth a Thousand Words?

The great debate: how much copy you should have on... Read More

Your Site Map: Spider Food or Just A Light Snack?

Mechanical spiders have to eat. In fact, they usually have... Read More

How to Make the Online Sales Copy for Your Website More Conversational

It has been said that the best online sales copy... Read More

Top Ten Ways to Increase Web Sales - Part 1

You have only 10 seconds to impress your potential buyer.... Read More

Hiring The Right Webmaster

The Questions You Should Be Asking ? The Answers You... Read More

Basic Graphic Design

Wether you design your business brochures, flyers, web page, or... Read More

Create A Web Site That Builds Trust

If someone doesn't know you personally, will they trust you... Read More

Understand Your Color

Any design on a web application involves the effective input... Read More

Can Your Visitors Contact You From Your Website

Argh, where's the contact button?! Believe it or not, some... Read More

How to save money on a website

Know what you wantMake sure you know why you... Read More

The Psychology of Color in Web Design

Persons engaged in website design, here's a scoop for you!... Read More

What I Look For In a Website

As my occupation is that of a proofreader, one of... Read More

Web Publishing Guide for the Beginning Entrepreneur (Part 1)

The best things don't come easy. - QuotedThe finished web... Read More

Web Marketing: Design Mistakes That Drive Customers Away In Droves

They may look cutting edge, but if you want a... Read More

Top Ten Ways to Increase Web Sales - Part 2

You have only 10 seconds to impress your potential buyer.... Read More

Give Your Website A Chance

I often wonder how serious people are when it comes... Read More