This post may contain affiliate links, which means that I may receive a commission if you order something through a link. I only recommend products I love using!
Mobile first design has only become more important for SEO and user experience in the last several years. If this surprises you, consider your own internet searching habits. How often do you have your phone in your hand? When you get an idea or have a question late at night, do you run to your computer to search it, or do you just pick up your phone?
Why should you preview your sites on mobile before you publish them on desktop?
Over half (as much as 74%) of Facebook’s users are mobile-only. If your site performs beautifully on desktop but not so well on mobile, your users may never see your site at its best. You only get one shot at a first impression, and your first impression is likely going to come from mobile. This is especially true if you use Facebook or Twitter for much of your digital marketing efforts. As far back as 2014, 85% of tweets were viewed on a mobile device.
Responsive design is an important ranking factor for Google (which has about 92% of market share among search engines).
Even in the unlikely event that most of your first-time visitors are on desktop, you need to deliver a positive user experience to your mobile users, too. Otherwise, users will click away, never to return.
How can you check how your site will look on all mobile devices, when you only have one phone?
Fortunately, Google Chrome has a built-in feature that allows you to preview how your site will look on mobile devices even if you don’t have a phone. Or if you have an Android phone, as I do, but many of your users are iPhone users.
Although Developer tools are made for, well, developers, you don’t need to be tech savvy in order to use this feature!
From Chrome on your desktop, click the Home icon.
Under More tools, select Developer tools. This will bring up a bunch of code on the right side of your browser. Don’t let this intimidate you; we won’t be using any of it in this lesson. Everything we will be looking at is much friendlier.
Click the Mobile icon next to Elements. This screenshot shows you a preview of what the site looks like on an iPhone 6 Plus. The iPhone 6 Plus is a popular model, which is why it appears first. However, you will be able to preview your site on other mobile devices as well.
Choose your device from the dropdown menu above the site preview. You may also enter custom dimensions where shown. Use the highlighted icon to preview what the page will look like when the screen is rotated horizontally.
And there you have it! Now you can preview your site on any mobile device, without actually leaving your desktop.