Taking full advantage of CSS

CSS (Cascading Style Sheets) offers many more benefits beyond that of streamlined web pages with table-less layouts and precise positioning (no more transparent 1-pixel spacer GIFs!), mentioned in my previous post. Indeed, that’s just scratching the surface of CSS.

Here are some more clever things you can do with CSS to get your website really humming:

• Reorder your content to sit above your top and left navigation in the HTML. That will boost the keyword prominence on your pages, which is good for SEO. Then use CSS to get the page to still display as you want. CSS Zen Garden is a great example of this in action… for example, notice how the HTML doesn’t change between this layout with left-side nav and this one with right-side nav; it’s only the CSS that’s changing.
• If you must use graphical navigation or headings instead of text-based, then use the CSS “image replacement” technique to substitute in a text link or heading tag, respectively, when the CSS is not loaded (as is the case when the search engine spiders come to visit). For example, northland.edu uses this technique well. Currently, this is much more effective for SEO than ALT tags. Note though that in time, search engines will look at CSS files and disregard text that is off-screen.
• Learn to code in “CSS shorthand.” With shorthand, hex codes for colors, margins, box dimensions and borders can all be abbreviated, for instance. More about this here. The efficiency of CSS shorthand translates into not only a speedier download for your customers, but also compact and tidy code that’s easier to maintain.
• Make code that “degrades gracefully.” Creating a separate “low-bandwidth version” or “printer friendly version” or “mobile version” of your site will sound ludicrous in years to come (heck, I think it sounds ludicrous NOW!), because CSS makes such a thing unnecessary. Check out how gracefully gotomedia.com degrades on a cell phone or PDA, for instance.
• Correct for browser incompatibility snafus with browser-specific CSS. Does something look awry in your page layout when loading your site with the Safari browser, for instance? Internet Explorer doesn’t always play nice with the other browsers. Until the days where all the browsers follow all the same standards to the letter, browser-specific stylesheets are a useful crutch.
• Separate the presentation layer from the content layer as much as possible and move it into an external stylesheet (in other words, a separate .CSS file). That way it gets cached by the web browser and doesn’t have to reload with each new page.
• Plan for site-wide changes. Things change — colors, sidebars, ads, copyright dates, etc. Utilize CSS files and/or server-side includes to make future site-wide updates as painless as possible.
• Make use of the cascading nature of CSS. Most of the styles you define will be used site-wide. Some will only be for one particular page. Then there will be occasions where you’ll want to “cascade” styles, and have certain sections of your site adopt a particular look/layout/theme that overrides or branches off from the site-wide styles. Clever use of cascading styles can lead to very efficient and elegant code.

  Warning! Geek speek ahead:

Just be careful of overriding previously declared statements. And also be aware that specificity is important in the cascade. Declare all your tag styles first then declare your id and class selectors down the doc. That way the cascade works and can be overwritten with new selectors. (Thanks to our CSS guru Darren for this last bit of advice.)

CSS coders: the Web Developer Firefox extension is an awesome tool for coding, debugging, and tweaking style sheets. You can display the stylesheet and the rendered page simultaneously side-by-side and then interactively edit the CSS, immediately viewing the effect of the change on the rendered page. And it makes identifying errors (be they validation, CSS, or JavaScript) a piece-of-cake. Did I mention the plugin is free?

Ecommerce Best Practice Tip #5 – Streamline your site

Is your ecommerce site a breeze to use? Is it fast to download? Does it render (paint) quickly on the screen? If not, is the HTML at least built to display the most important parts of the page first?

You can trim precious seconds off the download time by removing superfluous HTML code, optimizing your images, and converting any tables-based layouts to CSS-based (Cascading Style Sheets) instead. Especially ditch any nested tables. Superfluous code includes such things as programmer comments, commented-out copy/code, redundant font tags, inline JavaScripts and inline CSS. The latter two can, in most cases, be moved to a .JS file and .CSS file, respectively. MS FrontPage is notorious for adding ‘code bloat’ to your pages. Optimizing your images for fast download includes not just choosing the best compression format and compressing them to the largest extent possible (using Photoshop, Fireworks, or whatever your tool of choice is) without noticeable degradation in the image quality, but also defining height and width attributes on all your images. And if you’re still using 1-pixel GIFs as placeholders to align things on your pages, it’s time to leave that technique where it belongs… in the ’90s! A tool like Dr. Watson or NetMechanic’s HTML Toolbox can also help you in your HTML streamlining efforts.

Etail Search Engine Optimization Awards… That was bizarre

Attending the Etail Awards dinner tonight at the Etail Conference in Fort Lauderdale, I was surprised to hear that Land’s End won in the search engine optimization category. Not because they didn’t deserve an award. They certainly do; they’re a great company and a true innovator in the online space, but because the award was based around their great internal search engine. Yes, you heard me right: an SEO award was granted for work done on internal search rather than external search. Kinda bizarre. Hopefully they’ll rectify this next year and break out internal search into its own separate Awards category.

How to Become a Google Power Searcher

The first part of my MarketingProfs.com article series called “Unlocking Google’s Hidden Potential” is now available for MarketingProfs premium subscribers. The article provides tools to improving your Google search skills, including: word order, wildcards, Boolean logic, stemming, synonym searches, and much more.

Googling Searching – my part 2 now on MarketingProfs

