How to make a mobile friendly website

How to make a mobile friendly website

Do you have a mobile friendly website?

How does your site look when viewed on a mobile device? If your font is to small, the site takes too long to load, or the scaling isn’t right chances are your potential readers, customers, or viewers are logging off. In today’s world where more people are using mobile devices such as tablets and smartphones, the importance of having a mobile friendly website is huge. Google just announced that Mobile has surpassed Desktop search, specifically in this instance in the form of Local Search i.e. users searching for local businesses. I will walk you through the different ways to make a mobile friendly website using a variety of ways such as hard coding, selecting themes, and using plugins. It’s time to put on our boots and start walking.

How to select a good theme?

  • How often is it updated?
    • There are a ton of themes in the market, some are free, and some cost money. One good place to get a theme is Elegant Themes, they offer a wide range of themes and plugins. It is best to pick one that has regular updates so you will stay up to date with changes in technology and security. If you are looking for a theme with tech support you will be better with a paid theme. However some free themes will provide support. The more recent a theme has been updated the better your chance is of having support with issues that may arise.
  • Choosing a responsive theme
    • Why is a responsive theme important? A responsive WordPress theme smoothly adjusts its layout based on the screen size and resolution. Responsive themes offer better readability and usability on smaller screens such as smart phones. It also prevents you from creating a device specific mobile version. This means that when someone views your site it will automatically scale to the appropriate size. This should include all images as well. Responsive themes are the easiest way for you to have a mobile friendly website. If your theme is not 100% responsive when it is viewed on mobile everything will scale except what is not set to resize and this will cause a side scroll issue. So what do you do if you love your theme and it isn’t responsive? That brings us to our next point.

Using a responsive child theme

So you found the perfect theme for your website, or had someone design the perfect website only to find that it does not look good when using a smartphone or tablet. It’s that moment you just want to scream! No worries we offer a service for creating a child theme to make any theme responsive.

  • Creating a responsive child theme
    • When you create a child theme to make a mobile friendly website have to go through all of your CSS files and change any fixed size image, box, menu, etc to a percentage. For instance when you have a content box that is sized to 1200px wide instead of a certain percentage when viewed on a mobile device it will scale down to fit but be a third of the size. As well as everything inside the content box. This isn’t very good for readability because that 12pt font just became a 4pt font. The difference is this: 12pt  4pt. That little dot next to 12pt is showing the size of 4pt font. Yeah it’s that small you probably had to look back to see it. You will also need to change all of your image sizes if they are not scaling right. There are many objects that can be fixed size that need to be adjusted. The best thing about using a child theme is you will be able to keep the look and feel of your website where using plugins will change the theme that is displayed. I will be discussing the full details about how to create a responsive child theme in later blog post so check back often. 
    • Once you created your child theme and tested it, you will use any mobile theme switcher to dictate which theme shows for what device.

Using plugins to get a mobile friendly website

Can you see the end of the tunnel yet?

The last ditch effort to have a mobile friendly website is to use plugins. I do not prefer this method as the plugins have there own themes they use and it is nearly impossible to find one that looks similar to your website. However if this is the path you need to take there are several options. Some of the options are:

  • WPTouch
    • WPTouch is probably the most popular plugin for creating a mobile friendly website. The set up only takes a couple clicks,you choose a simple theme (not able to use your current theme) then the plugin will load automatically and seamlessly. As well as loads Ajax articles dynamically, maintaining smooth display effects on touch-screen devices with HD and retina displays. Website visitors can switch from mobile to desktop using a button link. There is also an admin page to make minor modifications. The plugin features configurable advertisement layout and themes on the mobilized website, but in-depth functionalities and developer support will cost you $199.
      • Requires: 3.6 or higher
      • Compatible up to: 3.8.2
      • Last Updated: 2014-3-21
      • Downloads: 5,083,437
      • Package: Free and Premium
  • WP Mobile Pack
    • Mobile web pack is a toolkit to your website into a responsive mobile website. It works by identifying your readers device and displaying mobile or desktop view. The configuration options are on many pages which makes mobile customization complex to use for the average WordPress user. This plug-in serves well for usability priority over appearance. I would not recommend this one but I am an appearance type of guy when it comes to websites.
      • Requires: 2.5 or higher
      • Compatible up to: 3.0.5
      • Last Updated: 2012-7-5
      • Downloads: 553,014
      • Package: Free
  • WP Mobile Detector
    • The WP Mobile detector has the highest ratings in the WordPress plugin repository. It is very diversified with conversion capabilities over 5000 devices. With the paid version it offers a few simple click setup and supports a variety of WP widgets. The downfall is you have to use 1 of 9 themes. This means someone else can have a website very similar to yours. With over 1 billion websites in the world standing out is the key,
      • Requires: 2.7 or higher
      • Compatible up to: 3.7.1
      • Last Updated: 2013-11-15
      • Downloads: 240,937
      • Package: Free and premium
  • Jetpack
    • Jetpack has it’s own mobile extension for it’s plugin that is very effective at creating a mobile friendly website. However, when using Jetpack you have to install the whole plugin and turn on or off the extensions you want to use. Just because you turned it off doesn’t take it out of your database. All the CSS and JS is still stored in your server which can have an affect on your page speed. I do not use Jetpack due to their plugin slowing down page speed which if you have read How to improve page speed you will understand why. The other limitation it has is customization. You really don’t get to choose how your site will look. It just displays the basics with out much styling. Which again to me isn’t very good for standing out of the crowd.
      • Requires: 3.7 or higher
      • Compatible up to: 3.8.2
      • Last Updated: 2014-4-10
      • Downloads: 9,524,829
      • Package: Free

The end of the tunnel

We have made it to the end of the tunnel. It’s time to take off our boots relax and let all of this sink in. What did you get from this? There are a variety of ways to make a mobile friendly website including a responsive theme, creating a responsive child theme from your old theme or website, and using plugins to generate a basic version of your website.

The easiest and quickest way is a responsive theme. This eliminates having to do anything else.The next way I suggest is creating a child theme to make a mobile friendly website. Doing so will keep the looks of your site exactly the same, only scaling everything to be visible on mobile. For a last ditch effort or for a quick fix like a “band-aid” you can use a plugin. If you love the way your site looks don’t settle for a plugin to show a basic no style view for mobile let us create a child theme for you. Better is always possible with the right mindset and the right knowledge.

 

How to make a mobile friendly website