Is Your Website FUBAR in the "Other" Browser?

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:

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.

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.

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.

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.

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.