Finally, as we develop our responsive website, we’ll come to the point where our content clean and adaptive, our images are flexible and our layout is fluid. Now we need to make sure that our site works in as many browsing environments as possible and test the website in different resolutions and how the media queries work.
To get started with building a responsive site, having a strong toolkit (see also: 10 Free and Responsive jQuery Slide/Gallery Plugins and jQuery Plugins for Fluid Layouts/Responsive Web Design) can make a world of difference.
Testing responsive web design could turn out to be a tough job, it’s not convenient resizing to a specific dimension (width and height) each time. Changing browser width and testing it across different browsers and devices is painful and adds loads of development time. These tools listed below will definitely help you in testing your responsive website at multiple screen sizes.
Online Web Tools
Test your site on many devices by filling in your URL. This is a very cool tool because an outline of the devices is displayed on the page too, creating a real-life time view. If you wanna impress your clients with their new responsive website, make sure to use the responsinator!
Doesn’t work on Opera and Chrome because they have poor support with the “ResizeTo” event. For Safari, it’s recommended to use Resize Safari Extension, it offers advanced features such as “Offline usage”, “Resize multiple tabs at once”, “Reference book”, “More customizable presets” and the “MoveTo tool”. Works perfect onFirefox and IE tho ;-P
Responsive Design Testing
This tool is for everyone who needs a quick and easy way to test their website design in multiple screen widths. Matt’s tool is an iframe-based online tool. Simply enter the URL of your website and test it in different browser resolutions at a time. Responsive design testing for the masses.
Much like resizeMyBrowser, responsivepx loads your pages in a window where you can test the width and the height to determine how well your media queries are firing and where the breakpoints are in the design.
Enter the url to your site – local or online: both work – and use the controls to adjust the width and height of your viewport to find exact breakpoint widths in pixels.
Screenfly allows you to test a site on different resolutions on desktop, tablet, mobile and television. The desktop testing is currently limited to Safari, while the tablet and mobile have more options for devices and browsers. Television is limited to Opera.
Demonstrating Responsive Design
Another nice tool to test your responsive website(s), made by @jamusreynolds. This tool also adds an outline of one of the 5 pre-installed devices (iPhone landscape and Portrait, the iPad landscape and Portrait and the iMac) which makes it a nice tool to show your client his/her new responsive website.
Web Extensions (Chrome and/or Firefox)
Window Resizer (Chrome App)
This extension resizes the browser’s window in order to emulate various resolutions. It is particularly useful for web designers and developers by helping them test their layouts on different browser resolutions. The resolutions list is completely customizable (add/delete/re-order).
The Web Developer extension adds various web developer tools to a browser. The extension is available for Firefox and Chrome, and will run on any platform that these browsers support including Windows, Mac OS X and Linux.
This extension provides designers with several tools that come in handy when developing responsive or fluid websites, the built-in ability to resize your browser window with the click of a button is very cool. New size presets can be saved and used instantly.
The Web Developer extension adds a toolbar button to the browser with various web developer tools. This is the official port of the popular Web Developer extension for Firefox written by the same person.
Resolution Test changes the size of the browser window for developers to preview their websites in different screen resolutions. It includes a list of commonly used resolutions and the ability to customise that list. It also gives users the option to turn on Google Browser Size.
responsiView is a tool for testing any website in a new browser size. Inspired by the need to test responsive design media queries, responsiView includes default settings for:
- Tablets – portrait orientation: 768×1024
- Mobiles – portrait orientation: 320×480
- Mobiles – landscape orientation: 480×320
One click pops up a new window containing the site in the current tab to the specified window dimensions. You can also specify your own custom width and height.
Simple Responsive Design Test Page
This bookmarklet lets you see how a page looks within different screen sizes. The bookmarklet lets you run it on any page (regardless of filename) and saves you the step of having to add the test page to each folder. (FF + Chrome).
Media Query Bookmarklet
A handy tool that shows you exactly what size the viewport has and which media query just fired. Drag it to your bookmarks bar and have it ready when needed.
Resizer is a responsive design bookmarklet that allows you to quickly change the dimensions of a webpage to test responsive design. Visit any site that you wish to test responsive dimensions on, and click the Resizer bookmarklet on your bookmarks bar (Now also available as a chrome extension).