What Does Your Website Look Like on Mobile?
TL;DR: Here’s how to check what your website will look like on ANY mobile device – not just the ones you own.
With Google’s looming mobile search algorithm update, a lot of website owners are scrambling to make their sites mobile ready.
They’ll install responsive templates, optimize their copy, and test how their site looks on every mobile device they can get their hands on.
But what if I told you there was a faster, easier, more thorough way to see how your site looked on just about every unique mobile device?
Google Chrome has a really cool feature where you can view a site as a mobile device would display it. This means iPhone users can see what their site would look like on a Nexus 5, for example. Or those running the gargantuan Nexus 6 can check to see if a site would render properly in an iPad 3.
Here’s how to do it:
- In Chrome, open Developer Tools. You can do this by going to the menu, then selecting Tools > Developer Tools; right clicking any part of the page and clicking “Inspect Element”; or using CTRL + SHIFT + I (or Cmd + Opt + I on Mac) to open the panel.
- In that panel, you’ll see a little icon that looks like a smartphone. Click it.
- You’ll now be in the device preview. You can select your device using the dropdown on the top-left of the window. You can also choose network speed if you’re wondering how your page will load under different connection speeds.
As you can see, there are lots of devices to choose from:
Okay, it’s not quite every possible device. But it’s enough to give you a great idea what your site will render as in most popular devices. - You may need to reload/refresh your page after choosing a different device.
And that’s it! This is a perfect tool for web designers/developers and small business owners preparing for the upcoming April 21 Google Mobile update.
Sigh… this ease makes me think of the days back before browser testing tools were so intuitive and fast. Since when did testing become so easy? 😉
