Tag Archives: browser testing

Cross Browser Testing: See Your Website Through The Eyes of Your Customer

crossbrowsertestingIts hard to grow up without hearing your parents or grandparents say “back in my day…” and then alluding to some life altering technology or new luxury that they didn’t have available to them when they were our age.

While the message was usually “hey appreciate how easy you’re life is, it was tougher back in my day” I catch myself saying the same thing to kids that aren’t more than a decade younger than me.

Just the other day I was talking to my teenage cousin who’s excited about getting her drivers license next year. Working in an industry that lives and dies by efficiency of driving routes, naturally I asked her if she was learning the shortest or quickest way to drive around the city.

With a not-so-sly rolling of the eyes she hit me with the news I have obviously been missing out on, “That’s what my iPhone is for… duh”

I was shocked, and not by the blatant exasperation, but that I realized that I had learned to drive before the iPhone was invented. I had to know where I was going before I got into the car or have a map book on hand and figure it out along the way.

How did I ever make it to where I was going without live turn by turn direction?

But my point isn’t to reminisce about the good ol’ days. My point is that there has been a huge change in the ways we can consume information. iPhones, iPads, Kindles and the like, all didn’t exist a few years ago. The personal computer was the end all be all of internet activity.

Today it seem that the personal computer is just a “thing I have to sync my ipod to.” But today I’m not even going to talk about how “we” consume information but rather how our customers consume information (and all you need is an internet connection on your favorite browsing device).

So what’s an Internet Browser?

A browser is like your window to the internet. At the most basic level, its a software program that lets you see web pages. The fact that you’re reading this means you’re already using one.

Popular browsers include Internet Explorer (IE), Firefox, Chrome, Safari (Mac only), and Opera. (There are dozens of smaller players out there but we’re only going to focus on the mayor ones at this point.) And most of these have mobile versions as well to run on smart phones.

And like most software, there is more than one version available at any given time.

The companies or organizations that develop the browsers have updates, push out new features, and patch bugs in the software but leave it up to the user (that’s you) to update the software on their own machine.

So how do browsers work?

When a user, often referred to as a “client”, wants to see a webpage, that user types in the URL into the address bar of the browser. Without going into the gritty details, the browser then makes a request to the server where that website is hosted to see that webpage.

What the browser gets back from the server is set of instructions (code) that the browser interprets and displays to the user.

The part of all that that’s pertinent to us is that the browser gets “instructions” to how the page should look, not an exact image.

Ok so why does any of this matter?

Each browser, and even each version of each browser, interprets this set of instructions differently. So that website you had built for your company 5 years ago (ok more like 10 years ago 🙂 may not display properly in the current versions of the major browsers (the very browsers your customers are using to look you up online).

That means those cool custom graphics that were hot 10 years ago may force your text to run off the page or, even worse, not get displayed at all.

If our goal is to make doing business with us as easy as possible, don’t make your customers hunt around a broken website to find what they need.

So what do I do about it?

Well before we go off and start testing our website in a ton of different browsers let’s head over to our trusted friend Google Analytics and see exactly what a majority of our visitors are using to view our site.

A basic, top level report is available to us Audience > Technology > Browser & OS (you’ll see this in your analytics navigation menu)

Browser and OS

What this report tells us is what browsers people are using when they visit our website.

We can see from the report in this example that 94% of our traffic comes from IE, Chrome, Firefox, and Safari.

If we drill down into each of those top 4, we can see the break down of each version. For example, if we click on Firefox, we can see that majority of the traffic comes from Firefox versions 9, 12, and 11.

browser version drilldown

 

Great! What Now?

Now we want to take a SAMPLING, not every one of them and see how your website looks on those different browsers.

First thing, head over to browsershots.org

Next, pick a few of the top browser versions you just saw in your report.

Browsershot selections

Enter your website URL into the appropriate place. In this example I’m using my own website but you would fill in your own URL instead of blacktoptolaptop.com

Wait while samples come back to you.

After a few minutes (it can take a long time if you pick too many samplings) you can see screen shots of what your website looks like in different browsers.

Here are some of my results:

browsershot results

 

I can click on each one of these to get a snapshot of what that particular browser displayed for this particular URL.  (It happens to be my homepage)

Hopefully at this point there are no surprises. If you see anything scary, like someone took a sledge hammer to your website, its time to get in touch with your website developer.

Unfortunately all the online browser testing sites I’ve found have been sub-par for testing mobile devices.  Probably the easiest way to test your website on an iPhone and Android phones is to just ask somebody that has one and take a look.

Try this out.  Let me know what you get back.  If everything looks good then rest easy.

If you getting back some ugly results, send them over to your web developer or leave a comment below and I’ll be sure to take a look.

Happy Browsing!

Read More