Think Outside the Design
The value of web standards really amounts to recommended use of markup to semantically describe content. Once mastered, the web developer is able to make intelligent and conscious decisions on the “right” compromises to be made for a given project. We are constantly working towards standardization and have had dialogs about the best practices for markup in various situations, it’s the World Wide Web Consortium’s role to define the purpose of markup; the platform for web site optimization. Web site optimization has little to do with search engine optimization or any of the W3C’s validation tools. Instead web site optimization deals with steps taken to improve user experience by:

• reducing page weight
• re-factoring of markup, CSS and/or Client Side Scripting
• making content accessible
• making content semantic
• reusing imagery
• optimizing the weight of imagery
• caching and deferred loading
• reducing latency to reduce download or render time

In short, the goal is to use the minimum code to achieve the desired result. Unfortunately, clients may not always afford us the proper time or resources required to give the most polished result possible.

Think it Through
Web standards in and of itself does not necessarily contribute to reduced file sizes, however what it does do is endorse healthy use of semantic markup that does give way to reduced page weight through table-less markup and a focus on cascading styles sheets for presentational material. By using document object model scripting, procedural code no longer needs to live inline in the html document itself. Take advantage of your page’s semantic structure to use the DOM to the fullest.

Code becomes art when we take our code to the next level by re-factoring it to maximize it accessibility, by reducing our dependency on the markup for presentation and procedural user interface components. What remains to be done when all of the content in a document is rendered as the design calls for, content properly described with your tags, images optimized for reuse and weight? Now, we consider scale, what happens when this site we’ve worked so hard to optimize becomes highly trafficked (think: Digg Effect) — or if the site already is, let’s make sure to optimize the server’s role in the user experience.

Caching is one of the chief techniques to be leveraged to improve user experience both on the client-side and the server-side. Making objects like cascading style sheets and JavaScript files external can also benefit from the technique of combining files to reduce latency. It’s much less “work” to download a larger file once than it is to download (or check for freshness of) several files. Unfortunately, many of the most visited sites could benefit greatly from even a dash of web site optimization. Issues like multiple CSS file or JavaScript files demonstrate little regard for the benefit they could provide their visitors as well as their own bottom line.

Move on to compression; consider pre-compressing your CSS and combined JavaScript files to reduce server load for high traffic sites. Go a step further and create a proxy that makes sure to return the “not modified” codes to user-agents checking for freshness of objects in your site after first download.

Without getting into code for each portion, let’s consider the typical components of a “well-designed” HTML document:

1. masthead
2. navigation
3. breadcrumbs
4. body
5. sidebar
6. footer

Within each there are a myriad of possible methods to semantically describe the content of the components. Let’s have a look at a few basic cases:

• Unordered Lists for navigation, breadcrumbs and copy in list items.
• Non-tabular layout for forms and use of labels and access keys for accessibility
• Use of <p>, <em>, <strong>, <dl>, <h*>, <table> tags for content

Diving into a single common challenge can show how understanding of web standards cascades into an optimized user experience, let’s look at a technique that combines several techniques by several authors, each of which contributing to many fundamental factors of web site optimization; specifically: image reuse, semantics, presentational separation, caching, latency reduction, image optimization, and accessibility/platform independence. Anyway, on to the challenge — image based main navigation with hover effects. Without being distracted with pseudo-code let’s have a look at how using what we know about web standards leads naturally to web site optimization and a very desirable result for the user:

1. Start with an unordered list, in the case of drop down menus, let’s make that a nested unordered list
2. The unordered list is styled as required using CSS such that any copy is moved out of view by hiding overflow and indenting the copy out of view of user agents that support CSS, but still leaving it accessible to screen readers etc
3. Now imagery is added for each of the tabs for the various states (hover, visited, active etc) as necessary

Normally this is where things would end. At this point we have the desired result, but it’s not an optimal experience for the user. Again to the credit of numerous designers and developers turned authors out there additional techniques can be applied to optimize the menu quite a bit:

1. Combine all of the images for each button in the navigation into a single file
2. Combine all of the image states the navigation into a single file and use CSS to shift the desired portion of the image into view when required
3. Put any JavaScript required for desired effects; e.g. transparency, sliding effects support for browsers that don’t support standards as we would like etc an external file

In the previous three steps, we’ve:

1. Reduced the latency required to load the main navigation imagery and the overall render time for a given page
2. “Pre-Loaded” and cached the other anchor states for the navigation without using any client side scripting
3. Cached the JavaScript for the navigation by making it external (the same is obviously true for the CSS), improving the render time for subsequent page views

Now apply a few more techniques to the site as a whole:

1. Take advantage of the compression support of popular browsers and compress JavaScript and CSS so that it can be sent instead of the larger uncompressed versions
2. Combine our CSS files and JavaScript files respectively, similar to the combining technique for the navigation imagery to reduce latency
   Cache these compressed versions of the combined files on the server so that
3. Cache these compressed versions of the combined files on the server so that every page view requested doesn’t require the web server to have to prepare the same files over-and-over on-the-fly. Instead the server can send static files immediately (which it can do with tremendous ease).

With the various techniques we all apply to our projects just adding a few more steps of optimization greatly improves the user experience.

Make it Your Own
Standards simply help us agree on what markup is intended to do and how it’s elements work together for describing content, web site optimization picks up where web standards leaves off. The W3C encourages us to use markup to describe the content and separate the presentation and functionality from markup as much as possible. Once we get used to the idea our time is best spent optimizing our code to work in the real world. I’ve intentionally left out the “how” because that’s an ongoing debate whose conclusions are at best situational. There are quite a few frameworks out there that help developers apply many of these principles to their projects right out-of-the-box, but it’s not too difficult to build your own framework for your own style of work.

So what’s the final word? Well, similar to the stance that Ethan Marcotte put forward I suggest that web standards be the baseline that we use to optimize sites to perform for the targeted user agents. One day it may be easier to leverage standards to achieve a predictable user-experience across all user-agents, but for now it’s best to have more skills and mastery than are required to render a job well done.

