How to test Responsive design of website [Online tools]

Traditionally websites were only accessed by people using desktop computers and laptops. However, now more people are using mobile phones and tablets to surf websites. Designing separate website layout for each device involves too much effort. To overcome this, more and more websites are using ‘Responsive Design’ layouts.

A Responsive Design adjusts website layout automatically according to device screen size. Due to flexible width and layout changes according device’s screen size being used to access website – making responsive design is a challenging task. [Image Credit: Studiopress]

Following are few online tools to test and check on your responsive design layout. Just type in website URL (even localhost for offline wordpress works) and press the Enter key for responsive design testing.

I. Check Responsive design by Device types

1. Responsinator by Tama Pugsley and Andrew Hovey is a personal favorite. It show preview of specified website or blog URL is actual shape of devices in both landscape and potrait mode for iPhone, Android phones, iPad and Kindle.

Being wrapped around device image(s) gives more clear view of responsive design layout adapting to each device screen size. Best of the lot – for sure!

2. ScreenFly provide more options while previewing responsive design by device types. It allows you to select specific device type model like for tablet you can select among Apple iPad, Galaxy Tab, Motorola Xoom.

Similarly, you can select among different popular mobile phones for exact screen rendering among options like iPhone 4, Google Nexus, LG Optimus

3. Responsive.is online tool allows you to check on responsive design for different devices one by one. Once you specify the test website URL, click on either of device listing among: desktop, tablet, phone to check responsiveness of the design.

II. Check Responsive design by changing dimensions

4. Responsivepx online tool allows you to check on responsiveness of design by modfying display dimensions. You can manually change height and width of display window to view and possibly find issues with your responsive design creation.

This is useful tool when you want to check responsive design in sizes other than standard device sizes for desktop, tablets and mobile phone.

5. Resize My Browser is another similar tool that provide option to use custom sized preview window to check on responsive design. Besides this, it also provide listing of standard device sizes.

III. Check Responsive design with fixed dimensions

6. Studiopress Responsive online tool allows you to check for responsiveness of design for any website URL among various width sizes like 240, 320, 480, 768, 1024.

You can also switch to responsive design display by devices. Very neat and straight forward tool, just enter website URL and press the Enter key to preview responsive design.

7. Mattkersley Responsive is another neat online tool to check on responsive design for fixed width dimension of device sizes. It support standard devices sizes including: 240, 320, 480, 768, 1024.