Archive for April, 2009

How to Fix the Bloated (CSS and JavaScript) Code that is Jacking Up Your SEO

April 21st, 2009

There are generally four things that cause code bloat:

  • On-page styling
  • On-page JavaScripts
  • Excessive table usage
  • Poor HTML formatting

Cascading style sheets (CSS)

CSS eliminates on-page stylingThere are three main types of CSS styles that you can use: inline, embedded and external.

Inline CSS

Inline styles are used directly within the tag that you are attempting to style. It affects only that particular tag and will have no affect anywhere else on the page.

Example:

<table style="background:url(/images/background.jpg);">

Embedded CSS

Embedded CSS is when style code is grouped together for application on the entire page. This type of CSS is placed within the <head>tag. Embedded CSS will not have any effect outside of the page it is placed on.

Example:

<style type="text/css">
a, a:visited, a:active {
color: #FF5200;
}
a:hover {
text-decoration: underline;
color: #002FA6;
}
</style>

External CSS

External CSS is when styles that affect the whole site are placed in an external file on the server and referenced from each individual page. Changes made here will effect every page on the site that references that particular stylesheet.

Example:

<link rel="stylesheet" type="text/css" href="styles.css" />

Benefits of CSS

There are some clear benefits to using CSS over HTML for your on-page formatting. Looking at the three types of CSS above, the one that provides the most significant benefit is the external CSS. With the other two, while the code can be kept a bit cleaner than normal, all the styling information is still on the page. This means that it has to be downloaded each time a page loads.

With external CSS all of the code that would otherwise be on the page is replaced with a single line of code which references the style sheet. Once your .css file is downloaded it remains in the browsers cache allowing each subsequent page to be loaded much faster.

Reducing code boat with off-page CSS

Not only does using external CSS reduce code bloat but it makes editing your site-wide styles much easier. Want to change all your links to blue and make them underlined? Make a couple minor edits in CSS and every page of your site (if it’s constructed properly) shows the changes. Need to make your font bigger? A simple CSS change does the trick.

You can also use CSS to eliminate excess table usage, which can cause considerable code bloat. I’ll discuss more about that tomorrow.

JavaScript

I won’t spend too much time discussing JavaScript because the concept here is pretty much the same as CSS. Instead of placing your JavaScript code on the page, place it in a .js file and then reference it in your <head> tag like this:

<script language="JavaScript" src="/scripts.js" type="text/javascript"></script>

Again, the same downloading concept applies. The external JavaScript file simply needs to be downloaded once and then it remains in the browsers cache allowing all subsequent pages to be downloaded more quickly.

I’ve seen countless sites muck up their code with on-page styles and JavaScripts. By removing your CSS and JavaScripts off the page you can do a great deal of code streamlining. Pages will load faster and you’ll reduce the code-to-content ratio that can have an effect on how search engines score your pages.

The Best Damn Web Marketing Checklist for Website Content

April 21st, 2009

What this is about: This checklist explores the development of your site’s web content including readability issues, message and overall effectiveness.

Why this is important: Content is an essential part of the persuasion process. Pretty, image-based sites may be appealing to the eye, but it’s the content that appeals to the emotional and logical centers of the brain. The inclusion of content as well as the effectiveness of the writing are all crucially important to the sales process.

What to look for:

  • Grabs visitor attention: The headline and very first sentences should get the readers attention and make them want to keep exploring.
  • Exposes need: Explain to the visitor what their need is for your product, service or information really is.
  • Demonstrates importance: Explain why their need, and therefore your solution to it, is important to their way of life.
  • Ties need to benefits: Talk about the benefits the readers gets from your solution. Put it in their terms.
  • Justifies and calls to action: Justify the purchase and provide clear calls to action to compel the reader forward.
  • Gets to best stuff quickly: Don’t “save the best for last”. Once you have their attention, get to the good stuff ASAP.
  • Reading level is appropriate: Talk at your audiences reading level (or below it without talking down to them). Don’t talk above them.
  • Customer focused: Stay focused on meeting the customers wants and needs. It’s about them, not you.
  • Benefits and features: Explain all the important features but also tell how those features will benefit them.
  • Target personas: Develop personas for your target audience and write in a way that speaks to those personas specifically.
  • Provides re-assurances: Always reassure your visitors that what you offer is important/necessary/helpful/satisfying, etc.
  • Answers WIIFM: Always explain to the visitor what’s in it for them. Don’t make them guess.
  • Consistent voice: Speak in a clear consistent voice throughout the site. Don’t change “personalities” from page to page.
  • Eliminate superfluous text: Get rid of any text that doesn’t specifically assist with the sales process.
  • Reduce /explain industry jargon: Avoid using industry jargon that is unintelligible to the average person. Talk in terms your visitors will understand.
  • No typo, spelling or grammar errors: Eliminate all errors throughout your text.
  • Contains internal contextual links: Look for opportunities to link to other pages and content withing the body copy.
  • Links out to authoritative sources: When warranted, link out to other authoritative websites that backup your content.
  • Enhancing keyword usage (SEO): Know and use important keywords throughout your body copy.
  • Date published on articles/news: Timely articles should contain a date in which they were published and/or updated.
  • Web version of PDF docs available: Convert PDF documents into HTML for easier accessibility.
  • Consistent use of phrasing: Don’t change how you reference certain things. Be consistent on a page by page basis.
  • No unsubstantiated statements: Don’t make claims that you can’t backup and prove to be true.

