4 Steps to Ensure Your WordPress Site is Ready for Mobile
Every web developer knows that it’s important to have a mobile friendly website if they want a decent bounce rate. Thankfully, if you’re using WordPress, most themes are already mobile friendly. This is because the frameworks they use have built-in functionality to allow responsive themes on mobile devices. You can experiment with this by going to any WordPress site and shrinking and expanding your browser window! While it’s ever-important to have a mobile friendly site, it’s equally critical to know how to edit the mobile version of a WordPress site!
Instead of just wondering “Is my site mobile friendly?”, you can easily check without even having a mobile device! (Although let’s be real here, it would be kind of weird to not have at least some mobile device in this day and age!)
Table of Contents
By following these simple steps, you can help guarantee that your site keeps attracting new visitors (or that your new site begins attracting them). Remember, Google knows all (including whether your site supports mobile devices), and you’ll be ranked on searches from mobile devices accordingly!
Step 1: Check How Mobile Friendly Your WordPress Site Is
The first step to solving any problem is to know every variable. Our first variable is whether or not your site caters to mobile devices, and it’s quite easy to find out. For starters, use any phone or tablet you may have access to and visit your site on it. If you have to scroll around a lot, the site is laggy, or content isn’t showing up, then you have your sad answer of “no”.
Regardless of the results, you should follow up with a confirmation. This requires you to have Google Chrome installed on your machine. This browser has the capability to emulate devices with different screen sizes, making it perfect for testing out your site. (Protip: Google Chrome has, by far, the best developer tools out of any web browser. You should have it anyhow if you’re a webmaster!)
- Navigate to the URL of a random page on your site in Google Chrome.
- Once it is fully loaded, press F12.
- This will open up the Developer Tools.
- Click the icon in the red box in this picture:
5. You should then see your site pop up in a “mobile view” like this:
You can play around with it by resizing the window. The dropdown menu that defaults at “Responsive” can also emulate lots of commercial devices, such as different iPhone versions! This is the most foolproof way to verify mobile compatibility. You can also try Google’s free “mobile test”!
Step 2: Learn How to Edit the Mobile Version of Your WordPress Site
Unless you have in-depth knowledge of modern web frameworks, your best bet is to stick with mobile-friendly WordPress themes! If you need some new theme ideas, check out our reviews of seven cool (and free) ones right here! There isn’t any secret on how to edit the mobile version of your WordPress site; like everything else in WordPress, you simply edit post content.
The only place where you need to be extra careful is in the “Additional CSS” category. The single biggest mistake made by those who wish to keep their full WordPress site on mobile devices is to use non-relative measurements in Additional CSS. This means that instead of using percentages or other “relative units”, they use pixels. If you haven’t modified the “Additional CSS” section, then you don’t need to worry about this.
On the same note, if your WordPress site is not displaying correctly on mobile devices, you may need to use the “Additional CSS” option to fix it. There are ways to add CSS that only goes into effect if the site is accessed by a mobile device. Unfortunately, this can get quite complicated, as each mobile device manufacturer has somewhat arbitrary standards. This site provides very detailed information on how to edit the mobile version of WordPress sites if the display is off.
Step 3: Ensure Your Plugins are Also Mobile Friendly
As WordPress doesn’t make it too difficult to remain mobile-friendly, the second-to-last step to getting your site up to mobile standards is to run through the plugins you’re using. Certain plugins actually provide information on or help with how to edit the mobile version of a WordPress site. However, other plugins are not suited for mobile devices.
This is the most labor-intensive step of this tutorial. First, you’ll need to go back to your WordPress Portal. Next, you’ll need to navigate to the “Plugins” link located on the sidebar on the left-hand column as shown in the image below:
Once there, you should see a list of all the plugins you have installed and activated. You’ll then need to look around your posts to identify where you have utilized these plugins. Remember, the tests we did earlier (and the test that Google will do for you) will only test one page at a time, not crawl your entire site.
Run these tests on each page and post where you’ve used a plugin, especially if the plugin is not designated as a “responsive” plugin or it hasn’t been updated for more than a year or so. There are almost always free alternatives to plugins that you’re using. While this process is certainly tedious, it’s the best way of finding out your site isn’t mobile-friendly.
Step 4: Solicit Feedback
It’s up to you on how to implement this, but you should always have a clear place for users to send you (hate) mail. It could be as simple as an email address at the bottom of your site. Or perhaps you could create a menu that has a “Contact Us” link and a fillable form. Remember, users can best identify shortcomings, as they are the people who will directly experience them. It’s unrealistic to expect your knowledge of how to edit the mobile version of your WordPress site to cover all the bases!
And yes, there are responsive plugins available, but you’ll need to do research to determine which will fit your site’s needs the best.
Learning how to edit the mobile version of a WordPress site and keep your WordPress site mobile friendly is quite a chore, even for a seasoned developer! Between your content, your plugins, and everything else, there’s a lot that can go wrong. However, utilizing the power of your user base, you can usually crush the “bugs” that users on certain mobile devices experience if you simply provide a means of communication!
So, in conclusion, here’s all you need to know in order to understand how to edit the mobile version of your WordPress site (and keep it mobile friendly):
- Use Google Chrome and Google’s Free Mobile Testing Tool on pages of concern.
- If there are any mobile display issues, attempt using device-specific “Additional CSS” to fix it.
- Look through your plug-ins and ensure they’re modern and responsive; if not, consider replacing.
- Get feedback from your users so you’ll know if there’s a certain mobile device that isn’t compatible with your WordPress site.