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.

---

10 Tips for Killer Website Design

Does website design make a difference in how long people... Read More

Web Design Tips To Boost Your Sales

The way you design your web site affects your visitors'... Read More

6 Reasons Why Using Flash is a BIG Mistake

Most web designers and web design companies will try to... Read More

Make it Clear What Your Website is About

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

Free Website Design Tips

In this article I will give a few tips of... Read More

Good Websites Stand Out From The Masses Of Boring, Hard To Travel Sites

Good websites stand out from the masses of boring, hard... Read More

How To Design A Web Site

I'm not a professional web site designer and openly admit... Read More

Custom Website Design - 3 Must Have Tools

Creating your own website can be fun and easy, as... Read More

Create Favorite Icon

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

Looking for a Web Design Company? Use a Web Design Directory

Your business website tells a lot about your company. A... Read More

Effective Website Design For Massive Traffic

STEP 1:Do your homeworkPlan and think about your content. Think... Read More

How To Create A Stunning Drop Capital Effect On Your Web Pages

Drop Capitals are frequently used in many newspapers, books and... Read More

Digitalize It! : (Modification of images with tools such as Adobe CS and Corel)

Then it was a choice among crayons, paints and palettes... Read More

How To Make It Easy For Your Web Designer To Build Your Website

You have an idea for a website and you are... Read More

How to Create a Great Landing Page for Your Website

The landing page or entry page of your visitors is... Read More

What Drives Repeat Visitors To Your Site?

There can be zillions of reasons why your visitors return... Read More

Converting Traffic into Sales

Making a successful online business can be a long and... Read More

Creating Your First Website? Your Options

Creating your own website is great fun! But how is... Read More

Click Here

See, works every time. Seriously now, for some reason people... Read More

10 Ways to Sabotage Your Website Traffic and Send Visitors Packing

If you're running a website or online business, your number... Read More

8 Tips for Designing a Great Website

Square buttons, round buttons, flashy buttons ? will they match... Read More

Cascading Style Sheets for Better Web Design

In cascading style sheets you can specify how your web... Read More

3 Tips For Writing Content That Will Make You Sales

Content is king. Without content your website is an empty... Read More

Quality Graphics for your Web Site

For most people graphic design does not come easy. Unfortunately... Read More

The Most Important Question To Ask About Your Web Site!

When you design a website how do you start ?Do... Read More

Creating a Compelling Headline for Your Private Practice Website

Your home page is the most important page of your... Read More

10 seconds is all it takes? (How to grab the attention of your audience with your web site)

FACT: 30 to 60% of visitors tend to drop off... Read More

Introduction To CGI Scripts

Using CGI scripts to add automation to your web site... Read More

Web Site Design Mistakes ? Database Parameters In URLs

Creating a web site takes thought, planning and execution. Unfortunately,... Read More

The Contrast And Similarities Between A Web Designer And Web Programmer

The concept of web designing based on the nature and... Read More

Hacked Off with CSS?

For those not familiar with CSS Hacks, they are ways... Read More

How To Design Your Web Site With CSS

Cascading Style Sheets (CSS) allows you to create fast loading... Read More

How Important is Content to a Successful Website

Content is the most important part of any website.The Internet... Read More