What Eric has decided to do with the support of many interested participants is create a baseline for many of the HTML elements that behave inconsistently from browser to browser. The result being a fantastic snippet of code that removes the subtleties that often cause anomalies in the render of pages in Internet Explorer 6/7 (and in other browsers too).

For those that just want to see the code:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	background: transparent;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

You can see that nearly every element is considered above and is “reset” to values to provide sure bedrock for styling a document.

I suppose I should go to mention another great tip from Eric, while on the topic of consistency and this one points to to consistency between the CSS “functionality” of internet explorer 6 and internet explorer 7. Dean Edwards put together great javascript code which enables coders to focus on CSS production for IE 7 and not have to worry support for behavior that doesn’t exist in IE 6 — definitely worth a look.

Despite the awesome drawing power of the www and its ability to sell products and broadcast messages, as site designers and owners, we’ve only begun to harness the true power of a fully-compliant semantic web.

Semantics aren’t new. They’ve been around since scribes wrote on mud tablets. We use semantics everyday in the way we write and speak. Semantics are nothing more than a set of communications conventions to which we all agree.

We rely on punctuation, grammar, spelling and sentence structure to effectively communicate with others. However, throughout the world, a different set of semantics has been developed for each language. In English, the umlaut isn’t used except by Motley Crüe. And you won’t see Õ, g or ¿ used in English writing because they aren’t English semantics. The differences between distinct linguistic conventions correlate closely to the problems of accurate and effective communication via an asemantic web.

HTML: The Universal WWW Language
It stands for HyperText Markup Language and it’s the accepted programming code used for the design and development of web sites. HTML is easy-to-learn, very flexible, it handles text, graphics and other multimedia efficiently and it’s totally scalable, providing the same results for mega- and mom-and-pop sites alike.

However, HTML has one striking drawback. HTML defines where to place what content on a site page, but it can’t discern relationships between the content, or how it could be used to provide more valuable results to user queries. That’s why SEs exist in the first place — to try to develop100% relevancy in a world with “too much” information.

A page of product listings. HTML defines that this is <catalog page 06>. However, it doesn’t identify item #4432 as a hair brush costing $4.95. HTML is limited to identifying a block of text describing the hair brush that should appear next to the product image. However, it isn’t able to determine whether the content is about a hair brush or a manure spreader. HTML places content, makes it interactive with web users and provides site navigation via coded links. What it can’t do is read and index content to make that information more accessible (read useful) to visitors.

Using proper semantics, SEs are able to identify relationships between various chunks of site text, and from a site skin POV, semantics better equip visitors to more easily identify these relationships, whether via browser or as human eyeballs reading the screen.

The use of compliant semantic standards accomplishes two more important objectives for site owners. One, standards enable site designers to more accurately describe site content to SEs and two, semantics facilitate clearer communication between site and SE spiders. These two key benefits deliver more targeted, motivated site traffic.

The bottom line is this. With today’s HTML technology, search engines are able to spider and index web sites. However, they can not index, assess (weigh), correlate and deliver specific content based on the context of a user’s keyword search.

RDF, OWL, XML, et al
To address the limitations of HTML, compatible programming languages and machine-readability apps are available in the site designer’s resource mix. RDF, Resource Description Framework, is one such tool. So is Ontology Web Language (OWL). And the data-driven XML, eXtensible Markup Language, has vastly expanded the ability of web designers to catch the attention of search engines through the development of indexable content.

The implications are enormous, increasing the usefulness of the web exponentially. Here’s an example. Using HTML alone, a search engine won’t be able to produce useful links to the keywords ‘website designers in Boston’. Instead, the SERPs show lots of designer sites all over the world, some of which might be located in the Boston area. Though the sought-after information is available, it’s contained within the pages of many sites — all indecipherable to spiders.

Further, site content is useful within a variety of contexts. What if we substituted the keywords ‘website designers in Massachusetts’ referencing the example above? This SE user has changed the context of the search (and therefore relevant content) from links to Boston-based design firms to links for the same across the entire state. A semantic web would not only deliver specific data, it would do so within a wide variety of contexts.

Instead of simply indexing an entire site, semantically-enabled SEs index content for use in a wide variety of contexts, compile this information based on a user’s query and deliver SERPs with links that take users to the specific information for which they’re looking.

W3C and Semantic Code
The World Wide Web Consortium, or W3C, has embarked on an important mission — the standardization, improvement and extension of the www. Not a simple task. It entails the standardization of programming languages, development tools, browser specs and now a semantic web — a more powerful, useful and dynamic interface.

However, W3C has many challenges to overcome. First, semantic web technology is still under construction.

Second, there’s rarely agreement within the web community on which apps are best, which languages best serve global needs and so on.

Third, universal semantics are impossible. Semantics for one language won’t sync up with another. Even writing styles — academic with lots of footnotes vs. a blog entry — employ different, accepted semantics. Thus, a universal set of semantics would involve cataloging types of content — a virtually impossible task.

Instead, semantics should be viewed as a set of guidelines to help programmers, designers, software developers and others to use the W3C-compliant tools and protocols properly. Indeed, because the task of connecting web users to specific information is shifting from search engines to site developers, all that remains is for semantics tools to be used properly.

SEO and Semantics
The whole point in developing semantics standards is to make websites machine readable. This will allow search engines to spider and index content with vastly improved specificity. Good SEOs do this while optimizing sites, usually without realizing just what they’re doing. Imagine the results of semantics optimization when developer and SE marketer collaborate to make best use of this emerging technology.

Search engine users will be able to access local news and sports, local sales, locate and compile similar content from widely-disparate sources and in general, access more data within any user-defined context.

With a semantics-compliant web, SEs will be able to better identify relevancy of and relationships within the copy itself and thus save search time and deliver more traffic to that website. The more semantic-compliant a site, the more relevant traffic it will generate.

