If you are looking to make a WordPress site mobile-friendly, this detailed guide is exclusively for you.
Did you know that 9 out of 10 mobile searches lead to action and more than half of them lead to sales?
Mobile Internet usage is increasing like never before. It is overtaking desktop internet usage, more and more people are now using smartphones and tablets to browse information online.
This is the main reason why most e-commerce sites are now creating mobile apps to increase their sales and user interaction. If your website or blog is not yet mobile-friendly, you should immediately consider making your design responsive or you will lose a lot of leads, traffic, and sales on the table.
Why give your competition an advantage by not having a mobile-friendly design? Make your website mobile-friendly and you will soon notice the rewarding results.
Why Make a WordPress Site Mobile-Friendly ?
If your website is mobile-friendly, here's what happens;
- you will see an increase in traffic
- you can increase your subscribers by having responsive email opt-in forms and landing pages
- you'll get more sales (mobile internet users mostly rely on search engines to browse information, so they're high-quality customers who are ready to buy)
So what are you waiting for? Make your blog user-friendly and start attracting more people. Let’s dive into the details to find out more.
Contents :
The Ultimate Guide to Making a WordPress Site Mobile-Friendly
What is a mobile-friendly website?
With billions of people using mobiles all over the world to browse information, it is becoming a trend to use mobile sites.
Even Google rewards sites optimized for mobile users because they provide a faster and better experience for users.
A mobile-friendly website will automatically detect the environment each visitor uses to access your site and then display it in the format best suited for that device (such as smartphones, tablets and so on).
Here's what a responsive vs. non-responsive mobile site looks like:
As you can see above, a mobile responsive site loads all its elements like logo, text, buttons, navigation, menu etc properly on mobile while non-responsive design looks messy on mobile.
According to Statista, the percentage of web traffic from mobile continues to grow. The number of global mobile internet users has increased by more than 10% over the past 4 years.
Not only that, the mobile Internet user penetration index is now 61,2%, representing just over 2 billion people accessing the Internet on mobile devices. That's an interesting statistic, isn't it?
That's why you should focus on making your site usable if it's not yet responsive.
That being said, there is a difference between a responsive website and a mobile friendly site. What is this?
A responsive website works for all desktop, tablet and smartphones also with the same content as it automatically adjusts the layout whereas a mobile friendly site is actually a separate version of the desktop website which is designed specifically for smartphones.
In short, having a mobile responsive design can improve your rankings, user experience, sales, and overall conversions online.
How do you know if your website is mobile-friendly?
Do you want to know if your site is mobile friendly or not?
To check the mobile responsiveness of your site, you can use a free tool from Google which is known as Mobile-friendly testing tool which shows you how easily a visitor can use your page on a mobile device.
It works great and it's completely free to use and you just need to enter a page URL or your site's homepage URL to see how it scores on their tool.
Here's what it looks like:
As you can see above, we've entered a URL and that shows us that the page is mobile-friendly (meaning, the page is easy to use on a mobile device).
It also shows you additional resources where you can get site-wide mobile usability reports to fully analyze your site for responsiveness.
Generally, mobile responsive testing is done to ensure that all your website users are getting the best viewing experience on their devices, can be laptop, desktop, tablet and so on.
Apart from the Google-friendly testing tool, you can also use the following online tools which are completely free to test your site's responsiveness.
All of the above tools are useful to know if your site is mobile friendly or not and you can check the responsiveness on any site with just one click from your own browser by entering the URL of any page .
Now let's talk about some PROVEN ways to build a mobile responsive version of your WordPress sites.
Use a mobile responsive WordPress theme: the 3 main themes
One of the easiest ways to create a mobile-friendly site is to use a mobile-friendly theme for your WordPress sites. While there are a ton of options, here is the list of top 3 themes you can use to get a responsive design with great features at an affordable price.
1. Divi
Divi is one of WordPress themes most popular premium used by more than 800 people worldwide. It gives you a ton of mobile-friendly themes with Divi, which is a premium theme and visual page builder.
Divi is exclusively designed to provide better desktop experience including mobile response experience to users.
It lets you customize your site the way you want as you can adjust font sizes on spacing specifically for different mobiles. You can also assign unique text sizes and spacing values for mobile and tablets without detracting from the desktop experience.
Here's what it looks like:
As you can see above, it allows you to customize your design in 3 sections in the Mobile Styles panel which are Tablet, Phone and Mobile Menu. You can access each of them and customize everything, including text color, logos, and more. easily.
What is the price of Divi?
The great thing about using Elegant Themes is affordable pricing where you can grab all of their premium themes by just paying $80 which means you pay just $0,79 per theme.
Elegant themes come in 2 pricing plans mentioned below.
1. Annual access: This is the cheapest option that costs $80 for 1 year (with our exclusive discount) and you will get access to over 80 themes with 5 plugins and Divi theme builder.
2. Lifetime Access: If you want lifetime access to stylish themes then this package is for you which costs $224 for lifetime where you get lifetime updates, themes and plugins downloads with lifetime support.
Good news for you. If you're looking to grab the Divi builder with stylish themes, you can use our exclusive link to get an instant 10% discount on their prices.
If you are not satisfied with the theme or features, you can also request a full refund of your money within 30 days of purchase. So you won't lose anything.
2. Genesis Framework
Looking for a premium theme framework that is not only mobile responsive but both faster and SEO friendly? Then you should try the Genesis framework as it gives you lifetime access and unlimited use of the site.
What is the cost of Genesis Framework ?
Genesis offers two pricing plans listed below.
1. Genesis Framework: This is just the bare framework which is all you need which costs you $59,95 which is a one time fee and you will get unlimited use of the site as well as lifetime access including lifetime updates.
2. Pro Plus Membership: This package allows you to download their entire theme collection which costs you $499,95 and it is a one-time fee with unlimited site usage and lifetime access and a great package for web designers and developers.
Click here to download Genesis for WordPress
3.GeneratePress
If you are looking for WordPress themes premium affordable and faster, GeneratePress is just right for you.
How much does it cost?
GeneratePress costs you just $49,95 for 1 year. You will also get a 40% discount on next year if you are an existing customer.
Quick note: It also offers you a free version which you can download from their website, but it gives you basic and limited features.
Click here to download GeneratePress premium
Use WordPress plugins for mobiles: the 4 best plugins to make your site responsive
A great thing about using WordPress CMS is that it gives you a ton of mobile plugins that help you easily turn your site into a mobile-friendly one. Here is a list of the top 4 plugins that make your site mobile responsive (and few of them are premium but worth every penny).
WPtouch
WPtouch is one of the most used mobile plugins for WordPress sites. It is installed and used by over 500 sites worldwide and it is also on Google's shortlist of the best WordPress mobile solutions.
This plugin will instantly activate a mobile version of your website that will pass the Google Mobile test. It also helps you easily customize the look of your site and provide a faster browsing experience for your mobile visitors without modifying your theme code.
It also offers a premium version of the plugin which is called WPtouch Pro (and costs you $79 for 1 site use) and it uses its themes for mobile visitors and your desktop theme will not change so your blog content remains the same.
Moreover, with their Pro option, you can also control your menus, pages, devices and even specify different home and landing pages for your blog.
WP Mobile Menu
WP Mobile Menu is one of the best WordPress plugins which provides you with a responsive mobile menu where you can easily customize the style of your mobile menus as you wish.
It gives you an exceptional experience for your mobile visitors to access your site content, regardless of the device they use while browsing, including smartphone, tablet or desktop.
iThemes Mobile Plugin
This is NOT a free plugin as it is a premium mobile plugin from iThemes which is very popular and used by many people around the world.
It gives you a plethora of options along with an inbuilt styling manager to make your site responsive on all devices. It also offers you mobile-ready themes to optimize your site for mobile users.
There are different pricing options on offer and the basic plan starts at just $45 and gives you access to 2 licenses which is an ideal option for bloggers and single site owners.
With Mobile style manager you can easily change the basic styles and color schemes of your mobile theme and it can be customized using any theme you are using and it will not affect your design.
TapTap
This is another widely used premium mobile plugin from CodeCanyon (Envato Market) that gives you the most flexible and versatile WordPress mobile menu.
TapTap is customizable and one of the amazing and easy to use WordPress mobile menus available on the web right now. Whether it's an eCommerce store or a portfolio site, you can customize everything from fonts, font sizes, icons, colors, buttons, and logos to backgrounds, alignments, and more.
This is a premium plugin from CodeCanyon and the standard single license of this plugin costs you $26 where you can get one year updates and customer support.
The best thing about using this mobile menu plugin is that you can easily preview all the changes you make on your site in real time (and it helps you customize your mobile menu quickly).
Use Accelerated Mobile Pages (AMP)
Site speed is one of the main ranking factors for Google.
To reduce loading time, Google offers a new approach known as Accelerated Mobile Pages (AMP) for mobile users.
Here is an example of an AMP search result from the New York Times:
As you can see above, AMP pages load quickly and provide a very fast experience for users browsing online information from their mobile devices.
The biggest advantage of AMP pages is that they load very quickly. For example, when someone searches for something on Google, the AMP links appear at the top and when the result is clicked, it loads almost instantly.
Another reason to consider implementing AMP for your websites is that it gives you additional character limits for titles.
Whether you know it or not, Google has a 78-character title limit for smartphones. For desktops, it's 70.
This means that if you use more than 70 characters (for desktop) and 78 characters (for mobile) in titles, the extra characters are truncated so they don't appear.
So you can add more characters to your mobile titles to get more exact search matches from mobile users to increase your overall search traffic from smartphones.
Now the question arises: how to implement AMP for WordPress sites?
Fortunately, there are a few WordPress plugins that help you easily enable and implement the AMP version for your WordPress sites.
Here is a list of some amazing AMP plugins that you can use to implement AMP version for your mobile users.
- AMP (official WordPress AMP plugin)
- AMPWP – Google AMP for WordPress
Mistakes to Avoid While Making Your WordPress Websites Mobile Friendly
Using images without optimization: most people crawl Google images and use images directly on their blog posts without even worrying about optimization. Stop doing it if you're also one of them, as your site's load time is heavily affected by the images you use.
Use plugins like WP Smush.it to optimize your images or even better optimize them using free image optimization tools even before using images on your posts.
Going too far with java script: Did you know that most beginners play with CSS files and Java script without really knowing how to play with the code? If you're one of them, don't mess around with Java or CSS code unknowingly or you'll most likely end up ruining your website's load time.
Not testing your sites: test if your sites open correctly on different mobile devices and tablets. You can use MobileTest.me, QuirkTools, etc. to display your website on different screen resolutions.
Other Resources:
- 12 Best Moz Alternatives You Should Try to Improve Your SEO
- SEO Friendly Titles: 8 Best Practices with Examples
- 13 Best SEO Blogs You Can't Miss to Improve Your SEO
- Link Building Tools: 8 Best for Finding Quality Backlinks
- YouTube SEO: 11 tips to get your videos noticed
- 3 Surfer SEO Alternatives You Need
- Keyword Research for SEO: The Ultimate Guide
Conclusion
There are literally billions of people using smartphones for everything from car reviews to discounts to online shopping. It doesn't matter whether you're using a WordPress site or an e-commerce store, having a responsive design improves your overall result.
So what do you think of mobile optimized WordPress sites? Do you have any questions ? Share your opinion in the comments.
