Skip to content
Article

Uncover Your Most Important Browser Rendering Issues in 6 Easy Steps

Somewhere out there, someone can’t use your website. Believe it or not, there are dozens of bugs on your website right now. You may think that your site works perfectly and renders beautifully from the latest Chrome on your Thunderbolt display, but someone out there is bringing up your website using a device or a browser you didn’t know was still alive. You don’t want to know what they will see.

That person might be a potential client who was directed to your website or landing page via a very well-orchestrated marketing campaign. Fine, so what’s the worst thing that could happen? They arrive at a destination that is not at all the beautifully designed website you intended for them to see and you have just kissed a potential client goodbye.

The way I see it, whether you’re overspending on paid traffic or under-converting, you’re losing money. You can throw more money into your advertising pit, or you can chose to do more with the traffic you’ve already attracted. Most people don’t need help figuring out how to spend more money, so I’ll spend some time helping you with the latter here.

The Testing Tools

You can’t realistically account for each and every device and browser version on the planet. What you can do is come close enough to affect your bottom line without investing a ton of money. Two tools that will help you with your quest:

  1. CrossBrowserTesting
  2. BrowserStack

Both of these tools let you see your website through the eyes of any visitor or potential client, even those who are loading your homepage from a Safari 7.0 browser on their iPhone 4s.
BUT WAIT—before you launch down the rabbit hole of pulling up every possible browser/device combination, you’ll want to figure out which ones really matter.

The Pre-Test

So, which browsers and devices should you be testing? For this we turn to analytics. There are loads of analytics tools out there to get the job done, but for those of you who use Google Analytics, here are some instructions:

  1. Go to your Google Analytics Reporting Dashboard and set the timeframe for the past 30 days.
  2. Go to Audience and under Technology, select Browser & OS.
  3. Scroll down to the browser versions and make a list of the top converting browsers.
  4. Still in the Go To Audience category, select Technology under Mobile category.
  5. Make a separate list of the top converting devices.
  6. Repeat the steps for the past 60-day, 90-day, and 180-day timeframes to measure the consistency of your results.

Here’s an example of a table that you could build to help you organize your data:

BrowserVersion%SessionsGoal 1 CRGoal 2 CR
I.E.56.04%
11.055.97%96.41%97.00%
9.018.02%0.64%0.41%
10.015.83%2.94%2.60%
Chrome26.86%
44.0.2403.15734.38%46.75%38.86%
45.0.2454.8515.28%7.13%22.91%
45.0.2454.9314.68%21.59%17.24%
Safari7.82%
8.053.22%33.33%7.16%
7.09.60%33.33%60.37%
9.08.88%0.00%0.00%

Make a separate list for mobile devices:

Device%SessionsGoal 1 CRGoal 2 CR
Apple iPhone40.19%9.09%1.93%
Apple iPad13.52%9.09%16.30%
Samsung Galaxy S511.1%81.82%81.76%
Samsung Galaxy S41.32%0.00%0.00%

Once you’ve got the data, you can raise some important questions. For example, why does your Goal 1 conversion rate drop significantly for I.E. 9 sessions? If a large percentage of sessions are taking place on that browser, it may be worth looking into. On mobile devices, maybe you’ll want to dig deeper into why Apple devices convert less than the Android devices. It could be a rendering problem.

By the way, don’t judge—the issue isn’t whether or not people should be using an older browser or device, but how you can improve their experience with whatever technology your visitors are using. This is about data, not opinions. Don’t make assumptions about which browsers your visitors are using or how much they could be converting until you get the data.

Now that you have your list of suspects, plug the browser and device info into the browser testing tools I mentioned earlier and see what comes out. If you notice any issues, they are probably related to:

  • JavaScript errors
  • Browser compatibility with vendor-specific CSS styles
  • HTML/CSS validation errors (the W3C Validation Service can help with this)

Fix these issues or get a Front-End Developer to do it. Bottom line, don’t risk losing sales over fixable browser rendering issues. On the flip side, there is a pink elephant in the room: the performance of older browsers is inherently diminished, which also affects usability and conversions. To learn how to tackle this issue, check out my blog post on improving the speed of your website.

The Atlantic BT Manifesto

The Ultimate Guide To Planning A Complex Web Project

Insights

Atlantic BT's Insights

We’re sharing the latest concepts in tech, design, and software development. Learn more about our findings.

Questions & Answers

How much is a professionally designed website?

The costs for the development from a professional web design company, more specifically web design in Raleigh, are dependent on a variety of factors, primarily size and scope which translate into the development hours required and thereby cost. For general ranges and more details, continue reading.

Learn More about How much is a professionally designed website?