Testing
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
- https://developers.google.com/speed/
- https://developers.google.com/webmasters/
- https://developers.google.com/webmasters/mobile-sites/
- https://developers.google.com/web/fundamentals/
Helpful Checking Tools
- Google Page Speed
- Google Mobile-Friendly Test
- Google Rich Snippets / Structured Data Testing Tool
- W3C HTML Validator
- W3C CSS Validator
- W3C Internationalization Checker
- W3C Feed Validation Service
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)
Debugging
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:
-
Pesticide
(Available as a chrome extension or as a bookmarklet to outline all elements on a page, this really helps identify layout of elements to track down problems)
-
DebugCSS from Yahoo!
(Helps track down possible problem areas and improvements of your html and css)
-
HTML_CodeSniffer
(Generate a report of improvements to the page html source)
-
ReCSS
(Reload your CSS without refreshing the page)
- DOM Monster
(Report on improvements to your page) - Google Chrome Dual View / Split Screen
(Split the screen into 2, useful for making changes in the one and comparing to another) - Quick Diff
(Quickly diff changes between too files or strings)
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:
- Web design weekly
- Responsive design weekly
- Javascript weekly
- HTML5 weekly
- CSS weekly
- Versioning (from Sitepoint, daily email)