Free tools to test your responsive Drupal themes

Free tools to test your responsive Drupal themes

06Jul 2012

We recently launched TB Methys II - a Fashion Drupal theme (our first Drupal 7 responsive theme). How to make sure the theme can adapt correctly on different browser dimensions, orientations and screen resolutions? Should we buy all available devices or is there another solution for that?
It requires much testing work to ensure the theme can be displayed on various mobile devices and tablets. Along the journey, we discovered some practical & free responsive design testing tools that really help, hence we wanna share those tools which can make your development process for responsive websites much simpler.

Image from http://www.di.net.au/blog/the-case-for-responsive-design

In general, most responsive web design testing tools offer the following features:

  • Load a website into different iframes.
  • Test the theme on different device viewports.

Each tool has slightly different features and focus, hence you need to test on several tools to get the best desired result.

1. Responsinator - Quick review of your responsive site

Give the quick review of responsive design for any website on different mobile devices and tablets such as: iPhone, iPad, Android, and Kindle Fire. The site will be wrapped in the iframe, hence it gives you a real feeling and outlook of how your responsive layout adapts to specific devices.This tool has a friendly user interface which can help before you want to use a Drupal theme.

2. Screenfly - Test Responsive Web Design effortlessly

Another great free tool which offers you more choices (Desktop, Tablet, Mobile, even television testing). From tablets such as Apple iPad, Samsung Galaxy Tab, Motorola Xoom to mobiles like iPhone 4, Google Nexus, LG Optimus. The desktop testing is currently for Safari browser only and television testing is limited to Opera.

3. ScreenQueri.es - Testing websites with ScreenQueries

Test the website on exact pixel width and height by changing the provided ruler. ScreenQueri.es is designed for advanced users, by simply enter the Url and you can see the responsive effect on the X & Y axis as well as real-view (optional). Drag the resize button to see how the pixel change as your desired resolution. In default, the tool has the viewport for Apple, Android, Windows Phone devices and tablets. You can save and share your design on social networks, too.

4. Responsive Design Testing by Matt Kersley

Test your responsive design quickly and effortlessly in multiple screen widths and device types such as: 240 x 320 (small phone), 320 x 480 (iPhone), 480 x 640 (small tablet), 768 x 1024 (iPad – Portrait) and 1024 x 768 (iPad – Landscape). Although, the content width cannot be pixel perfect as 15px had been added to the iframe to cater the scrollbars, this tool still shows you the adequate testing result.

5. Responsivepx by Remy Sharp

Simply enter your website/localhost Url into Responsivepx, you can use the scrollbar on the top to adjust the pixel width and height viewport to get real pixel of the site.

Other Responsive Design test tools

There are also some other simpler tools, often available as bookmark extensions for browsers like: Review by Edward Cant, resizemybrowser.com, Responsive by Victor Coulon, Resizer by William Golden, an editable RWD bookmarklet by Benjamin Keen, finally ResponsiView– Chrome Web Store, etc.

Yes, these tools are very helpful for testing responsive themes, however you still need to test on real devices. A simulator cannot replicate how the theme will be displayed and especially how you experience the Drupal theme in your hands. This is a trend in web design, hence you need to take more effort to plan and implement a responsive Drupal theme. But it is a good investment to save time for later maintenance. Imagine the time you need to maintain different versions of a website for different mobile clients.

Drupal mates, tell us what tool do you use for testing responsive design? Did you end up using one of these above tools? Leave your feedback, we love to see other tools in this list, ping us a link and we will update this post!!

Blog type: