First a definition:
“Foveal View” — The area of visible space where the user is best able to focus with maximum detail. The point here is that outside of the focal area the eye (and therefore the mind) is not perceiving color nor as much detail. Understanding this concept cascades into the takeaways that follow.

Now some highlights from Andy’s portion of the video + my two cents:

1. The traditional marriage to 800×600 optimized design is really on it’s way out (as many people have noticed looking at their site statistics). Instead wider screen layouts not only bring more content above the fold, reducing the amount of scrolling required to use a page, but they also compliment a user’s natural behavioral desires while using a site,
2. Page elements should be organized in such a way that relevant blocks of information are near each other so that the brain can make logical associations and accurately assess relevance while scanning a page,
3. “Information Blocks” should be wider than tall for easiest consumption — again this is in step with the wider layout point above,
4. Typography & whitespace use (contrast) are also as important as ever; when properly used they create a guide to lead the eye through blocks of content in the body of a page or in navigational areas.
5. Group navigation items to contain 7 +/- 2 options per group. This avoids forcing the user to stop and process the information. In other words, use this principle to create at-a-glance usability in your navigation, which is vital to conversion.

Heat mapping sites like the following are useful in understanding the result of the eye/brain interaction. Use the insight above to review your design and your heat map results to identify problem areas in your user interface design. Here are some popular tools:

• crazyegg
• clickdensity
• ClickTale

Let’s not forget Google Analytics (Urchin) is useful when using the "Site Overlay" view in also seeing which anchors are most clicked in your site.

However, what we’ve long called “EBO” or Eyeball Optimization is explained masterfully by Andy — Well done!

Since I’m not sure how long that video will be in place so here’s the “permalink.”

The motifs found in sites like the following go far beyond their community driven content:

• craigslist by Craig Newmark & Jim Buckmaster
• friendster by Jonathan Abrams
• meetup by Scott Heiferman, Peter Kamali & Matt Meeker
• Linkedin by Reid Hoffman
• Last.fm by Martin Stiksel
• Feed Burner by Dick Costolo
• digg by Kevin Rose
• technoratti by David Sifry
• del.icio.us by Joshua Schachter
• flikr by Caterina Fake & Stewart Butterfield
• YouTube by Chad Hurley, Steve Chen & Jawed Karim
• the list goes on and on…

Many of these sites have been around for more than a decade and ultimately changed the paradigm of how we use the web, (Tim O’Reilly discussed after the fact in 2005). However it wasn’t until recently that the trends in design that began with these sites finally gave birth to new design sensibilities as well.

Not too long ago, building a community online just meant that people bookmark your site and visited it frequently. Perhaps a site owner pumped out some newsletters to drive subscribers back to the site or partner sites had links to your properties to remind various visitors that you exist. When RSS appeared, it helped people stay abreast of the latest content pushed out from content owners. More recently we work and play in a world where the community owns the content, and if they are so bold, the site owners are only moderators (and the guys that pay the web hosting bills). Great examples are the Wikis (well done Jimmy Wales) we all know and love — good old “folksonomy“. Having said that, we’re also in a world where anyone’s voice can be heavily syndicated and tagged as worthy of note, which is a beautiful thing…

Let me get back to the point before I get lost in the history of forums as the original online communities. Now that a community can control the content and determine what is relevant and important, the visual language that we as web designers are now using has changed significantly as well. Today we communicate instead of decorate (as Phil Brisk put it so succinctly) with design aesthetics — with the focus on content, that’s exactly how things should be. A nice post at webdesignfromscratch.com discusses this trend pretty well imho. These design trends have finally even cascaded into corporate design sensibilities which once accounted for the majority of the design work we designers are asked to perform.

Characteristics like:

• a focus on typography,
• larger font sizes in navigation and copy,
• use of white space and centered page positioning,
• graphically rich layered layouts often using some 3D design elements or icons,
• layouts that compliment the copy in a page and showcase it with sharp color accents where appropriate,
• diligent use of CSS and table-less markup with a demonstrated understanding of semantics, accessibility, usability and open standards