The Glory of Absolute Linking (As Opposed to that Relative Linking Crap!)

April 21st, 2009

There are advantages and disadvantages to using both absolute and relative links. Here I will explore the differences between the two, outline some pros and cons and also provide some additional information on how you can create hyperlinks in your site that will ensure that all links to your content remain in tact and properly functioning.

Back in the day, you know… the early 2000′s, I loved to use relative links. Inserting relative links made websites development easy in cutting-edge programs such as Microsoft FrontPage. By using relative links you could move files around in your directory structure and FrontPage would automatically update all your link paths throughout the site, keeping them connected to the pages in their new location. No more manually updating all your internal links by hand! It was brilliant.

But now I’m not as big a fan of relative links as I once was. I don’t have huge problems with them, but I understand the value in using absolute links rather than relative links. But perhaps I should take a step back and explain the difference between the two.

Absolute links contain the entire URL in the hyperlink.

<a href="http://www.site.com/category/page.html></a>

This link contains the full path of the destination page. Copy and past that into your browser address bar and you’ll get to the destination. When used on a page, the link has no bearing on what page the visitor is on, only where they want to be taken. With absolute links, there is no mistaking the path to the destination.

Relative links show the path to the destination page using the minimal amount of information necessary, using the current page as the starting point.

<a href="page.html"></a>
<a href="../page.html"></a>
<a href="/category/page.html"></a>
<a href="../category/page.html"></a>

Above are four examples of relative links. Let’s take them one at a time.

The first link takes the user to the noted page that is in the same directory as the current page. This relative link would not work if the two pages being linked were in different folders or different directory levels.

Link from: www.site.com/about.html
Link to: www.site.com/page.html

The second link contains ../ which takes the user back one directory from it’s current location. For this to work the page being linked to must be back one immediate directory.

Link from: www.site.com/category/page.html
Link to: www.site.com/page.html

If the link were to point to a page several directories back, then the relative link code would look like this: ../../page.html

Link from: www.site.com/category/subcategory/page.html
Link to: www.site.com/page.html

The third example above simply points to a link that is in a sub-folder which resides in the same directory of the current page. To link to such a page the name of the folder, in this case “category,” needs to be represented in the link.

Link from: www.site.com/page.html
Link to: www.site.com/category/page.html

Finally, in the fourth example above, the relative link takes the user back a directory, and then forward to another subfolder.

Link from: www.site.com/products/page.html
Link to: www.site.com/category/page.html

Most WYSIWYG (what you see is what you get) HTML editors will automatically insert the correct relative link code when you insert your hyperlinks using their interface. This makes relative linking extremely convenient for the site developer.

Cautions of using relative links

While relative links can be more convenient for a variety of reasons, there are some cautions that you want to take, and some cases where relative links simply should not be used.

Scraped content: Over the years I’ve heard countless stories of a site’s content being scraped from their website and republished on another without permission. If the content that is scraped contains links, those links will often appear on the scraping site as well. If you used relative links then the scraped and republished links will essentially be broken. After all, what are the chances that the scraper site will also have a page located at /yourproducts/yourpage.html?

However, if you used absolute links, the scraped links will point people to the page you intended. Since the link contains the full link path, there really is only one destination, regardless of where on the internet that link resides.

Global include files: When using global include files for site navigation then you absolutely need to use absolute links. An include file allows you to grab content from a single page and insert it into any page on your site as if it belonged on that page. Include files are perfect for navigation because it allows you to easily edit, add or remove global navigation links on a single page but have it reflected on every other page that pulls that include file.

The reason to use absolute links in your include is because relative links will only be relevant from the location of the include file, not the actual page that displays the information. Let’s say that you keep all your include files in a folder called “includes”. Now create two relative links out:

../page.html
../category/page.html

Those links are only relative to the navigation file in the include folder. If you were linking directly from another page, those relative links should look like this:

page.html
category/page.html

While in this case the browser still might take the visitor to the correct page (if there is no folder to back up to) in other cases where the starting point is different, the links might be broken all together. The only way to prevent having these broken links and still use relative rather than absolute links is if you kept all your files in the same directory folder. That’s feasible, but usually not the most strategic thing to do.

The downside of absolute links

There is one downside to using absolute links. If you move your content or files from one location to another within your directory then it’s very possible that all links to that content will be broken. The simple solution is to perform a broken link check after making any such changes.

Checking for broken links on a regular basis is a good idea no matter what, so the downside here isn’t really significant.

Alternative link paths

While we are addressing how links are constructed I should point out a couple of other ways to create links that also have merit:

./

