Itβs 2017. That means you can no longer ignore this little thing called mobile-friendly design when it comes to WordPress. But not all of us are huge enterprises with millions in the bank, right? So if youβre just a regular old WordPress user, how can you make your WordPress website mobile-friendly for free?
Therein lies the rub! It might seem like a tall order, but there are plenty of basic principles you can implement by yourself to improve the mobile-friendliness of your site. And Iβm going to discuss all of them.
Hereβs everything Iβll cover in this rather lengthy post:
- Why itβs essential to make your WordPress site mobile-compatible
- A free tool to test your siteβs mobile friendliness
- Some simple ways to make your WordPress site mobile-friendly for free
- Two different ways to create an app version of your WordPress site
Iβm going to go into detail here…so I hope youβve got a fresh cup of coffee! Letβs get started…
The Lowdown On Mobile Friendliness as a Goal
The face of the web is changing. Ten years ago, you wouldnβt even see a post about mobile-friendly design, let alone one harping on it is an important goal for your site. Now, thatβs all changed.
In 2016, mobile browsing surpassed desktop web browsing for the first time ever. Yup, mobile traffic accounted for a stunning 51.3% of worldwide traffic. And while desktop is still the slight leader in the USA (accounting for 58% of all traffic), the trends are definitely moving everything towards mobile.
So I guess what Iβm saying is this…soon, we might see posts on βwhy you still need to make your website desktop friendlyβ. Thatβs a bit of a joke, but the trends are moving in that direction. There are already movements like βMobile firstβ that advocate a mobile focus for web design.
Beyond just generally making your site accessible to one of the most popular ways in which people browse the web, mobile-friendly design can actually help your WordPress site rank higher in Googleβs mobile search results.
Thatβs because Google has a specific mobile-friendly algorithm that they apply to their mobile search results. As a result of the algorithm, mobile-friendly sites get a ranking boost in mobile search results.Β A part of this encompasses ensuring your online store is mobile-friendly as well, which you can learn more about from ECommerce Booth.
In any case, when you consider that the majority of Google searches happen on mobile now, thatβs a pretty huge incentive!
How Mobile-Compatible Is Your WordPress Site…Right Now?
Ok – you know that mobile-friendly design is important. But how can you figure out:
- What mobile-friendly design is
- Whether or not your WordPress site is mobile-friendly right now
Thatβs what Iβll cover in this section!
What Does Google Consider Mobile-Friendly?
Thankfully, you donβt have to guess when it comes to what constitutes mobile-compatible design for your WordPress site. Google has actually put out specific guidelines for mobile friendliness. Hereβs what Google says to avoid when trying to make your WordPress site mobile-friendly:
- Unplayable Content – make sure that any content sources you include play on both mobile and desktop.
- Small font sizes – Google recommends a minimum of 16px for mobile fonts.
- Touch elements that are too close – Fingers are fat! You need to give people enough space to touch the correct element.
- Incorrect viewport – make sure you mobile page sets the viewport properly.
Beyond Googleβs guidelines, you can also find plenty of resources from web designers on mobile-friendly design. A great place to start is Smashing Magazineβs Guidelines For Mobile Web Development.
How to Use Googleβs Mobile-Friendly Checker Tool
So how can you tell whether or not your existing WordPress theme is mobile-friendly? Itβs actually pretty dang easy thanks to a tool that Google put together.
All you need to do is head here. Then enter the URL of the site you want to check and click RUN TEST:
Google will analyze your page and tell you how mobile-friendly your current design is:
Looks like my site is mobile-compatible already! But is yours? Letβs see how you can make your WordPress site mobile-friendly for free!
How to Make Your WordPress Website Mobile-Friendly for Free
Below, Iβll get into some tips for how to make your WordPress site mobile-friendly for free. Iβll cover everything from major decisions like theme and plugin choice to smaller things like limiting popups and Google AMP.
Letβs dig in.
Use a Responsive WordPress Theme
This one might seem obvious, but the fact of the matter is this:
Itβs much easier to pick a mobile-compatible WordPress theme than it is to go back and retrofit an existing WordPress theme to be mobile-friendly. And that process certainly isnβt free!
So if you want to make your WordPress site mobile-friendly, make sure you pick a theme thatβs responsive. If youβre sticking to free themes, everything at the WordPress.org theme directory is responsive nowadays.
And the same goes for pretty much every single other theme out there. But just because a theme has implemented basic responsive design principles, that doesnβt mean itβs 100% mobile-friendly.
So…how can you figure out how mobile-friendly the WordPress theme youβre looking at actually is? For that, I have a little trick!
See, most WordPress themes provide a demo site for you to preview what the theme looks like in a live environment. Well, all you need to do is take that demo siteβs URL and plug it into Googleβs Mobile-Friendly Test tool:
For example, the shot above tells us that ThemeIsleβs popular Zerif Pro theme is 100% mobile-compatible.
So, before you choose any WordPress theme, make sure itβs actually mobile-friendly by going beyond looking for the βResponsiveβ designation.
Or…Use a Different Theme for Mobile
One caveat – I do NOT recommend this approach for the vast majority of WordPress sites. But if youβre in love with your current themeβs desktop look, but not happy with its mobile friendliness, itβs actually pretty easy to use a different theme for your mobile traffic.
A free plugin called Mobile Smart lets you use a different WordPress theme depending on each visitorβs device. Or, you can simply use different WordPress templates to work within the same theme.
The pro version also lets:
- Specify different versions of your pages for different devices
- Send mobile traffic to a different URL
- Disable specific plugins on your mobile site
- Control widgets/shortcodes depending on a visitorβs device
You can also find plenty of other WordPress mobile plugins to help you out.
Personally, I think using a single responsive theme is still the best approach. But Mobile Smart is a great option if thatβs not currently possible for your situation.
Make Sure Your Plugins Follow Responsive Design, Too
Hereβs an oft-overlooked facet of WordPress mobile friendliness:
Itβs not just about choosing a responsive WordPress theme. You need to make sure that every single plugin you install also operates on responsive design principles.
For example, if you install a plugin that adds a contact form to your WordPress site, you better make sure that contact form looks great on both desktop and mobile.
Unfortunately, thereβs not really an automated test for this one. Instead, youβll need to manually check whenever you install a new plugin.
You can either:
- Use your own smartphone to see how the plugin looks on mobile
- Use a site like Am I Responsive to see how the plugin functions across a variety of different devices
- Use your browserβs Developer Tools functionality
Using a Page Builder? Take Advantage of Responsive Controls
Page builders are pretty dang popular these days. But if youβre not familiar, they basically allow you to create complex designs without needing to know any code. Usually, you use a simple drag and drop interface to move βelementsβ around.
So how do page builders tie into making your WordPress site mobile-friendly? Because most page builders let you enable or disable elements depending on the device that your visitor is using.
For example, letβs take a look at my personal page builder of choice, Elementor. Say I have an image that looks great on desktop…but crowds the page on mobile or takes forever to load.
All I need to do is uncheck a box to ensure that the image doesnβt display on the mobile version of my page:
You can use these settings to ensure that:
- You have proper spacing for touch elements
- All the content on your mobile site is playable
- Your mobile site isnβt overly crowded
So if youβre using a page builder, itβs worth picking one that allows you to implement responsive page designs.
Limit Aggressive Popups on Mobile. Especially on the First Page
This one is super easy because all it requires is not doing something. Instead of adding some new techniques, all you need to do is refrain from showing popups on the mobile version of your site.
Why? Because in addition to just plain annoying mobile visitors and violating Googleβs mobile-friendly design standards, it also negatively affects your siteβs rankings in mobile search.
Thatβs because Google rolled out a mobile ranking penalty for sites where βcontent is not easily accessible to a user on the transition from the mobile search resultsβ. This penalty has been active since January 10, 2017.
So, donβt use popups or mobile interstitials on your siteβs mobile pages. Especially not for the first page a visitor hits after coming from the Google search results.
Consider Integrating Google AMP for WordPress
If youβre not familiar, AMP stands for Accelerated Mobile Pages. Itβs a Google-backed initiative to speed up mobile page load times by serving up a stripped-down version of a page.
If youβve searched for anything on Google mobile search, youβve probably come across sites marked with the AMP designation:
So whatβs the benefit of Google AMP for WordPress? While you do give up some control over how your mobile site looks (because the code is stripped down), Google AMP pages are inherently lightning fast and mobile-compatible.
So if you want to quickly make your WordPress site mobile-friendly for free…AMP is a great option.
Itβs also super easy to set up Google AMP for WordPress. Thereβs even an official plugin from Automattic to help you do it!
Pretty much all you need to do is install and activate the AMP plugin. Then, your site will start serving up AMP content to mobile visitors from Google. And if you’re looking for a detailed how-to guide, give this a read: Google AMP β How to Implement it in WordPress
If you want more flexibility over how your WordPress AMP content looks, the AMP for WP plugin is a great option. It builds on the official AMP plugin with new styling options, as well as options for adding ads and social sharing buttons:
If youβre concerned about the SEO-impact of your Google AMP WordPress pages, hereβs two important things to consider:
- The AMP plugin automatically adds rel=βcanonicalβ tags to your AMP content, so you donβt need to worry about any duplicate content penalties.
- You can ensure that your Yoast SEO settings carry over to your AMP content by installing the free Glue for Yoast SEO & AMP plugin. Additionally, All in One SEO supports Google AMP in the core plugin, as well.
Going Further – Turn WordPress Into a Mobile App
Ok, the above tips are all about making your basic WordPress site mobile-friendly. But if you want to go all in on mobile, you can actually take things much further than basic responsive design.
Iβm talking about apps! See, thereβs a debate going on about whether itβs best to go with responsive web design or a mobile app.
Now, I wonβt pretend to have the knowledge to weigh in on that debate…but I do know exactly how you can turn your WordPress site into a mobile app.
So if you are on team mobile app, hereβs how to turn your WordPress site into either a:
- Progressive web app
- Native app
Whatβs the difference?
Progressive web apps are sort of a hybrid between responsive design and native apps. Theyβre still technically a βwebsiteβ, but they function much like an app would.
Native apps, on the other hand, are actually installed onto your visitorβs smartphones.
How to Make WordPress Into a Progressive Web App for Free
To create a progressive web app version of your WordPress site, you can use a nifty freemium plugin called WordPress Mobile Pack.
In the free version, you can create a basic progressive web app version of your site. To get started, all you need to do install and activate the free WordPress Mobile Pack plugin.
Then, you can get your progressive web app up and running in just a few minutes. Start by adding your logo and configuring color schemes and styling options:
Then, choose the content you want to include in your app. You can include everything, or just select specific categories or pages to include. This is a great option if you have some content which just doesnβt lend itself to mobile:
And thatβs pretty much it! You can explore the other options to add Google Analytics tracking and configure who sees your progressive mobile app. But thereβs nothing else that needs to be done.
What Do You Get in WordPress Mobile Pack Pro?
If you want to go all in on your progressive web app, you can purchase the pro version to get access to:
- More styling options
- Additional app themes to easily change up the whole aesthetic
- Options to include advertisements into your progressive web app
The developers are also working on additional extensions that let you add functionality like:
- Push notifications
- Offline mode
- HTTPS
- A solution to download a native app version of your progressive web app for the best of both worlds
How to Turn WordPress Into a Native App
Unfortunately, because the process of converting your WordPress site into a native mobile app is a fairly complex, most of the plugins cost a bit of money. So if youβre serious about creating a native mobile app version of your WordPress site, youβll need to crack open your wallet and pay for a premium plugin.
While there are several plugins purporting to do this, your three most popular options are:
- WordApp
- MobiLoud
- AppPresser
How Does WordApp Work?
WordApp lets you create both Android and iOS native apps from your WordPress site. Best of all, you can actually create the Android app for free, though youβll need to pay for the iOS version.
Creating your app only takes about 5 minutes and youβll even be able to send your app users push notifications directly from your WordPress dashboard.
Even if you go with the paid version, WordApp still costs less than $10 per month.
How Does Appmaker Work?
Appmaker lets you convert your WordPress and WooCommerce sites to Native Android and iOS WordPress/WooCommerce apps.
The pricing is custom and you can get an estimated cost after contacting their app experts. The company prioritizes quality and performance above all else, so while pricing may be higher than competitors they abide by the mantra, “you get what you pay for,” so to speak.
How Does MobiLoud Work?
With MobiLoud, you install the free plugin and sync it up with your paid MobiLoud account. Then, MobiLoud builds out a native app version of your site for both iOS and Android.
Youβll get your own logo, icon, and launch screen. And MobiLoud will even handle the submission process.
Currently, MobiLoudβs cheapest plan starts at $69 per month when paid monthly. They also have more feature-rich plans which go up in price.
How Does AppPresser Work?
With AppPresser, you create your native mobile app in the AppPresser interface. Then, AppPresser gives you a dedicated plugin to sync your WordPress site with your native mobile app.
While you build you app yourself, donβt worry! You donβt need to know any code to build your native WordPress app. Everything is done via a visual builder, which is super neat. Obviously, youβre not going to create the next Flappy Bird with the visual builder. But for a simple app version of your WordPress site, itβs totally fine.
AppPresser offers a few different plans:
- Starter – a basic plan for $199
- Woo – a plan targeted towards WooCommerce stores for $399
- Agency – designed for agencies at $499
While none of them are 100% free for iOS and Android, all of them are good solutions for turning WordPress into a native mobile app.
Wrapping Things Up
Phew! We covered a lot, didnβt we? After reading this post, you should know everything from why itβs important to make WordPress mobile-friendly to how to turn your WordPress site into a nifty mobile app.
If youβre just a casual WordPress site user, you donβt really need to concern yourself with apps. Just follow the basic mobile-friendly design tips like responsive design, eliminating popups, and maybe installing Google AMP for WordPress.
If youβre running a serious business on WordPress, though, you need to spend a bit more time on making your WordPress site mobile-compatible.
As some of the stats I discussed illustrated, mobile traffic is not going away anytime soon (quite the opposite, actually!). So if you want your business to be successful, investing in mobile-friendly design will pay dividends down the road.
SaveSave
SaveSave