Part 2 in my 4 part series on Google power searching has just been released on MarketingProfs.com. This installment covers the range of advanced search operators, including site:, filetype:, inurl:, intitle:, cache:, info:, etc. and their application.

Caveat Emptor (Bidder Beware) – Google AdWords contextual ads gone wrong

Google’s contextual advertising technology that they picked up with the Applied Semantics acquisition isn’t flawless. It’s not always in the best light that your brand gets displayed within sites subscribing to the Google AdSense program. Take for instance the case where a web page featuring a story about a hacked up body in a suitcase displays a Google AdWords ad for luggage, as described in this Fast Company article. Or the also embarrassing but less gruesome example I came across on Robin Good’s website recently, as shown below:

Bottom-feeding email marketing solution, anyone?

Optimizing your search engine advertising

DoubleClick’s Smart Marketing Report in a recent interview of Jamie Crouthamel, president and CEO of Performics, were treated to some words of wisdom on how to launch and optimize a paid search advertising program.

Here’s some of the takeaways I got out of the interview:

• Build out your keyword portfolio. Incorporate product names, product numbers, relevant adjectives (colors, sizes, etc.), and occasions for which products could be sought. A number of linguistic exercises for the agency and client exist that can help with this process. A SEM program can encompass a keyword portfolio of as large as 50,000 keywords with varying ROIs. Although “belt” might not convert well as a keyword, it has many related terms that may convert much better, such as “leather belt,” “men’s leather belt,” “brown belt,” and “men’s brown leather belt.”
• Collect an adequate amount of data before you begin optimizing. Don’t alter a keyword until that keyword has received at least 100 clicks.
• Constantly improve your keyword portfolio by adding new search terms and improving/removing keywords that don’t produce a good ROI.
• Experiment with reducing bid prices to improve ROI.
• Optimize your search ad copy to make it as compelling and relevant as possible.
• Make the landing page as relevant to the user’s keyword as possible.
• If your products are seasonal, bid on the keywords during the season when your target audience is in need of them rather than year-round.

Yahoo! is blogging

Yahoo! now has a corporate blog, Yahoo! Search Blog. I’ve been a fan of an unofficial Yahoo blog, namely that of Yahoo employee Jeremy Zawodny, for a while now. But it’s good to see the company embracing blogging in an official capacity.

Shopping cart abandonment is up

DoubleClick’s second quarter 2004 E-commerce Site Trend Report is out. And according to it, shopping cart abandonment is at an all-time high: 57% of all carts, up from 45.9% a year ago. Furthermore, those who return to their abandoned carts are doing so with less frequency: 26.5% of sales were attributable to those returning to an abandoned cart, versus 35.6% of sales a year ago. According to the report, for every dollar spent there is $4.51 that is left in a cart. More stats from the study are reported in this internetnews.com article.

Ouch, that kinda smarts. If you’re an online retailer, what are you doing to minimize your cart abandonment rate?

Web content really IS critical!

Today I had the pleasure to hear web content guru Gerry McGovern speak at a full-day workshop in Wellington, New Zealand. He’s got to be one of the very best speakers I’ve ever heard! His course material, his sense of humor, his thought-provoking insights, and especially his Irish accent — had everyone in the audience mesmerized. Here’s a sampling of the day’s take-aways:

• Action vs. reaction: If a site visitor’s action results in a reaction from your web site that has a wait time exceeding that of the action, the visitor will become frustrated. That frustration will build as more . For example, clicking on the File menu tab only takes a second, so the time it takes for the menubar to appear underneath should take no more than a second.
• 80/20 rule of content: For many sites, less than 20% of the site content accounts for over 80% of the pageviews. With Microsoft.com it was 1% of their content accounted for 99% of the pageviews. In fact, 35% of their pages had never been viewed! That’s well over a million pages of content that people at Microsoft worked hard to write ? for nothing. Focus your efforts on the copy that will be read, not on the copy that won’t.
• Columns: Readers use their peripheral vision to keep track of the beginning of the next line down while they are reading across a line. So with text that has a long linewidth, it becomes difficult to read. Gerry recommends a three column format, with 20% or so of the width going to the first column (use this column for navigation), 60% or so dedicated to the middle column, and another 20% or so for the right hand column.
• Call for action: Always end your pages with a clear action for the reader to take. Never leave the reader hanging, wondering what to do next. The center column at the end of the body copy is a critical piece of real estate for these calls for action.
• Links in copy: According to Gerry, links in the middle of body copy distracts the readers making it difficult for them to read the paragraph, and it connotes “hey, click on me… the rest of this text is really boring!” Instead of embedding links within the body copy, consider using the right hand column for the related links. If there are important links there that take the reader to the “next step,” also repeat them at underneath the body copy in the center column.
• Simplicity: Einstein purportedly was quoted as saying “Everything should be made as simple as possible, but no simpler.” Apply this idea to your web copy. Keep your copy as short and simple as possible. People tend not to read long copy on the web. With a 300 word page, 50% will read it to the end; 500 words, 20%; 1000 words, 5%. Gerry recommends headings of 4 to 8 words, summaries of 30 to 50 words, sentences of 15 to 20 words, and paragraphs of 40 to 70 words.
• “Kill your darlings”: William Faulkner once said this. If there’s a particular expression or way of saying something that you’re particularly fond of, delete it from your copy, because you’re probably overusing it.

Gerry covered so much more than this, but it would take a book to cover it all. Oh, wait a minute… there is a book covering it all. Buy Gerry’s book, Content Critical.