The single dot instead of the double dot before the slash tells the browser to go back to the root URL, much as if you had the full web address in the link. These two links are read exactly the same:

./products/page.html

http://www.site.com/products/page.html

The down side of this is, again, if content gets scraped, the non-absolute link won’t work.

<?=$hostAddress;?>

Sites using PHP can use the above code instead of the domain name, where the domain name has already been pre-defined. This works the same as an absolute link because it inserts the URL into the link on the server side, the same way include files are inserted. The advantages to this are that if content is scraped the proper, full, URL is included. Secondly, if you ever have to change domain names (let’s hope that doesn’t have to happen), changing all your absolute links is as simple as making the change to the defined host address.

Images and 404 pages

When deciding to use absolute or relative links there are a couple of other considerations. You’ll need to decide what kind of links to use for your images. Most times it’s easiest to use relative links for them, but, again, the same issues apply in regard to include files and scraped content. Though for the latter, I’d think it’s less of a worry.

Also, when creating 404/redirect pages you will want to use absolute links for all navigation, links and images. Using relative links is sure to create broken links and images, depending on how the visitor happened to be fed this page.

So what is best for SEO?

Honestly, it doesn’t really matter. Relative links use less code so an argument can be made to go that route. But also consider that search engines are often less forgiving than a browser. Just because a relative link works fine for your visitors, there are times when the search engines won’t be able to follow it properly if the link isn’t exact.

The best solution, then, is to use absolute links. By doing so you’ll avoid all of the potential issues noted above and it is really the only absolute way to know your links will work properly.

How to Create Effective Site Navigation that Leads Visitors to Your Most Important Content

April 21st, 2009

When performing a site architectural review, one of the first things I look at is the site’s main navigation elements. This includes top, side and footer navigation. Together, they all play an important role in both the ability of the search engines to properly spider your website, as well as allowing your visitors to find important areas and information quickly and efficiently.

Site navigation can come in many different flavors. There isn’t just ONE way to do it correctly. If there were then every site would have navigation that looked exactly the same. So while navigation can vary greatly between sites and industries, there are certain navigational elements that should be implemented to ensure solid usability and effective website architecture.

Top Navigation

Main Header Navigation

Your top navigation should always display your logo and tagline (if you have one) clearly and not amongst a bunch of clutter. If the visitor cannot identify your site within a millisecond of them landing on the page then you may need to consider re-designing your top banner/navigation.

Your logo should always link to your site’s home page. Yes, even if the visitor is on the home page. Many people will look first to click the logo to navigate to the home page before looking for a “home” link, or even to look if they are on the home page already. That’s not to say that you shouldn’t have a Home link in your navigation–and make it fairly obvious, but be sure the logo links as well. No sense forcing logo-clickers to look around for the “correct” way to get back to the home page. To them, the logo is the correct way.

The header is a good place to put other important links and information. Things such as a link to the shopping basket, site search and contact information are commonly found near the top of the page. Placing this information where typical visitors expect to find them makes it easier for them to navigate through your site finding what they need more quickly.

Primary Navigation

Top

Main Header Navigation

Side

Side Navigation

Your primary navigation should be located at the top or side of the page and should link to your most important sections and pages. Categorization here is pretty important as it allows visitors to quickly eyeball the areas they are interested in. Be careful that you don’t overload your navigation with links to every page. In many ways, simple is better, though it’s important to be pretty inclusive at the same time.

Drop down and fly out lists are a good way to provide additional links to sub-pages, but you want to be careful in your implementation. Personally I think drop down menus are easier to use than fly-outs, but either way you don’t want to have too many fly-out/drop-down layers. One should be the max. Any more than that risks losing the additional menus if you accidentally move your mouse in the wrong place.

The important thing for your navigation is to hit what is most important and leave out what is not. Too many options can confuse people, but the better categorization you do, the more options you can provide.

Footer Navigation

Footer Navigation

The footer is a great place to provide additional links that might be relevant to your visitors once they hit the bottom of the page. Links frequently found in the footer are policy pages, shipping info, sitemaps, and, of course, another link to the home page. You can also place a repeat of your core site navigation, and links to important deeper pages that you had to leave out of the main navigation in the top or side.

You can also use your footer for linking to just a few primary sections of your site or even as a mini sitemap for a quick access to any page.

Footer Navigation

Breadcrumb Navigation

Breadcrumb Navigation

Any site larger than twenty or so pages could likely benefit from adding a breadcrumb trail for their visitors. And of course, breadcrumb navigation is a must-have for large sites with lots of products, categories, etc.

Breadcrumbs are a great way to provide quick visual cues to the visitor. It tells them where they are in the site, how to navigate back to any previous main sections, and/or the home page. While most visitors may not ever click on the navigation links in the breadcrumb, they are important to have for those that rely on them. The ease of site navigation it provides is invaluable to many shoppers.

