Can you solve browser compatibility issues? We take a look

If only all the users of the World Wide Web would pick one search engine and one internet browser and stick with it. It would definitely make the web designers happy. Instead, there is browser choice; Mozilla, Firefox, Explorer, Opera and the list goes on. And at the time of writing, Microsoft’s new web browser, to be called Microsoft Edge, is causing excitement. But this deluge of software, search engines and browsers causes designers a browser compatibility headache.

We are of course being a little silly, but browser incompatibility can be a serious problem. It means your site won’t display clearly to all users who are browsing and could lead to them bouncing off your page to a competitor. Not a good thought. So here’s the lowdown to help you get to grips with this search engine headache.

Browser incompatibility issues occur when your website won’t view properly in certain internet browsers and from different search engines. Perhaps you built your bells ‘n’ whistles site to look amazing in Chrome, but if someone is browsing using Firefox or Explorer? Or is viewing from Mozilla, Opera or Safari? Uh oh, the formatting has gone dodgy and it’s impossible to view. So why do these pesky problems occur? To work that out we need to open the can of worms that is html.

How html can cause you a problem

All internet web browsers, like Mozilla, Explorer and Chrome, work as a sort of translation service for html. They read the code and then transform it into a recognisable webpage for users to view. The trouble is, html is written by humans, and humans all write differently, and interpret the norms of html differently.

It’s true that html best practice demands that all pages start with a doctype to tell the browser which version of html to expect. Does it always happen? No. Which can send browsers into a bit of a tailspin.

And because html is written by people not machines, there’s always room for human error which leads to mistakes in the code. A closing tag missed off here, a wrong letter typed there and it’s an internet browser incompatibility accident waiting to happen. You might get away with it in Chrome and Microsoft’s Explorer, but Mozilla and Firefox may rebel.

There are tools available to help you check your html before you publish, take a look at:

• Tidy your html
• Html tidy

And if you’re keen to find out more about programming, learn more about PHP, and our Javascript guide is here.

Browsing, browser bugs and moving goalposts

Rare is the software that doesn’t contain a bug. And web browsers are no different. Particularly – whisper it – Microsoft’s Explorer, which is notorious for problems in its software. Although they will have been rigorously tested in development, once they’re loose on the world wide web, software malfunctions start to happen. So however much you test your code to solve a browser incompatibility issue and ensure it views well in browsers such as Mozilla, Firefox and Chrome, sometimes the fault lies with the software and the internet browser.

And browsers don’t remain static, they update. So if you introduce some fancy cutting edge code into your website and a browser is still running on an old version, it might view correctly. The safest way is to write code that you know will display on the last two iterations of most browsers. Don’t believe us? This article shows that automatic updates don’t always work (and users can also choose not to update).

PC versus Mac – the war continues

The rivalry between PC lovers who rate Microsoft and those that marvel at Macs (and their beloved Safari browser), spills over into cyberspace. Particularly when it comes to fonts. Some fonts are specific to Macs or Microsoft, so will not display correctly in all internet browsers.

So if you gaily use fonts only available to Mac users and Safari, your Microsoft people who are browsing from Opera, Mozillaor Firefox are not going to be happy when using certain browsers. Bear in mind as well that font size can differ between Macs and PCs, so instead of using a FONT tag to set the size, use a Cascading Style Sheet (CSS) to set your font size in pixels.

Here’s a guide to fonts which are common to both Mac and PC.

What can you do to solve internet browser compatibility issues?

This is the bit where we’d like to produce a magic web designer wand and wave it. But the next best thing is to tell you that solving this kind of software problem is not easy. And yes we know that doesn’t help much. But there are a few steps you can take. Remember: To stand an outside chance of success, you need a professional website design.

Set limits on the problem

The brutal truth is that you will never solve all your browser problems. There are too many users browsing and viewing from too many browsers. Not to mention the variety of search engines available. So you need to focus on the browsers you care about. How do you do that? By taking a look at where your traffic originates.

If you discover that a teeny percentage of your visitors are browsing or viewing using Opera, Mozilla, Microsoft’s Explorer, or Chrome, well it might not matter so much if your page doesn’t view correctly in that browser. You can see which browser your visitors are viewing from by digging in to Google Analytics.

1. Log in to your Analytics account.
2. Choose a 3 month period to view.
3. On the left hand side under ‘Audience’, select, ‘Technology’. You’ll see ‘Browser and OS’ drop down.
4. Click on Browser and OS and you’ll see a list of which browsers your users are using for browsing. This will help you determine which browsers you need to target to make sure your site displays correctly.

Play safe

If you’re a web designer, you might be tempted to throw some fancy code into your website. But if that means your site makes for horrible viewing in Safari, Mozilla, Explorer, Firefox or Chrome, is it worth it? Although it might be a little dull, it’s better to play it safe and go for middle-of-the-road code that works in most browsers. This article can give you some good pointers.

Use a browser compatibility report

You could install Firefox, Explorer, Safari, Chrome and all the other available internet browsers onto your desktop to check that your site displays correctly. But it would be a pain, right?

Instead, go for a browser compatibility report. There are loads of tools out there to help you get one, here are just a few to get you started:

• Browser Compatible
• Cross Browser Testing
• Browser Shots

Trial and error

If you’re having problems when users are browsing from, say, Opera, Explorer or Firefox, on a certain page, you could try gradually eliminating sections of the code on the page. First make a complete copy of the original code. Then start removing sections of the code, and keep checking how the page displays. Through trial and error you might be able to wheedle out the offending portion of code that’s giving you browser compatibility headaches.

So can you really solve browser compatibility problems? Forever more?

If we could answer ‘yes’ to those two questions, we’d be quids in. In truth, the answer is that you can aim to reduce browser compatibility problems. But no, you can’t solve them forever. As long as new internet browsers keep coming, and users are browsing from a range of browsers, then so will the browser compatibility problems.

If your site is displaying horribly in all the main internet browsers – think Chrome, Mozilla and Firefox – it’s time for crisis talks and an urgent plan of action. But it’s more likely that compatibility issues are an ongoing niggle. So the best way to deal with this problem is to allocate time to resolving the issues on a weekly or monthly basis. This allows you to keep a regular focus on the problem, while keeping it in perspective and retaining your sanity.

Good luck!