It seems to me that also the DDA legislation in the UK contributed to the “Web 1.5″ as markup that used standards, semantics and exhaustive CSS designs began to take hold and foster a renaissance in the approach to usable and accessible site design. We still don’t see the abundance of layouts that are designed for a resolution higher than 800×600, but this trend is mostly a function of the audience for many of the clients out there looking for our services. In custom business web design, there are of course a number of restrictions that deter us from employing a wider fixed-layout, perhaps that will change as well soon enough.

Thanks to all of those folks highlighted in this post for enabling me to support my thoughts on custom business web design with supporting opinions. I hope this blog will be a destination in the community soon enough.

There’s a lot more to site design that choosing some attractive colors and a cool font. In fact, one of the most important considerations is often overlooked by first-time site owners. Content architecture. Where does content appear? Why on that page? How much is enough? What is the objective of the content?

If you haven’t thought about these questions (and many more) you may get lucky, but it’s not very likely. If you don’t consider content architecture in the design of your site, your site won’t perform at optimized levels. It’s as simple as that.

IMPACT: The Importance of Content Architecture
The value of a solid content architecture is, quite simply, the impact it has on visitors. Visual impact. Emotional Impact. Motivational impact. It’s all got to be there. Hi-impact elements?

Attention grabbing headlines.

Short, blocks of simple text. Short sentences.

Hi-impact verbs: Discover, Learn, Save, Earn, Uncover & so on.

Lots of sub-headings that lead the eye from top-to-bottom, left-to-right on each page.

Useful graphics that support the brand or products (not stale, seen-it-before clip art).

Clear, hi-resolution product pix (not something you shoot on the kitchen table).

A logical, easily discernable flow of content & sales copy, interwoven to clearly point out the product or service benefits, i.e. define (or create) visitor’s needs then meet those needs.

Use bulleted lists to present lots of facts in an accessible format.

And finally, throw the punctuation & grammar handbook out the window. Avoid punctuation. Periods and a stack of exclamation points provide stopping points for readers and you don’t want them to stop reading.

Why Is This Important To Me?
You’re launching (or redoing) your site for some reason — to sell products, to market services, to spread the organization’s mission statement or, perhaps a combination of reasons. Regardless, the reason(s) you’re considering a web site or revision is your objective for the site.

Can you state your site’s objective succinctly? In a single sentence? You should be able to sum it all up in just a few words. Then, with your site objectives firmly set, you can go about the business of developing and placing content, i.e. designing the site’s content architecture.

Without a crystal clear site objective, you won’t know what text to put where. Take the time to define your expectations and objectives before moving ahead with any matters of site design.

Why Is This Important to Visitors?
Visitors come to your site for one reason — content. If you’re selling running shoes, visitors expect content related to your products. This, of course, starts with clear, detailed product descriptions and pictures of each pair of Nikes. No pictures, no sales. People like to see what they’re buying (a big part of content architecture).

But visitors today want more than clear, clean product descriptions. They want informational content — useful information on running as a sport, as a discipline, as part of a healthy lifestyle. Not sales hype, just good, accurate, useful information.

Enhancing the Visitor’s Experience
That’s what we’re really talking about when the subject of content architecture comes up. How can you make the visitor’s on-site experience better, easier, faster or more fun? For example, from the home page, how many clicks does it take to find a specific product with a detailed product description? If a visitor has to click through one drilldown screen after another, at least some of them are going to give up.

Placement of content, so that it’s easily accessible, is one way to enhance the visitor’s experience on your site. That means lots of tabs, links and breadcrumb trails to keep visitors on point.

Many sites separate promotional content from informational text. They employ an ‘Archives’ link or a ‘Resources’ tab. This helps in more clearly delineating the purpose of the text in the minds of visitors and to SE spiders that visit your site regularly.

Why Is Content Architecture Important to SEs?
Despite the complexity of today’s SE algorithms, SE bots aren’t bright. They can’t make subjective judgments or decisions about content, they can’t define relationships between different bodies of text and they can’t always find new content, especially when it’s buried deep inside the site.

But there’s lots you can do to better equip SE spiders to accurately assess and index your site with a well-designed content architecture.

It all starts with the site’s design and the knowledge and competencies of the designer. For example, spiders read headlines so make sure your home page has clear headings and sub-heads. Use more than one column on your home page to present two or three headlines to site visitors in an easily-readable layout.

Highlight This Week’s Specials
Right there on the home page, above the fold. In big, bold type. That way, visitors can’t miss them.

However, make sure your weekly specials text doesn’t appear inside a jpg or some other non-text format. Text in a graphics image is invisible to spiders. Make sure key text is accessible to SE spiders by keeping it in a ‘readable’ format.

Identify and Refine
Using various visitor tracking tools you’ll be able to quickly identify problems in content architecture — anything from a dead end with no way out to an underperforming landing page.

Develop a sound content architecture, but be prepared to make adjustments and refinements based on real-world site metrics. Consider content architecture a work in progress. Try a new placement, monitor visitor reactions and adjust accordingly.

Balancing Bots and Eyeballs
SE bots don’t buy things. People do. So, first and foremost, your commercial site must have human eyeball appeal. It must capture the visitor’s attention and hold his or her interest long enough to make a few exploratory clicks to learn more about your site and products.

But if you ignore the SE bots, you may be only partially indexed, under-indexed or even mis-indexed based on search engine taxonomy, and that can be difficult to overcome. Content architecture must be designed for human needs and emotions and for the limited capabilities of SE spiders.

Only then can you fully optimize the attraction of your site to both bots and eyeballs.

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.

When you walk through the local mega-mall, what attracts you to one store over another? Is it strictly your needs at the moment, or is there more to it? Are you more likely to enter a store that’s light, airy and inviting, or one that’s kind of dark with narrow aisles and cluttered shelves? Eye appeal counts and there’s science to back that up.

For decades, marketing specialists have studied the buying habits of people shopping in brick-and-mortar establishments using everything from focus groups to 20- cent-off coupons on Nut Fudgies to see what works — and based on the accumulated data, these sell pros know what works. For example, you know those displays at the end of the supermarket aisles? They’re called end caps and they’re considered prime real estate on the shopping floor. In fact, manufacturers pay stores, or provide other incentives, just to get their ketchup displayed in an end cap the week before the 4rth of July. The store sells more, the manufacturer sells more and you’ve got 12 jars of ketchup in the cupboard. See, it work?

Marketing experts also know that products at eye level sell more than products on the bottom shelves and, again, eye-level shelf space comes at a premium. The next time you’re in the supermarket, notice where the Coke is shelved. It’s at eye level and the Coca-Cola Company knows it and offers stores a better wholesale price to get that shelf space.

Everything from the lighting (soft and natural, even if florescent) to the music playing in the background (tunes that wouldn’t offend my aged grandmother) are all intended to entice you to buy at the supermarket, jewelry store or any place else that takes plastic (or cash, for that matter).

Well, check this out: these same, time tested principles can be applied to e-commerce sites, and when they are, you create an on-line environment that not only delivers the products visitors are looking for, but provides a pleasant experience as well. And, guess what? When that happens, the visitor-to-buyer conversion rate increases — and you start showing more profit in less time. So, what can you do to make your site more tempting, more attractive and more user-friendly?

Let’s start with the basics. Know your buyer. If your target demographic is senior citizens, the dripping red pentangle against a black background is probably not your best choice of color motifs. Perhaps something in the pastel area, soft colors. On the other hand, if you’re targeting the 18 — 35 male buyer, hey, go with the pentangle. It’ll be something most of your expected foot traffic will recognize, and it definitely makes a statement. Colors count. Younger buyers want them bright, day-glo and totally wicked. The over 30 crowd wants something a bit more…mature.

