Modern browser testing

Browser testing has come along way, these aren't the days of IE5/6 double margin bugs or old IE hasLayout problems.
We still battle some bugs but by large they are much less common to run into for day to day design. However this doesn't mean you don't need to test!

Contents

1. Tips while coding
2. Selecting browsers to test
3. Why BrowserStack
4. Testing like a pro

Tips while coding to make your browser testing easier

1. Don't focus too much on making your designs pixel perfect in every browser.

   "While some designers strive for cross-browser pixel perfection, proponents of fluid design do not think that layouts have to look identical across all platforms and screen resolutions."
   - The Smashing Book (Chapter on the Art & Science of CSS Layouts)

   Often clients (or our own OCD's) will want a design to be pixel perfect across multiple browsers and sizes, but there's very little need for this. I'm not saying make them drastically different in each browser, but if they have minor differences then this is good enough for me. The important thing is the design is able to adapt to the available screen size, and look good enough in browsers where support for some features isn't easily available. E.g. rounded corners with border-radius, these days it's pretty much all browsers, but if you go back to IE8 it doesn't support border-radius. Though if you look at your design, does the fact it doesn't have rounded corners cause any problems? no? great, leave it, no fancy polyfills etc needed. Which nicely brings me to my next point.

2. Don't fear vendor prefixes, but also don't fret about them either.
   That sounds confusing, I probably could word that better.
   What I mean is, feel free to use vendor prefixes in your code. But make your own decisions of when to and not to use them. E.g. flexbox is a great case of where it's needed, especially because of IE10's alt syntax. But css gradients, if you set a fallback background-color then this will likely be fine if you don't bother adding the vendor prefixed versions too as they will use the fallback.
   There are many sites out there that offer automatically adding prefixes to your code. But simpler than this, you can get editor plugins (for Sublime, Atom, etc.) which can run right in your editor with a single command. One rule to remember with these new css properties & vendor prefixes is, always use the real property too, don't just style for webkit prefixes, make sure you style for all and then add prefixes for added support. Also, think about browsers that don't even have prefixes. Make sure your design degrades gracefully without them, or better yet, build without them where you can and add them on top after, so you know the base is already nice and this progressively enhances the design in newer browsers.

3. Avoid browser specific hacks.
   Ok yes, very unlikely if you're supporting IE7 or 8 maybe. But 9+ and most other modern browsers, do you really need that hack? In the case that you super need a hack, browserhacks.com is a great resource for it. But is it needed?

4. Avoid adding lines of code you don't understand.

   Sure use libraries and snippets, in fact I encourage it, but try to look and learn how they work. Especially if it's a few lines in your own css. Sometimes when you copy other peoples code you can be left with properties that don't appear to make sense. Best case is if they are not explained somewhere, try taking them out, does it break, if so you'll learn why they were added, and if not, maybe you can remove them to simplify the code. You can always add them back in later if needed. But try to avoid seeing some code as magic. Magic hides reality, and often I've found magic can lead to bugs.

5. Resize your browser often while developing.
   This is one of the fastest ways to quickly catch problems fast, and to prove your designs adapt to the screen size available.

6. Learn to master your browsers dev tools
   Each of the major browsers have developer tools that help you build sites. Its really worth investing time in learning these tools. Most of them offer some sort of emulation for browser modes, screen sizes, user agents etc. So this is useful for browser testing. But the tools are also useful during testing because you can use them to inspect elements style to see exactly why something isn't working. Rather than the old methods of try this property, refresh browser maybe it'll work. Instead you can try your ideas live!

   Spend some time familiarising yourself with the top browser tools: Chrome, Firefox, Opera, Safari, IE, Edge.

   Here's a free course on the chrome dev tools, really worth a watch.

Selecting browsers to test

Always test the latest browsers, versions & platforms.
Chrome latest, Firefox Latest, IE11, Edge Latest. Android Chrome latest, IOS Safari latest etc.
This is the quickest way to be extra safe with your design.

Working with an existing site

If your existing site has analytics, this is the perfect place to start to make sure you cover it's most used devices, browsers and versions.
For example, just because you've tested on the latest IOS safari version, doesn't mean that's the version that's currently most in use for this site.
It's really worth checking the browsers that bring the most visitors and importantly the most conversions.

Login to Analytics > Audience > Technology > Browser & OS.
Then you can also click on a specific browser to then find a tab to see specific versions of that browser.

Be sure to set the date range for last month, and then also compare to last 6 months.

You can check out device/browser sizes if you click the Screen resolution tab at the top, though my personal recommendation is to make your design adapt to all screen widths rights down to 320px (or 240px if you can but not always so easy).

If it's an ecommerce store & revenue is stored too then you can see which devices, browsers and versions generate revenues. This is important, as if a specific older browser is bringing in thousands, maybe a couple big customers use it, it may not even be a popular browser but if it brings in the bucks, you'd better be supporting it ;).

