How to make your WordPress website mobile-friendly
Ensuring your WordPress site is mobile-friendly is more important then it has ever been. The number of mobile users accessing websites is more than any other and is expected to grow.
A recent research (PDF) has shown that the mobile browsing audience is twice as large as app audiences in the U.S. and continues to outpace the growth of apps in the mobile market. In the U.S. most mobile phone users spend over 80 hours a month browsing with their device, according to a report by Smart Insights. In addition, mobile devices are expected to be responsible for 68 per cent of all internet traffic.
The necessity for websites to be mobile-adaptable was given a push in 2015 when Google changed its search algorithm. This meant to give an extra boost to those mobile-friendly sites in their rankings. It also means that those with a site that doesn’t respond well to mobile devices will suffer. Here we present few tips which will help to make your WordPress website mobile-friendly.
Test your site
If your theme has been around for a while it may be time to upgrade it. There are dozens of well-designed, responsive themes on the WordPress platform. But before that, ensure that all the updates have been done on your current theme. Many updates include mobile-friendly elements for the theme you use but some may not. Once you have established, it will become clearer whether you need to change the theme altogether or not.
Next, test your site on as many mobile screens. See how it fits the various sizes and styles of phones. Look to see if it is easy to scroll, quick to load and fits nicely on the device. You can also do a free test using Google’s test tool. Simply enter in your URL and let the tool test how mobile-friendly your website is. There is also a Mobile-Friendly Test API, which allows you to check the pages on your site manually.
Change your theme
Make sure to select a WordPress template that is responsive, and quick to load on all devices. Themes specifically designed to be mobile-friendly are great picks.
Before you decide on a new theme check out the demo site and look at it with different sizes in your browser window.
Also, take time to read other users reviews on the theme to get a good feel for the quality of the design and any drawbacks you can expect.
If you prefer to design a responsive theme from scratch start small and build up. There are tools to help you with the design process including Local by Flywheel. Be sure to think through each element including images, navigation and content.
Check your content
Ensure your content is suitable for a mobile-size screen. That includes using a suitable font size, making sure there is lots of whitespace and using shorter headlines or titles so they will fit on the smaller screen. You will also need a plan for any large features like buttons that appear on your main site. You want to make sure the page is not crowded and can be easily navigated on a touch screen.
Images can slow down the load time of your website, especially on mobile devices. You can fix this issue by optimizing any images on your page. There are quite a few plug ins that will do this including, Image Pro, Hammy, EWWW Image Optimizer and PB Responsive Images among others.
There is also another plugin that adjusts the size of the images on the website in response to the size of the screen on the device. The RICG Responsive Images plugin will ensure that the best sized image will be sent to the browser. It used HTML to put this into the page and WordPress 4.4 will have this feature built in so there will be no further use for the plugin.
While they can be useful, you don’t want to overwhelm your site with plug ins as they can cause a slower load time for the user. Be sure that any plugins you have are necessary to the function of your site and that they are running the latest version.
WordPress has responded to the mobile design trend by developing tools and plugins that make using the platform easier for mobile development. Some of these are Jetpack, WP Mobile Detector and WordPress Mobile Pack 2.0 among others.
Some of the plugins to consider adding to your WordPress site include the following:
It has over 30 features, including optimizing your site for mobile users, contact forms and custom CSS.
It focuses on creating faster load times, a crisp look and touch features to the site. By using mobile caching it makes loading your site faster for repeat users. It also specializes in optimizing images for mobile screens.
WP Mobile Detector
It takes the guess work out of what device your audience is using to access your website and will respond accordingly. This is a good tool to respond to different devices if some of your users may not be accessing it via smartphone. It also offers analytics and some pre-installed mobile themes.
WordPress Mobile Pack 2.0
It offers cross-platform access, the user interface is responsive and allows you to customize ready-made themes.
WP Mobile Edition
It turns your current website into a mobile-friendly version. The plugin can automatically detect what device is trying to access the site and adjust the website accordingly. It also comes with a mobile advertising feature.
If you opt to use a plugin that creates an element on your site, for example a widget or button, check that the size of the feature appears well on different screen sizes. You may also have the option of disabling it on smaller screens. You can also read reviews from other users to get an idea of the benefits and drawbacks of the plugin.
If you are looking at increasing your mobile traffic you will need a good hosting service. Don’t cut corners or try and save money here. If you don’t get a good hosting site the slow down in your load will hurt you in the long run.
With Google opting to reward those sites that are mobile-friendly and with over half the population spending more than 80 hours each month browsing the internet on their mobile device, it is important to ensure your WordPress site is responsive to various devices. The platform has made it easy to make a mobile-friendly website with plugins, responsive themes and other helpful tools.
We hope you enjoyed this article!
If you know more tips on how to make wordpress websites mobile-friendly, share them with us on Twitter and tag MaxiomTech.