It’s no secret that more website users are browsing and shopping from their phones and tablets. SimilarWeb analyzed 2 trillion site visits in 2017 and found that 63% of U.S. site visits were from a mobile device – that’s more than half of all site traffic across the country. Companies can no longer lean on a mobile-friendly site, they need a mobile first strategy. Even though organizations acknowledge the importance of the mobile experience, we find many marketers are still thinking about their site experience primarily on desktop. Why is that?
A common reason is the difference between how your average customer uses your site and how your marketing team manages the site. For example, your customer might be browsing your site on their iPhone from their couch at home, but you are more than likely browsing your site from your desktop in your office. You might get an email from your development team letting you know a new feature has been added to the site. You click on a link from your work computer and review the change in your desktop browser. Everything looks good, so you give the go ahead to push it live. That’s a very typical workflow in website development, but it makes it far too easy to simply forget about the mobile website experience altogether. So how do you fix that?
The most common solution is to pull out your phone and test everything out there, so you see the site just like your customers do. The problem is there’s a lot of friction with that approach. You have to switch devices. You probably only have one phone, either an Android or iOS operating system, and you may not have a tablet readily available. Maybe you don’t even have the link to development site on your phone, making this a less than ideal solution. Fortunately, there’s an easier way!
There is actually a feature in the Google Chrome web browser that allows you to view a mobile version of your site right on your desktop computer. To show you how to access this handy feature, we’re going to take a look at one of our client’s websites, Four Winns.
Open up your Google Chrome browser and navigate to your website. Once there, press the F12 key to open the Chrome developer tools. Your screen should now be split into two panes – your website on the left side and some scary looking technobabble on the right side.
You can ignore most of the scary stuff on the right-hand side. All we care about is one button – the Device Mode.
Clicking that button will change the left-hand side of the window into a mobile view of your website. Note that you might want to click the refresh button in your browser after you do this to make sure any mobile website design elements are loading correctly.
The toggle device feature in Chrome allows you to see your website just as it would appear to a mobile user. The menus and buttons at the top of the screen also let you switch to different types of devices – an Android, iPhone or an iPad. You can also rotate the screen to see how things look in landscape vs. portrait orientation.
Browser-based device toggling is a useful feature but is not a perfect replacement for real device testing. The simulation provided by Google Chrome is good, but real device testing can sometimes uncover issues that don’t show up in Chrome. However, it can help you identify and get in front of many possible problems that your mobile device users may experience, without causing too much friction in your day-to-day workflow.
Source: Perficient Digital