Navigation done well can make the difference between a satisfied customer and a frustrated shopper that leaves for another site. Implementing a well-constructed navigation allows visitors to move through the site with ease, quickly finding what they need. Just as importantly, good navigation lets the search engines know the levels of importance for certain pages. It helps them determine categorical relevance for sections and pages, which, in turn can help improve search engine rankings.

How to Create a Directory Structure Search Engines Rock To

April 21st, 2009

When a website goes into development most of the attention is usually paid to the design elements. That’s obviously the most important thing, right? The images, the layout, the colors, the navigation, how the user will interact with the site? These are all important elements to consider and necessary for developing a site that provides the best usability experience for your visitors. But what often doesn’t get enough attention is the site’s directory structure.

When I talk of a site’s directory structure I refer to both the file directory and internal link structures. They are two very different things, but in reality they should often mirror each other very closely, but not always perfectly.

Three directory structure types

There are two commonly, yet improperly, implemented directory structures. The first is the flat directory structure.

Overly-Flat Directory Structure
Page URL example:
http://www.site.com/page.html

Many might argue that this is the ideal directory structure but I disagree. Granted, if you have a very small site then a perfectly flat structure like this is the way to go. But once you’re dealing with a site that has more than a dozen or so pages, it’s time for a little organization.

A flat structure like this gives equal weight to all your site pages in a navigational context. The search engines don’t see any hierarchy of importance, nor do the visitors get a sense of any kind of page categorization (though this can be implemented visually on the site). The problem is that once your site starts to grow a bit each page really isn’t as important as every other and you need a file structure that accounts for that.

This is where your file directory structure best mimics your visual structure if you’ve implemented visual separations in your site categories. But before I get to that in more detail, let’s look at the other improperly implemented directory structure. Instead of being too flat, this one has too many folders and sub-folders, and creates a more vertical directory structure than is necessary.

Overly-Vertical Directory Structure
Page URL example:
http://www.site.com/dir1/dir2/dir3/dir4/dir5/dir6/page.html

I’m all for staying organized but this is a bit too ADD, even for me. The problem here is that the pages on the lowest level are so far away from the the home page that you’re burying them, making them near impossible for the user and even the search engine to find.

That’s not to say the search engines won’t find them all eventually, but you’re not making it easy being so many clicks away from the home page. There are some instances where this can’t be helped, especially for very deep sites, but most e-commerce site’s don’t need to have products more than four clicks away from the home page.

If you already have your directory structure set up this way it may not be a good idea to go and change it. Instead, rework your navigation so that while the physical file structure may appear to be pretty deep, the internal link structure flattens it out a bit, much more like my ideal directory structure below.

Ideal Directory Structure
Page URL examples:
http://www.site.com/dir/page.html
http://www.site.com/dir1/dir2/page.html

In this example every page is two clicks away from the home page. This is a simplification, and not feasible in all circumstances but feasible enough for many websites. Implementing a relatively flat directory structure such as this ensures that good pages are not buried and are easy enough for the user to find starting from the home page.

By setting up your directory structure this way you’re also communicating the value of each of these pages. Buy not burying them under piles of directories and visitor click, the search engines understand that these pages are to be weighted as being more important than the others.

Proper Implementation

Before we leave this topic, I want provide just a little bit more information on how to properly implement your directories and sub-directories. By creating directories to group similarly themed pages (i.e. backpacks go in one folder, wheeled bags in another) you have the opportunity to add additional keywords into your URLs. You also have the opportunity to junk up your URLs by going overboard, creating a spammy looking site, so be careful not to do that!

Here is a good implementation of the ideal directory structure above:

Using Keywords in Your Directory Names
Page URL examples:
http://www.site.com/keyword1/page.html
http://www.site.com/keyword1/keyword2/page.html

Here is a real life example of using keywords in the directory names in a way that makes good sense:

http://www.site.com/batteries/motorcycle/sYTX9-BS.html
http://www.site.com/battery-chargers/8-volt/BM12108E.html

You can see by this implementation that we’re not “stuffing” keywords into these directories, but using them in a way that makes sense both to the search engines and the visitors. But before you get all directory happy, here is an example of what you don’t want to do:

Spamming Keywords in Your Directory Names
Page URL examples:
http://www.site.com/keyword1/page1.html
http://www.site.com/keyword2/page2.html
http://www.site.com/keyword2/keyword3/page3.html

I’ve seen sites that create a directory for every single page on the site. Don’t do that. Directory folders should contain a number of pages that all pertain to a particular topic of the site. If you have pages that don’t pertain to any particular topic then put those pages in the root folder, keeping in mind that not every page needs to be in directory folder.

Implementing a sound directory structure will help, not only with basic organization but with establishing the site’s overall hierarchy. A good hierarchal structure can play a significant role in how well your site gets spidered and pages re-indexed in the search engines.

Beginner’s Guide to SEO: Quickie Dos and Don’ts

April 21st, 2009

Many SEO newbies, or new businesses starting out online, come to SEO blogs such as this looking for some quick and easy solution that will vault them to the top in the results. Unfortunately, there are very few hard and fast rules in SEO, and no step by step solutions that, if implemented, guarantees you top search engine rankings. If there were, then it would quickly become obsolete because everybody would be doing it.

Instead, SEO is more of a set of guidelines that can be implemented in a way that allows for individual site customization. Most of it is fluid based on each site’s needs for their audience. However within that there are also some basic dos and don’ts that need to be adhered to.

SEO Dos:

  • Customize your title tags. Each page should have a title unique to that page alone.
  • Research your keywords thoroughly. You really cannot start optimizing until you have researched out your keywords and know how the optimization will play out.
  • Use keyword relevant filenames for each web page. If the page is about women’s brown boots then your file name should be womens-brown-boots.xxx. Such as: yourdoman.com/womens-brown-boots.html.
  • Organize your directory structure. Don’t throw all your pages into the root folder and don’t use too many directories/sub directories. Keep it simple yet organized.
  • Plan out your internal links. Develop your navigation effectively, implement no follows sparingly, link content to other pages liberally and use absolute links.
  • Use content effectively. Make sure your content does the job of selling to your visitors but is also keyword rich. Don’t go overboard on keyword usage, but only as it functions best for the visitors.

SEO Don’ts:

  • Don’t junk up your code. Get rid of junk code such as on-page styles, JavaScripts and excessive tables. Keep your code lean and clean and validate if at all possible.
  • Don’t add a bunch of junk links to the bottom of your pages. Footer links are great, but don’t just add junk links to pages that serve no value to your visitors strictly for the SEO benefit.
  • Don’t settle for stock content. Take the time to develop custom content for your site. Don’t use manufacture descriptions unless you add your own descriptive content as well.
  • Don’t junk up your URLs. Keep your URLs clean and tidy without a lot of excess variables or session IDs.

These are just a few decent starting points for beginners in what they should and should not do with their site pages. Implementing these few tips won’t suddenly shoot your site to the top of the search results, but it can begin the process of making your site much more search engine friendly and in a better place to be noticed by the engines.

I’m a Google Convert But I Still Want to See Competition in Search

April 21st, 2009

Over the last few months I’ve become a convert to Google. I’ve always used Google as my primary search engine but only recently have I started using a few other Google products such as Gmail, calendar and documents. I’m a fan.

But when it comes to search, I’m fed up with Google’s dominance. We could use a little competition in search.

Of course, it’s really not Google’s fault that they run between 50-70% market share, depending on who you ask. It’s really the fault of all of us searchers. We use Google because we like the results. We don’t use Yahoo or MSN because for whatever reason we feel the results are inferior.

Google got to where it is because it earned it. None of the other engines seem to be able to dent that and are losing market share to Google each month. However, I’d be surprised if anybody would notice if Google’s results were swapped with MSN’s for a week. Psychologically I feel that I’ll get better results from Google, but I don’t know if its true or not because I really don’t use any other engine frequently enough. Heck, even using Google I often don’t find what I’m looking for anyway.

While each engine has to do it’s part to find ways to produce better search results, what makes any search engine competitive is the user. As long as users don’t feel the need to switch to Yahoo or MSN, Google will always dominate. I have some problems with that as a searcher and as a business that makes a living by being found in the search results.

Cons of having one dominant search engine

  • Rankings in other engines mean little in terms of traffic.
  • Losing positions in the dominant engine can create a noticeable drop in traffic.
  • Competition for top positions can be extremely fierce lowing the ROI of the investment of achieving such rankings.
  • Algorithm changes on one engine, causing loss of top rankings, can devastate a business.

Pro’s of having multiple dominant search engines

  • Multiple engines create additional opportunities for site branding in search results as searchers move from one engine to the next.
  • Searchers have more opportunities to find quality sites, if each engine produces differing results.
  • Many businesses will focus on one or two engines only creating more availability and less competition for top positions, and therefore increasing the ROI value.
  • Ranking losses one engine will be far less noticeable when a multi-engine strategy is employed.

Of course there are also drawbacks to having multiple competitive engines as well:

  • Optimization for many engines can be more difficult than a single engine, though competition will be more spread out.
  • It’ll be unlikely that one site will dominate the top spots of all competitive engines. This can be a pro for you against fierce competition, but a con if you are the fierce competition.
  • A top ranking on a single search engine will produce less traffic and revenue overall. This means a multi-engine strategy will need to be employed OR that your site must be the Destination Website for your industry.

Personally, I believe that the more competing search engines there are, the better we’ll all be. But because Google is so entrenched as the dominant engine its going to take more than another engine simply being as good as Google. I think that some of other engines have surpassed Google in some key areas, such as user experience, quality of results, result segmentation, but none have beat Google in all areas simultaneously. And it’s not been enough to attract an growing audience. It’ll come down to the average searcher to start using other engines for their web searches.

If you’re a searcher, you have to ask yourself if you really do get superior results from Google or if you just think you do. Even if you do, are the results on the other engines that much inferior that you can’t find what you want?

If you’re a business owner you need to think about what you can do to increase your competitive arena. If you already achieved top spots in Google or not, start to transfer some market share to Yahoo or MSN and soon others will follow. And as they do you are opening up new opportunities to compete and drive traffic to your site.

