The Biz The CEO Blog

3 Steps To Responsive Design Browser Testing

By

Comments (0)

Browser Icons

At Voices.com, we're working on a massive responsive web design project. In fact, this blog has already been done in responsive design, so ahead and adjust the browser size to see the content automatically reformat to the size of your browser. Neat eh?

How did we do that? What testing was involved? Find out the steps we took and the tools for browser testing responsive web design. I've listed my favorite tools, a link to a document on responsive web design that I shared with our customers and even screenshots of the charts and data analysis we conducted. Let's take a look!

Step 1: Knowing Which Web Browsers Your Visitors Use

Because most modern web browsers handle HTML5 and CSS3 just fine, you'll be fine for the majority of your users. Where you'll run into issues is when your visitors still have legacy versions of Internet Explorer such as IE8 and earlier.

Running a Browser Report in Google Analytics

Browser-Types-By-Visits.jpg

How do you know which browsers your visitors are using? If you have Google Analytics installed (which you should), then simply navigate to the Audience section, then to Technology subsection. In there, you'll find a report called "Browser and OS".

Tip: I'd recommend adjusting the dates for the last three months for a good sample size. Going further back in time may skew the data as some people have have updated their browser recently.

Analyzing The Results

Browser-Types-By-Visits-Chart.jpg

Out of nearly 1,000,000 visitors to Voices.com in the last three months, I see that 80% of them use Safari, Chrome and Firefox. I drilled in to each browser operating system and confirmed that the bulk of the visitors are indeed using current versions. Phew!

That leaves Internet Explorer with a 20% market share. When I clicked through Internet Explorer I found out that about half of IE users were still on IE8, IE7 and yes even some people on IE6 (below).

Internet Explorer User Testing

This segment is 10% of our overall user base which means its significant enough that we needed to test and make sure the site didn't cause any errors.

Step 2: Testing Your Responsive Design on Old Browsers

If there is one rule of thumb in rolling out a responsive design it would be "don't break the site." We've seen some pretty strange error messages such as "Deployment is not set" in Internet Explorer which popped-up when the browser was scaled down to the width of a mobile device. When we clicked "OK" to clear the error message, the screen went blank and simply didn't load the content. We discovered this "Deployment is not set" error was due to conflicting javascript.

After that experience, I've recognized how important browser testing is, specifically testing on old browsers likely installed on Windows XP machines.

Like me, you're probably on a Mac Book Pro or another Mac, so how do you get access to Window XP to do your tests? While it may be old news to you, I discovered an amazing virtualization application called VirtualBox from Oracle. Here's what Windows XP, and our responsive design blog looks like running on a Mac.

IE8 Windows XP Browser Testing

You can download VirtualBox free and then install the browsers using these instructions:

  1. Download & Install VirtualBoxDownload Now (direct .dmg download link) – visit VirtualBox Downloads page
  2. Launch the Terminal (located in /Applications/Utilities/)
  3. Decide which versions of Internet Explorer you want to download and install – each version of Internet Explorer is contained within a separate virtual machine that runs within VirtualBox. In other words, if you want to run Internet Explorer 7, 8, and 9, you will need to download three separate VM’s, which may take a while so keep that in mind. Select the text below and copy it:
    • Install ALL versions of Internet Explorer: IE7, IE 8, and IE 9

    • curl -s https://raw.github.com/xdissent/ievms/master/ievms.sh | bash

    • Install Internet Explorer 7 Only

    • curl -s https://raw.github.com/xdissent/ievms/master/ievms.sh | IEVMS_VERSIONS="7" bash

    • Install Internet Explorer 8 Only

    • curl -s https://raw.github.com/xdissent/ievms/master/ievms.sh | IEVMS_VERSIONS="8" bash

    • Install Internet Explorer 9 Only

    • curl -s https://raw.github.com/xdissent/ievms/master/ievms.sh | IEVMS_VERSIONS="9" bash

  4. Copy and paste the selected command from above into the Terminal and hit return, this will start the download and conversion process. How long this takes depends on your internet connection and how many versions of Internet Explorer you chose to install
  5. Launch VirtualBox and boot Windows & Internet Explorer – select the virtual machine corresponding to the version of Internet Explorer you intend to use: IE7, IE8, IE9, then click on the “Start” button to boot that Windows machine with that version of Internet Explorer.

I've been testing in these browsers for the last couple of days and have discovered many formatting issues, not all of which have been solved yet, but at least they've been spotted.

Step 3: Ask Customers To Send You Their Screenshots

At Voices.com we use Chatter, an online collaboration messaging app from Salesforce.com. Normally, we use Chatter internally to post status updates and sharing information internally but I thought I'd give the "Private Customer Groups" feature a try.

Chatter-Customer-Groups.jpg

In Chatter, create a Customer Group and then simply "Add Members" to send an invitation to those people you'd like to invite to your beta testing group. Once a few people have joined the group, you can engage them in discussion by asking a question. Customer can share updates, links and even file attachments such as screenshots from their browsers.

For context, I created a brief document explaining what Responsive Web Design is and how it will benefit them as customers of Voices.com. Below is the thread that followed.

Chatter-Private-Beta-Tester-Group.jpg

Historically, I've done this kind of work via email but I found I was sending and receiving a lot of email. Further, I was replying with the same response with explanations on why something doesn't work or why we've decided to take a certain approach to the implementation. Lastly, email conversations get lost and rarely gone back and referenced.

With Chatter, I've found that this centralized conversation spot has kept me and our beta testing group engaged.

How you get feedback from your customers is up to you. Doing it is what matters.

What Browser Testing Tools Do You Use?

While the above isn't exclusive to testing your latest responsive design website, it sure helps having a step-by-step process to follow.

Are there vital steps that you take to test a responsive design site? Share your tips and tools in the comments below.

Make it a great day!

David


Comments


Leave a Comment



Recent Articles

Responsive Design Increased Visit Duration by 17%

How To Give a Google Glass Demo

3 Ways To Subscribe To a Podcast with iTunes

How To Get Google Glass

3 Steps To Responsive Design Browser Testing

Google Planning Audio Ads in Streaming Music Service

How a New Breed Of Small Businesses is Harnessing the Power of Emerging Technologies

The LAMP Technology Stack

How To Speed Up a Website

History of the Voice Over

   

Subscribe by Email

About This Blog

Learn how to run an online business and see which tools Voices.com uses to serve a global market of over 100,000 users.


Follow Us

   

Our feed & social options update you with special offers and news as it happens.

Do You Have a Project?

Request a Quote

Looking for voice talent? You've come to the right place. Post a job and you'll get sample recordings of your script and price quotes.

Tell us about your project