There are many tools and technologies that make creating a perfect website easier for users at any level. At the same time, web design has become more complicated because of the many browsers and devices that can access a website – including mobile devices with varying screen resolutions and sizes. What looks like a beautiful, easy to navigate site in your browser can be completely non-functioning on another person’s iPhone. Fortunately, there are many tools to create a cross-technology, responsive website that lets you see how your site looks in different devices without testing it on the device itself.
- ResponsivePX allows you to quickly test a website at different widths and heights that you can customize.
- Responsinator is a quick and easy way to see what your site looks like in Kindle, iPhone, iPad and Android devices in both portrait and landscape views. It doesn’t require a download – just type in the website address on the Responsinator website.
- RWD Demonstration is similar to Responsinator. It shows views in iPhone, iPad and desktop. Views are not as clearly labeled, so it takes some familiarity with the site to use it correctly.
- Resize My Browser is an online tool that lets you resize your current browser to set and custom presets. It shows screen resolutions for 15 different devices and takes the guesswork out of figuring out what size various devices are. This is a handy tool for seeing your site in a standard browser while comparing it to other device sizes at the same time.
- Protofluid is a downloadable tool that is available for purchase. It offers nearly 100 views, a one-click launch and the ability to Tweet results and views.
- With Bricss you can select 6 predefined device sizes and add as many custom sizes as you wish. The results are shown on one page. It allows you to see only the results you wish to test in one browser.
- Screenqueri.es is a more comprehensive tool that shows a website view in specific device interfaces. More than 25 devices are featured, and there’s also a tool to save a snapshot so that you can work out problems.
- Resizer is a tool that you can add to your bookmarks toolbar. It includes dimensions for different tablet, desktop and mobile devices and is available as a Chrome extension.
- Screenfly shows views on various mobile devices and tablets. It also provides a television and various desktop resolution views.
- Responsive allows you to see the site at different resolutions, on the same screen. It does not show specific devices, but screen resolutions ranging from a small phone to an iPad. It’s a great way to see multiple views of your site while it’s in development without switching to different modes.
Since most of these sites provide the same type of tools, it takes some exploring to find the one that meets your needs and is the most comfortable to use. Once deployed, it will be a valuable first step in making sure your website looks good in any view.
Michele Golden is an aspiring blogger and journalist who enjoys taking pictures of her home state of Vermont. When shes not blogging, shes setting up Windows web hosting for her clients.