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.