Blogging Tips

3 Ways to Make your WordPress Blog Mobile Friendly

Mobilizing my Website - (second Version)

Did you know that 113.9 million people are browsing the Web with their mobile devices in 2012? Right! The statistics from May 2012 say that around 10% of all web traffic worldwide comes from mobile devices like smartphones and tablets. As the numbers are rising each month it's time to think about mobile web design, huh?!

Due to the fact that i work as an User Experience Designer for Web/Mobile Web for huge customers i thought it would be good to share how you can get your WordPress Blog ready for mobile devices. During the last months i tried out different ways to pursue this goal for my travelblog and spend a lot of time on that. To save time for you i'll start here by giving you an overview of the most popular ways.

1. WordPress Plugins

You just set up your Blog and you're happy about it but PHP, HTML and CSS is something you are not so into? Here you go! Plugins are always a good way to improve your WordPress Blog quick and easy. There are quite a few out there that also offer you to set up a mobile version of your Blog easily.
The good thing about this: mostly you do not have to change anything in your theme/template because they often provide a standard mobile theme and automatically handle everything (like detection of the device you visitor is using) with just a few clicks.
The Plugin I'd recommand to get started is called “WPTouch” and comes with all the mentioned stuff. Beside the free version there is also a professional version for $49. The free version offers less options to customize the standard theme of the Plugin but is also good if you are in search for a quick mobile version for your site. If you want to do more just invest the money and then you can set up much more e.g. custom icons for the menu, advanced styling and an own iPad version. More information needed? Just visit the website of the developers to see more screenshots and all supported features.

Pro

  • no HTML/CSS/PHP skills required
  • easy setup, easy handling
  • works out of the box for almost all standard WP Themes
  • desktop theme will remain unaffected
  • iPad support
  • video & audio handling
  • timesaving

Con

  • iPhone look & feel
  • little bit too limited for Designers
  • PHP skills required for custom shortcode handling
  • (HTML/CSS skills required for new mobile themes)

Plugins: Good for Beginners


2. Theme Switcher

So, you started with standard themes/templates but customized a lot by editing the CSS and HTML? Now you have a very unique template and want to keep the look and feel also for the versions in mobile devices? Here i have the suitable solution for you, but to say it right from the beginning: you need some time for customzing here!

Of course, a Theme Switcher is also a Plug-In but does nothing more than just to display the appropriate theme for each device. So you need to put some effort in designing at least one Theme for mobile users on your own. Another opportunity would be to use free or premium mobile Themes and customize them (this way you do not have to start from scratch) – Themeforest offers a wide range of pretty good mobile Themes!

Ah yeah, the Theme Switcher i would recommend to use is called Device Theme Switcher and offers the possibilities to set a theme for handhelds and a theme for tablets – for desktop your current theme will be used.

Pro

  • pretty basic – all you need is there
  • desktop theme will remain unaffected
  • you have all the power to decide where to use which theme
  • smartphone and tablet support
  • automatic device detection
  • time consuming

Con

  • HTML/CSS and sometimes PHP kills needed
  • set up/edit/buy new themes
  • no automatic media handling

Theme Switcher: for Advanced Users


3. Responsive/Fluid Themes

From the angle of an Information Architect / User Experience Designer this is definitely the best solution for Users and therefore my personal favorite.

Responsive Layout means that you have just one Theme for every user uncoupled from a certain device. I prefer using the term “fluid layout” because this kind of themes adapt the layout to the viewing environment:

As a result, users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate with a minimum of resizing, panning, and scrolling. (Source: Responsive Web Design, Wikipedia)

This means also that you maybe have to think about redesigning your Blog by creating or using a new Theme.  So you can decide either you want to start by diving deeper into the topic and build an own responsive theme – for this i recommend to use a free basic theme like “Bones” (instructions here)… Or: you just use a good responsive wordpress theme  and customize it – i used a premium Themeforest theme called “Aware” and customized it for my needs and to have an own design – but there are more excellent premium themes on the same Marketplace.

Pro

  • awesome user experience for your visitors
  • only one template to care about
  • usage of newest technologies
  • platform independent
  • all screen sizes and devices supported
  • sustainable for new devices
  • premium themes offer a wide support of shortcodes/design elements and media handling

Con

  • HTML/CSS and sometimes PHP kills needed for customizing
  • set up/edit/buy new themes
  • no automatic media handling for self created themes
  • time consuming to set up
  • learning new technologies (HTML5, CSS3, Javascript)

Fluid Themes: Perfect for Developers


Now it's on you to decide which path to follow to get your Blog mobile-ready and make your visitors lucky. As you see you don't have to start from scratch – that makes it much easier because there are some cool guys out there helping you with this issue by providing good tools and instructions. But if you are still not sure how to do it – don't matter i'm also working on a tutorial for each way i presented here!

Coming next in this section: How to use WPTouch to make your Blog Mobile Friendly

Liked it or even loved this post?

Please support me by spreading the Word (use the Buttons in the sidebar to share on Twitter, FB…) – i'm also looking forward to your Feedback in the comments!

  • I have the free plug-in but it’s so basic it reminds me I need to work on it a bit.

    More to add to my to-do list…

    • Steve

      I also started with the free version – in my next post in this category i’ll explain how to customize the PRO version of the plugin to have a more individual layout!

  • Kevin

    I like the idea of responsive themes myself.

    I’m actually making changes to my theme to make it responsive.

    • Steve

      …that’s a good idea Kevin – as a User i would always prefer that solution. I like the metaphor of “content should be like water: if you put it into a glass – it’s a glass. if you put it into a bottle it is a bottle…” – it’s worth the work!

About

Hey, my name is Steve. Actually I’m a guy like you that used to live the ‘normal’ life until September 2012...

Read more

My language course

With Babbel I learned Spanish within 3 months for my South America trip. Try it for free!

Most Popular






On TV

Globetrotter is one of the weekly segments in the TV travel guide Check-in on DW TV. Here, video blogger Steve Hänisch will be showing his travel videos from around the world:
> find out more

My Travel Insurance