Usability: May 2008 Archives

May 31, 2008

Although our sites have been concerned with SEO to a small extent for a while, there has only recently been a push to educate our site managers with deeper knowledge of what needs to be done to put their sites on top. One of the biggest and simplest things that can be done is to take another look at the headers and determine whether or not they can be read by search engines.

Using graphic headers has been criticized by a lot of usability experts because of the inability for search engines and screen readers to see images. If you add your graphics into your page in the right way, though, you can have your graphic branding and also be seen by every user out there, no matter how they see the web.

Do it with HTML
For those who embed their header images into the html, the solution is simple. Use alt text to spell out the header so that both search engines and those who use screen readers can "see" the image. I'm sure that most people know how to use alt text, but for those who don't, do this:

<img src="http://www.yoursite.com/IMAGE_NAME" alt="description/title of image here" />

Do it with CSS
You can also combine text with a graphic header that is embedded in your style sheet. To do this, create a div for the text portion only, and set the left margin at -5000px. Then place that div inside of the one that contains the graphic, and you'll get the same benefit as alt text without having to use the image in your html.

CSS:
.headerText {margin-left: -5000px;}

HTML
<div id="header">
<div class="headerText>TITLE TEXT HERE</div>
</div>

The title text will still be readable by search engines and screen readers, but won't be visible so you can still use a graphic header.

By kim | Permalink | Comments (1)

May 22, 2008

Looking over W3C's list of stats on browser popularity , it amazes me to see that some of the most high profile sites online are still designed to be best viewed in IE, without consideration that the site often looks horribly broken in Firefox, Safari, and Opera. Even worse, a site will be designed based on what it looks like in one version of IE, to the detriment of not only the other version (I'm talking the difference between IE6 and 7) but to the other browsers, as well.

Experienced developers who do it for a living already know this, and they test their pages in all of the five above-mentioned browsers before making them live. For those who code web pages as a secondary (or third or fourth) duty to their primary job responsibilities though, many don't have a clue about the browser differences.

Why does it matter? Because according to the W3C's list, as of April of 2008, both IE6 and IE7 users comprise a total of 53.8% of the population, Firefox 39.1%, Safari 2.2%, and Opera 1.4%. The only browser that's gone down in popularity is IE6, understandably, as more users either upgrade to IE7 or make the switch to another browser.

It's important to note that Firefox has seen a popularity jump of 2.1% in the last month, whereas IE7's rise in popularity was 1.6%. Safari has climbed a steady .1% for every month this year, as more people switch to Mac from PC. Opera has stayed steady at 1.4%, still being the underdog in the series but having the best mobile browser capabilities.

People are discovering Firefox as a safe and friendly way to browse the web, and its popularity is significant. Most of the techie types I know use Firefox, both for its security and user-friendliness. We all then preach the Firefox word to our families who have problems with IE and to aspiring developers who use the developer plugin for troubleshooting.

Because of this, and because of the growing number of people who are committed to using the Mac with its Safari browser, it is significant. Almost half of your audience (and the most web savvy) don't use IE, and that number is growing. It is imperative that all sites, especially news sites that need to reach all the people, are readable in all browsers.

One website I feel comfortable picking on in regard to how it looks in non-IE browsers is MSNBC. Even though it is a Microsoft site, it is primarily a news site, or at least that's the way it presents itself. Because it functions properly only when viewed in IE though, it's losing a huge number of readers who use other browsers. Those lost readers are also lost revenue in that if they can't view the site, they can't click on the advertising that pays the bills. Seems to me that even Microsoft would see the problem with that. But because of the lack of compatibility, they risk losing readers to CNN or some other news site that does function properly across the board.

Don't let your website fall into this category. It is easy to download all of the browsers to ensure that you are reaching the greatest audience possible. There is even a stand alone version if IE7, which means that you can have both IE6 and 7 on your computer at the same time. If you've upgraded to IE7 already, you will need to strip that upgrade back to version 6 (ask a knowledgeable friend if you're unsure about how to do this), but it is worth it.

By kim | Permalink | Comments (1)