How to test a responsive website


You might be having a blog or a website and the theme website says that the theme template supports responsive websites. Or say, you have come up with a website on your own or have got it done from outside, but how can you be sure that the website is responsive and check if the website is properly view able on any device from the latest iPhone or Android smartphone, tablet or desktop. There is a way to test responsive websites on your own without worrying too much.

Also check: How to perform website resolution test

If you are using Chrome browser, then in the Chrome store there is an app named ‘Dimensions’ using which you can test your responsive website. Follow the following steps to check on your own.

  • Login to Chrome browser using your Google Account. Go to Chrome Store.
  • Search, download and install the app named ‘Dimensions’.
  • Launch this app and enter your blog or website URL.
  • As shown below there is a slider using which you can select the dimension to know how exactly your responsive website will behave.
  • You have an option to view in full screen and how exactly it appears in devices like iPhone, Andriod, low budget phones, tablets etc.

Also check: How to get webpage dimensions using page ruler

Responsive website dimension

 This tool or an app is basically used to test how the UI performs on different devices and to check if the website is responsive or not in different view points. Here are some of the features of this app that I like the most.

  • There is a slider using which you can drag to find break points.
  • You can check you website hosted on local as well as remote servers.
  • There is a preview mode using which you can check how your website looks on various devices.
  • As per their website it works with JS auto-refreshers including LiveReload. As you drag and change the sliders, you can see the live preview of your website.

Also check: Perform Website Testing to check Compatibility across Browsers 

This app definitely helped me in understanding how my website looked on different devices and I modified some of the image settings that I used in the header image. Give it a try, it’s free to use.


 If you like this post then don’t forget to share it with your friends and follow us on Social Media or subscribe to our blog via email.

Get FREE ‘How-To’ Tips via Email. Subscribe Now!
Share on FacebookTweet about this on TwitterShare on LinkedInShare on Google+Pin on PinterestDigg thisShare on TumblrShare on StumbleUponShare on RedditBuffer this pageFlattr the authorEmail this to someone

About 

I'm a Software Engineer by Profession. Love to write about technical and photography stuff in my blog.

    Find more about me on:
  • facebook
  • flickr
  • googleplus
  • linkedin
  • twitter
  • youtube

Hey, what do you think about the above post? Leave a Reply