This next year I’m replacing Google as my default search engine. I may use MSN or Yahoo or perhaps both, depending on the circumstances. If I go to Google it’ll only as a last resort, if the other engines don’t give me what I’m looking for. I’m willing to bet that will happen far less than I suspect. Not only that it will show me that there is life beyond Google. And maybe, just maybe, we can start seeing some competition in search start to happen.

Is Your Website FUBAR in the “Other” Browser?

April 21st, 2009

When making changes to my websites I always take the time to view them live on the web before closing up my editing software and patting myself on the back in self-satisfaction of a job well done. Even with minor changes, I like to view them one last time to make sure my changes didn’t cause any shifts in on-page display, or I didn’t inadvertently create an error somewhere that inadvertently jacked everything up (believe me, it’s happened more times than I can count!) But regardless of how careful I am to double check my work, there is one thing I almost always overlook; verifying that my site looks good in the “other” browser.

At any given time I have three FireFox browser widows open, each with their own number of open tabs. So it’s natural for me to check and verify my changes using my browser of choice. Sometimes, I even think to check my changes in Internet Explorer. Admittedly, I don’t regularly check IE when the changes are relatively minor, but always when the changes effect formatting. But that’s not the other browser I’m referring to.

We get so accustomed to our own way of surfing the web that we forget that there many other browsers and browsing experiences that may be foreign to us. Now most web designers will do their due diligence and check a site in multiple versions of FireFox, Internet Explorer, Netscape and Safari. Heck you might look at a half of dozen other browsers that most people, including myself, have never even heard of. But those are not the browsers I’m referring to either.

There are four primary “other” browsers and browsing experiences that are typically overlooked by site owners, casual webmaster and, yes, even by the average web designer. But with more and more users moving to these alternate browsing experiences, it is even more important to check your websites to make sure that they function properly for these users.

For the next several illustrations I’m going to use my own website as an example. Here is what it looks like in it’s current form:

Snapshot of Pole Position Marketing Website in it's natural state

The image-less browser

In a previous article I address the necessity of using ALT attributes on your images. But why is this so important? The image ALT text helps visitors surfing with images turned off to get a better sense of whatever meaning your images are trying to convey.

Snapshot of Pole Position Marketing Website with images turned off

I remember a few years back I had very limited connectivity. And by “limited” I mean: dial up. For several weeks I had to live with the slowest of all slow internet connections. You had better believe that I turned images off in my browser. I didn’t have the time for many of today’s image-heavy websites to load before I could get the information I needed. During this period I came to appreciate well-thought out ALT text.

While the accessibility of high-speed internet means that fewer regular browser users are surfing with images off, there are still plenty of users that do, for a variety of reasons.

You can see in the screenshot above that all of the images, save for one, are replaced with descriptive image ALT text. The only one that doesn’t is the flag next to the H1 tag, which is inserted using CSS. This is just decorative so there really isn’t any need for ALT text anyway. But even with images turned off, the site is still completely navigable.

While surfing with images off isn’t necessarily done using a completely different browser, it is a completely different browsing experience, and one that does need to be addressed to ensure your site works for all types of visitors.

The CSS-less browser

CSS is wonderful for web design and keeping code bloat to a minimum. But even still, some sites are so heavily dependent on CSS that they forget to make sure that the site still works with CSS turned off.

Snapshot of Pole Position Marketing Website with CSS turned off

My site was designed specifically to make sure the content was placed higher up in the code than the rest of the on-page elements. When doing so, we ensured that when viewed without CSS the layout is pretty consistent with the CSS version including the right-side information bar.

The only primary difference is that the header and main navigation is at the bottom rather than the top. This is because we used absolute positioning in the CSS to place the header above the content. Normally site identification is something I am concerned about when looking at a site without CSS. But we’ve taken care of it here by making sure the breadcrumb, which always reads” Pole Position Marketing” is the first content on each and every page.

Obviously the formatting isn’t just the way I want it to be, but that’s to be expected. All of the important elements are here and in place. The site can be read properly, as intended, and my calls to action are still properly visible.

The text-only browser

Now I have to admit that I have great difficulty using the Lynx text browser. But it is definitely a handy device to see not only what your site looks like with just about everything but links turned off, but also to get a better understanding of how your site might be read if the visitor uses a screen reader.

Snapshot of Pole Position Marketing Website in a text-only browser

One of the biggest problems most sites have when pulled up via text-only browsers or read from screen readers is that the left-side navigation always appears first on each page. This is one of the problems with tables designs that have their navigation on the left. Now I don’t advocate moving your navigation to the other side of the screen, but there are other things you can do (as we did with Pole Position Marketing) to get your content higher up on the page.

The text-only browser will help you see if your site is too heavily dependent on visuals to get visitors to interact with your site. Here you have no formatting and no images. Just the words on the page. If you can’t get your point across here, and can’t persuade your visitors to move through your site, then there is a good chance that you have a deeper problem than how “pretty” your site may or may not be.

The mobile browser

Mobile web browsing is becoming more and more frequent. Cell phones are becoming mobile devices designed to connect us to the world wirelessly regardless of where we are. That means more people are using the internet on their tiny cell phone screens to shop, gather information, learn, read and research. For many businesses, ensuring that their web site looks good on mobile devices will be time and money well spent.

Snapshot of Pole Position Marketing Website in a mobile browser

Of course, developing your site to look good on mobile devices isn’t easy. Every phone uses a different browser which may or may not import CSS and/or images. Here, perfection isn’t necessary, just so long as the site is usable with strong site-identification.

These are the two major issues that I’ve seen on mobile devices. The header gets messed up to the point where you can’t tell what site you’re on and the main navigation is jacked up to make navigation near impossible. If you fix those issues, also ensuring the text is readable, then you’re meeting at least the basic needs of your mobile audience.

How important is all this, really?

One of the basic of the web is making sure you meet and exceed your audience’s expectations. Many make the argument that the audience that browses with images or CSS turned off, or even on text-only browsers is so small that going through the effort to fix that just isn’t worth it. I disagree.

Think of it in terms of the long tail. Sure, a clear majority of your visitors use the standard browser on a high-speed connection to browse the web. Most of them will never even know, or care, if your site functions in these other browsers. But that doesn’t make the people who do any less important. Nor does it make them any less of a customer.

For the same reasons that businesses must have ramps for wheelchairs and handicapped accessible parking, businesses on the web need to take care to care about this audience as well. Target has already been sued because their site wasn’t accessible for disabled visitors. It likely won’t be long before every site must come into certain accessibility compliances or risk similar repercussions, or worse.

As far as the mobile browsers goes, well, that’s where more and more internet activity is headed. It’s best to be ahead of the game, rather than trailing behind. No sense giving up customers to your competitors who do take the time and effort to meed the needs of this growing audience.

If a Ranking Falls on the First Page, But There is Nobody Around to See it, Does it Still Make Any Difference?

April 21st, 2009

I think I stress too much about our clients’ performance of their optimization campaigns. Or perhaps I just create too much work for myself. See, all these years I’ve been working 10-12 hour days to help my clients increase their exposure in the search engines for some pretty important phrases. But just recently I found out that I’ve been targeting all the wrong keywords!

Fallen TreeYou see, I’ve been using keyword research programs such as Wordtracker to find out what words people actually type into the search field when looking for the product or service our clients’ offer. This has helped me to find various search phrases that are actively searched on a daily basis so, when ranked, they deliver traffic to our client’s website.

I didn’t know could make stuff up!

This is where I think I’ve created more work for myself. I didn’t know we were allowed to just make keywords up instead!

I came to this realization a few weeks ago when I saw a blog post announcing some ranking results that a particular website had achieved after just a few short weeks.

The website in question provides personal development coaching services. I know this because it says so right in their tagline. So when the blog post bragged about how they’ve achieved some great top rankings I was expecting to see results for keywords such as “personal development plan,” “personal growth development,” or “personal values development.” Each of those keywords receives anywhere from 25-50 searches a day, according to Wordtracker.

I didn’t really expect them to come out of the box with great rankings for the more competitive phrase “personal development,” which gets about 140 searches per day. But the blog post told a story of their ranking achievements for these keywords: “lack of personal development,” “personal skills development” and “mental health development”. According to Wordtracker, each of these gets approximately zero searches per day, some of which have virtually no other actual competition as a phrase.

Who needs traffic when you got rankings instead?

They also boasted about another phrase, “personal growth and development,” which garners about 12 searches a day, and said they kept some other #1 rankings they’ve achieved from being made public. But I wonder why they were boasting about any of these keywords in the first place? The traffic generated from any of these keyword phrases isn’t likely to be significant. At least not compared to some of the more highly competitive and frequently searched phrases applicable to their industry.

I understand that in some niche industries finding quality keywords can be tough. We’ve got some clients where their best keywords get only a handful of searches per day, according to Wordtracker. So we optimize and get those keywords ranked, knowing that the traffic that trickles in for them will make all the difference. But we still target the most competitive and highly trafficked, targeted terms for that particular industry.

Have I been going about this all wrong? Could I have just been going after any keywords I like so my clients feel like we were making progress… even if it resulted in no new traffic to their sites? I’ll tell you, that would have made things a whole lot easier. Heck, we could charge a lot less too!

Or maybe some people just don’t know any better. Maybe bragging about these keywords ranking well will help the higher ups feel good. Maybe it helps someone keep their job when they can point to rankings over real results. This isn’t all that uncommon.

Do you want results? Or do you want RESULTS?

Every day business owners come to us looking for rankings, but we are not in the ranking business. Instead, we sell them performance, exposure and growth. We don’t brag about some bottom-rung keywords, but help our clients grow their business with solid optimization strategies that increase their exposure for keyword phrases that actually drive them traffic.

