engine.

Making peace between Web Designers and SEO Practitioners

There has always been a serious tension between web design/layout considerations and search engine optimization requirements. Consequently, designers and SE optimizers are often at odds. One wants functionality, rich user experience and attractive look and feel. The other wants as little HTML code, Javascript, and so on as possible to crowd the optimized text or hinder the page's search engine friendliness. Two things in combination can considerably ease this tension: XHTML and CSS. In fact, this combination does not merely achieve some sort of compromise in this epic battle, but actually can give both sides even more power and flexibility in accomplishing their respective vital tasks, while at the same time relieving the tension between the two.

Understanding XHTML

XHTML stands for EXtensible HyperText Markup Language. It is aimed to replace HTML and is almost identical to HTML 4.01. XHTML is a more strict and cleaner version of HTML; it is HTML defined as an XML application XML is a markup language where everything has to be marked up correctly, which results in "well-formed" documents. XML was designed to describe data, and HTML was designed to display data.

I have no doubt that you are very familiar, if not painfully familiar, with the fact that there are so many different browser technologies. In addition to the various browser types (IE, Netscape, Opera, etc.), there are also many different platforms and operating systems. Some browsers provide access to the web pages on computers, and some browsers provide access on mobile phones and handheld devices. Regarding the last, they do not have the resources or power to interpret a "bad" markup language. Therefore, by combining HTML and XML, and their strengths, we get a markup language that is useful now and in the future: XHTML. XHTML pages can be read by all XML enabled devices. And while waiting for the rest of the world to upgrade to XML-supported browsers, XHTML gives you the opportunity to write "well-formed" documents now that work in all browsers and that are backward browser compatible.

(Adapted from W3School.com's XHTML tutorial)

Understanding CSS

CSS stands for Cascading Style Sheets. Styles define how to display HTML elements, and styles are normally stored in Style Sheets and were added to HTML 4.0 to solve a problem. It has become progressively more difficult to create websites where the content of HTML documents was clearly separated from the document's presentation layout. To solve this problem, the World Wide Web Consortium (W3C) - the non profit, standard setting consortium responsible for standardizing HTML - created styles in addition to HTML 4.0.

(Adapted from W3School.com's CSS tutorial)

Benefits of XHTML, CSS to the designer

This is a powerful and extremely beneficial combination for any web designer. It enables and forces (via XHTML and CSS validators) you to write cleaner, more logical markup. It provides an easy transition to a more advanced and increasingly ubiquitous technology, since everything is moving toward XML. Using XHTML produces documents that can easily be "transported" to wireless devices, Braille readers and other specialized web environments - which means increased interoperability. It will also help you comply with many important accessibility guidelines. Using CSS will make it possible for your pages to load faster, since it eliminates the need for redundant coding. It makes creating design themes easier since a style sheet can easily control the display features on multiple pages at once. CSS gives a designer much more detailed control over attributes than HTML coding, giving you more power and flexibility in the look and feel of your site. These are just a few of the many benefits, all of which are long-term benefits.

Benefits of XHTML and CSS to the optimizer

XHTML separates the layout from the content almost entirely. There is nothing to hinder search engine friendliness or crowd out optimized text. A designer can change attributes of the look and feel, even the positioning, without touching the content at all. In fact, a designer can alter the positioning of text for look and feel without moving the position of the content in the source code. This is crucial for certain optimization strategies to be fully effective. Furthermore, this same capability can create new optimization strategy possibilities that are otherwise impossible.

CSS Resources

Tutorial Sites:

http://www.w3schools.com/css/

http://www.echoecho.com/css.htm

http://www.javascript-page.com/css/

http://www.mako4css.com/

Some CSS Razzle-Dazzle:

http://glish.com/css/

http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

http://www.meyerweb.com/eric/css/edge/

http://www.bluerobot.com/web/layouts/

Webmonkey tutorial

Another Webmonkey tutorial

http://access.lowtech.org/events/resources/css/

XHTML Resources

http://www.xhtml.org/

http://www.digital-web.com/resources/xhtml.shtml

http://www.hsl.unc.edu/present/xhtml/xhtmlrefs.htm

Converting HTML to XHTML

Author:. I have over 19 years experience in information technology covering a wide range of specialties including: web design, software engineering, e-commerce solutions, artificial intelligence, and Internet marketing. I have degrees in Linguistics, Philosophy and Theology.
I am also a contributing author to SEOToday.com, the premier website for SEM professionals, and a contributor to "Building Your Business With Google for Dummies" by Brad Hill. I am a frequent presenter at Ultra Advanced SEO ... Go Deeper | Website

Have a question for Michael?

* Required information
Name:
Email Address:
(never displayed)

Your question or comment:
Human? Enter the word hand backwards.
 
Enter answer:
 
Tell me when Michael responds to me.
 
Remember my form inputs on this computer.