Checking Your Website Under Different Viewing Conditions

Does your website look like what you think it looks like?  Do visitors with different browsers or screen resolutions see something different than you, such as larger/smaller text, forms shifted into awkward locations, etc?  We encountered a couple of these situations with several recent projects where newly designed landed pages looked very different on my colleague’s monitor compared to mine.  Usually CSS is at the root of these issues and the problem can be fixed once pin-pointed.  The first step is to use your analytics program to identify browsers, screen resolutions, and operating systems that your visitors are using:

Screen resolution data in Google Analytics

Screen resolution data in Google Analytics

Depending on what you find, you may want to delve further to see what you web pages look like under different browsing conditions.  Here are some resources for that:

Screen resolutions:

Browsers:

  • BrowserShots – enter your URL and then screenshots of your page in different browsers will be uploaded for viewing. Takes some time but it’s free (although you can pay to get bumped up in priority).  Oops…I just found out one of my sites apparently doesn’t work in Opera!
  • CrossBrowserTesting.com – select a browser and operating system and then launch any site you want from within that configuration. You can get 5 min free per session, but you have to register (3 fields).

Designm.ag has an article on helpful resources for cross-browser testing and that offers a number of other options, and Long Zheng has a blog article announcing that Microsoft’s Expression Web (the replacement for FrontPage) has a feature called ‘SuperPreview’ that makes cross-browser testing easy.

So a variety of ways to avoid diminished usability due to unexpected renderings of your web pages. And better usability shows up in your analytics reports.

[As promised above, here are screenshots from BrowserShots.org:]

Results of BrowserShots

Results of BrowserShots

BrowserShots closeup: SeaMonkey / Fedora

BrowserShots closeup: SeaMonkey / Fedora

(The page is a little of whack but not bad when viewed with SeaMonkey 1.1.9 browser and Fedora 7 OS.  Imagine my relief!) 😉

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: