By David Ciccarelli
April 6, 2013
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
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
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).
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
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.
You can download VirtualBox free and then install the browsers using these instructions:
- Download & Install VirtualBox – Download Now (direct .dmg download link) – visit VirtualBox Downloads page
- Launch the Terminal (located in /Applications/Utilities/)
- 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
Install Internet Explorer 7 Only
Install Internet Explorer 8 Only
Install Internet Explorer 9 Only
curl -s https://raw.github.com/xdissent/ievms/master/ievms.sh | bash
curl -s https://raw.github.com/xdissent/ievms/master/ievms.sh | IEVMS_VERSIONS="7" bash
curl -s https://raw.github.com/xdissent/ievms/master/ievms.sh | IEVMS_VERSIONS="8" bash
curl -s https://raw.github.com/xdissent/ievms/master/ievms.sh | IEVMS_VERSIONS="9" bash
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.
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.
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!
Leave a Comment
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.
Our feed & social options update you with special offers and news as it happens.
Browse This Blog by Topic
Do You Have a Project?
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.