Sorry if that sounds like a commercial, it’s not intended as such. Consider it a game plan for a valuable optimization strategy. But perhaps Ive been going about this all wrong. Maybe I’ve chosen the more difficult path. But I believe I’m in the business of helping businesses achieve profitable results, not achieve insignificant search engine rankings. I mean really, if a keyword ranking falls on the first page of the search results, but there is nobody around to see it there, then it really doesn’t mean anything.

When is Usability More Important than SEO?

April 21st, 2009

Every day we get businesses coming to us looking to improve their search engine rankings. They want to talk about an SEO campaign but one quick look at their site and we see that SEO may not be the right approach for them. Usually in these cases the site needs a complete usability makeover.

These businesses, however don’t want to discuss website architecture, visitor usability, or even making their site search engine friendly. They want rankings and want them now.

I understand their standpoint. These are small businesses looking to purchase a service that will get them near instant visibility and exposure. “We’ll take care of the rest,” is what they often imply. But therein lies the problem. SEO and SEM without good usability is like inviting people out to eat at a rat and roach infested restaurant. You may bring people in, but you won’t make them happy.

A real-world usability analogy

Lets take this restaurant analogy and extend it out a bit. Lets say that you own the restaurant. You start spending money on advertising and see more and more people trickling into the restaurant each night. But you notice something peculiar. Some who come through the doors turn right around and leave. Others come and eat, but you never seem them come back a second time.

You start running the numbers and find that each night about 300 people are coming through your doors but only 5% stay and eat. You’re selling about fifteen meals a night. You realize you have a problem. And the solution is… more advertising.

You know it’s the rats and roaches that are turning people away but you feel that if you just increase your advertising you’ll be able to sell more meals. It works. Each night more and more people come to your restaurant. Few stay but many more leave before they even taste your delicious cooking. Yet you are selling more meals so that’s a good thing.

You figure if you boost your advertising even more you can increase your traffic to 600 a night and serve 30 dinners. Again, if you do even more marketing and bring in 1200 a night then you can serve 60 dinners. That’s some solid growth goals, you think.

A friend suggests that instead of advertising you fix your roach problem. So you run the numbers for that and come back disappointed. Fixing the problem will expend a full year’s worth of your advertising budget. And if you stop advertising you know you’ll lose well over 90% off your nightly traffic, which means that only 15 people will be coming through the doors each night. If you were to maintain your 95% exit ratio then you’ll only end up serving one, maybe two meals a night instead of 15. And even if you were to serve 100% of those that came through your door, there won’t be any growth because there is no new advertising to bring people in.

By all appearances fixing your rat and roach problem is going to cost much more than you’ll gain. You’ll lose 12 meals a night and at best maintain without the potential of growing for a full year. You conclude that it doesn’t make sense to stop advertising or to fix the roach and rat problem so you decide to continue doing what you’re doing. After all the advertising is bringing in the people, and you are selling a few more dinners each night than the night before.

Usability works exponentially

What you don’t realize is that usability works exponentially. Let’s say you, as the restaurant owner, spend your yearly advertising budget and fix your roach and rat problem. A week later your restaurant is squeaky clean. Now what?

Since you’re not advertising you find things worse than expected; only a handful of people are coming through the door, much less than you had hoped. But you notice something else, of the five or ten people that come through each night, all but one or two stay and order a meal. That’s new.

Your foot traffic has dropped much more than you anticipated but the number of meals you are serving each night has stayed pretty strong. You’re serving fewer meals than before but more than you had initially calculated. Of course, that’s still a net loss for you.

But the next night you get a few more coming in and again 90% of them stay instead of flee. As you talk to your customers you find that, for the first time, your place was recommended by someone who came the night before. The following week you notice customers from the previous week are returning. That’s never happened before. And each night you talk to people who are coming in based on the recommendation of someone else.

Before you know it you’re bringing in 30 people a night through referrals and repeat business and are serving at least 25 meals. That’s what you were serving while advertising heavily. A year later you find that with very little or no advertising you’re doing significantly better than before and almost as well as you had projected had you kept your money invested in new advertising.

With a new year you have an advertising budget again but you realize that you won’t have to spend near as much as before in order to increase your business. Your advertising dollars go a lot further now because you don’t have to bring in a whole lot more traffic just to get a few sales. Now, your sales growth is much more in line with your traffic growth. You decide then that you can take the excess advertising dollars and re-invest it in better equipment, more cooks and perhaps even a larger space that will seat more people.

Making usability work for you

So I’m sure that by now you can see where I’m going with this. While search engine marketing is important, sometimes your advertising dollars are better spent making your website more user friendly. Usability issues can kill website business. But most people just focus on getting more people or traffic to the store because they rationalize that this is how they sell more.

By fixing usability issues you can sell more while without having to spend a lot of money always trying to bring in a lot of new traffic. A little goes a long way. Once you are able to increase your conversion rates, every dollar you spend on marketing and SEO will be more effective and have a much bigger impact on your profit margins.

So, when is usability more important than SEO? Almost always.

PHP Freelancer