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

What is web design and development?
People often lump web design and development together, so what's the difference? As the Internet has evolved, the skills required to produce a high quality website or web application have changed.
Learn More about What is web design and development?
What is JavaScript used for in web development?
Historically speaking, JavaScript was only commonly but sparingly used in web development. The multiple browsers in use at the time each supported different versions of JavaScript and were slow to render more complex Javascript.
Learn More about What is JavaScript used for in web development?
What is bootstrap in web development?
Bootstrap is a framework used in front-end development to save time, specifically for mobile-first development. It combines CSS and JavaScript templates and libraries to speed up the development process.
Learn More about What is bootstrap in web development?
What is front end vs. back end development?
As web development evolved, it separated into logical specialization: front end web development and back end development. While back end development involves the server-side development, front end is the final rendering.
Learn More about What is front end vs. back end development?
How do I create, organize, and write a digital strategy?
Nearly every time, good execution outperforms good ideas. For the most effective execution, it's essential to have a strong underlying strategy. Try organizing an offsite multi-day retreat with a facilitator.
Learn More about How do I create, organize, and write a digital strategy?
How do I avoid digital strategy pitfalls?
Like any strategy, there are more ways to find pitfalls than success. The first step in planning is to clearly articulate the overall strategy in a way that is easy to understand at all levels of the organization. 
Learn More about How do I avoid digital strategy pitfalls?