Creating a Mobile-Optimized Website With WordPress

It was Christmas 2009 and I had a new toy: an iPhone 3. Like millions of people that Christmas, I spent every spare minute downloading apps, playing games, taking photos and marveling at the brave new world of smartphones and apps.

Back then (nearly six years ago – time flies!) no-one had heard of responsive web design and Apple were adamant that their shiny gadget was perfectly suited to viewing full-size websites designed for desktops on a small screen. You could pinch, drag and double-tap to make content larger and if you were lucky, you would come across a website that had a separate mobile version.

How things have changed. Mobile browser use has now overtaken desktop browser use and now even app use, according to research by Morgan Stanley. Users still spend longer on apps once they’re using them, but when someone picks up a smartphone these days the thing they’re most likely to do is open the browser. Research shows that app downloads have peaked at about 50-60 per device and that users aren’t going to download an app for a brand that they’re only going to interact with casually.

While users may be prepared to spend hours on Angry Birds, Facebook or Crossy Road, they’re unlikely to download your app – they’re far more likely to visit your site on their mobile instead. All of which means that your website must be mobile-optimized.

And the great news is that WordPress is the perfect platform to help you do that. It’s taken on board the importance of mobile for web design and development and not only does WordPress make it easy for you to create a site your users will love on mobile, it also makes it possible for you to manage your site from a mobile device too.

Research by Morgan Stanley tells us that mobile browser use is twice as high as app use.
Research by Morgan Stanley tells us that mobile browser use is twice as high as app use.

In this post, I’m going to look at some of the ways in which WordPress makes it easy for you to create and manage a mobile-optimized website. I’ll look at how WordPress core has evolved to embrace mobile, at how the REST-API will open up possibilities for mobile apps to interact with WordPress, at the themes and plugins that will help you create a great mobile site, and at how you can manage your site on a mobile device.

But first, let’s consider the options for reaching your mobile visitors or customers.

Reaching Mobile Visitors – Your Options

The methods used to reach out to mobile users have changed in recent years and this is an area that’s constantly evolving, so make sure you keep up!

Let’s take a look at the options available to you.

1. Mobile Site vs Mobile App

It’s becoming less frequent that clients come to me asking for an app, but that doesn’t mean there isn’t a place for app.

Mobile users
Fewer clients are asking me for apps.

While the research shows that mobile browser usage is twice as high as mobile app usage now, it also shows that once people have downloaded and opened their mobile apps, they’ll spend far more time in the app and engage more deeply with it than with a mobile-optimized site.

So which is the right one for you?

My recommendation would be this. Firstly, the circumstances in which you might create an app:

  • You are developing a rich, interactive experience such as a game.
  • Web technology doesn’t enable you to create what you need to (again, such as a game).
  • You have an established brand and want to make it as easy as possible for people to engage with you via an app (for example, many of the big retailers and travel sites are easier to interact with via their apps).

In the first two cases, you’re not going to be developing with WordPress, so you’ll need to look elsewhere for the right platform. But in the second, there might just be the option of creating an app using WordPress, especially with the development of the WP-REST API, which I’ll come to later.

And here are the circumstances in which you’d be better off creating a mobile-optimized website:

  • You need to use SEO to attract visitors to your site.
  • You want to facilitate social sharing of your content (this is possible via apps, but it isn’t often done well).
  • People won’t need to access your site offline.
  • You have a limited budget or skill set.
  • You want to offer the same content and experience to visitors on a range of devices including smartphones, tablets and desktops.

I think there’s a good chance that if you’re reading this, one of more of the above will apply to you. In the majority of cases, a mobile website is the best route to choose. And even if you do decide to build an app, I would always recommend backing it up with a high quality mobile-optimized website too.

2. Mobile Site vs Responsive Site

Back when web developers were first starting to respond to growing amounts of mobile web traffic, the preferred option to improve user experience (UX) on mobile was to create a mobile site. This would be a separate site from the ‘main’ desktop site, serving up different content (i.e. reduced content) with a view to targeting users with a different set of needs and slower devices.

But all that has changed. Personally I find the 4G signal on my iPhone 6 is faster than my home wifi at some times of day, and I certainly don’t limit my mobile browsing to the types of activities stereotypically associated with mobile use, such as finding locations, getting quick information etc.

Millions of people only use a mobile device for personal internet use, and the average time spent online via a mobile has now overtaken time spent online on a desktop. Back in 2010, not long after I got my first iPhone, the average adult in the US was spending 24 minutes using their mobile phone each day, while now it’s nearly three hours. In the meantime, the time spent on desktop computers has stayed static at 2.4 hours.

Mobile use has now overtaken desktop use. Taken from Smart Insights Mobile Marketing Statistics.
Mobile use has now overtaken desktop use. Taken from Smart Insights Mobile Marketing Statistics.

This means that your site’s mobile visitors aren’t expecting a reduced experience compared to what they would get on a desktop and that they won’t be happy if that’s what they get. Back when phones were more limited or mobile signals were slow, maybe this was appropriate, but now your visitors will expect the same experience on mobile and desktop.

Which adds up to one thing. A responsive website will nearly always be preferable to a separate mobile site. If you still have a version of your site with the m. prefix, or you’re using browser sniffing to serve up a different theme (maybe via a plugin), you really need to stop it. Right now! There are hundreds of high quality responsive WordPress themes out there, from the free default themes to our own Upfront theme platform.

How WordPress Has Embraced Mobile

The developers of WordPress aren’t stupid. They keep a weather eye on Internet trends and have ensured that as WordPress has evolved, it’s incorporated mobile in different ways.

Let’s take a look at some of these.

Responsive Admin Screens

With WordPress 3.8, released in December 2013, the WordPress admin screens got a major overhaul. For me, the most exciting aspect of this was the fact that the admin screens were responsive.

WordPress 3.8 brought a responsive admin UX.
WordPress 3.8 brought a responsive admin UX.

This means that you can manage your WordPress site from whatever device you’ve got available. I’ve even created a new site from an iPad, although I have to admit that it wasn’t easy, and finding a good code editing app with FTP capabilities is a challenge. But it is possible, especially if you’re happy using off-the-shelf themes from the WordPress Theme Directory.

Responsive Images

Making images truly responsive is something that web developers have been working on for some years now. Instead of simply resizing images to fit their container using CSS, this is about sending an appropriately sized image to each device based on screen size.

WordPress already has a feature that helps with this: it saves multiple versions of each image you upload, at different sizes.

The RICG Responsive Images plugin ensures that on mobile devices, the smallest image is sent to the browser that will still look good on the page. It does this using the srcset HTML attribute. But it gets better. The next major WordPress release, version 4.4, will include this in core. So you won’t need to install any plugins for making images responsive: instead, WordPress will do the hard work for you. Sweet!

WP-REST API

We’re only beginning to scratch the surface of the WP-REST API. As Tom Ewer has written on our blog, the REST API has the potential to be a game-changer for WordPress, as it lets developers query the WordPress database without using PHP, but instead by creating a JSON object.

I won’t go into the details of how this works here (if you’re interested, I recommend Tom’s post), but what it does mean is that a WordPress database can be used to power anything that can make use of a JSON object. Which is just about anything. Including mobile apps. So if you are one of those people who needs to develop an app and you’ve been put off WordPress because it isn’t an app development platform, you can now rethink that decision.

One example is an online store: you could use WordPress to power your store website and also build a mobile app, using the REST API to pull data from your WordPress site into that app and ensuring that data is synced between the two.

Optimizing Your Site for Mobile Users

I hope by now I’ve convinced you that you need a responsive WordPress site which is optimized for users on all devices.

So if you don’t already have this, how do you go about getting it? The good news is that it’s easy. Let’s start with responsive themes.

Responsive Themes

The first thing any responsive WordPress site needs is a responsive theme. This will use a combination of fluid layouts (using percentages for widths instead of pixels) and media queries (for breakpoints), to create a layout that works well on all screen sizes. Here are some resources to help you with this:

Plugins for Responsive Sites

Once you’ve got a responsive theme activated and customized where relevant, the next step is to ensure that you’re using plugins that play nicely with responsive sites, or that enhance the UX on smaller screens. Here are a few:

Managing Your WordPress Site from a Mobile Device

The way you manage your site won’t impact on your users or on whether your site is responsive, but it will make your life easier if you’re someone who tends to have access to mobile devices more often than desktops if you can manage and update your site from a smartphone or tablet.

There are two ways to do this: via the browser and using a WordPress app.

Administration via the Browser

I’ve already mentioned above that the WordPress admin screens are responsive. This means that in theory you could carry out all of your site admin on any size screen.

In reality, however, things are a little different. Few people would want to write lengthy content using a smartphone (I’m certainly not using one to write this!), and the admin screens do take a little more work to navigate around on the smallest of screens.

But on a tablet with its mid-sized screen, there’s no reason why you should ‘t use your browser to keep your site updated. I do this occasionally and have sometimes experienced problems with the touch-screen interface. Which is why if I want to do more detailed work I tend to use the WordPress app.

Administration via the WordPress App

What was that I said earlier about apps being overtaken by mobile browser use? Well, in the case of WordPress admin, this isn’t the case.

There are WordPress apps for iOS and Android, which let you manage your site and post new content right from your mobile device. Perhaps one of the best features is the way it makes it so easy to add photos to your site: simply take a photo with your device and insert it in your posts. The app interface is designed for touch screens and the relevant screen size (so you’ll get a different experience on tablets and smartphones) and lets you access and manage multiple WordPress sites from the app, including self-hosted sites and wordpress.com sites.

Creating a Responsive Site for Mobile Using Upfront

Upfront is our infinitely customizable, drag and drop theme framework. You can use it to easily build any kind of site you want including a responsive, professional and robust design all from the front-end of your site.

No coding is required, though, you can include your own custom CSS and Javascript if you want. Upfront also works on both single and Multisite installs of WordPress.

You can use Upfront as an affordable option for creating the ambitious site design you want without needing to shell out the big bucks for a dedicated web designer since we take care of it for you. All you need to do is bring your big ideas to the table and drag and drop your way to your completed site.

You can also create a responsive design in a few clicks as well as instantly see what your site is going to look like on tablets and phones.

Upfront is also already available to you if you have a WPMU DEV membership or you can try it out for free with our 14-day trial. You’ll also get to try out all our plugins as well as our Academy for learning WordPress and online business from the ground up.

You’ll also have access to your own Hub dashboard where you can keep track of your site, optimize its speed and security as well as monitor for uptime and more.

Getting Started

It all begins with an Upfront starter theme that you can customize to create the site you need. Once you have selected one, you can download, install and activate it like most other child themes or you can use the WPMU DEV Dashboard plugin.

After you have selected a starter theme, you can also check out the Usage tab for more details on how to install and activate Upfront and the theme you selected on your site.

When you have your Upfront theme installed, you can get started crafting a site design. For details on how to create a design, check out our seven-part series starting with Upfront Part 1: The Basics, Theme Colors and Typography.

When you’re happy with your design, you can easily make it responsive in a few steps.

Making Your Design Responsive

When you’re in the Upfront editor, click the Responsive Mode button in the menu on the left. When active, you should see what your site looks like across different screen sizes.

The Upfront editor and the "Responsive Mode" button is highlighted.
You can adjust how your site design is viewed on different mobile screens.

You can also make adjustments to your design that are only visible when viewed on the screen sizes where you made the changes. This means your desktop site can show your full design while mobile screens would see only what would work on their system.

For example, you could omit the video background you chose for the desktop version of your site since it would eat up more browsing data for mobile users.

When you first enter the responsive mode, you should be in the default desktop view. You can change the screen size by clicking on the mobile device buttons at the top of the editor.

You can see how your site would appear on mobile devices in Responsive Mode.
You can see how your site would appear on mobile devices in Responsive Mode.

When you’re in the mobile phone or tablet view, you can adjust the current elements in your design to make them optimized for mobile devices. For example, you could adjust your menu to display as a hamburger icon instead of a list.

You can also choose to show or hide elements. You can choose to remove items from mobile viewing while still remaining visible on the desktop version.

To hide a page element, hover over it and click the eye button that becomes visible in the top, right corner of the highlighted box.

An element is hovered over.
You can hide elements from mobile screens that are best left out.

You can hide as many page elements as you want, including regions. In theory, you could hide everything on the page, but that would defeat the purpose of optimizing your design for mobile. Still, it just goes to show you how you have full control over what a mobile user is going to see when they visit your site.

If you want to display a region or page element after it’s been hidden, you can click the show element button that appears where an item has been hidden.

The show element button is highlighted.
You can show page elements that have been hidden.

When you’re happy with your new design that’s optimized for mobile, click the Save button on the left, then click the Exit Responsive button to return to the main editor screen.

The Save and Exit Responsive buttons in the editor.
Be sure to save before exiting responsive mode.

Once you have saved your changes, your all set and your visitors are now able to view your optimized site on their mobile devices. As promised, it really does only take a few clicks to optimize your site for mobile, that is, if you use Upfront.

Optimizing Your Website for Mobile

The latest research shows that you simply can’t afford to ignore visitors to your WordPress site from mobile devices. It’s also interesting that people are more likely to use their mobile browser than to download an app. And the average hours spent on mobile devices has now overtaken desktop.

If your site isn’t optimized for mobile users yet, you need to make sure it is. WordPress is making it easier and easier to do this, and by following the tips above you’ll have a site that attracts the largest possible audience.

Have you optimized your site for your mobile audience? What other features you would like from WordPress to help you with mobile? Let us know in the comments below. VIEW 9 comments