Site Semantics and Design
If your site designer isn’t up to speed on w3 semantics, find another designer. Yes, new and improved semantics tools are in development but the big SEs are constantly improving their ability to match context and relationships instead of simply identifying literal matches of character strings. And, if your site isn’t semantically optimized, it’s also not optimized for conversions, so you’re missing the best SEOpportunity to come along since the advent of search engines.

Can you afford to ignore site semantics? Not if you intend to be around tomorrow.

Not getting the search engine results you were expecting for your site. Buried in the boondocks of SERPs and looking for a way up the PR ladder? Well, time to give some thought to optimizing your HTML Title and Meta Tags. “My what?” you ask.

First, HTML and XHTML are the coding languages site designers use to get your site noticed by search engine spiders — those little digital crawlers sent out from the various search engines to evaluate, assess and ultimately, rank your site. Your site’s Title Tag is a key part of the crawlers’ evaluations of what your site is all about. Meta Tags are little descriptions of your site. It’s the text that shows up on the SERPs directly under your Title Tag text when Google, Yahoo! or some other SE sends a spider to your site for a quick look.

So, why are Title and Meta Tags so crucial to your PR? Well, today’s SEs use a variety of criteria to evaluate your site and assign it a page rank. One of the factors that’s part of the evaluation is your Title Tag, which provides a few words that capture the essence of what your site’s all about. Sell balloon bouquets on line? Then balloon bouquets should definitely be a part of your Title Tag text. It says a lot to SE spiders about what your site does — its raison d’etre. The Title Tag is the single-most critical tag in your HTML coding and, as such, the choice of key words you enter into this little line of code can make a big difference in how SE spiders view your site.

If the key words in your Title Tag are broad, i.e., law, food, games, etc., the SE spider is going to make certain assumptions about the site — assumptions that may not be accurate or beneficial to drawing traffic to your site. You don’t want spiders making assumptions about your site, so be specific in the key words you enter in your Title Tag, i.e., divorce law, Thai food recipes, children’s word games and so on. The more specific you can be, the better, as far as SE spiders are concerned.

Your Title Tag text should include:

• an overview or summary of your site and its purpose
• the most effective key words (based on key word research)
• a little sales pitch, if you can include critical key words
• key words in some kind of order that makes sense to an SE crawler, i.e. web site design, hosting services, e-commerce solutions, etc. Those key words, in that sequence, tell the spiders what this site does. No assumptions necessary.

Now, your site’s Meta Description Tag is your chance to pitch a potential visitor to stop by your site because it offers just what the user is looking for. Meta Description Tags don’t receive the same weight as Title Tags, primarily because it is a small bit of self-promotion. Nonetheless, while Description Tags may not be as heavily weighted by SE algos, they are heavily weighted by searchers looking for a site like yours. In fact, Google a common key word — chocolate, for instance — and check the content in each site’s Description Tag. You’ll notice immediately that some descriptions are better written and actually make sense, luring users to visit those sites.

Other sites’ Description Tags are nothing more than a list of key words — chocolate, chocolate candy, Swiss chocolate, and so on. Okay, okay, we get the idea — it’s a chocolate site. But that Description Tag content isn’t too sweet, appealing more to the SE spider than to a potential visitor. Use your site’s Description Tags to appeal to a human being, not a digital crawler. And sell a little, to bring in that site traffic. It may not do much to boost your page rank, but it will do a lot to make your site stand out from the crowd — and that’s not too bad for a few key words in brackets.

So, to make the most of your Meta Description Tag(s) follow these simple guidelines:

• Don’t run long. Keep it short and to the point. What does your site offer and why should a visitor stop by the cyber shop? Anything more than 30 words and you’re too long on the verbiage.
• Don’t use the same key words over and over. Spiders get the idea, so you don’t need to repeat a key word or phrase more than once for impact.
• Write your Description Tag text to appeal to a human brain rather than a digital brain. Think of it is a short, little sell piece. It should be tight and compelling.
• Check for errors. A simple typo may change the spider’s perception of your site from one that sells mics (as in microphones) to one that sells mice (as in rodents).
• Work in key words so they sound like a natural part of your site description. Position your most important key words ahead of secondary key words.
• Create several Meta Description Tags, one for each page if the content differs. There’s no rule against it, and you might pick up some additional notice by spiders, placing your site on SERPs for a number of different query words (the words entered by the user to initiate a search).
• Experiment. If your Description Tag text isn’t pulling in the high-quality, motivated visitors you’re looking for, conduct a little more research on key words, rewrite the site’s description and track results, better or worse.

If you aren’t sure about just how to optimize your HTML Tags, hire a consultant to do some key word research for you and develop the golden list of key words you want to use in your Tags and site text. It may cost you a few bucks, but it will also bring in more visitors and more highly-motivated buyers — quantity and quality. And all that from tinkering with a few HTML Tags. It’s definitely worth your time and/or money to get it right.

Whether you’re an e-tailer, site designer/developer/marketer, a site host, a Google shareholder or just someone who downloads tunes to his I-Pod, you want Internet standards (though you may not realize it).

Ever since the Internet became the Internet, there’s been a strong need for standardization of I-net protocols — a uniform code, a set of rules and regs that applies across the full spectrum of e-commerce — from developer to seller to consumer. Why? Use some off-brand, proprietary software to construct your site and six months from now, you won’t be recognized by certain browsers, or visitors to your site will have to do a hard reboot because their computers lock up when they set foot in your cyber-store. Without standardization, e-commerce will continue to grow in different directions using a variety of standards — different programming languages, different or improper use of existing program metrics, or worse, personal preferences that become outdated by lunchtime. So, what are the benefits of open standards across the board? There are a lot of them.

