An Ultimate Guide for Making Your WordPress Site Mobile Compatible
Do you know over 70% of the total traffic comes strictly from mobile devices? It is an undeniable truth that Google favours mobile-friendly or responsive websites. As per a report produced by Google, 90% of users move between different types of devices – like tablets, smart phones, desktop, or TV – to browse or purchase something via internet. With the rapid adoption of multi-screen devices, believe it or not, it became a must to either create a mobile-friendly website or make it fully responsive.
Keeping today’s mobile dominated era in mind, many businesses have already made their blogs/sites mobile-friendly or responsive, but there are many website owners who still have not adopted this trend. If you’re also one of them, in this article, we’ll walk you through various ways you can create a mobile compatible version of your WordPress site to deliver you visitors a superior mobile experience.
Before proceeding to different ways of making your WordPress site mobile-friendly, we recommend you to test how well your website looks on various devices.
Test Your Mobile Interface
Here’re some great tools using which you can test the usability of your site from the different devices, including iPhone or other smart phones.
Let’s have a look at them!
- iPadPeek: It’s a simulator that allows you to check how your website will be rendered on the iPad.
- iPhone 4 Simulator: Using this simple simulator, you can test how your website will look like on the iPhone.
- Opera Mobile Simulator: Using this simulator, you can view your site as on Java based mobile phones and devices.
- W3C mobileOK Checker: This checker will perform several tests on your website to determine how much friendly it is to mobile devices. Your website will be called mobileOK, if it passes all the tests successfully.
- MobiReady: This handy tool will let you test your website’s W3C mobileOK and dotMobi compliance, and provide you report about how well your website will perform on mobile devices.
- Am I Responsive: One of the best tools to check whether your website is responsive or not.
- Responsive Design Checker: Another great tool to check the responsiveness of your website.
Different Ways to Make Your WordPress Site Mobile Friendly
Once you’ve tested your WordPress site on different devices, it’s time to make it friendly for all viewers and enrich its usability. To aid you in this process, here we’ve explained several efficient approaches. You can opt for any one of them, depending on your existing site or which type of compatibility you want.
Let’s get started!
Use/Upgrade to a Responsive Theme:
Using a Responsive theme is one of the best approaches to make your WordPress site mobile compatible. No matter which device or screen size your visitors are using, a Responsive Theme changes the layout to fit the dimension of web browser. While using a responsive theme, one of the best things is that you don’t have to worry about mobile optimization or using any plug-in for your website.
One of the most efficient ways of converting your current WordPress theme into a responsive one is by using a responsive CSS file. If you’re looking for a D.I.Y solution, prerequisites would be you should have intermediate knowledge of HTML/CSS and WordPress. Otherwise, you can hire an expert web developer/outsource. Personally, we recommend you to purchase a high quality responsive theme from a reputed WordPress theme provider such as WooThemes and elegant themes.
For your convenience, here we’ve listed several responsive WordPress themes that you can use:
Through Domain Mapping:
If you don’t want to use a responsive theme, you can use a separate mobile theme via Domain Mapping. Using this approach, you also don’t require to use a responsive CSS file for making your site mobile compatible. To deliver your mobile visitors a great browsing experience, all you need to create a sub domain – like mobile.yoursite.com or m.yoursite.com – for the mobile version of your site, and set a mobile theme for your configured sub domain.
That’s way, whenever visitors will enter the original URL of your site on a mobile device, they’ll be redirected to the custom mobile URL through domain mapping. Also, they can visit your blog by directly entering your site’s mobile URL i.e. m.yoursite.com. If you’re using WordPress and unable to add domain mapping functionality manually, we suggest you to use WordPress MU Domain Mapping plug-in to handle entire domain mapping process.
Customised Mobile Site Solutions:
If you face any problem while using any of above two methods, then you’re suggested to go for customised solutions to get the mobile version of your site. Here we’re listing three of the best services using which you can create professional mobiles sites without any programming skills.
Let’s have a look at them!
# Mobify :
Mobify is a popular service that lets you build mobile version of your website in a very short span of time, using a simple and powerful toolkit. It is used by some of the world’s most successful brands such as Starbucks, Ideeli, Expedia, Crocs, and Coastal. It is a great service for designers and perfect solution for SMBs and enterprise level eCommerce. Mobify prices start at $495 per month.
# MoFuse :
MoFuse is another service that allows you to build mobile websites at affordable price. One of the best things about this service is that you can use custom CSS to get the desired look and feel of your site on mobile. Whether you’re a business owner or reseller, MoFuse could be a perfect choice for you. You won’t believe that popular blogs like Makeuseof, Readwriteweb, and Mashable are using this service. MoFuse prices start as low as $9/month.
# Onbile :
Onbile is an online platform that allows you to create a low cost, high-quality and fantastic mobile version of your site without any programming. It provides you an easy-to-use control panel through which you can choose from a wide range of premium templates to fit your requirements. It is absolutely free for personal and non-commercial websites.
Using a Mobile Plugin :
Most of the issues in WordPress can be fixed by using an appropriate plug-in, and making your site mobile compatible is not exceptional. Here’re several plug-ins that will automatically optimize your WordPress site for all types of mobile devices.
Let’s go through them one by one!
# WPTouch Pro :
WPTouch Pro is a fast, efficient, and flexible WordPress plug-in that is designed to deliver great mobile experience to users. It is built using RESS (Responsive Design + Server Side Optimization), and loads web pages up to 3X-5X faster than responsive or desktop websites. You can pick from 4 beautiful and professionally designed mobile themes and customize them as the way you want.
This elegantly designed plug-in features an easy-to-use Admin panel with powerful setup options. Built-in sharing options allow users to easily share your content on social media sites. In addition, iOS users can add the mobile version of your site as a web app on their devices. It’s available in 21 languages and used by thousands of reputed sites like CNN, Freakonomics, Grolsch, and Stephen Fry.
# WPTap :
WPTap offers a range of WordPress Plug-in/Themes that can instantly turn your WordPress site into a stunning mobile version for Android, iPod Touch, iPhone, and touch-based Blackberry devices. All the WPTap themes come with all the essential features of a WordPress blog such as login, search, archives, photos, tags, categories, and more.
Also, WPTap comes with a user-friendly WordPress admin panel through which you can customize your theme. Whenever a user accesses your site through a mobile device, it automatically detects the type of mobile device and activates the tap theme you’ve chosen without interfering with your regular PC theme.
# WP Mobile Detector :
WP Mobile Detector is a WordPress plug-in that automatically detects whether a person is using a standard mobile device or an advanced mobile device, and loads a compatible mobile theme for each. With notable features like detection of more than 5,000 mobile devices, image resizing, advanced mobile statistics, and automatically formatted content, the WP Mobile Detector delivers your visitors a seamless mobile experience.
The WP Mobile Detector plug-in doesn’t require any configuration. All you’ve to do is to install and activate it. You can either choose from seven pre-installed mobile themes or build your own custom mobile theme. Other features include cross-platform compatibility, collapsible menus, dynamic page loading, touch-optimized layouts, and more.
# JetPack :
JetPack is considered as must-have plug-in for every single WordPress site. It comes with a with a number of delightful features – like Related Posts, Contact Form, Google+ Profile, Infinite Scroll, Tiled Galleries etc. – but may be not all of them are useful for you. Yet, there are numerous features that can really supercharge your site.
One such feature of JetPack is the ability to convert your WordPress site into a mobile compatible version. The Mobile Theme module of this plug-in allows you to do so. To use the Mobile Theme, you’re just required to activate this module via Jetpack dashboard, and then Jetpack will automatically optimize your site for all types of mobile devices.
#Obox Mobile:
Obox Mobile, developed by Obox Design, is a WordPress plug-in through which you’ll be able to convert your WordPress site to a simple-to-navigate layout fully compatible with all type of mobile devices, including Android, Windows, Blackberry, or iPhone. Even, all layouts works seamlessly with retina display mobile devices.
This handy plug-in has an innovative Visual customizer, featuring a live canvas that enables you to customize your mobile site to fit your requirements by allowing you to change logos, fonts, colors, and backgrounds. Furthermore, it allows you to insert your Google Analytics tracking code into mobile version, so you could track your visitors on mobile devices.
# Mobile :
Mobile, created by ithemes, is another plug-in that enables you to create device-aware mobile themes for your WordPress site. It comes with a built-in style manager using which you can easily customize basic styles for your mobile theme’s headlines, fonts, navigation, and footer.
Apart from this, you can choose from 4 mobile-ready, customizable themes or create your own. It also has support for WordPress v3.0 custom navigation menus, and allows you to assign separate themes to specific platforms to deliver your users a better experience. You can assign an existing navigation menu or a separate mobile-specific menu for your mobile version.
# WP Mobile Edition :
WP Mobile Edition is a simple and easy to use WordPress plug-in for mobilizing your WordPress site for smart phones, including Android, iPhone, Blackberry, and Windows Phone. It has a mobile switcher that automatically detects whether a visitor is on mobile or not, and switches between default desktop theme and loads a mobile theme.
Besides, it creates a mobile XML Sitemap of your WordPress site in order to maximize the visibility of its mobile version in search engines. There are 16 different color schemes to choose from. You also don’t require having knowledge about SEO, as this great plug-in automatically optimizes your site for search engines.
# MobilePress :
MobilePress is another simple WordPress plug-in that renders a mobile compatible version of your blog or website. It enables you to choose from some custom themes for different mobile devices. In addition, a few mobile friendly settings are available for custom appearance.
