In the last part of this series – kc web design Kent tools for web design – part 6 – we talked about local dev tools. In this article we’ll be looking at mobile testing tools for use with responsive web design builds and testing.
Responsive web design has rocketed to the forefront of the web design industry in the last 12 months and it’s a very important direction for web design to take. The market share of mobiles and tablets is now very large with some sites seeing nearly 50% of their browsers viewing on mobile devices. Most web design project now incorporate responsive design where applicable (not all websites have to be viewed on all devices) and this means theres a whole new set of devices we have to test on. In an ideal world you’d have a physical device to test on as you do with desktop but there are so many mobile phones and tablets on the market it’s almost impossible to have them all to hand for physical testing. So, what are the alternatives?
When creating responsive web designs at kc web design Kent we normally use media queries to specify certain browser size break-points for the design to change within so using these break-points we can test at different browsers sizes without being on the actual device. The easiest way to do this is to resize the browser window and you’ll see the design change as you hit those break-points. If you want to see these break-points as devices or see multiple views at the same time then there are a number of online services around such as www.responsive.is or responsinator.com or mattkersley.com/responsive/.
If you want to be a bit more device specific and view your responsive web design on the actual device then there’s Adobe Shadow or the very much under-rated and often forgotten iPhone Simulator that comes with Xcode which is one of our favourite was of testing on the iOS. For other non-Apple devices theres the Opera Mobile Emulator which is very handy for all those fiddly, in-bvetween screen sizes. Theres even a Mac app called Aptus that allows you to set you’re own break-points and then view websites so testing on your Mac while coding becomes very easy.
There are many, many solutions out there for responsive web design testing but it’s mostly about finding one that fits into your work-flow.