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:
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.
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:
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:
This one’s got a keyboard preview, so you get an idea of how much space is visible when someone’s typing.
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.
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.