One of the biggest challenges I face as a web developer at Epigeum is making sure that our courses display consistently for all potential users, regardless of what device or platform they’re choosing to use. 

When I joined Epigeum about 4 years ago, all of the resources I worked with were created previously with Adobe Flash. The great thing about working with Flash was that each interactive element was isolated from the HTML surrounding it. In Layman’s terms, this meant that our interactive elements never suffered from any browser-specific problems, and no testing of this type was required. It was also commonplace to assume that none of our users would attempt to view our courses on any device other that a desktop computer. This made the testing phase, for my work in particular, quite straightforward. 

But we’ve adapted with changing technology and advanced the way we build these interactive elements so that we can support mobile devices such as Apple’s iPad. However, keeping ahead of the curve with technology created new problems.  An increasing number of possible platforms means that more testing is required. 

Here are my top tips to help you remove any cross-browser problems before you come to test your project.

1. caniuse.com

This is one of my favourite and most-frequently visited websites whilst I’m working on our courses here at Epigeum. Caniuse.com is a comprehensive list of all HTML5 and CSS3 features and lists all versions of  popular browsers that support them. Often where a particular feature is poorly supported, links are provided to help you write additions to your code to make sure that can see your content, whether it’s an emulated version or just simplified content. 

Link – http://caniuse.com/ 

 

2. Developer tools

A lot of major browsers these days come with developer tools included. These tools allow you to see your HTML and CSS alongside your project preview and allow you to make live changes to the content and styling without risking making any damaging changes to your HTML or CSS files. 

Link – http://getfirebug.com/

Link – https://developer.chrome.com/devtools

 

3. Single out Internet Explorer

It is commonly known in the industry supporting several versions of Internet Explorer requires extra work, but this has been made easier with the introduction of conditional commenting. Conditional commenting allows you to write a block of code inside a specially formatted tag, and that code will only be visible only to users of the version of IE specified in the tag. 

Link – http://msdn.microsoft.com/en-gb/library/ms537512(v=vs.85).aspx

 

4. Auto-refresh software

One of the most useful pieces of software I use in my development setup is called CodeKit. CodeKit does a bunch of useful and clever things like compressing your files and applying browser-specific prefixes where you might have missed them. 

But the most useful feature for me is the ability to automatically refresh the page you’re currently working on. CodeKit allows you to host a folder on your machine and make it available on your wireless network. And what’s more, CodeKit ‘listens’ for any changes in your project, and will automatically refresh all connected browsers – which saves a huge amount of time, especially if you’re developing for mobile devices. 

Link – https://incident57.com/codekit/

Link – http://alphapixels.com/prepros/

 

5. Virtual machine / browser stack

Most of the bugs I’m faced with are specific to a particular version of a browser which I often don’t have installed on my development machine. This is where virtual machines come in. 

A virtual machine allows you to recreate a specific environment to help with your testing. Microsoft has supplied a large number of versions of their Windows operating system that you can download and install onto your virtual machine. 

If installing a virtual machine is not possible, an alternative method is to use Browser Stack – a paid service that provides a plethora of environments ready for you preview your project.

 

Link – https://www.virtualbox.org/

Link – http://www.browserstack.com/