Arty Ekema

How to View the Mobile Version of your WordPress Website on Desktop Intro How can you be sure your WordPress website looks good? This is obviously a highly subjective topic, but my point is that regardless of how your website looks the odds are that you spent the time making sure it looked the way it does to appease either yourself or to appease your customers. But how can you be sure that everyone who sees's your website is seeing the best version of it? There are a few different ways to get online these days, and one of the most popular options is through the use of mobile devices. According to WARC at least fifty-one percent of people who use the internet use their cell phones or tablets to get online. That's a lot of people, so doesn't it make sense to make sure that all of those mobile users are seeing the best version of your site? Of course, it does! So what do you do now? Log on to your site with a cellphone and see how it looks? That is one option, though it's hardly the most effective. Instead, we're going to show you how to view the mobile version of your WordPress website on desktop. Why is previewing the Mobile Layout of my WordPress Website Important? As I explained above, a lot of people use mobile devices to get online. Wouldn’t it be a shame if your website made a poor first impression on a potential customer because of a sloppy mobile version? What if the mobile version of your website is confusing? Users could have a hard time accessing the content you provide for them and end up going somewhere else. If you still aren’t convinced, then you should also know that Google has switched to a mobilefirst ranking system for their search algorithm. Meaning, if the mobile version of your website isn’t up to snuff you may risk a lower search rating. This isn’t the case for everyone necessarily, but if you rely on SEO (search engine optimization) to help grow your business, then updating your mobile version is extremely important. How do I view the Mobile Version of My Website? Now that you’ve realized the importance of a properly optimized mobile version, how do you view it? The answer is actually quite simple. If your website isn’t finished yet or is under maintenance, you can use WordPress’s theme customizer to view the mobile version of your site If your website is finished and you want to see what everyone else is seeing, you can use the Google Chrome dev tool device mode. With this, you won’t even need to log in to WordPress and either option only takes a few minutes. We have provided detailed instructions below to help walk you through whichever options suits you best. WordPress Theme Customizer 1- Log in to your WordPress theme customizer and click on the appearance tab. In the dropdown box click “Customize”. 2- This will open the WordPress theme customizer. At the bottom of the screen, you should see a mobile icon, click that to see the mobile version of your website. You will probably see some blue editor icons, don’t worry, those are not visible to anyone but you. This method is great if your site is still under construction and you want to see how it’s shaping up, or if you’re in maintenance mode. Google Chrome Dev Tool Device Mode 1- Head to the website you want to inspect. 2- Right-click anywhere on the page and then hit “inspect”. A new panel should open up on the right side of your page. 3- There is a lot of information in this new window, but all you need to do is click on the “toggle device” toolbar. The website will then shrink to its mobile version. You will probably notice that once you hit the “toggle device” toolbar that your mouse cursor will have turned into a small circle. This is to mimic the touch screen of a phone, and your cursor will still work as normal. It’s also worth mentioning that the Google Chrome Dev Tool Device Mode works on any website, whether it’s yours or not. So if your just curious, or you want to see how similar sites have optimized themselves feel free to take a look. How do I Make Sure my Content is Optimized for Mobiles? Now that you know how to inspect your mobile site, it’s time to make the necessary changes to optimize your mobile version. Naturally, desktops and mobile devices function differently, and something that works well on your desktop version may not exactly translate well on mobile. The most important step toward optimization is speed. Everyone expects fast connections so make sure to reduce the number of large images on your site and make sure all your plugins and themes are up to date if you don't like how a certain theme looks on mobile don't be afraid to change it. It’s also a good idea to make sure your website font is clear and legible on mobile, and make sure that any pop-ups are small enough not to take up the whole screen. If you’re having a hard time configuring your pop-ups, consider turning them off for the mobile version. Conclusion Making a good first impression has always been important, nowadays even more so. If a potential customer or user isn’t happy with a poorly optimized mobile version of your website, there are plenty of other places they can go to get the service your providing. If they make it to your site first make sure they stay there. This may seem shallow but most people won’t care how well you provide your service if using the mobile version of your website is a pain or an inconvenience. Mobile devices are only going to get more popular as time goes on, so it’s extremely important to make sure that your website is able to keep up. Now that you have all the necessary tools at your disposal, make sure to put them to good use and remember to check your mobile version whenever you make changes to your site. You can never predict how a seemingly minor change can de-optimize the mobile version of your WordPress website.