Open/Close Navigation

Responsive Website Testing: Resources for Testing Sites

Testing is a critical part of the responsive web design process. The purpose of using a responsive layout is to make the website useful on any type of device, but without extensive testing it’s not possible to know for sure how the site is behaving in different situations. Fortunately, there are a number of different tools and resources available that can help you to test your responsive designs. In this article we’ll take a look at some helpful tools that you may want to try for yourself.

Viewport Resizer

Viewport Resizer works as a bookmarklet. You can click on the button and then enter the URL of the site/page that you want to test. You’ll have several different screen sizes that you can use for testing, including two smartphones, a small tablet, regular tablet, widescreen, and HDTV.

Viewport Resizer

jResize Plugin

jResize is a jQuery plugin for one-window responsive development. You can simply click on the different screen widths and the page will adjust accordingly, making it easy to test as your work.

jResize Plugin

Screenqueri.es

With Screenqueri.es you enter the URL and then you can pull the slider to adjust the screen width of the display. You can also choose several preset testing options, including 14 popular smartphones and 12 popular tablets.

Screenqueri.es

responsivepx

With responsivepx you will enter the URL and then use the sliders to set the width and height for testing. You can choose whatever screen size you want, up to 3000 pixels in width. You can also share it by email with others.

responsivepx

resizeMyBrowser

resizeMyBrowser allows you to choose the dimensions of your browser for testing. You can choose between 15 different presets, or you can enter your own custom screen sizes.

Responsive Design Bookmarklet

The Responsive Design Bookmarklet is another simple tool. Just drag the bookmarklet above your bookmarks bar and it will be applied in your browser. You can then choose to preview the current page on screen widths the size of tablets and smartphones.

Responsive Web Design Bookmarklet

As a website designer you have the ability to create an attractive and functional design. Unfortunately, you do not have the ability to control which internet browsers will be using to view your site. Because each browser behaves differently you will need to test your projects in multiple browsers.

In most cases the variation from one browser to another will be minor, and probably will not even be noticeable to the average visitor. However, sometimes you site will have major problems in a particular browser that can prevent visitors from being able to use the site. The best way to be sure that your site is usable in different browsers is sufficient testing. Follow these tips to learn how to test in multiple browsers for responsive designs and CSS fallbacks.

How Can You Test Your Website in Different Browsers?

For starters, you should be familiar with which browsers are most commonly used by your visitors. After all, you’ll want to make those browsers the biggest priority.

Google Analytics will show you a breakdown of which browsers are being used by your visitors and how many visitors are using each one, breaking it down into a pie chart (shown below).

Browser Pie Graph

Once you know which browsers are most commonly used by your visitors you should focus your testing efforts on those browsers.

You can easily install several different browsers like Internet Explorer, Edge, Opera, Firefox, Chrome, and Netscape. But with the huge amount of browsers available you’ll never be able to have them all. This is where you will need the help of a few specific tools.

BrowserShots

Test your website in different browsers. BrowserShots creates screenshots of your pages in a wide variety of browsers and displays them for you to see. It also has several additional options.

BrowserShots Logo

Litmus

Another paid service. Also provides resources for testing email.

Litmus Logo

AnyBrowser

A variety of tools for creating and testing websites.

AnyBrowser Logo

Browser Stack

Top-quality browser checking with live performance updates.

browserstack

Articles and Resources:

How to Check Your Website with Multiple Browsers on a Single Machine – from thesitewizard.com

How to Use Different CSS Style Sheets for Different Browsers – from thesitewizrd.com

CSS Hacks and Browser Detection – From WebCredible.

Introduction to Browser Specific CSS Hacks – from SitePoint

Cross Browser Issues – from devarticles.com

Position is Everything – Modern browser bugs explained in detail.

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

Join the Newsletter

Subscribe to our weekly newsletter chalked full of useful tips, techniques, and design goodies.

Popular WordPress Themes

More Design Inspiration

BlueHost