Durability
When you spend beaucoup bucks to have a site developer design your e-commerce enterprise, you want it to be as viable 10 years from now as it is the day you launch. Compliant standards will ensure that your XHTML title tags are still recognized in 2015 by the great-grandson of Google — SuperMegaGoogle III.

Broad-Based Benefits
You don’t know who’s going to drop in to browse your site. You won’t know what capabilities their computers have, what browser they’re using or how computing will change. I-net standards are designed to provide the most benefits to the most web users as possible. This will better enable hardware designers and manufacturers to equip computers with the technologies agreed to via I-net standards.

Site Access From Cell Phones, PDAs and ESP
Who knows what the future holds for the world of e-commerce? Open standards will enable sites to be accessed by a variety of devices — cell phones, wireless hookups, PDAs and, who knows, maybe even ESP. If we’re all working to the same set of standards, adapting web technology to other electronic devices becomes much simpler for the designers of those devices.

And, does anyone doubt that new devices will be developed, enabling you to access everything from your e-mail to the status of your Amazon order by way of your ATM, TV set, satellite radio, GPS or, yes, even ESP. (It could happen.)

Lower Development Costs
If we’re all writing lines of code using the same protocols, designers won’t have to spend the extra time to make sure their sites run and look good on AOL, Yahoo!, Ask Jeeves, AltaVista and MSN. Uniformity across the Net will ensure that a gif is a gif is a gif, regardless of what browser the user uses. Updates to existing sites will be simpler (read less costly) and won’t require some MIT brainiac to implement them.

Increased Flexibility
From site design and redesign, to hosting, to access, a standardized approach might seem to limit flexibility by adding constraints — a list of do’s and don’ts — but, in fact, just the opposite is true. Here’s an analogy: writers (the good ones, at least) adhere to a set of conventions called spelling, grammar and punctuation. This enables all of us to understand and utilize what we read because in every case, a comma is used to separate items in a list.

Now, because these rules apply, writers can be sure the reader will understand the text, and because of that knowledge, writers actually have more flexibility in what they write. The same is true of I-standards — the spelling, grammar and punctuation of the Internet. The Internet is an amorphous, expanding collection of stores, information sites, entertainment and game sites, downloadable e-books and applications — the list is endless and still growing. If standards are applied across the board, as a collection of individual e-entities, the Internet will grow in new directions (increased flexibility), offering new, better, more useful services because the entire Internet community can focus on improving the Net as a whole, rather than spending time, energy and money making sure their piece of the Internet puzzle fits in its proper place.

So What Does This Mean to You?
There’s no law (yet) that requires the use of open Internet standards. It’s a voluntary movement, as it should be, but a movement that is gaining momentum and support from the entire Internet community. There’s an “It’s about time.” sentiment that pervades e-commerce and support industries, such as digital design and development.

The World Wide Web Consortium, better known as W3C, is made up of expert, professionals from the four corners of the on-line world, and together, these opinion leaders have compiled and published a list of standards as a starting point — a first step, if you will. The list (shown below) establishes a standard language, coding protocols, and a list of what W3C calls ‘best practices’, which include the validity/viability of code, the use of semantically correct code and code that is accessible to everyone from designers and site owners to browsers and non-computer electronics.

So what does all of this mean to you? Well, if you’re planning to launch a site of your own, determine that the designer you’ve chosen is up-to-speed on these standards and, more importantly, understands that you want your site constructed to these standards.

If you’re a site developer, it means that you might have to pull out your old HTML manual to brush up on your semantics. An essential aspect of open standards is the development of semantically correct codes, using HTML operators for the purpose they were intended, while avoiding the creation of HTML elements intended to have the appearance of something else, i.e. using a paragraph element to generate a list instead of actually using a list element. Think of HTML semantics as the rules of grammar for coding. You may not want to learn them, but they’re a necessary aspect of your profession.

Finally, if you’re just an Internet user, web surfer, downloading consumer, you really don’t have to do anything except sit back, wait for uniform standards to take hold and get more from your on-line experiences than ever before. Access, stability, durability and an end to planned obsolescence. With voluntary, open standards, your 10-year-old browser will still be tracking down the sites you’re after — no upgrades required.

Open Standards Developed by The World Wide Web Consortium (W3C)

Structural Languages:
Extensible Hypertext Markup Language (XHTML) 1.0
Extensible Markup Language (XML) 1.0
XHTML 1.1

Scripting Language:
ECMAScript 262

Presentation Languages:
Cascading Style Sheets (CSS) Level 1-3

Additional Presentation Languages (Markup):
MathML 2.0
Mathematical Markup Language 1.01
Scalable Vector Graphics 1.0

Object Models:
Document Object Model (DOM) Level 1 (core)
DOM Level 2

In many respects, the world wide web is pretty much a wild place with spotty oversight and more scallywags and neer-do-wells doing shoddy work, trying to beat the system and increase their PageRank and presence — oh, and increase sales, too.

Then there are the problems of compatibility — you’ve got such a large code set from which to choose — HTML, XHTML, XLC, et al, that compatibility issues will only continue to confuse the matter more.

Imagine the world of widgets, a niche market but one with potential. Any way, all the widget makes get together one day and agree that from henceforth all widgets will only be constructed using #3 hex bolts. What a break-through in the manufacturing of widgets. Unit costs drop because no special bolts are needed. Interchangeability becomes easier. Upgrades are a snap and, in one very obvious sense, the world of widgets has become-just a little bit closer.

Anyway, you get the point. There are business benefits — today — to jumping on the bandwagon and starting to use open standards in your site development work.

Look, here’s how it breaks down, strictly from the bottom line POV:

Increased Accessibility
Using open standards in the development or upgrade of your site increases user accessibility by eliminating incompatibilities in older browsers and by being compliant with the protocols of cellular e-mail and the integration of other communications systems — today and in the future.

In other words, by designing your site to be compliant, you’re making it easier to adapt to new technologies as they become available:

• access to your site from your cell
• e-mail from anywhere, any time
• easy access to the ever-more popular hand-held computers (which work with a full-bore Windows OS)
• on-line order-taking from cell phone customers

All of these integrated functions have any easier time finding your site when it’s been built to industry standards. It brings just a bit of law and order to the lawless www.

Up and Running Faster Simplified Maintenance
One aspect of open standards involves separating XHTML (the text) of your site from the graphic elements. This allows for just about anyone to develop the text using simple meta tags — <div>, <p>, etc. So what? Well, with tags pointing to a Cascading Style Sheet (CSS), you’ve begun to super-charged your site.

In addition, the client can easily develop all of the text and back end content while the designer is putting together the architecture. By divvying up the work, and with parallel site development you ensure that your site is up and running sooner — an especially critical consideration when you’re financing this out of your own pocket and it’s time to get some inflow to offset the outgo, or at least slow down your burn rate. In other words, open standards will make site design more efficient, easier, faster and less costly.

On the maintenance side, a uniform set of building modalities will ensure easy maintenance and revisions to any site. Modules that conform to the site standards can be plugged in quickly (read cheaply), changing the look and lowering the cost of routine site maintenance.

More Sites in Less Time
Web-compliant browsers have forced site designers to rethink everything from the bottom up. These browsers’ (now approximately 95% of all browsers sold today) use of open standards has forced us all to discard the old rule of ‘every site for itself’ and begin the process of standardization.

From the purely proactive perspective, many clients are setting up multiple sites for various test marketings, among other things. So, a standard code, used by the entire hard hat I-net population simplifies replication of sites within different SEs. In other words, open standards will allow you to do more work in less time because you won’t be confronted with compatibility hassles.

Reduced Hosting Costs
By segregating text from other site elements, and by eliminating extraneous under-performing site functions, you’ll take up less cyber space, lowering your monthly costs for hosting services. In effect, open standards are more efficient standards and as such, will lower bandwidth, saving you money every month — money that adds up over time.

Much Happier Visitors
A site that dogs loading the home page doesn’t bode well for visitor or site owner. Only 5% of visitors have the patience to sit out a 30-second download — 5%! Now, sure, broadband has made the problem less of a problem, but there are still a lot of users still running old, clunky, dial-up modems.

By simplifying code and optimizing your site for speed, each visitor will have a more positive experience. No one wants to wait for downloads any more. Simplify and give your site some impact — without losing anything in the way of appearance or user features. After all, even on the www, the customer is always right.

So Should You Or Shouldn’t You?
You’ve got a site. It’s up and running, no complaints about traffic, it looks good and you spent big bucks getting it that way. And changing over to open standards — HTML, XHTML and CSS is going to be a costly proposition — not millions, but more than putting on a new roof. So, the question becomes: should I spend the money to develop a compliant website, or hold on to what I’ve got?

Obviously, only you can answer that question depending on your site income, current PR, inbound links and other cyber considerations. But do bear in mind that the movement to establish open standards for site development isn’t losing steam. In fact, it’s gaining momentum.

Is it something you have to do today? No. Next week? Uh-uh. Ever? Yes. At some point it’s going to make quantifiable business sense (read more $$$) to develop a standards compliant site. Do it now and enjoy immediate benefits — faster load times, a more vigorous, active site, an improved visitor experience, lower bandwidth costs and adaptability in the future.

Imagine. You’re strolling through the mall one day and, off in the distance, you see what looks to be a really cool store called Gizmos and Gadgets — just your kind of place. So, you walk toward the store, but as you near the front door, you see a big pile of cardboard boxes blocking the entrance. You scratch your head and look for a way through the maze, but there’s no obvious course. So, what would you do? Would you climb over the obstacles to get into the store? Or would you just move on to Wal-Mart?
Fade Out.

Fade In. You’ve just done a Google search to find some quilting sites (no one has to know) and the first few listings look like just your cup of tea. So you click on the link, the screen goes blank and the dreaded blue line begins its painfully slow crawl across the bottom of the screen. So, are you going to wait for the landing page to download — a good 15-30 seconds? Or, are you going to hit the back button and click on listing number two? Let’s face it, we’re an impatient people and when we want something, we want it now- not 15 seconds from now. As Homer Simpson once complained, “Isn’t there anything faster than a microwave?”

As the owner of an Internet site, you have enough to worry about. The new Hilltop algorithm (the formula that determines where your site appears on the results pages when a user queries Google) dropped your PageRank (PR) from an 8 to a 5 (not good) while you slept last night. Your site’s been hacked six times in the past two months and, despite a great looking site, crammed with top-notch information and goods and services for sale at reasonable prices, your aren’t turning visitors into buyers. Could the problem be inappropriate key words, unrelated links, a confusing checkout process — or could it be something much simpler — something like the page weight of your landing page? Hmmm. Could it really be that simple? You bet. Here’s how.

What is Page Weight?
Page weight, simply put, is the size of any page within your site measured in kilobytes. Okay, that’s easy.

The programming and design of your site contribute to page weight, which in turn contributes to how many visitors actually suffer through endless download times. Some of the factors that add to a page’s weight include:

• the number of HTML files on the page
• the number of images (gifs, bmps, jpgs, etc) on the page
• the number and size of video files (if any)
• the number and size of audio files (if any)
• Flash animations
• page design and programming

So, what’s the big deal? Well, page weight has a direct correlation to the download times of your landing page and every other page within your site. Now, you might not think download times are all that critical but survey information tells a different story.

Check out the download times for different weighted pages based on the connection speed of the user. The results are surprising and important to the success (or failure) of your site

So, you’re asking yourself, “what’s a few seconds of wait time among friends”, right? Well the difference in download times has a direct impact on the number of visitors to your site who actually stick around while the blue line makes its slow crawl from left to right.

You might call the following chart the ‘Impatience Index’ because it measures just how many users are willing to stick around while your landing page ever-so-slowly appears on their screens.

The Impatience Index

