Tag Archives: mobile

[ad_1] Whether you’re designing sites for clients or managing your own WordPress website, it’s important to know how it looks and works on a mobile device before you make any changes public. You probably have a mobile phone you can check your site with. But if you’re working on your laptop or desktop, it’s inconvenient to have to keep going back to your phone. And even if your website looks ok on your phone, there are a lot of phones and tablets out there. Just because it looks ok to you, doesn’t necessarily mean it will work perfectly on every different screen size, browser, and operating system. So how exactly do you preview WordPress sites on mobile devices? In this guide, we’ll cover a few easy methods of testing your site for mobile without leaving your computer. Why is it So Important to Test the Mobile Version of Your Site? Mobile devices overtook desktop computers as the primary method of browsing the web a few years back. Mobile devices accounted for 54.8% of global web traffic in the first quarter of 2021, and mobile phones and tablets took 57.37% of the market share worldwide over the last year. In some global regions, mobile use overshadows desktop use by a much bigger margin. For example, in India, mobile has over 77% market share. In response to growing mobile internet use, Google has started to penalize sites that don’t provide a good user experience on mobile. There have been a number of algorithm updates over the last few years designed to make the search experience better for mobile users. The 2015 “Mobilegeddon” update was the most drastic, as Google shifted to a mobile-first model. As a WordPress user, choosing a mobile responsive theme is the first step to making sure your site looks good and works well on mobile. But with the block editor, users have more control over the formatting of individual pages than previously. So it’s important to check how your site looks on a mobile device every time you add new content, even if you’re not developing themes or plugins. This is especially important if you’re using a visual drag and drop page builder like Divi or Elementor to create new page layouts or add content to your site. Method 1: Using the Built-in WordPress Mobile Preview You’ve always been able to preview your WordPress posts and pages before you publish them. But did you notice that you can also preview how your site looks on mobile? There are two places you can access a mobile preview in WordPress: From the post and page editor (not always accurate) From the WordPress customizer WordPress Post/Page Editor Preview Let’s first take a look at how the mobile preview in the Post and Page editor works. Click the “Preview” button that’s next to the “Publish” or “Update” button. In the drop-down menu that pops up, select “Tablet” or “Mobile” before clicking. This will immediately adjust the size of the page editor. However, this is a very rough and ready estimation of how your content will look and may not be very accurate, particularly if you’re using custom blocks or externally loaded CSS. You can see in this example that the editor has simply resized the blocks to fit into a smaller screen and wrapped the text. However, if you look at the live site at a smaller screen size, you’ll realize that it doesn’t look like this at all. Instead, the responsive design settings have kicked in to rearrange the blocks and resize the text. Here’s how it actually looks on a smaller browser screen: Lesson: don’t trust the mobile preview in the Post and Page editor.  To be fair, this is a pretty new feature and has only been around since WordPress 5.5, which was released in mid-2020. Hopefully, the mobile page preview will be improved in the future. WordPress Customizer Preview So is the preview in the WordPress Customizer any better? Let’s take a look. To access the WordPress mobile preview, go to Appearance > Customize in your WordPress dashboard. This will display a preview of how your site looks and allow you to see how changes you make to the style change its appearance in real-time. You can navigate to any page on your site and scroll up and down just as if it’s the live version of the site. To see how your site will look on a different screen size, use the icons at the bottom of the customization menu to switch between device views. The default is desktop, with tablet in the middle and smart phone on the right. This is the easiest and quickest way to see the mobile version of your site as it’s within the WordPress dashboard and accessible in a couple of clicks However, this essentially just gives you the same view as you would get by resizing your browser window. It doesn’t replicate exactly how your website will display and behave on every mobile device. It also only allows you to view your site at three different screen widths. Mobile devices come with many different screen sizes and resolutions. As the original proposal for the feature by the WordPress core development team states, “Only three options are available by default, and they’re intentionally ambiguous. Rather than looking like specific devices, the intent is to understand what a site may look like on a roughly tablet-sized, portrait-orientation device or a roughly phone-sized device.” Additionally, the WordPress customizer is only available for themes that support it. This means if you’re using a theme that doesn’t work with the customizer, you won’t be able to use this method to preview your site on mobile. Viewing Mobile Preview in WordPress Page Builders If you’re using a visual page builder like Divi, Elementor, Visual Composer, etc. most of them come with their own tools for previewing the mobile version of your site and seeing how the responsive design looks at different screen sizes. Refer to