How To Test The Responsiveness Of A Web Design

0
How To Test The Responsiveness Of A Web Design

A responsive template is a template that automatically adapts / adjust to the width of the device. For example, if you view a particular site on an iPad in potrait mode (768 x 1024) , a responsive template automatically adjusts to fill the screen unlike a non responsive theme that requires you to scroll horizontally to view the page contents on the side. Most modern designs out now are responsive following the age of smartphones and that tends to ease page navigation / user experience from small screen devices.

From the image above, you’ll see that the content of the webpage fts in perfectly to the width of the devices without the need to scroll to the lef or right.

How To Test Responsive Web Design

If you’re working on your template or trying to test how responsive the template / theme of a site is, you’ll need to check its performance across major device width / sizes (screen resolutions). A 320×480 wide device user should be able to view your site from one end to the other across the screen.

With the different devices out there in the market, you can’t get all the devices just because you want to know how your design looks on them. Rather, you may use free online tools. An example is the Responsive-Design-Testing by Matt Kersly. This tool is free and it tests your site across multiple device widths e.g. 240 x 320 (small phone)320 x 480 (iPhone)480 x 640 (small tablet)768 x 1024 (iPad – Portrait), and also 1024 x 768 (iPad – Landscape).

  1. In your browser URL bar, enter mattkersley.com/responsive 
  2. In the large input space on the site, enter the URL of the site you would like to test and hit Enter
  3. If you would like to run the test across width only / device sizes, you can tick your preferred mode just beside the box and hit enter. 
  4. If the site is responsive, you’ll see different views of the site.
TIP: A quick way to run this test is to add the URL to be tested to mattkersley.com/responsive?
i.e. if i want to  test blogger.com quickly, all i need to do is add it to the link just after the ? making mattkersley.com/responsive?blogger.com .
This tool can also be found on StudioPresswww.studiopress.com/responsive

Share.

About Author

Leave A Reply