David Hall
In my previous blog post, “How to Check If Your Website Is Mobile Friendly”, I provide a list of free tools to check if your existing website is mobile friendly. However, if you find that your website does not support mobile devices, then what are your next steps? In this blog post, I will tell you how to make your website mobile friendly. But first…
What are the three types of mobile websites?
Since mobile devices like smart phones and tablets have varying screen resolutions, there are three common ways to accomplish this.
Parallel URLs – This option is when you have a different URL for your mobile site than your desktop site. So a website might have www.webnames.ca for their desktop and m.webnames.ca for their mobile devices. However, the problem from a Search Engine Optimization (SEO) point of view is that you will have two websites with duplicate content.
Also, from a user point of view, if they share a URL from a mobile device to a desktop device, the m.webnames.ca would be sent instead of www.webnames.ca. This means a desktop would view the mobile view of the content and it is not a good user experience.
Dynamic Serving – This option is when a single website will generate different content based on the device (user agent). So, if the user views the website with a smart phone, the website will show the mobile view. If the user views the website with a desktop, the website will return the desktop view.
The upside is that no unnecessary information is being sent to the client. However, the downside is that the website must always parse the user agent correctly or else the wrong view will be displayed. So, a tablet may be considered a mobile device rather than a desktop device and the mobile view will be displayed.
Responsive Design – The third option is when a single website will use a viewport meta tag to tell web browsers how to adjust the dimensions and scaling of the website pages based on the device. If the browser is resized, the website will re-adjust and no information about different user agents is required.
Conclusion is that Option 3, responsive website design, is the recommended solution from Google to make your website mobile friendly.
What is responsive web design?
According to Wikipedia, responsive website design is an approach to provide the best viewing experience with minimal resizing, panning and scrolling across many different types of devices. The website will modify the layout of the content using proportion-based grids, different image sizes and CSS media queries to fit the screen size of the different devices from smart phone, tablet and desktop computers.
While implementing a responsively design website seems daunting, the process is much easier if you use a content management system (CMS).
Websites with a CMS solution:
Many people don’t know what their website is built on and whether or not they use a CMS. Luckily, there are tools online that provide this information like BuiltWith.Com.
After you type your website on BuiltWith.com, it will show a section called “Content Management Systems” if you use one. If this section does not appear, then your website is most likely a custom built website.
If you are lucky enough to be using a CMS solution, you are closer to a solution than many other websites. There are many solutions for most popular CMS websites for supporting mobile users. Based on the “Top Million Sites” monitored by Builtwith.com, of the websites using a content management system, WordPress is the most popular with (52.03%), Drupal (5.77%), Joomla! (5.77%) and Blogger (9.46%).
How to make a WordPress website mobile friendly:
Updating your WordPress theme
As of today, there are 1743 free WordPress themes you can download and many of them are responsive. Most paid WordPress themes advertise that they are responsive as well. If you can find a theme that states it is “responsive” and matches your website requirements, you can quickly fix your website by simply updating your theme.
Using a plug-in
If you don’t want to change your theme or if you can’t find one that fits your website, you can use WordPress plug-ins and there are three popular WordPress plug-ins to make your website responsive for mobile devices.
1. WPtouch Mobile – Currently over 2 million websites use WPtouch to provide a great mobile experience on WordPress. I have personally used this plug-in for one of my websites that was not responsive. There is both a free and a paid version of this plug-in. I was able to use the free version to make the website work as there were not many images. If you want responsive images, this is only available in the paid version.
2. WP Mobile Edition – If you want a more “pure” mobile website theme that’s faster than a responsive website, you can use WP Mobile Edition. The plug-in automatically detects if a visitor if using a mobile device or not, and switches between the regular WordPress theme or a mobile theme. The plug-in also comes with eight different colour themes that you can choose from and customize for mobile devices.
3. JetPack – If your website is hosted on WordPress.com, you can use a plugin called JetPack. Besides having a “mobile theme” for your website, it includes other features like WordPress integration, contact form and additional publishing features.
How to make a Drupal website mobile friendly:
Updating to a responsive Drupal theme
Like WordPress, Drupal allows you to change the “look” of a website through different themes and most themes incorporate responsive design. As of today, there are 206 Drupal themes you can download that are responsive.
Most of these themes are free to download and install. If you can find a theme that matches your requirements, simply update your website’s theme to make it responsive and be able to support mobile devices.
If there are no themes that match your requirements
If there are no themes that match your requirements, then you may need to update your theme yourself or hire a developer to make the changes for you. For tips on how to update your theme to be mobile friendly, review this great post on the Drupal website.
How to make a Joomla website mobile friendly:
Joomla users that are running version 3.0 and above, your website should already be mobile friendly. If you are running Joomla less than version 3.0, you will need to update your CMS.
How to make a Blogger website mobile friendly:
For Blogger users, if you don’t see that your website isn’t mobile friendly, this can be due to a simple misconfiguration. To fix this, simply go to the Blogger Dashboard, then “Template” and you should be able to see an option called “Yes. Show mobile template on mobile devices.” Simply activate this option, choose your theme and hit the save button.
To see the step by step instructions, view the Google support page for blogger.
Other CMS Platforms:
If you don’t see the CMS solution you use, here are a few guides on how to update them:
Websites without a CMS solution:
PHP websites
If you are running a website developed in PHP, but not using a standard CMS, you might be in luck. There is an open source tool called PhpMobilizer and it will convert any website into a mobile website.
ASP.NET, Java or other programming languages
For websites that are developed in ASP.NET, Java or other programming language, you will need a developer’s assistance to help make your website mobile friendly.
There are many different responsive frameworks available that have all the required elements to transform your desktop website to a responsive website. Here are a couple of popular responsive frameworks for web design:
1. Bootstrap Responsive Web Design Framework – Bootstrap is the most popular HTML, CSS and JS framework for front-end development. It is well document and many sites use it, including this blog.
2. Foundation Responsive Web Design Framework – Foundation is another popular responsive front-end framework. It is fast for users and you can optimize sites by device type.
3. Gumby Responsive Web Design Framework – Gumby offers a fluid-fixed layout optimized for desktop and mobile resolutions. Gumby is built using Sass which is a CSS preprocessor to make your pages load faster.
If you are looking for other popular responsive frameworks, just search for “best responsive web design framework” in your favourite search engine.
Conclusion
Making your website mobile friendly can seem like a daunting task but it doesn’t have to be. If you use a popular CMS platform like WordPress or Drupal, getting a mobile-friendly website is as easy as updating the theme or applying a plug-in.