A Short and Sweet Guide to Mobile Device Preview Tools

With mobile devices gobbling up ever more of the internet browsing marketplace, it’s growing ever more important to ensure that your site behaves nicely across a range of screen sizes and browsers.

Here’s a short and sweet run-down of a handful of helpful mobile preview tools to give you a quick idea of how your site is doing:

Chrome Developer Tools

Good for all sorts of interesting tasks, Chrome’s Dev tools enable you to do everything from seeing what cookies are on the page to tweaking page styles on the fly.

Chrome Developer Tools

There’s also a handy mobile web preview tool that you can use to get a sneak peek of how a site looks on common operating systems and devices:

mobile web preview tool

Responsive Preview Bookmarklets

You drag a link into your bookmark bar or put a snippet of code into a bookmark, and presto! you’re able to look at a web page in a variety of preset sizes without shrinking your browser. These are two I like:

Responsive Design Bookmarklet

This one’s got a keyboard preview, so you get an idea of how much space is visible when someone’s typing.

Responsive Design Bookmarklet

Viewport Resizer

Viewport Resizer

It’s important to note that the best way to see how a webpage will look on a mobile device is to…well, look at it on that device. The simulators and resizers out there can never be 100% accurate, so your best bet is always to do some actual testing on real devices (with real people too!). Still, there’s nothing wrong with using a tool as a general guide.

Beyond the quick visual preview, Google has a service that tells you how mobile friendly your site is. Just pop in your url and go! It even offers you some helpful tips on how to improve mobile performance and where to learn more about being mobile friendly.

google developers mobile guide

What’s your experience of mobile device preview tools? Have you found them to be relatively accurate or completely wrong? Let us know if you’ve caught eye of any other preview mode tools.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Like the Brain? Sign up for the packed-full-of-tips monthly newsletter