If these numbers don’t surprise you, they should. Consider the typical dial-up user with his 56 Kbps connection speed. A landing page with a weight of 100Kb is going to take at least 13 seconds to download under optimum conditions. (In the real world, that 56 Kbps connection speed is usually closer to 48 Kbps due to phone line noise). That means the difference between an 84% retention rate versus a 51% retention rate — a difference of 33% of all you site visitors have already moved on after a few seconds of download time.

And check out the difference between a 10-second download and a 30-second download. That 20 second difference can cost you up to 79% of your visitor traffic. Still don’t think page weight is important — essential — to the success of your site? If you’re losing 79% of your traffic due to the weight of your landing page, there’s only one solution. Lower that landing page’s weight.

Let’s take a closer look at the benefits of optimizing page weight on your site.

Higher Visitor Retention Rate
Just as the lean, mean marathon runner will finish the race hours before her bloated, overweight competitor, a lean, mean landing page will load faster than a page heavy with multiple HTML files loaded within frames, an audio/video presentation and nested charts and graphs. So, the most obvious benefit to trimming the fat is faster download times and fewer users searching for other avenues (links) for the goods and services they’re seeking. What good is a PageRank of 8 (very good) if they can’t get into the front door? If less than half your visitors are actually getting onto your landing page, you’re site isn’t as effective as it could (should) be and, quite frankly, you’re losing a ton of revenue due to lost sales. Hey, this reason alone is reason enough to lower your site’s page weights. But wait, there’s more.

Visitor Comfort
If you owned a brick-and-mortar business, you’d want your customers or clients to be comfortable — a clean entrance, good lighting, a little Muzak playing softly in the background. Well, the same is true of visitors to your site (except for the Muzak part, you can lose that). You want your visitor comfortable, not irked at a 60-second download. You want those visitors to be in the mood to conduct business, whatever that business may be. Reducing page weight reduces load times, which reduces visitor stress, which increases site activity.

Higher Visitor Conversion Rate
It’s one thing to retain a visitor on your site. It’s quite another to convert that visitor to a sale or some other form of new business. Faster downloads will encourage visitors to stay on your site longer, viewing more pages and generating increased interest in your product or service, whether it’s hand-made clothes for boa constrictors or financial advisory services. It doesn’t matter. A comfortable visitor is much more likely to become a new customer or client.

Meeting Market Expectations
As Internet buyers of goods and services have become more savvy, they’ve learned to identify quality sites from garbage dumps. These buyers have certain expectations of the businesses with which they do business and the sites these businesses use to represent themselves. Put up junk, cheesy clip art, downloads long enough to let you do the laundry, and you’re not meeting your market’s expectations. Internet commerce is no longer a novelty when anything looked good. A smart surfer can tell good from bad within 10 seconds of linking to your site. If you look bad, you are bad on the Net.

Higher PageRank
The recent Hilltop Algorithm has transformed the user search function and, in the process, forced web masters and e-commerce pros to rethink their search engine modalities. Wasn’t too far back when key-word density was the end all to be all, but the Hilltop algo changed the search parameters. And though they’ve maintained their usual stony silence, the nice folks at Google seem to have adapted the Hilltop algo based on numerous test searches. That means, the 800-pound gorilla of search engines doesn’t give a hoot about keyword density any more (well, maybe a little hoot). The new SE model is configured on completely different parameters.

Site traffic is still an important component. So, sites comprised of pages with clean, solid code — pages that attract visitors and exceed their expectations — will invariably receive higher PRs because they’re getting more visitors who stay longer and who return to the site. Higher PRs contribute to more visitor traffic and that enables you to charge higher rates to sites with outgoing links from yours.

Lower Bandwidth Charges
If you’re running a high traffic site, pages optimized for lower weight, can save a lot of money on bandwidth charges. 100,000 pages of 150Kb weight will need twice the bandwidth as the same number of pages at 75Kb. So, if your ISP charges by the amount of bandwidth you use, or hits you with overage charges, reducing page weight can save you big time on your monthly bandwidth charges.

10 Proven Techniques to Lower Page Weight
The key, then, to retaining visitors and converting the window shopper to a buyer is to reduce the page weight on your site, making it easier and faster for each visitor to navigate your site. So, let’s give a look at some simple steps that can be implemented quickly and easily to keep traffic up and page weight down.

1. Remove the Excess. Step one is to remove all non-essential elements on your site’s landing page. Many landing pages are so crammed with text, Flash animations and other bells and whistles that the first time visitor is actually overwhelmed with sensory overload.

Consider taking the following steps:

• remove all video files
• remove all audio files (very distracting and not very effective)
• remove unnecessary gifs, jpgs, bmps and other graphic elements
• pare down unnecessary text

2. Use Cascading Style Sheets (CSS) to significantly reduce load times. In addition, CSS designs offer additional advantages:

• CSS facilitates future compatibility as coding and technology change in the years ahead. Depreciated elements such as the font tag, the center tag, the background element and the body tag will no longer be supported by browsers in the future.
• CSS is the most effective means to separate content from your site’s presentation elements. This means that to change site content, you would need only to modify one file. To change the elements of presentation would require changes to another file called the style sheet. In other words, you can make changes to your site without tearing everything out and starting from scratch.
• Because of the flexibility of using CSS, you can create different style sheets for different applications and media such as the Web, printer-friendly download pages, PDA text, etc. CSS modeling also enables you to create different style sheets for different Web browsers like Internet Explorer and Mozilla.
• CSS reduces file size (and therefore download time) by decreasing the amount of markup in the HTML while eliminating the need for unnecessary page elements such as one-pixel spacer images, multiple font tags, nested tables and similar items. (And if all of this makes your head spin, not to worry. There’s software to help you with site optimization across the board. And of course, there are experts in handling this streamlining of your site for improved access by visitors.)
• CSS puts global control in your hands. Change a single property or element in the external file and it changes the look of the element across the entire site. (Changes are easier using a CSS design.)
• CSS speeds updates to your sites design. No need to rewrite the entire HTML code; you can simply make the change in the style sheet.
• CSS provides greater control of the placement of elements on your pages. Font size, font color, location of text and other basic elements of design can be changed faster and at less expense.
• Finally, and this is key, CSS allows you to position your most important content near the top of the page while less critical elements (navigation tools) will appear at the bottom of the page. The CSS coding directs the browser to the key content which allows search spiders to find the most relevant and important information first. In turn, this ensures better search results for users looking for specific content within your site.
• To get a better feel for the potential of CSS page design, visit the CSS Zen Garden located at http://www.csszengarden.com/

