Test your website’s Responsive-ability

Posted February 25th, 2015 in Testing. Tagged: , , , , , .

In the age of technology, desktops and laptops are not the bar anymore. You can access anything and everything via mobile or any supporting device. Smartphones and tablets have especially changed the approach toward design and user experience. More than user friendly each platform has to now be device friendly .Before the proliferation of mobile devices with advanced web-browsing capability, web designers had only one primary challenge to deal with – keeping the same look and feel of their websites in various desktop computer browsers.

However, interacting with websites on smartphones and tablets is not the same as doing that on a desktop computer monitors. Factors such as Click versus Touch, Screen-size, Pixel-resolution, support for technology, animation, optimized markup and many more have become crucial while creating websites. Hence it has become a must to have your website on a responsive design.

responsinator

And as the name suggests Responsinator is the answer to this device view conflict. It’s specially designed for website makers to understand the design essentials and break the barriers of look and feel with various devices and their interface. Responsinator helps website makers quickly get an indication of how their responsive site will look on the most popular devices. It does not precisely replicate how it will look, for accurate testing you can always test on the real devices.

Before we understand the unique abilities of the site let’s talk about what a responsive design is exactly. It means designing your website to adapt to the user’s viewing environment (mobile, tablet, laptop etc.). It does this through the use of media queries, and other clever technology. Here is where Responsinator will come handy. Responsinator is a simple, easy to use web tool which can help you optimize your responsive design and visualize how your site responds .This tool works great for testing the breakpoints of your media queries and seeing how font and image resizing or fluid grid and layout changes will look on devices displayed in both portrait and landscape modes.

Device Type

On Responsinator.com there is bar where you can enter your website and simply click “go”. It will in an instant provide you a well enlarged view of how your website shall look on:

  • iPhone 5 portrait · width: 320px,
  • iPhone 5 landscape · width: 568px,
  • iPhone 6 portrait · width: 375px,
  • iPhone 6 landscape · width: 667px,
  • iPhone 6 Plump portrait · width: 414px,
  • iPhone 6 Plump landscape · width: 736px,
  • Android portrait · width: 240px,
  • Android landscape · width: 320px,
  • Android (Nexus 4) portrait · width: 384px,
  • Android (Nexus 4) landscape · width: 600px,
  • iPad portrait · width: 768px,
  • iPad landscape · width: 1024px.

Covering a large section of devices that are currently and popularly used.

Cool Features

Since the site is very tech friendly it gives you a few extra perks like the “Handy bookmarklet” Feature. You can easily drag this Responsinator to your browser’s bookmark bar, then you can click on it whenever you’re on a site that you want to test. Simple, easy and does not require you to open the site again and again for testing.

There is one other feature that is peculiarly intriguing that is the scroll bar, you can easily hide and affront your scroll bars in an instant. Last but not the least the feature that works with fixed width mode. If you have a non-responsive, fixed width site and you’d like to get an idea of what it looks like on these devices – set fixed width=x to the browser URL ,where x is the width of your site and you can see an estimated glimpse and catch the error zone almost immediately.

There is a small glitch to Responsinator as well, it won’t work if your site has user-agent device detection. If you really want to emulate device detection, you can append &append_device=1 to the end of the browser URL. Responsinator will then append responsinator_device= [type] to your URL where [type] is either phone or tablet. You’ll need to check for responsinator_device in your server code.

responsinator1

Make your own Responsinator

Responsinator gives you an open option to customize as per your requirements, like you can enter your name, enter your website name and have the header looking the way you want. All this by simply signing up. There is a minimum signup amount 6$ per month and merely 60$ per year which of course you can choose as per your usage. There are minimal formalities that you need to fill in like Responsinator sub-domain, Email and Password to create your very own.

The Funny part is that creators are very hearty if you find Responsinator handy and you’re feeling kind you could buy them a beer.

User-Friendliness

All in all it is an extremely easy to use web tool. The reason for this is that when there is just one website and on a single page you can see your site in multiple device modes, it’s much easier for users to share, engage and interact with the content on the site as compared to a site that has different pages for different device type. You can literally see the visual of your site on all device formats in one single scroll. We!! are a fan of that. Why? Because it’s a busy life and there is lots to do each individual chooses a better, faster and more convenient option.

And Responsinator realizes that thus its user interface is extremely simple and believe us there is nothing much to do. If you are not that tech friendly it will still be a piece of cake for you. In other words, it’s just bad if you aren’t taking advantage of the benefits of Responsinator.

  • Easily check your website’s responsiveness with @responsinator responsinator.com/ #RWD via @supermonitoring

    Tweet this

When a business has both a mobile site and desktop site and multiple other pages, there will be a different URL and different HTML for each and hence making your work way more intricate.
Save your time and test your site with Responsinator.com.

Comments are closed.

  • Follow us

  • Browse Categories



  • Super Monitoring

    Superhero-powered monitoring
    of website or web application
    availability & performance


    Try it out for free

    or learn more about website monitoring
  • Superhero-powered monitoring
    of website or web application
    availability & performance
    Super Monitoring
    or learn more about
    website monitoring