Tuesday, August 17, 2010

WotW: Usability 101 -- Seeing what your readers see

Hello again! Today is part three of Usability 101. Just in case you missed the first two segments, you can catch up here: part one (navigation) and part two (reader awareness).

Today's segment is about a blogger disease... wysinwyrg (say it with me now: wi-zin-werg) or what you see is not what your readers get. A blog is not like a book, where you can lay out everything SO exactly so that every person who picks up the book will see the exact same margins, the same typeface, the same everything. Because a blog requires a computer and web browser to be seen (unless you like reading straight HTML), you, the author and publisher, cannot completely control what your readers see when they look at your blog and therefore eradicate wysinwyrg (no shots required).

Fellow control freaks and hypochondriacs of the blog world, do not give up! You can help! You can considerably lessen the effects of wysinwyrg among your readers with just a few minutes of your time.

The main cause of wysinwyrg  is differences between browsers. Refresh your memory about the most common web browsers here with an earlier WotW post. {doo doo doo dududu doo doo... that's the theme music from Jeopardy...}

Okay, now let's talk about the first thing you MUST do to help your readers escape wysinwyrg. Check your blog in a browser other than the one that you use. Ideally, you'll use the statistics about your readers (that we talked about last week) to make the best decision about which browser(s) to check your blog in. Most blogging platforms take pretty good care of the major browser compatibility issues, but you should check nonetheless. For example, the background image for just Lu (my blog) doesn't show up in Internet Explorer. While this is frustrating because I put far too much time into my blog background, the unshown background doesn't affect anything other than how my blog looks. (Indeed, I almost like it better without the background. Almost.)

image source
Sometimes a missing background image can cause white text on a white background or some other atrocity, but not this time. Because it is just a visual difference and not a deal-breaker for me, I'm okay with it, but I would be embarrassed to have a reader point it out if I were unaware. For me, cross-browser checking is like wearing mismatched socks: I want to know my socks are mismatched when I walk out the door, not find out from a stranger at the bus stop. :)

If you want to check your blog in multiple browsers without downloading each the browsers, try one of these tools:
  • Browsershots takes screenshots of your specified URL in whichever browsers you choose.
  • The Spoon Browser Sandbox lets you run several versions each of the five most popular browsers, directly from the web. Just install the plugin. 
  • Adobe's BrowserLab shows you screenshots of your specified URL, and then lets you compare the two side-by-side or as an "onion skin" overlay. The wait time is much shorter than with Browsershots, but you do have to create an Adobe Live ID to get your one-year complimentary service.
A secondary cause of wysinwyrg syndrome is your font library. No matter what the HTML says, your readers' web browsers can only display text in a font whose file is located their individual computers. (One notable exception to this is if you are already savvy and using one of Google's web fonts. That Google, always breaking the rules... but we'll talk about that another time.) This means that the font(s) you use on your blog should be web-safe, which means they are found on all operating systems without having to be specially installed (or coming along with a software program, such as Microsoft Word). You can see the most common web-safe fonts here at w3schools.

If you don't like those limited fonts, you can work around the web-safe issue by using a technique called sIFR, which uses Flash to replace your plain-ol text with another font (this is in effect here on Housewife Eclectic... brave adventurers, find out how here on Kevin & Amanda). However, you should use this technique sparingly (think headings only) since the Flash-replacement slows down your page-load time (which we'll talk more about next week).

image source
Okay, bloggers... Only YOU can prevent wysinwyrg.

Go. Make me proud. Return with comments/questions/suggestions/witty remarks.

Next week: the fourth and final Usability 101 segment -- minimizing reader boredom by helping your blog load faster.
Lu (or Lorene if you prefer) is the mom of one squirmy boy and the wife of a singing and dancing elementary teacher. She is the proud author of this weekly Wednesdays on the Web (WotW) segment here on Housewife Eclectic and spends the other days of the week blogging about books, crafts, recipes, and whatever else comes up at just Lu.


Tammy said...

Now I need to go and check that out...never ever thought about that before...you are so smart!

Cranberry Morning said...

You mean, I can't just count on Blogger's preview pane??

Stray Stitches said...

Thanks for the tips!

Brandy said...

thanks! I did the browsershots and I see a lot of uncrypted error messages.

Blogging tips