Find out more details on using Google analytics to find browser support here.

Browser testing with BrowserStack

Ok, I cannot stress the importance of this tool: BrowserStack

This may sound like an advert for BrowserStack, I just really love their tool.

Here's my 5 favourite features it has!

1. Test on all the major browsers & versions,

2. On all the major platform versions of Windows, OS X, Android, IOS & Windows Phone. - It's not just about the browsers, its also about the different versions of them, and the different platforms they are on.
   When a client calls up saying they have a problem on IE 10 on Windows 8, you can fire up BrowserStack and test the same as them.
   Speaking of which, tools like Findmebyip.com offer urls you can share with your clients to find out what browser they are currently using as often people don't know.

3. These are not emulators, real browsers on real platforms! I've had designers tell me before they don't trust services like this because it's not the real device, which i understand, but with BrowserStack you really have access to real instances of windows and OS X with the real browsers installed. Also for mobile they have "Physical Devices" which are real devices in a device farm BrowserStack have so you're really on the device testing! They also offer emulators for some mobile devices they don't have, but the physical devices cover most cases.

4. Their mobile features are top notch. Access to dev tools on mobile devices is more important than I can express! This one feature really is worth the subscription on it's own.

5. Zero setup & it boots up super fast! Starting up a test laptop or VM can take longer and on a good connection BrowserStack feels fairly smooth!

Bonus feature: Built in issue tracker, I haven't used this feature much but on a project where you're testing but not the developer, you can use this to keep screenshots as a list of issues for the designer/developer to fix.

Aside notes on testing apps

I'll mention here BrowserStack is not the only tool out there for this, It's the one I use most and personally I believe it's the best tool for the job. It's worth knowing about other similar tools such as: Browsershots, turbo.net/browsers and Browserling

It's no replacement if you already have the device in front of you, but you wont have all the different versions in front of you. You may have a couple iphones in the office, maybe even different models. But are they on different IOS versions and therefore different mobile safari versions? Don't forget about people who haven't upgraded their phones yet, and no, saying "they should just upgrade" is not an excuse! (Something a friend once said to me with his design after I pointed out an IOS 5 issue, sighs).

Also worth noting, if browserstack is not available to you, or it's too slow, you can use VMs for windows / IE / Edge debugging, in fact Microsoft provides these free.

For mobile device debugging, you can use dev tools with chrome's remote debugging feature. Follow this tutorial on how to set this up.

Testing like a pro

These are some brief tips to testing, but all this boils down to using the site like a real user.

1. Resize in and out on every page.
2. Scroll up and down while resizing, don't just load it on small screen and assume because the top of the page is ok that the rest will be too.
3. Click every link, to the point of trying to break the site.
4. Following on from the previous tip, try to break the site! Don't just test the things you already know work, try to think outside the box, your users certainly will.
5. Pay special extra attention to custom interactions you've added to the site. Just because it looks nice, doesn't always mean it works.
6. When you do find bugs, use the browser dev tools like mentioned above, especially the console if it's an interaction / javascript issue.
7. After testing, accept that you can't test everything perfectly, over time your testing skills will be better, but it's important you’re aware reports of bugs will come in. You need to be ready for those reports, ready to find out which browser has the issue if possible like we talked about above, and try to reproduce it in the same browser version.

Additional testing for bonus points

1. Test performance with Google Page Speed.
2. Test mobile friendliness using Google’s tool.
3. Check the SEO of pages, such as title tag, meta tags, single <h1> tag, alt tags on images etc. Moz offer some great information on this.

I hope this has been useful, please leave a comment below with any of your own tips on browser testing to help improve this resource for others.