One challenge most web designers face is the display of a website on different screen resolutions. Websites display differently in different screen sizes and this has lead to the birth of what we now know as “Responsive web design”. I have earlier covered on this blog reasons why you should use a responsive design for your website. The benefits are enormous; I recommend you read the article.
Since visitors surf our websites/blogs on different devices and resolutions, shouldn’t it be a thing of worry to know how our website displays on the different resolutions so we wouldn’t be missing anything? A good number of websites including this one is using responsive web design instead of building different versions of same website for different devices and screen resolutions. A responsive design will serve the same website to all devices – including desktops, tablets, phones, e-readers etc no matter the resolution.
Today I want to introduce you to some online tools to test a website on different resolutions and see how they are rendered in different screen resolutions and how the layout magically adapts to the different screen sizes. These tools will let you test the design compatibility with both low and high resolutions so as to detect anomalies due to the different screen sizes and probably know how to fix them.
To test how a website displays on different resolutions, simply enter the URL of the website on any of the online tools I will list below and it will display a preview of your web page; choose different resolutions to see how it will display on such resolution. Some of these tools offer a wide range of popular resolutions for desktops, laptops, tablets and mobile devices.
Online Tools to Test a Website on Different Resolutions:
Screenfly: Screenfly is my favorite online tool to test a website on different resolutions. Screenfly supports a much larger number of resolutions to test the display of a website. Simply enter the URL you want to test and click the “GO” button to show a preview of the entered URL, choose the different screen resolutions at the top left corner of the screen to see how the site is displayed on the different resolutions. You can choose from Desktops, laptops, mobile phones, Television resolutions etc and you can even enter a custom screen size as well. You can also rotate the screen, enable or disable web page scrolling or make use of proxy server to test the site’s resolution.
Cybercrab: Cybercrab is indeed an awesome online tool to test a website on different resolutions. Just like Screenfly above, Cybercrab can display a webpage in different resolutions be it mobile, tablet, desktop, television resolutions. You can also set a custom screen size or rotate screen, enable/disable page scrolling. One unique thing about Cybercrab is the W3 Validator feature that allows you to check the errors on your website while checking it as XHTML.
Responsinator: Responsinator is yet another online tool to test a website on different resolutions, this tool is quite simply and useful if you want to test how your website displays on different hand-held devices like iPhone, iPad, Kindle and Android Smartphones.
Mattkersley Responsive Design Testing Tool: Mattkersley responsive design testing tool is yet another online tool to test a website on different resolutions. Simply enter your URL on the URL field and hit the enter key on your keyboard to display the website on the different screen resolutions. This tool can display a website on 240 x 320 Pixels (Small phone), 320 x 480 pixels (iPhone), 480 640 pixels (small tablets), 768 x 1024 pixels (iPad – Portrait), 1024 x 768 Pixels (iPad – Landscape).
Website Resolution Tool: With Website resolution tool you can test a website on different resolutions, this tool offers a wide range of resolutions including desktop and laptop resolutions (2560×1440 1920×1200 1680×1050 1600×1200 1440×900 1366×768 1280×1024 1280×800 1280×768 1152×864 1024×768 800×600), tablet resolutions (800×1280 768×1024) and high end resolutions (640×960 360×640 320×480 320×396 240×320). Simply click on the screen resolution of your choice and enter the URL on the field provided for it and click “LOAD” button to display the website on the chosen screen resolution.
Online Resolution Tester: Online resolution tester is yet another online tool used to test a website on different resolutions. This tool offers two display options – frames and windows. Simply enter your URL on the Website URL field, chose your display resolution and choose whether you want to display it on a window or on a frame and click display.
ViewLike.us: ViewLike.us is an online tool to test a website on different resolutions. Simply enter the URL on the field provided and click on the “Submit” button to load the page, you can choose different resolutions to display the site on the specified resolutions. You can preview a site on the following resolutions 320×396, 800x 600, 1024×768, 1152×864, 1400×900, 1600×1200 and 1900×1200.
These are some of the online tools I have found for you to test a website on different resolutions. I hope you will find them useful. Do you know of any other online tool that can be used to test a website on different resolutions I may have omitted? Share with me using the comment form below. Remember to subscribe to my RSS.
How to Add Twitter Banner Image
Free online Screencasting tools for making videos
Create a WordPress Mobile Friendly site with Jetpack Mobile Theme
Dedicated Servers – All You Need To Know About It
5 Reasons why you should monitor your traffic sources
Hi Nwosu,
Awesome to learn another new thing here buddy. We forget at times that people view our sites with different resolutions; in order to improve the site experience run these tests to see how your blog really looks under different res’es. Then edit and adjust accordingly.
Thanks for sharing!
Ryan
I have tried my website on the different sites you have mentioned above. I am satisfied with the resolution they provide. Although I am using awesome screenshot ad dons of Mozilla firebox to capture any website. It is better to use any of the above site then any ad dons of browser.
Thanks Ryan for your contribution, having a knowledge of how your site looks on different resolutions can help you in proper designing and probably better optimizing.
Thanks for your contribution, happy Sunday…
Hi Nwosu,
I don’t know how my readers see my my blog.
This helped me to check my blog on different resolutions.
Thanks for listing these useful tools.
I had never checked my blog before. I was totally unaware about this. Now I will test my blog very soon.
Am glad you found the article useful. Thanks for your comment have a nice week ahead.
Thanks Mubashir, well if you are already using a responsive theme for your blog it will definitely display well for your visitors viewing on different resolutions.
Hi Nwosu,
Thanks for sharing this tools, it is indeed important for us to check out how our visitors on various resolutions see our blog, and this is one of the reasons why a responsive design it important, with a responsive design, your blog will auto size itself with your visitors screen and it will look good to them.
Thanks Joseph for your comment and i totally agree with you that one must use responsive design in this era so your blog can automatically resize itself according to any screen size and resolution.
It should be noted that all of the tools listed above use frames to view your site/page. If the site blocks being framed – none of them work.
Just tried them all on a site that blocks being framed. (wink)
Using frames to design a site is not really the best as it has effects on search engine ranking. If search engine optimization is important to you, never use frames. Hence, when you are designing a new site, I would recommend that you avoid using frames, unless you have a specific reason for doing so.
Huh?
The sites you recommended to test for responsive design all try to frame the site being tested therefore I was pointing out that they are useless to people who break out of frames to stop scrapers. i.e. people who try to insert the content of the site can’t. The viewer is forced/taken to the original site.
I would agree that one should avoid using frames for various reasons beyond SEO but that is not the subject of this article.
Your post is a superb one. Screen resolution is always the problem when it comes to web designers.
The sites you recommended to test for responsive design all try to frame the site being tested therefore I was pointing out that they are useless to people who break out of frames to stop scrapers. i.e. people who try to insert the content of the site can’t. The viewer is forced/taken to the original site.
I would agree that one should avoid using frames for various reasons beyond SEO but that is not the subject of this article.