Need free tools for testing your responsive web design/ site?
We hear it from clients all the time.. “But isn’t my theme responsive- so that’s all that is necessary right?”
Web designers these days should be across the principles of responsive web design – ie how to get your sites to render perfectly on whatever device or screen size it appears on
But, to ensure your site IS fully responsive, you actually need to test it on MANY different devices (especially mobile for Google)
Problem: most of us (and many of our clients) don’t have the budget to go out & buy hundreds of phones & tablets etc that you need to carry out “real-world tests” ….theory and practice often being 2 separate things.
The tools below can help by letting you test your responsive designs in a ‘virtual environment’ which is better than NOT testing at all.
Responsinator is simple.
Just type in your URL and this browser-based tool shows you how your web page renders in the most popular screen shapes and sizes.. free
Screenfly
Screenfly is another free tool for testing.
Just enter your URL, pick your device and screen size from the menus and you’ll see how well your site is working.
Featured devices include desktop computers, tablets, televisions, and smartphones.
DevTools’ Device Mode offers an easy way for developers to simulate mobile devices within the Chrome browser.
Use it to learn how your site appears across different screen sizes and resolutions, including Retina screens. You can even simulate device inputs for touch, geolocation and device orientation within the emulator.
Google Resizer
Google’s Material Design guidelines include advice about using breakpoints, responsive grids, surface behaviours and user interface patterns.
Google Resizer allows you to enter a custom URL and view a site across Material Design breakpoints for desktop and mobile. If you want to see a demo first, click on the address bar and select ‘Pesto’ or ‘Shrine’ from the drop-down menu.
Ghostlab
A paid-for website testing app, Ghostlab allows you to test your website on a multiplicity of browsers and mobile devices simultaneously. Start testing in one browser or device and all the others will mirror your actions, whether you’re clicking links, selecting buttons, filling out forms or reloading the page.
Handily, you also can take a screengrab from any device, annotate it, and drag and drop it to your bug tracker. See it in action in this video.
Browser Stack
You can set up a free account to test!
Browser Stack is one of the most advanced, full-featured testing tools around.
The paid-for app offers access to more than 1,000 mobile and desktop browsers for testing purposes, a list which is continually being updated, based on market trends and usage statistics with different plans available
CrossBrowserTesting
Browser Stack’s biggest rival in the testing space is CrossBrowserTesting, which offers more than 1,500 browsers and devices to test your responsive website on.
Its all-in-one platform allows you to run parallel automated tests, compare screenshots visually, swipe and interact with your website on real-world devices, and remotely debug your code as you go.
Remember, Google is “Mobile first”….. Good Luck!