Emulating Devices:

There are many sites and apps out there that offer different ways of testing accross different browsers and devices. But the built in chrome emulation tools are pretty impressive: https://developer.chrome.com/devtools/docs/device-mode

Perfomance / Optimizations

Helpful Checking Tools

Graded Browser Support

We offer 3 grades of suppport for difference OS / Browser combinations. A-grade (Full support), B-grade (Untested but will offer support on if issues found) C-grade (Core/Limited functionality support only) and F-grade (Unknown support, but can be upgraded to C-grade if an issue is found).

Similar to Yahoo Graded Browser Support and Salesfoce Graded Browser Support

Please see: http://support.reallyeasycart.co.uk/solution/articles/54711 for supported browsers.

Responsive design testing:

As mentioned above, the emulation testing in modern browsers such as chrome is very good now.
But there are also many browser addons and bookmarkelts that cane really help, such as:
  • Emmet Re:view
    (Excelent Chrome extension that parses your CSS for media queries, and then shows iframes at each of these breakpoints)

  • RWD Bookmarketlet
    (Nice and simple responsive testing javascript bookmarklet)


This is still a great article on debugging CSS: http://www.stubbornella.org/content/2012/05/02/cross-browser-debugging-css/
Also this page has some very useful tips too: http://blog.teamtreehouse.com/tips-debugging-html-css

Here's also some bookmarkelts that i use to help debug issues:

On the subject of useful tools, these sites / web-apps can really help with making sure your code is cross browser compatible to start with:

  • Can I Use
    (Find out current browser support for latest css properties, selectors etc, as well as latest html5 feature/techniques support and latest javascript browser api support)

  • HTML5 Please
    (More information on if you can use a html5 feature yet, and if any polyfills exist to get cross browser compatibility)

  • CSS3 Please
    (Offers latest needed fallbacks for browser support for common CSS3 properties)

  • Modernizr
    (is a javascript lib already loaded in your REC site, it's worth reading up on its use though as you can use it for a lot of interesting things!)

  • Old IE browser classes
    (You may have already noticed these but we add classes to older IE versions onto the html element to allow you to better target them)

Lastly, keeping up to date is one of the best ways to stay on top of all this:

There are thousands of great dev blogs out here, here's a few to get your started:

But keeping up to date with them can be a real pain. To tackle this there has been an increase in newsletter sites that offer weekly roundups: