How To Make Your WordPress Website Mobile Friendly

wordpress for iphone logo

At the start of November, WordPress announced that it had just passed 1 million mobile users. That’s a lot of people using WordPress apps on their phones! To celebrate WordPress’ achievement I thought I’d take a look at how your iPhone/Android/Blackberry/Nokia/Samsung/HTC/etc and WordPress can be friends.

But first….. let’s take a look mobile internet access more generally.

In early 2010 Gartner –“the world’s leading information technology research and advisory company” released a report that said the following:

By 2013, mobile phones will overtake PCs as the most common Web access device worldwide. According to Gartner’s PC installed base forecast, the total number of PCs in use will reach 1.78 billion units in 2013. By 2013, the combined installed base of smartphones and browser-equipped enhanced phones will exceed 1.82 billion units and will be greater than the installed base for PCs thereafter.

!!!!!!!!!!!!!!!!!

That’s me being astonished 0_O When I read that I was like “No way! No phone’s gonna replace my lovely laptop!” But then I thought about it. In general I use my iPhone to check my email, look at Twitter & Facebook, read the news, play Solitaire, Peggle & Sudoku, move my files around, look for recipes, shop on Amazon, bid on Ebay, etc  etc etc. My precious Nintendo DS which was my best friend a few years back now lies discarded, its stylus missing and its squishy Zelda screenwipe dirty and torn. Is the same future in store for my laptop?

Probably not. I will always need it for word processing and to edit graphics (although check out this post on MacRumors about what Photoshop might look like on an iPad), but I don’t need it so much for the general day-to-day stuff. I’ve got all of that in my pocket, on my cracked, almost-broken iPhone.

The Gartner report goes on to say the following:

Mobile Web users are typically prepared to make fewer clicks on a website than users accessing sites from a PC. Although a growing number of websites and Web-based applications offer support for small-form-factor mobile devices, many still do not. Websites not optimized for the smaller-screen formats will become a market barrier for their owners — much content and many sites will need to be reformatted/rebuilt.

OH NO! TIME TO MAKE A NEW WEBSITE!!!!!

Well no, not quite so fast. As WordPress users there is a whole raft of tools at our disposal to make our websites not only mobile friendly, but that will let us blog, administrate and comment on the go. Feel smug? You should :)

If you’re interested in learning more about that Gartner report you can read some analysis here.

I’m going to look at the state of things as they stand now for WordPress on your mobile phone. I’ll be testing out sites, apps and plugins on the following two devices:

  1. iphone iconMy iPhone 3G. I’ve had it for about 18 months now and I drop it around about once a day. It has a crack right the way down the back and runs very slowly. I’m waiting out the next 6 months until my upgrade :D
  2. My husband’s HTC Wildfire running Android. The screen is pretty low resolution but it’s good for surfing the net. For any of you who are wondering how I managed to take screenshots on the Android phone you should read this tutorial. Taking screenshots using Android is a total pain.

I’m afraid that I don’t have a Nokia, Blackberry, Samsung or other smartphone to test on but if you have any other device specific info please add it to the comments :)

1)    Design with Mobiles in Mind

We are going to go on to look at some plugins that will pretty much take care of the design aspect of your mobile site for you but there are still some things to keep in mind when setting them up and determining what content you want your mobile visitors to see. As any mobile phone user is aware, just providing the desktop version of your site will not provide sufficient usability for mobile users.

google iconTip: Use a tracking program such as Google Analytics to tell you what mobile devices people are using to view your site. Make the top ones your priority.

Here are some things to keep in mind:

  1. Websites that use tables will not display properly on a mobile phone screen (yes, some people still do use them!)
  2. Navigation needs to be intuitive. You have a lot less time to get people to stay on your website. If it’s difficult to navigate they’ll be off!
  3. Put your most important content first. This is true for standard web design but even more important when designing for a smartphone. As soon as a mobile user lands on your site they should know exactly what you’re about and how to get what they want.
  4. Speed! Speed is so important on your mobile website. Remember that there are people who are on pay-as-you-go contracts so they pay per kb downloaded. You need to keep your website small and fast or you’ll be alienating a load of potential visitors.
  5. Put yourself in the position of your mobile phone visitor. What do you think someone on the go would want when visiting your site? Some examples:

Restaurant – A family are travelling through your town and want to find somewhere to eat. The kids are hot and cranky, Mom is annoyed at Dad because he’s rubbish at giving directions and has gotten them lost. All they want is to find somewhere to eat. They find your restaurant’s site on Google. All they need is opening times, contact number, map/post code and maybe menus. If your site is too complicated they’ll be off to find another one.

News Site – A commuter spends an hour on the train to work every day. He wants to be able to read news articles, to find them easily by category and have links to related stories at the bottom of each page.

There are hundreds of types of websites and each of those websites will be browsed differently on PCs and on phones. Think about what your users need and give it to them – no frills!

Tip: Use a service like MobiReady to check your website’s mobile compliance. It’ll tell you the size of your site, the time it’ll take to load and even how much it costs for a mobile user to visit your site!

2) Get familiar with your apps

Your first stop for integrating WordPress with your phone has got to be the various apps available from Automattic. These allow you to moderate comments and add posts and pages to your WordPress website. The current apps available for smartphones are:

Here’s a video about how to set up your website to work with the iPhone app. The same settings are applicable for all of the mobile apps.

The apps allow you to post images, create posts and pages, moderate comments and, most recently, post videos while you’re out and about in the world. Video is a great new feature. Just say you’re having adventures across the world. You can keep family and friends updated on your antics by shooting video on your phone and uploading it straight to your blog.

3) Switch it!

WordPress mobile switchers have been around for quite a while. They’re easy to use and customizable to varying degrees. Here’s a run-down of three of my favorites in the WordPress Plugin Directory.

Wapple Architect Mobile Plugin

The plugin requires that you register through the Wapple website for a dev key. Once you’ve registered you have access to one of the most customizable of the mobile plugins. It does take quite a bit of setting up but if you put the time in there are so many options that you can make your website appear how you want for smartphone users. After no setup by me here’s how my website appears using a Wapple default theme:

screenshot of wapple architect settingsI’ve got to say that the default theme is not as attractive as some of the others but it does have some fantastic options for customization. You can set it up to carry your styles across from your WordPress website and edit custom stylesheets. Contrary to my usual experience, the website actually resizes much better using the Android than the iPhone.

Pros

  • Highly customizable with 8 built in themes and the option for custom stylesheets
  • Advanced SEO Settings
  • Mobile advertising integration

Cons

  • May be difficult to customize for beginner users
  • Dev key is linked to one site which restricts flexibility

WPTouch

WPTouch is one of the most popular WordPress Mobile Plugins – it has well over 1 million downloads!  It is much simpler than Wapple to set up and configure, it doesn’t require a dev key, and has only one page of options. What I love about it is that it looks great as soon as it is installed. You can choose which pages you want to have on the menu so you can pare your information down to exactly what your mobile visitors will need. Here it is:

Screenshot of WP installed on Android and iPhonePros

  • Simple set-up requiring little customization to make it look great
  • Good options for deciding which content to displayCan add custom code, including CSS and Google Adsense
  • Great support with up-to-date information about compatibility with other plugins

Cons

  • Complex websites may want more options for customizing their sites

WP Mobile Pack

The WordPress Mobile pack is a complete mobile toolkit. It includes a mobile switcher, mobile themes and mobile admin. The switcher identifies whether you are visiting on a mobile or not, and if you are serves up one of the mobile themes.

Screenshot of WordPress Mobile on iPhone and AndroidPros

  • Shrinks images for mobile phones
  • Customize which widgets are shown in the mobile them
  • Simple set-up for beginner users
  • Includes mobile admin

Cons

  • Not easy to customize the themes

Here’s a video from Mobile Active on setting up WordPress Mobile Pack:

Each plugin has its benefits. For me, WPTouch is fantastic for looking great straight out-of-the-box but Wapple is so customizable that its a great competitor. I suggest trying each one out to see which one works best for you.

4) Send yourself an email

Under the writing options on WordPress you can set up your blog so that you can email posts directly to it. Set up a secret email address, enter the POP server and start emailing posts directly to your blog from your phone. Remember though, don’t give the email address to just anyone. Anything emailed to that address will appear on your blog.

screenshot of WordPress Email positing settings

5) Location, Location, Location

iPhones, Androids and all the rest have lots of fun things that you can do with your built-in GPS. I use GoogleMaps regularly when I get lost and there are tons of apps that will find restaurants, cinemas and businesses close to your location. But did you know that you can use all of this functionality to interact with your WordPress website? Well….. you can!

Embed Location Information

Screenshot of a GeoMashup MapThe GeoMashup plugin uses Google Maps to attach location information to posts and pages and creates a mash-up map showing all of them in one place.  It’s a great way to provide location information to mobile users. Say you have a blog about film locations. You can use the plugin to provide Geo Information for your users. Anyone with a mobile phone will be able to get the exact location for your post and visit it themselves. Here are some great examples of it in action:

Tell people where you are

Earlier this year two geotagging plugins were released that interact with the WordPress Mobile apps. These allow you to embed geotag information into your mobile posts so that you can display maps showing your current location. They’re great for travel blogs, and I’m sure that you could think of loads of other uses for them:

Both of the apps are pretty good. However, if you’re a Foursquare user you may want to try out gPress as it allows Foursquare integration. gPress also works with BuddyPress.

6) Make your Network Mobile…..

More and more people are setting up large multisite networks using WordPress. You can use the WordPress Multisite Mobile Edition to make all of the sites on your network mobile compatible.  It automatically switches to the Carrington Mobile theme to give mobile users a theme that is easy to browse when viewed on mobile phones. It’s in the pretty early stages but there are plans to add Super Admin options as well as some more themes.

screenshot of buddypress mobile7) …..and your Social Network too!

BuddyPress Mobile is a recent addition to the large collection of mobile switchers. Anyone who uses Facebook knows that the desktop version of the site is impossible to navigate on a phone. It’s essential to have a mobile version to be able to interact with a social network properly. BuddyPress mobile does just that for your BuddyPress network. It’s essential for to improve the usability of your network for your users.

One final tip: If you are designing with iPhones, iPads or iPod Touches in mind then you’ll know that Apple and Flash are not friends. To embed media think about using a HTML5 player.  Check out Sarah Gooding’s post on HTML5 players to find one that’s right for you.

That should get you moving! Leave us a comment if you know of any essential plugins that I’ve left out, or if you have any other tips for mobile blogging.

Tags

Comments (11)

  1. This is an awesome summary – very well done. Thanks for including our screencast. Fabulously comprehensive -really love it. We’ll link to you in a new site we are developing focused on mobiles in media/citizen media. Absolutely fantastic resource. Thanks!

    Katrin
    MobileActive.org

  2. Thanks Katrin! I’m glad that you found it useful. I was pleased to include your screencast :)

    I’m sure that things will change massively over the next year – they always do – so I’ll have to think about providing an updated version next year!

  3. Glad to see you’ve got WPTouch on here. It’s the only solution you need in my opinion. I’ve been using on all my sites and my clients’ sites for over a year now. One of those rare, frequently-updated and well-performing plugins that is still free

  4. I use the WordPress Mobile Edition plug-in for WordPress, it is a mobile theme that installs as a plug-in and detects browser type and displays a greatly simplified blog site for blackberry, iphone or mobile phones and you can customize what phones you want to show the mobile theme to. So I can see why it is the top of the list.

  5. I’ve just launched my own blog and I also understand how important that your site to be mobile-compliant. I am using WP Mobile Pack with carrington-mobile theme. I’ve tested my site using ready.mobi and got a good reading.
    Out of curiosity I’ve also tested this site, wpmu.org, and surprisingly got a bad reading for mobile-compliant.

Participate