Text should be easily readable by anyone. This involves three considerations: font style, font size and text/background colors. Choose an easy to read font — Arial or Times New Roman fit the bill. Looking for something with a bit more zip, try Verdana. It’s easy on the eyes and readable by people with vision issues.

Consider font size. Banners should be at least 16-point, 20-point if it’ll fit. And, use this as a general rule of thumb — any font size less than 12-point is strictly off limits — except for the fine print, legal, mumbo-jumbo which can be in 6-point to save valuable screen space. Who cares, as long as your site is street legal?

Finally, the combination of font color and background color is critical. Recently, we’ve seen a lot of light greens, pinks and other great colors but placed against a blizzard white background, causing the type to virtually disappear. You kind of have to guess where each link is taking you. Very frustrating.

Keep your home page simple and inviting. A cluttered home page or landing page can quickly lead to sensory overload and send any buyer screaming for the virtual doorway a mouse click away. Use large, well-labeled links buttons for ease of use. That’s what people want — ease of use. Forget your ‘artistic vision’, and forget everything you learned in graphic design for print. Keep it simple, understated, well labeled and well organized and visitors will be more inclined to stick around, browse and, ultimately, buy.

A site map is a useful tool, especially if you’ve got multiple links off the home page, followed by assorted drill-down screens before the user finds the product s/he’s looking for. A site map is easy to build — basically a plot of the site, with direct links to specific features.

A secure checkout is a must, even if you have to go the PayPal route. I-buyers are a savvy bunch so, no encryption, no sale. Your site should make it easy to shop with a checkable shopping cart that can be changed with a click, fast secure checkout, an invoice in the e-mail box (with conformation number, please) and you’re building a base of buyers who will be back because you had the goods and you made it easy, convenient and fun.

Give ‘em something free. Check out sites selling e-books and other niche information. You’ll often find a FREE 10-page report on “EVERYTHING YOU NEED TO KNOW BEFORE BUYING A TURTLE FOR A PET”. Naturally, the teaser provides just enough information to let the buyer know she now needs the $19.95 download on the ABC’s of Turtle Care. This also provides potential buyers with the opportunity to ‘opt-in’. The 10-page teaser requires the buyer to enter an e-mail address, thus opting in for additional e-mail from you in the weeks and months to come. That’s what the auto-responder business is all about — keeping your site’s name before the buyer.

With an opt-in, you can deliver a monthly newsletter, the tip of the week or even the daily horoscope, thus providing useful (or at least entertaining) information to keep your visitors’ awareness of your site high, and their feelings about you good. After all, you’re giving them something for free in the hope that they’ll be back to buy. Good will goes a long way, even in the cold, transistorized world of e-commerce.

Eye-catching, convenient, uncluttered, easy-to navigate, easy-to-read and something for free — it’s like a trip to the old local, corner market where Mr. Mishkin would give you a free Fireball when you came in with your mother.

There aren’t any tricks or secrets to increasing your conversion rate. Ask yourself what you expect from any store you visit. Then, translate your wishes to site features to accommodate even the fussiest buyer. After all, even in cyberspace — the customer is always right.

You can have the best-designed site on the planet, but if its design denies widespread access by potential visitors (and potential buyers) you’re going to lose business, as in $$$$$.

Accessibility begins with the use of open standards in the design of your site — standards adopted by the W3 Consortium to unify site programming to add both stability and durability to the Internet. By complying with these open standards, your site will be accessible to the widest range of I-net users employing the widest variety of means to track down your site. That means that a visitor using a 10-year-old modem and a 12-inch monitor will have access to your site just as easily (though more slowly) than the user who connects up on super fast Web TV. To learn more about the W3C open standards, see the article in the May, ‘05 archives. It’ll give you all the details.

But, there’s more to accessibility than the use of open standards. The fact is, you don’t know who’s going to be visiting your site, so you have to be ready for just about anyone. It’s a question of ethics, good marketing and the law.

Check this out: Over in the UK, in 1999, the government passed a law called the Disability Discrimination Act which states that all purely informational sites should be accessible by people with disabilities. The country’s Disability Rights Commission (DRC) has recently undertaken investigations into how well sites have complied with the 1999 statute.

While no such law exists in the US to date, it’s coming. As well it should. Just as we provide accessibility features to public buildings for people with disabilities, the same considerations should be given to Internet users with disabilities. And while the current and up-coming laws focus on informational sites, as opposed to commercial sites, you can bet that accessibility compliance will be a factor within the commercial sector of the Net as well. It’s simply a matter of time.

So, as a site owner (or soon-to-be-site-owner) what does this mean to you? Well, it means you need to expand your view of your on-line enterprise to offer the widest accessibility, so that people with vision problems, mobility problems and other disabilities can use your site as effectively and as easily as anyone else.

For example, does your site offer text that can be adjusted for size. Today’s mouse comes with a scroll wheel. When a user presses the control key and scrolls the mouse wheel, text size changes (assuming the browser and web site both have this feature). To see how this feature works for low-vision users, visit the Microsoft site at microsoft.com. Text can be made larger or smaller simply by using the scroll wheel on your mouse, making text readable to many more users.

Large links buttons, large type fonts and other adaptations can be built into the design of a new site, or updated on an existing site. But why go to the expense? Well, for one thing, it’s the right thing to do. You establish yourself as a ‘good Internet citizen’ by building an all-inclusive site — a site where everyone is welcomed. Would you vote down money to build a wheelchair ramp for your local library? Of course not. Building that ramp is the right thing to do, just as updating your site to make it more accessible is the ethically right thing to do.

From a purely business POV, increasing your site’s accessibility just makes good marketing sense. How many sales are you losing because elderly visitors can’t read your 8-point font product descriptions? How many potential visitors are you losing waiting for the 5-minute download of 10 Flash animations on their old Pentium 66 computers. Lots. About 50% of computer users upgrade every 3 years as newer, faster systems come to market. That leaves 50% of users still working with their 256 Colecos — and they’re not going to wait for that download. Oh, and you just lost another sale.

From a legal standpoint, a ‘right-thing-to-do’ standpoint and from a marketing standpoint, improving accessibility to your site just makes good sense.

So, to help you get started, here are some simple steps you can follow to improve the accessibility of your site:

• Review the W3C open standards (May, ‘05) and make sure your site is in compliance.
• Carefully examine each page of your site for readability issues. Small type, unusual type fonts and even color scheme all have an impact on readability.
• You don’t have to upgrade your entire site all at once. Start with the home page, move on to landing pages and work your way through each page over time. At least you’re moving in the right direction!
• When adding pages, determine that they comply with W3C’s accessibility standards.
• Beta test your site on a variety of systems, using different browsers, monitors and platforms.
• Use HTML or XHTML for all new site development to ensure the broadest access across the user spectrum.
• Use Cascading Style Sheets (CSS) for faster downloads.

Also, check out the article in the July, ‘05 archive on creating a user-friendly site for even more suggestions on how to make every visitor to your site feel welcomed.

Usability is an amorphous concept in the world of web design, and convincing potential clients that usability is an element of the development budget can present more than a couple of problems.

Let’s start with usability. Usability includes technical, ergonomic and aesthetic considerations. Naturally, technical considerations are easy to identify — bugs, glitches, coding errors and other misfires that cause your computer to lock up tighter than a drum are easily identified in testing and, usually, easy to fix. But the fact remains that the development of a web site involves coding and, as all professional designers know, you aren’t going to get it perfect the first time out. No matter how good you are.

Ergonomic (human/machine interaction) considerations include everything from the selected type font to the size and labeling of buttons. The well-designed site must be user-friendly, user-intuitive and user-empathetic! User-friendliness makes the visitor feel comfortable while on site. Navigation is clear and simple, explanatory text is clearly labeled and options are easily exercised.

