webdesign articles


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 andpresentation, 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.


MORE RESOURCES:

Indiana Web Design Company Radically Changes Approach to Web Development
DigitalJournal.com (press release)
Steve Schmidt, President and Web Strategist of the Indiana web design agency cites, “There are two main problems with Web design companies: 1.) They quickly jump into execution mode without fully considering what suits clients best in terms of their ...

and more »


PR Web (press release)

Algonquin Studios Shares Thought Leadership Reports on Web Design, SEO ...
PR Web (press release)
These are people who have started successful businesses, built enterprise-level software systems, and work hard to actively keep abreast of changes and advancements in technology, software development, web design, and online marketing,” says ...

and more »


EQuicknews

Web Design Tips
EQuicknews
Launching а website іs bоth exciting аnd potentially rewarding. A wеll planned site can have а positive effect оn уour business, wіth online sales bucking thе trend in an othеrwisе downbeat economy. Creating a website can аlѕо bе a daunting task, ...

and more »


HigherVisibility Named Eleventh Best Web Design Company by topseos.com for ...
Press Media Wire
The independent authority on Search vendors, topseos.com, has named HigherVisibility the eleventh best web design company in the online marketing industry for the month of February 2012. Their position in the rankings of top web design companies is ...

and more »


Crumpler C List Celebrity Backpack Reviewed by Intown Web Design
PR Web (press release)
Intown Web Design review of Crumpler C List Celebrity Backpack acknowledged the backpacks design and functionality. These backpacks by Crumpler were noted as some of the best backpacks for photographers. Overall, these backpacks were exactly what I was ...

and more »


Positive Web Design Utilises Brand New Wireframes For Clients
PR Web (press release)
The team at Positive Web Design has announced that they will be creating pre-designed wireframes and templates in order to speed up the development process for new clients. Positive Web Design, a web design and development firm well-known for its ...

and more »


SCORR Marketing Marks Growth with New Branding
MarketWatch (press release)
The website features the latest techniques and technology in Web design. "The technology featured in our new website highlights the capabilities of SCORR Interactive and demonstrates how these techniques can be effectively utilized for each client," ...

and more »


Why I treat IE6 like a Nokia 3210
ZDNet UK (blog)
Webolutionary Ethan Marcotte, the chap who brung us Responsive Web Design Big Time, does battle with IE6 in his canonical classic Responsive Web Design. Essentially, IE6 doesn't support the max-width property and flexible images (pp49). The solution?



5 Top Trends in Web Design for 2012
Caribbean Media Vision
In the world of web design, what is considered to be up to the minute and trendy can quickly become outdated and old fashioned in just a short amount of time. It is important for anyone with a website to stay up to date with their web designs and make ...

and more »


SEO.in Named Fourth Best Android Development Company by bestwebdesignagencies ...
Press Media Wire
The independent authority on web design and development, bestwebdesignagencies.com, has released their list of the best Android development companies for the month of February 2012. SEO.in has been named the fourth best Android development company ...


Google News

home | site map
Webdesign-box © 2006