Ensuring happy, robust web designs for all browsers

Attention to detail, and an end product that's robust and works well are really important factors to us when creating a new web design.

Part of the way we hit these is to make sure our websites are compatible with all browsers.

There are so many web browsers in this day and age. Long gone are the days of IE vs Netscape, the web browser scene is now bursting with Internet Explorer, Mozilla Firefox, Google Chrome, Opera, Safari, and we're not even onto mobile browsers such as Safari Mobile, the stock Android browser, Chrome Mobile, and the list goes on!

How we make a website compatible with all browsers

Here's what we do:

1. We test

The tools we use have changed over the years, but currently our favourite solution is a cross-browser testing tool called Browserstack.

As part of our development process, we use Browserstack to test all our sites as they come into land. This tool allows us to test how the web design works not only in all versions of major browsers, but each of these browsers in different operating systems, and on a variety of devices.

We test in Browserstack thoroughly, fixing any issues we spot along the way. It's not just something we consider for new web designs, we make sure to check back when we make changes or add new features to any of our ongoing projects.

As great as Browserstack is, it's handy to check on real devices too - especially on smartphones and tablets. This can highlight some issues you'd never notice on a desktop - we make sure we get our fingers and thumbs into action and make sites touch and small screen friendly!

2. We sniff

We make the most of browser sniffing techniques to pick up which browser version, OS, and in some cases which device your visitors are most likely to use.

We use that information to target specific styling code and fixes to tailor towards specific browsers where possible.

3. We prefix

Newer styling techniques often require prefixes adding to the code to give them the best chance of working well across the board. Sometimes they even need coding in a completely different way.

We use clever coding (utilising SCSS) to automatically cater for these differences. Even better, the code takes care of compiling those prefixes when we launch changes to websites, meaning there's no loss of performance for users.

4. We listen

As much as you can test thoroughly, chances are you have a vast audience for your site using a big range of different browsers. We make the most of user feedback and fix any issues that real users pick up on, be that in an early beta release, or even after launch. 

That's how it's done!

So that's a glimpse into the lengths we reach to make sure our sites work well across the board. Does your site play nicely with all web browsers? If not then read the rest of the website articles on our blog.