Need of Mobile Websites
With advent of Smartphones people are increasingly using mobile phones to browse Internet.This is forcing every website to support mobile devices.Websites should be equally viewable and visible friendly on Desktop as well as Mobile devices.Mobile devices are very much different in nature than Desktop devices.Mobile devices have very small screen compared to Desktop or Laptop ones.The problems of mobile devices compared to desktop ones can be clubbed into
- Small Device screen (Low resolution)
- Slow internet speed
So it was very difficult to view websites created for 1024 resolution desktop screens.Website creators have to redesign their sites so that it accommodates itself within small screen sizes of mobile.Apart from this Mobile Internet speed is lower than the Desktop Internet speed.So Desktop websites will open very slow on mobile devices.
The lack of speed on mobile forced website owners to create light websites for mobile devices.Also Google is not ranking slow websites in its mobile search.So you need to have your website ready for visitors having mobile devices.If not then you are losing visitors.This website is getting around 30% of visits from mobile devices.The percentage of visits from mobile devices is increasing with time.Few months back it was only 20% or so.
There are three ways to create mobile website.Each of them along with their benefits and drawbacks will be covered in coming paragraphs.These three different approaches can be grouped into two categories.In first category your desktop page URL and mobile page URL will be the same.For example http://udinra.com will be the URL of this website for both desktop browser and mobile browser.
But in second approach your desktop page URL will be different from your mobile page URL.For example http://udinra.com will be the desktop URL.But the mobile page URL of the same desktop page will be something like http://m.udinra.com.The mobile website will be created in sub domain of the main domain udinra.com.
Using Responsive Themes
Using Responsive theme does not require creating separate sub domain for your mobile website.Google recommends using Responsive website design for catering both Desktop visitors and mobile visitors.All major content management system has responsive themes available.You can use responsive theme to make your website mobile friendly.This is also the simplest way to make your website mobile friendly.You just need to download a responsive theme and install on your website.
The same theme is displayed to mobile and desktop visitors.So you do not have to double maintain your mobile website and desktop website.But the problem is that same page is loaded on mobile and desktop.Mobile devices are slower than Desktop counterparts.So page load time will be slow in case of mobile website then desktop website.
Slow page load time is not good for mobile visitor experience and Google mobile search ranking.So you need to keep your Desktop page light or load some of the widgets only if site is loaded on desktop.If not then your mobile visitor experience and search ranking will suffer.
Google has also come up with separate pagespeed tests for mobile pages and desktop pages.Loading your web page resources only for mobile does require some programming changes if your theme does not take care of it already.This website is using responsive design with thin desktop page.The page size is so small that it loads pretty fast on mobile as well as desktop.
Using Separate Mobile theme
There are many WordPress plugins out there which detect if the page is viewed on mobile or desktop.If the page is viewed on phones then they serve pages meant for them else desktop pages are served.So you have two separate themes one for desktop and one for mobile.The URL to be visited remains the same.This approach solves problem with earlier solution.As separate themes are loaded for mobile and desktop you can optimize mobile theme for speed.
Below is list of best WordPress plugins falling under this category.
In recent past I have used WpTouch plugin.In case you are planning to use WpTouch you can read this step by step customization tutorial.But as I do not use heavy resources on my desktop site I switched to Responsive theme solution.The problem with WpTouch like solution is double maintenance of the two themes.
The other complexities using this solution is caching.Your cache plugin should be configured properly so that the WpTOuch or other similar plugins can redirect visitors to mobile site.If this is not done then every visitor will see desktop site only.In case you are using W3 Total Cache then you can follow this tutorial to configure it for WPTouch.
WpTouch is one of the most popular plugin for this purpose and also easy one to configure.As my personal experience with this plugin was good I would be recommending this one above others mentioned in this post.In case for some reason you do not like it then you can use any one of below ones.
This plugin does not come up with any theme.But it allows you to select themes to be loaded on different mobile browsers.For example you can select theme A to be loaded on Iphone and theme B to be loaded on Android and theme C to be loaded on Windows Phone.The wide range of theme choices for different browsers make it an excellent plugin.
If your website is browsed from Iphone then the plugin loads theme A and if it is browsed from Android then the plugin loads theme B.So you can have separate themes for different Smart Phones.This plugin is simple to use and configure.
Using Mobile Apps
You can serve your website as Mobile applications.You are playing Games on your phone.Games are Mobile Apps.In case you want to serve your website as Mobile apps then you can use below plugins.Serving your website as mobile application is good idea.This should be used if it fits in your requirement.Complexity wise it is more complex then above two options.
WiziApp plugin serves two purpose
- It works just like the plugins discussed above.
- It also helps you create native apps for Iphone and Android.
You can publish these mobile apps on Google play store and Apple AppStore just like other apps.This makes the plugin extremely powerful.I will be writing a separate detailed tutorial on plugin configuration.But one thing is worth mentioning here.The native Andriod and Iphone app feature is paid one.The first feature is completely free.
The WordPress.org page of the plugin says that it allows you to package your existing content into a cross-platform mobile web application.Web applications are accessible by all major mobile devices.The only major problem is that it does not support any advertisement network integration.But ads network support is planned for future releases.This plugin is completely free.
So in case you are planning to have app for mobile visitors then WiziApp is the first choice.If you are not satisfied by WiziApp then you can try this plugin.As of now it lacks support for social media sharing as well.But you can edit plugin theme files to have that.
Using Sub domain for Mobile websites
In this method you will create a sub domain.This sub domain will host your mobile friendly website.The main domain website will cater desktop visitors.The smart phone users will get redirected to sub domain website.This is the most complex architecture.The problem is you need to maintain two separate website.Usually large websites use this technique.The reason is you can have different content on your mobile site from your desktop site.
There are few WordPress plugins which help you configure above setup.They will redirect mobile traffic to your sub domain.But the first requirement is creating a subdomain preferably (m.your-domain.com).Creating sub domain using cPanel is explained in detail here.You have to point that sub domain to root directory of your WordPress installation (if WordPress is installed in public_html then point your sub domain to this directory).After creating sub domain you can install WP Mobile Edition plugin .This plugin ships with themes as well.
The other plugin which can be used for this purpose is Mobile domain plugin.But mobile domain plugin does not ship with any pre built theme.This has advantage as well as disadvantage.You can install theme of your choice.This is the advantage.But WP Mobile Edition is simpler plugin to work with and configure.So you should try the first one and if not satisfied then try the second one.
I have ordered the ways mentioned above in order of complexity.For most Blogger first solution or the second one should serve the purpose.But in case you want more functionality and control then the last option is the way to go.I have tried all the options on this site before writing this tutorial.The first two options were used for longer time.
I will definitely try giving more time to third option mentioned in the post.Using Mobile Apps option did not have good enough plugin at my time of testing.So in near future I will try the options one more time and see the results.Accordingly the post will be updated as well.
Do let me know the option you are using to make your WordPress website mobile friendly.Consider sharing the post in case you found it useful.