How to Edit Mobile Version of WordPress Site and Why It’s Important
Why is Mobile Version of Your Website Crucial for Your Success?
Let’s start with the fact that more than 50% of web traffic globally comes from mobile phones. This literally means that more than half of your customers are checking out your site from their mobiles. Starting from 2018, when Google initiated mobile-first indexing of sites, responsive web design has only become even more important, and focus on the mobile experience of a website logically became a priority for anyone who takes their business seriously. Another important advantage of mobile-friendly websites is that they are simple and intuitive. They offer a smooth user experience, making it easier for potential customers to contact you. Plus, they load quickly and make sharing content easy and natural. One way to think about a responsive site is to see it as a free way to rank better on search engines. Why would you miss that opportunity? The better you rank, the more organic search results you get, which means more leads and more conversions.
A responsive WordPress theme guarantees a lot of advantages but you still need to check how your site looks on smartphones in real time. There are a lot of possible variations in screen sizes and browsers so none of the mobile previews can provide you with a perfect and 100% accurate preview. You should always rely on the real experience that you get from looking at your site on an actual smartphone or mobile device. This could inspire you to optimize your key landing pages and create different versions optimized for the mobile experience.
So, let’s see how you can preview if you have a WordPress mobile friendly site in two different ways.
Using WordPress’s Theme Customizer
The first and most straightforward way to see the mobile version preview is to use WP’s Theme Customizer. The procedure is simple. Log in to your WordPress dashboard and go to Appearance > Customize.
After you click on the WordPress Theme Customizer and open it, you will see all the options in the left-hand menu. There might be some variations in the options that are offered depending on the theme you’re using.
Notice the mobile icon at the bottom of the screen. Click on it and you will see a preview of how your site looks on mobile devices.
If the blue editing symbols confuse you – don’t worry. They are only visible in the previewer and never on your live site.
Tip: If you haven’t yet launched your blog or if it is under maintenance mode, this method of previewing is very handy as it allows you to make changes and check how they look before you go live with your site.
Using Google Chrome’s Developer Tools Device Mode
If you don’t feel comfortable using the WP Theme Customizer for any reason, you can always check if you have WordPress mobile friendly with Google Chrome Browser. It is also a very simple and easy procedure that consists of a couple of steps.
Just open your Google Chrome browser as you usually do, and go to the page you want to check. Then, right-click on the page and choose Inspect.
Note that this way you can see a preview of any page on any site, not just yours. It could even be your competitor’s website.
On your right-hand side, a new pane will open up and it will look like this:
The developer’s view allows you to see your website’s HTML source code.
Now, click the Toggle Device Toolbar button to see to the mobile view.
You will notice a few changes in the mobile preview: your website is shrunk to fit the mobile screen size and other changes might take place. Look and notice the differences carefully and note what you should change.
Check what happens when you try running your mouse cursor over the mobile view – it becomes a circle.
The point of the circle is to mimic the touchscreen on a mobile device.
Tip: If you want to see how your mobile screen zooms in and out, hold down the Shift key and click and move your mouse.
The advantage of using this method for previewing your mobile website is that it enables you to see how the page looks on different types of smartphones. These extra options are above the mobile view of your site. No matter what kind of preview you opened when you clicked on Toggle Device Toolbar, here you can change the screen size of the device.
Tip: Use the rotate icon in the upper right corner to rotate the mobile screen. You can also inspect elements on the page by clicking on the right-click and selecting the Inspect option.
RWD is something you have to think about carefully from the very beginning of creating your website. There are a lot of things to analyze when you have to make your site equally attractive, navigable, and effective on different screen sizes. WordPress page builders have a deciding role in this process, they provide you with cornerstones of your site’s design, therefore you need to inform yourself well before you make the choice. So, by investing some time into research about page builders, you’ll actually save a lot of time that you can spend on creating your website.
Based on our experience, WPBakery and Elementor are excellent choices, as they can satisfy a wide range of different needs.
If you’re on a budget, Elementor is your best bet. It is a simple-to-use, beginner-friendly plugin that has a very generous free version with a solid set of elements. It also integrates well with other leading WP plugins and services like MailChimp, WooCommerce, HubSpot, Yoast SEO, etc. If you can afford a premium plugin, WPBakery Page Builder will never disappoint you. It comes with an incredibly large collection of elements, a plethora of blocks, and options. It’s also easy-to-use and allows for a lot of creativity.
Although page builders are essential for RWD, the theme you plan to use is also important since it can offer some amazing features. As you may know, theme authors develop specific widgets and elements that can be adjusted separately from page builders. Many of these elements allow you to set responsiveness following your needs. For this reason, you should choose the theme developed by well-known, trustworthy authors. This is especially important if you want to use a free WordPress theme. To save your time and nerves, we tested tons of free themes. So, if you want to use a responsive, feature-rich, and reliable free theme, we recommend you try the Qi theme.
It is safe to say that Elementor is by far the best page builder when it comes to editing mobile version of your website. It may happen that you missed to notice this small icon, called the Viewport Icon, in the settings:
This icon indicates that any value that has it next to it can be edited separately for the desktop and for the mobile site version. Let’s take the Column Width settings for example – you can adjust the value for desktop, mobile and tablet. The value you enter for each device will be valid only for that selected device. Notice that the HTML tag does not have the icon next to it, which means it has the same value for every device.
In case you want to change the value for the mobile device, all that is needed is to choose the mobile layout option and enter the desired values (these values will be implemented only on mobile devices). On the right side of the screen, you have the live preview of all the changes that you make, so that you can see how the new values will look like on the device immediately.
To return to the desktop view you need to switch to the desktop layout option. You can do that, as we have mentioned above or by using this small icon in the bottom menu on the page:
One more important thing to mention related to responsiveness is that the columns and rows can be turned off for individual devices, i.e. we can say that they will not be visible (or will be visible) on some screen sizes.
To access this option follow the path:
- Right click on the row/column
- Select Edit Section
- Click the Advanced tab
- Select the Responsive dropdown
This option is very important in case we have a section that we know only makes sense to be displayed on the desktop, so we will cancel it on other devices. And to compensate for the lack of it, we can make one section that will be seen on all other devices except the desktop.
When it comes to columns, we can also find the Reverse column option (Tablet / Mobile). It is best to explain this through an example. Let’s say we have a section like this on the desktop where content is split into two columns with images followed by a brief text:
Naturally, on mobile devices the content will be rearranged as in the image below, following the original order from the desktop:
The reverse column option allows us to switch the order of a certain section for mobile devices or tablet layouts. When we do it for the first section on smaller devices the result is more effectively displayed content:
Sooner or later you’ll be tempted to use a variety of plugins that make it easy for you to add a sidebar, a CTA, a widget, or a similar element to your site. This is the moment when many forget that a sidebar or any other element that works perfectly on a desktop screen, might not be so great on mobile. So, before you jump to take advantage of these handy tools, check if they are responsive too. The truth is, many of them are and can actually help you improve UX. But to know that for sure, read the reviews or find a demo before installing any. As long as the plugin behaves well on mobile, you can be sure your website is on the road to success. Let’s also not forget that your options vary a lot depending on the theme you’re using. A premium theme certainly guarantees a lot more possibilities.
Responsive Menu – First Impression Counts
The menu is the pillar of user experience. It’s the first or one of the first things anyone clicks on when they visit your site. It affects how fast the visitor will find what they came for, how long he will stay, and many other aspects of UX. It is important to have a beautiful, well-structured menu that makes navigation smooth, but it is not as simple as it seems. You may have a great menu that works perfectly on a desktop but is to heavy for a mobile. One solution in this case is to adjust your desktop version to mobile screen size too. But what if that implies losing too much useful information? In that case, you can create a different menu, customized for mobile screen size only. Many WP themes come with the option to do this. If your theme isn’t one of those, don’t worry, there are a lot of great plugins for responsive menus. Our recommendation is the Responsive Menu plugin that includes 150+ options for customization and requires zero coding knowledge. It allows you to add animations, background images, set the position of menu buttons, and a lot more. It is incredibly easy to use so it is especially handy for total beginners.
Images and Galleries
An image speaks thousands of languages, so make sure yours look just as stunning on any screen size. We live in a very visually oriented culture, and whatever the niche you’re in, great photos are a must. But, no matter how great images you have, if they load slowly, or aren’t neatly presented, you’re at risk of losing a significant percentage of your audience. So, to make sure to avoid that scenario, we recommend the Envira Gallery Lite plugin that will help you create powerful galleries just like a pro. Some of its advantages are that it is highly optimized for web and server performance which is great news for your SEO.
Social Sharing Buttons
When you have a great, responsive menu and stunning galleries, the next thing to take care of are the social sharing buttons. Their size should be customized to the device. A big button on a small screen makes the visitor occidentally click, and that is quite irritating. On the other hand, small buttons on a big screen are not so easy to recognize. A plugin that can help you have customized buttons is the Sassy Social Share plugin. Easy to use, totally free, and beginner-friendly, it makes sharing a breeze both for you and your site’s visitors.
Mobile Firendly Websites
In situations when you need to make your site mobile responsive quickly, there’s no better solution but a plugin like WPtouch. This plugin is made in such a way that it automatically adds a simple and elegant mobile theme to your WP site. The fact that it is recommended by Google says a lot about its effectiveness. So even if you don’t have a mobile version of your site, a plugin like this can instantly enable a mobile-friendly version of your website, so that you don’t lose your rankings. It also allows you to customize many aspects of the site’s appearance.
Page loading speed is also a very important aspect of user experience, especially on mobile devices. If you’re facing some challenges in this area, consider using the Accelerated Mobile Pages plugin as it is one of the fastest and simplest ways to improve your site’s loading speed.
Avoid Adding Popups on Mobile Devices
Popups are rarely amusing, but they are especially irritating on mobiles. They cover a large part of the screen and require from a visitor to dismiss them before accessing the content of the page. Therefore, it is best to avoid them completely in the mobile version of your site. How you are going to avoid them, mostly depends on your service provider, but the majority of them have an option to disable intrusive popups on mobiles. Also have in mind that Google penalizes sites that have very intrusive popups.
In Conclusion
Since the number of people who use smartphones to access the internet is on the constant rise, it makes sense to expect a lot more solutions and options for the mobile versions of sites. Designers are working hard to address the plethora of usage patterns, still, the basics of RWD are the same – make sure to choose a mobile-friendly WP theme and a page builder that has all the options that you need.
So, how responsive is your site? Do you have to make a lot of changes to make it more mobile-friendly? Share your answers with us, and feel free to ask for more info in the comment section.