3. Avoid frames. Not only do framed pages load more slowly, some SEs (search engines) don’t index framed pages correctly, which can skew your PageRank — and not necessarily for the better.

4. Avoid nesting tables. Inexperienced Web designers often use tables inside tables for the sake of a good-looking layout. However, this increases download times. You’re much better off using a single, well-designed table. Further, using CSS will usually enable you to eliminate the need for using tables as an element of your page format. (See above.)

5. Compress all graphics and images. jpgs, gifs and bmps often contain extraneous data that isn’t needed for the proper display of these images. Another time saver for the visitors to your site.

You might want to check out the following design tools for help in this area:

• Image Compressor:
  http://www.spinwave.com/
• GIFCruncher:
  http://www.webreference.com/services/graphics/gc

6. Use height and width attributes for your images. This will allow the page to appear on screen before all the images are loaded. This is especially true in the case of older browsers.

7. Eliminate extra ‘white space’ in your code. Every space, every tab and every new line character in the HTML code requires extra data, increasing download times. Some page-design software (Dreamweaver, for example) eliminates white space for you. Using these tools before you upload your pages will often eliminate several Kbs of unnecessary data from each page.

8. Break up long sections of text. First, big blocks of text increase download times. Second, they’re difficult to read without breaking up the text into smaller, bite-sized pieces. Thus, consider breaking long pages of text across several pages. Your pages will load faster and your visitors will have an easier time reading through the text.

9. Clean up your code with development tools. There are a number of free and commercial tools available online that will clean up your code which, in turn, will reduce page weight without having any impact on the pages’ displays. Here are some helpful tools available for the do-it-yourself Web designer:

• Web Developer ToolBar:
  http://www.chrispederick.com/work/firefox/webdeveloper/
• NetMechanic:
  http://www.netmechanic.com/
• Dr. Watson:
  http://watson.addy.com/

NOTA BENE:
Before using any of the above-listed tools, first make a backup of your existing pages since these software packages can alter code, producing errors you don’t need.

10. Finally, know your target demographic and design for specific connection speeds. For instance, if you’re developing a B2B site, you can feel more confident that your users will have DSL connections, currently more prevalent in the business world than in the homes of consumers who tend to still use their dial-up modems. Thus, you can create greater impact with shorter downloads knowing that the majority of your visitors will be using higher connection speeds.

Believe it: a few, small improvements to the overall page weight of your site can deliver substantial improvements to your visitor retention rate, conversion rate and to your PR rank, moving you up on the results page generated by a user query. And, since most SE users rarely look beyond the first or second page of search results delivered by any SE, getting your site listed higher in the results page is a guarantee of increased site traffic. And, that gets us to the bottom line — increased revenues from a more efficient, professional site — something we’re all trying to achieve.

Snake Oil Salesmen, Gunslingers, Bandits and Galoots
If you’re new to the world of cyberspace, and looking to build yourself an e-business, think of the Web in much the same way as you’d think of the Old West. Law enforcement is spotty, rules and regulations are inconsistent and the landscape is populated with bandits, snake oil salesmen, gunslingers and other galoots out to hoodwink the tenderfoot just off the stagecoach — you!

Chances are, as the new dude in town, you don’t know much about Web site design, implementation, maintenance and connectivity and so, you’re farming out this critical phase of your new business endeavor to someone more experienced, someone who knows his HTML from a hole in the ground and — someone you don’t know at all.

Maybe you’re about to outsource the project to a bandit or a snake oil salesman who talks in a language filled with gibberish — HTTP, XML, spidering, landing page and other jargon of the Internet world. Whoa, hold up there, pardner. Before you pump a bunch of greenbacks into your project, you’d better take a crash course on surviving in this strange, new world. After all, you don’t want to make costly mistakes at the outset of your venture — mistakes from which you may not cover. Boot Hill in Cyberville is filled with failed e-businesses and without a bit of preparation, yours could be the next tombstone.

So, what do you look for? What questions do you ask? And, how do you measure the success of the company or individual who stands to make or break your e-dreams a reality?

You Are the Boss…
Even if you don’t know an SE algorithm from a six-shooter, you’re the guy with the checkbook and that automatically makes you the boss. You call the shots, you direct the activity and you set the bar, so where to begin.

• Start by creating a list of what you want (or need) your Web site to do. Just looking for an e-billboard with some contact information? Easy, and in the competitive market of Web design firms — inexpensive.
• As you develop a list of site needs, consider your business model. Do you want customers to be able to purchase and pay for your offerings on-line? Do you want dancing text, video clips of your office, a help line and other bells and whistles?
• Before you contact a Web site design firm, know what you absolutely must have, what you’d like and what can wait for until your first million rolls in from the sale of your goods or services. You can always add on later — at a cost.

…But You’re Still the Tenderfoot
It’s up to you to set the requirements for your site. By defining these requirements, you stand a much better chance of getting a final product that will meet your standards, cost less to develop and enable you to verify the quality of your e-business by measurements that can actually be measured — important things like the generation of new sales revenues and an ever-expanding client or customer base.

