Most web designers are aware of the concept of re­spon­sive­ly designed websites and the ad­van­tages as­so­ci­at­ed with designing such sites. When it’s clear that it’s your aim to set up your internet presence with a re­spon­sive design approach, then it’s important to test the site’s ap­pear­ance on various devices during the de­vel­op­ment process. At the latest during the test phase, the web project should be checked for mistakes and other in­con­sis­ten­cies by executing a ‘re­spon­sive check’: by using different devices, users are able to preview how their site’s layout looks and reacts to various devices and/or res­o­lu­tions. In order to make the most of such tests, it’ best to look out for, and use, certain tools — we’ll show you 6 of the best free-of-charge options currently available

$1 Domain Names – Register yours today!
  • Simple reg­is­tra­tion
  • Premium TLDs at great prices
  • 24/7 personal con­sul­tant included
  • Free privacy pro­tec­tion for eligible domains

In-browser re­spon­sive design tests

The following tools all run within the browser itself and can be used free of charge without any need of reg­is­tra­tion. All ap­pli­ca­tions in this text come in the form of simple, easy-to-use web apps: all you need to do is enter the URL of the web project you want to test, and before you know it, you’ll be presented with different de­pic­tions of your website in varying screen sizes. During this process, the re­spon­sive test tool simulates the website’s display within a certain res­o­lu­tion. And, as if you’re site has already gone live, users are then able to click through the test version of their web project.

Mozilla Firefox Tool

For Firefox users, running a re­spon­sive design test is easy to do: in the Web Developer submenu, select ‘Re­spon­sive Design View’. Im­me­di­ate­ly after selecting this option, the site you’re visiting will be displayed on a black back­ground within a scalable window. At this point, users are able to adjust the site’s res­o­lu­tion by pulling the picture with the mouse in order to increase or decrease its size. Default res­o­lu­tions can also be chosen from; these allow users to adjust the display so that it appears in a landscape or portrait format.

re­spon­sivepx

This tool offers a similar selection of res­o­lu­tions to choose from as those found on Screenfly. Re­spon­sivepx enables users to expand the height and width of its virtual screen by a maximum of 3,000 pixels.

Screencheck by Cyber Crab

A further, well-rounded web ap­pli­ca­tion for re­spon­sive design that’s set-up in a similar fashion to the two preceding options is Screencheck by Cyber Crab. The ap­pli­ca­tion can be used directly on the provider’s website.

Demon­strat­ing Re­spon­sive Design

Demon­strat­ing re­spon­sive design has only three different screen sizes on offer (smart­phone and tablet varieties can also be found in landscape format). This lack of variety is somewhat com­pen­sat­ed for due to the ease with which users are able to switch between the different in­di­vid­ual display forms.

Re­spon­si­na­tor

Re­spon­si­na­tor simulates websites on a total of six different mobile devices, each in both possible display formats (see image). Different versions of popular products, like iPhones, Android smart­phones, and the iPad are available for testing.

Am I Re­spon­sive?

The website, Am I re­spon­sive provides users with four different apple devices for testing their website: desktop (res­o­lu­tion: 1.600 x 992 Pixel), laptop (1.280 x 802 Pixel), tablet (768 x 1.024 Pixel) and mobile (320 x 480 Pixel). One of the ap­pli­ca­tion’s ad­van­tages is that allows different sizes to be directly compared.

Summary

While the ap­pli­ca­tions are indeed useful for testing various re­spon­sive design aspects for your site, users are advised to seek other means, such as actual devices, for testing their web projects. After all, the sites listed above only simulate how a website is displayed. Actually running it on physical devices is a whole new ball game.

Some content simply cannot be displayed by using re­spon­sive design tools: for example, the way in which different high-per­for­mance devices, various browsers, or multi-touch screen control effects a website’s user ex­pe­ri­ence. What’s more, the display of a website may be partly distorted when such tools are used. Scroll­bars may appear during a re­spon­sive-design test, a feature that doesn’t exist for mobile devices with touch screen nav­i­ga­tion.

Despite this, online tools prove to be valuable com­po­nents for com­pre­hen­sive re­spon­sive tests. Web designers es­pe­cial­ly benefit from the un­com­pli­cat­ed and quick mod­i­fi­ca­tion of the content’s res­o­lu­tion; a feature that immensely ac­cel­er­ates the testing process.

Go to Main Menu