Creating Mobile Websites with Drupal Part 3

In Part 1 of this series we looked at the Why of building mobile websites.  In Part 2 we discovered how to analyze your website for mobile traffic. Here in Part 3 we will look at a few ways to mobilify your website.

The Sledgehammer Approach

First there is the "Draconian" solution- change your Drupal theme to a "mobile friendly" theme.  One option is the appropriately named Mobile theme, which is "intended to return only clean HTML with no styling ... inks and sidebars are placed in such a place that mobile- or handheld-devices can display just the content."  Let's look at a live example to see what that does.  Below is the normal desktop and mobile versions of a page on a site we did a while back:

The desktop version looks nice, but the mobile version is hard to read without zooming. According to Google Analytics, more mobile users go straight to this page (to see where the band is playing that night) than go to the home page. So we need an optimized mobile page.

If we install and enable the Mobile theme, then we get this on a mobile device for that page:

Well, it looks ... different.  Less messy.  But not necessarily better. And since this is a sledgehammer approach, all pages, viewed on mobile or desktop, are affected.  Looks what it does to the front page on a desktop browser:

We've basically ruined our site.  Those images should be part of a JQuery slideshow on the front page.  So the sledgehammer approach might not be the best.  But, what if we could just show a different theme to mobile devices, keeping our pretty theme for desktop users.  Sounds like a good step.

Mobile Tools Module

For that we look to the Mobile Tools Drupal module.  It provides many mobile-centric features to a Drupal site, but we will focus on just two:

• automatic detection of the "user agent" - is the user accessing the site from a mobile device?
• automatic theme switching based on mobile / not mobile

Working together, those two features will ensure that mobile users get the "Mobile" theme while non mobile users get the regular theme.  And it is super-simple to enable- just go to the Mobile Tools settings and set it to switch theme for a mobile device, then pick the theme:

You could also create a mobile version of your website, and put it somewhere like "mobile.mysite.com".  You can use Mobile Tools to automatically redirect mobile users to your mobile version.  The Domain Access module might be of use in that scenario as well.

We are making progress ... but really the Mobile theme is too simplistic to produce good results for our site.  There are few other mobile themes available - Adaptivetheme Mobile, Nokia Mobile, A Cloudy Day Mobile, and even Mobile Garland!  There's even a mobile base theme, Fuse.

Mobile-specific Custom Theme

For optimal results, and if you have themeing resources, creating a custom theme just for mobile users is your best choice.  We created a mobile theme for our example site above, with the following rather nice result:

Thirty-Party Solutions

If you don't have the know-how or resources to build your own mobile theme, there are some thirty party options that might be easier / cheaper than paying someone else to do it.  

When I first did this presentation at DrupalCamp Austin 2009, there was a company called OSMobi that had a nice drag-drop interface for mobilizing your site. Not that nice I guess, since they went under by the time I updated this presentation and did it at OpenCamp / DrupalCamp Dallas in 2010.  

Another company, Mobify, has a similar solution with a combination Drupal module / Web app.  First you use the web app to identify the pages of your site that you want Mobify to mobilize:

You can also add custom CSS if you'd like.  You then use their Drupal module to set the custom Mobify.com subdomain that mobile users will get when they come to your site (like "mysite.mobify.com").  The result is actually rather nice:

The downside?  You have less control of course.  And anything other than the basics costs money. And the price keeps going up- their highest-end package was $49 / month when I first looked at them, was $499 / mon last fall, and is now $999.  So get in now while you can still afford it!

This concludes my series on Building Mobile Websites with Drupal- hope it was useful.  And of course, Tarakan Design is ready and willing to help you create your own mobile sites.