A site that’s user-intuitive anticipates the interaction between visitor and site design. For example, we’ve all become familiar with hyperlinked text. When we see text in blue against a field of black text, most of us assume we’re looking at a link. The good designer will anticipate this and avoid using blue text as the highlight color, anticipating that most visitors will assume the highlighted text is a link, not just a highlight.

Finally, a good site is one that’s user-empathetic. A good site designer will put him/herself in the place of users to better understand their needs and wants. A site designed for a senior housing project might require more extensive navigation directions, a 16pt font and extra large buttons because many of the visitors to the site will be senior citizens who, perhaps, aren’t as familiar with web use as a younger demographic.

Part of your job as a designer is to make sure that the site has everything it needs to serve its intended purpose. A links page, a secure checkout and payment system, easy-to-read text, a site map, large buttons, clearly labeled — these are all ergonomic considerations. In short, how does the user interact with the design?

Finally, aesthetics is the third element of a well-designed site, and of course, aesthetics is highly subjective. Is the color scheme harmonious? Does the motif fit the purpose of the site? Is the site welcoming, encouraging the visitor to stick around?

So, web site usability includes a technical, ergonomic and aesthetic dimension. And the only means the designer has to determine the appropriateness and effectiveness of a design is through usability testing. This is where some clients usually start to ask questions.

Many clients figure they’re already paying good money to a highly proficient, experienced design firm to avoid usability issues. “Why should I pay extra for something you’re supposed to do as part of the project anyway — produce a fully-functional, bug free web site that has eye appeal?” You can’t argue, it’s a good question.

And when faced with that question, you have only one response: variables.

You’ve designed and launched dozens of sites, you’re current on the latest technology and you’ve even read the entire patent application for Google’s latest search engine, SE 125 (see May articles). You are the consummate professional. That’s why you want to undertake usability testing — not because you lack confidence in your design, but because you want to make sure the site functions under diverse conditions — the variables factor.

It’s safe to assume, for example, that visitors will arrive at a site in various ways. Some will come through the big portals like Yahoo! or AOL. Others will access the site using Outlook or Explorer. Some visitors will connect using DSL, others will still be using dial-up.

Then, there are differences between various computer brands, with some manufacturers using proprietary software that may conflict with a site graphic or photo. Does the site work as it should cross-platform? Without usability testing on both Macs and PCs, you (and the client) just won’t know.

And what about the variability of users? Some will be skilled surfers, while others may have never heard of the I-net. Some will think the red, white and blue motif is eye-catching, others will think it’s a distraction. There’s no accounting for taste. It’s personal, unpredictable, inconsistent and, most of all, variable.

Now, most of your clients — at least those who’ve never been web site owners before — will think site design is first and foremost a technical exercise conducted by geeks. It’s important to explain, here, that site design also includes the ergonomic and aesthetic dimensions and, that, just as a TV pilot will be viewed by numerous focus groups, a new site should be tested, not only for debugging, but also for the testers’ interactions with the site and their opinions on design elements.

As such, usability testing shouldn’t be viewed as an additional expense, it should be seen by the client as a necessary expense to ensure the proper functioning of the site and to ensure the user response the client is expecting.

To launch a site without usability testing is doing a disservice to the client. It’s in the client’s best interests to have usability tests performed by you rather than having visitors ‘test’ the site after launch. If the site is buggy, or if the colors bleed on some monitors, this is the kind of thing you want to find out before visitors start dropping by the new site. If a user visits a new site, which subsequently locks up her computer, do you think she’s ever coming back? Not bloody likely.

As a professional designer, encourage all of your clients to accept usability testing as part of the design and development process, and most certainly, not a step that should be skipped for cost cutting. If the client is made aware of the wide array of variables that you, the designer, must consider during the construction phase of a site, then opting for usability testing becomes the best and only prudent choice.

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.