Open Standards and Why You Need Them, Want Them, Love Them
Uniform standards for the development of Web commerce sites work to your advantage and, parenthetically, improves the Web as a whole. If you’re old enough to remember the rancorous battle between Sony’s beta format and Philips’ VHS standard back in the early days of the video wars, you can understand the importance of uniform, open standards because your Sony Beta tape was incompatible with your VHS deck, and we all know how that battle turned out. When was the last time you saw the local Beta Barn? That was one business owner who made the wrong choice with regard to standards and today, Beta video is as relevant as 8-track cassettes.

In recent years, industry professionals have been advocating standards compliance on the Web. Think about it. With uniform standards and protocols across the entire Web community, professional site designers and software developers can build ever-stronger applications, shoring up the underpinnings of the entire Web world. This site can talk to that site. This consumer can move with ease from one site to another, no worries about incompatibility — it’s all standard and it’s all open, available information.

Will Your Site Be Outdated By Lunch Time?
In the olden days (that’s 5 years ago), with varying Web standards, diverse web site software and a host of compatibility issues, keeping up to date with the latest site architecture and programming was difficult — actually impossible. And this caused many sites to lose business, revenue and the sanity of the site’s owners.

However, that’s begun to change with the growing implementation of uniform standards using technologies developed by the entire Web community — programmers, site designers, Web masters, e-tailers, Internet Service Providers (ISPs) — the cyber landscape is changing and law and order has come to the Wild, Wild Web. Currently, close to 500 IT companies, organizations and Web-savvy individuals have contributed their knowledge and experience to develop the W3C standards that are fast becoming the uniform standards for the entire Internet.

The efforts of W3C, and similar Web world consensus builders, are adapting standard site architecture, while ensuring that diverse design and implementation technologies mesh to work together, thus creating uniformity and state-of-the-art protocols and modalities.

So What Does This Mean to Your Cyber Biz?
Go with outmoded site architecture, and changing six months from now is going to cost you beaucoup bucks. Choose the wrong messaging protocol and at least some of your clients or customers will get a “busy signal” when trying to reach you to ask about a simple billing question.

Changes in Web technology occur with each passing nanosecond. That’s why, before you contract with a Web design firm, you want to make sure that you’ve got a Web compliant site — one that can be adapted easily and inexpensively to the next, great new innovation.

On the other hand, if your site is built and maintained using the recognized, open standards for development and connectivity, your site and all of it’s functions will be understandable to any competent design firm. That’s just one of the beauties of open standards: you won’t be stuck with outmoded technology, updates and revisions can be handled by any knowledgeable chiphead and you can either back- or forward-engineer your site for optimum compatibility. Why? Because you’re using uniform, industry standards. Here’s a quote from the W3C Quality Assurance Web site that explains it in a nutshell:

“Because (uniform) standards are built to be combined, developing new applications from an existing base is much easier: the tools to manipulate open technologies get more sophisticated, more numerous, and more powerful all the time. Moving your (existing) Web pages to XHTML, for instance, means that you can easily transform the data to other formats using XSLT, or ask for a powerful publishing system with validating mechanisms using XML Schema. And for each of these operations, you can choose from a wide range of tools from many different producers.”› W3C Quality Assurance

Now, isn’t that just what you were thinking? No? Well how about the use of CSS — Cascading Style Sheets that enable you to segregate your screen presentations (the stuff visitors actually see upon landing on your site) from the underlying programming that is actually used to create this storefront for the customer. This saves money when you change your text or on-screen images (gifs, jpgs, etc.) and, by using CSS technology, you’ll save on bandwidth costs each month, meaning a smaller bill from your Internet Service Provider (ISP) each and every month. And though you may not know CSS technology, the design firm you hire to construct your site sure enough should.

Are There Even More Benefits To Using Open Standards in the Development of My Web Site?
We thought you’d never ask:

• Open standards allows your design firm (and consequently you) to benefit from applications and methods that have been widely tested throughout the Web world.
• Open standards are verified to ensure the widest accessibility to your site.
• Open standards greatly simplify and reduce the costs required in the creation and support of web applications or dynamic web sites.
• Open standards are becoming internationalized meaning you’ll be getting orders and inquiries from Albania to Zimbabwe.
• Open standards are being incorporated into hardware, creating something called device independence — meaning your site can eventually be accessed by cell phone, wireless PDAs and, if necessary, by two tin cans connected by a string.

So What Should You Include in Your RFP?
Putting together a Request for a Proposal (RFP) is an excellent first step in getting the site you want and the features you need today and in the future. Here are some of the specifications you should insist on for deliverables:

1. Only use valid HTML. HTML is used by browsers to find your site. It’s the industry standard and will be for the foreseeable future.

2. Use Cascading Style Sheets throughout. Again, this enables you to change the appearance of your site quickly and easily, without ripping out large chunks of architecture or code.

3. Only use SVG and PNG for presentation of graphics and other images. These formats load faster and provide a lot of options for your site designer. BTW, don’t worry about SVG or PNG — any good design firm will use these formats as standard practice.

4. Insist that your site be accessible by all current and future means. Wouldn’t it be great if customers could access your site through a local ATM? Or by cell phone? Imagine the boost in traffic that access technology would deliver.

5. Make sure that your design and development firm uses only standards scripting languages. Again, this increases accessibility today and facilitates easy updates next week. This is an important consideration if you anticipate regular updates and changes to your site. (ON SALE THIS WEEK ONLY! BUY! BUY! BUY!)

6. Insist on approvals at all critical steps to ensure that you’re getting the site you want. Designers can use a variety of tools (software) in the development of your site and you want to work with a company that’s willing to listen to your needs, conform to your values and hold your hand throughout the entire process.

7. Be sure to include in your RFP, guarantees from the provider that revisions, debugging and other “must haves” are included in the final price. Even the best firms will need to tweak and will do so gladly. The worst firms won’t tweak once the check clears and you want some recourse.

Well, pardner, that about wraps it up here from the Wild, Wild Web. But at least now you know the importance to your future e-business of using open standards to grow your Web site as your grow your bottom line.