Most web designers are aware of the concept of re­spons­ively designed websites and the ad­vant­ages as­so­ci­ated with designing such sites. When it’s clear that it’s your aim to set up your internet presence with a re­spons­ive 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­sist­en­cies by executing a ‘re­spons­ive check’: by using different devices, users are able to preview how their site’s layout looks and reacts to various devices and/or res­ol­u­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

Cheap domain names – buy yours now
  • Free website pro­tec­tion with SSL Wildcard included
  • Free private re­gis­tra­tion for greater privacy
  • Free Domain Connect for easy DNS setup

In-browser re­spons­ive design tests

The following tools all run within the browser itself and can be used free of charge without any need of re­gis­tra­tion. All ap­plic­a­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­spons­ive test tool simulates the website’s display within a certain res­ol­u­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­spons­ive design test is easy to do: in the Web Developer submenu, select ‘Re­spons­ive Design View’. Im­me­di­ately 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­ol­u­tion by pulling the picture with the mouse in order to increase or decrease its size. Default res­ol­u­tions can also be chosen from; these allow users to adjust the display so that it appears in a landscape or portrait format.

re­spons­ivepx

This tool offers a similar selection of res­ol­u­tions to choose from as those found on Screenfly. Re­spons­ivepx 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­plic­a­tion for re­spons­ive design that’s set-up in a similar fashion to the two preceding options is Screencheck by Cyber Crab. The ap­plic­a­tion can be used directly on the provider’s website.

Demon­strat­ing Re­spons­ive Design

Demon­strat­ing re­spons­ive 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­pensated for due to the ease with which users are able to switch between the different in­di­vidu­al display forms.

Re­sponsin­at­or

Re­sponsin­at­or 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­spons­ive?

The website, Am I re­spons­ive provides users with four different apple devices for testing their website: desktop (res­ol­u­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­plic­a­tion’s ad­vant­ages is that allows different sizes to be directly compared.

Summary
While the ap­plic­a­tions are indeed useful for testing various re­spons­ive 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­spons­ive design tools: for example, the way in which different high-per­form­ance devices, various browsers, or multi-touch screen control effects a website’s user ex­per­i­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­spons­ive-design test, a feature that doesn’t exist for mobile devices with touch screen nav­ig­a­tion. Despite this, online tools prove to be valuable com­pon­ents for com­pre­hens­ive re­spons­ive tests. Web designers es­pe­cially benefit from the un­com­plic­ated and quick modi­fic­a­tion of the content’s res­ol­u­tion; a feature that immensely ac­cel­er­ates the testing process.
Go to Main Menu