There has been an unstoppable rise in the multi-screen world ( Smartphones, tablets, different screen sizes laptop) in last few years and adding to it, is the Google glasses and wearable techs which are becoming a part of the whole digital media consumption medium. Unlike old days, just building a site for your desktop is not enough, as you need to take care of your readers who are using smartphones and tablets to read your blog.
Responsive web-design is a technique where your site will automatically adjust itself according to the readers screen-size. For example, if you open a responsive website (Try ShoutMeLoud.com) on a smart-phone or a tablet, you will notice that the content is visible first and all other elements like sidebar and widgets are pushed down to give a good user-experience.
You might find this funny but according to a recent survey, 70% of the Americans admitted to take their mobile phone to the bathroom and I’m sure you must be doing the same thing once in a while. Most of you must also be checking the price on your smartphone before making an offline purchase. Both the above statements exemplify on how important it is for you to ensure that your blog should be smartphone and tablet ready and one easy way to do that is by making your website design responsive. This way you don’t have to built different sites for your mobile and tablet readers and your web-design cost will stay in budget.
Now if you are new to the world of responsiveness, here is an interesting video which explains what a responsive web-design is:
If you want to take it to the next level, you can have mobile only site for smartphone readers or have a smartphone app for your blog (Read about ShoutMeLoud Android app here).
To start with, first you need to check if your site is responsive or not. Here I have listed down some of the best online responsive checker tools which you can use right-now and check how responsive your site is. You can use these tools to check how your website will look on various screen-sizes and if your site is not ready for multi-screen world, I suggest you to straightaway work on making your site responsive. You can always take help of ShoutMeLoud services to get a responsive design for your blog.
4 Free Responsive Web-design testing tools:
This is the first tool which you should use to check responsiveness of your site. It will show you how your site will look in different Apple devices ( iPhone 5, iPhone 6, iPad) and along with that you can also see how your website will look into an Android phone of various sizes. This site shows both landscape and portrait mode, so it will give you a complete idea of your responsiveness. None the less, you can also click on the link of your site in any device and it will take you to that link. This feature is particularly useful if you want to check the responsiveness of different section of your sites such as contact page, single post, page and so on.
This is a simple website where you need to add any websites URL and you can check site responsiveness right on the screen. It will show you display same as seen in the above screenshot and you can hover your mouse to any device type and scroll up-down, and also click on the link to check further. The display was not so clear but as a free responsiveness checker tool, it does a fairly good job.
What I like about this free web tool is the neat interface. You can check your site responsiveness on various screen size including landscape and portrait mode. Eespecially if you need to check responsiveness in details, you will find this site more useful than the above two. You can simply select any device such as Nexus 7 and browse your site till the time you are done checking the responsiveness. This is useful for a new site which you just got designed by a web-developer, and need to check the responsiveness of your site. Make sure to test your site in both the mode (Landscape and portrait) to find any bugs in the design.
This site is useful but it needs an update as latest iPhone model is not added here for checking the responsiveness. Still you will find it handy if you need to check how responsive your site is on different brand mobile phones or tablets. They have a wide range of tools like Amazon kindle, Nexus tablet and many more. Even though it’s not been updated for long, I’m sure for rigorous testing it’s still useful. Another useful feature of this site is, you can always stretch the preview screen to test it for different width size and with one click you can rotate between portrait and landscape mode.
Responsive Design Bookmarklet
Here is one website which you can use to add Responsive design bookmarklet. Simply drag and drop the bookmarklet on your bookmark tab and when ever you have to test the responsiveness of a site or a webpage simply click on the bookmarklet and it will open a screen like below to show you the responsiveness.
You can also add the keyboard which will help you to check your responsive design more effectively. This will give you an idea of how much screen-size your visitors would be seeing along with the keyboard. Eespecially for E-commerce sites who has a responsive mobile site and need to take entries from readers, this responsive bookmarklet is of great use.
If you are a web-designer you will find screensiz.es website interesting to find the screens size of mobile and tablet devices.
There are many more such responsive website testing tools available online, but what I have listed above is enough to give you an initial data for your testing. If you don’t have a responsive web-design so far, I highly recommend you to get one ASAP! If you know of any other tools which helps in checking the responsiveness of a web-design with added features, let me know via comments.