Your browser (Internet Explorer 7 or lower) is out of date. It has known security flaws and may not display all features of this and other websites. Learn how to update your browser.

X

Creating Mobile Websites with Drupal part 1

Back in August I gave a presentation at OpenCamp on building mobile sites with Drupal.  I thought I'd put that presentation into a serialized set of blog posts.  I'll split this up into three posts:

  1. Why build mobile websites?
  2. Does your website get mobile traffic?  Which pages?
  3. Building a mobile-specific site with Drupal

Why Build Mobile Websites?

Let's look at a website that we built for a Dallas band a few years ago, first on a desktop / laptop :

Full page website screenshot with Flash

It's a Drupal site (of course) that features a Flash intro (I know, I know..) of a taxi driving by while the band tries to hail it down, then we fade into the actual front page of the website.  It's actually quite striking on a full size screen with Flash support, and with all the menu options functional you can easily skip the Flash intro.

But if you view that same website on your iPhone, you get a totally different experience (and not a good one).  A page that is perfectly formated for 17-19" monitor, is very hard to read and manipulate on your mobile device.  And since your iPhone doesn't support Flash, you just see (sort of- it's small) a "Please Install Flash" banner, and nothing else happens.

File 53

Not a compelling experience for your user. The user can switch to landscape mode, or zoom in and scroll around to use the site, but that's hardly optimal.  And there's no getting around the lack of Flash.

You've likely noticed that when you visit some sites on a mobile device, the site displays a very different-looking website from the desktop version.  USAToday.com is a good example- first the desktop version:

File 57

And then the first three pages as views on an iPhone:

File 58    File 59    File 60

The mobile view is totally different, yet is well organized and easy to manipulate.

Amazon.com also handles mobile well - here is typical front page as seen on a desktop:

File 54

The front page is full featured and full of information and images.  If you visit on an iPhone though, the first two pages look like:

File 55    File 56

There is much less information and very few images (which helps the mobile site load faster over a cellular data network).  There are mobile-looking buttons and a prominent search field, as well as a link to the "PC site" should the user wish to view the site in desktop mode.

The desktop and mobile environments are very different, and must be treated differently by your website:

File 61

Enough for Part 1 - next time we'll explore how to figure out what sort of mobile traffic is coming to your site and which pages they are visiting (so you know which to optimize for mobile first).  And in Part 3 we'll show you how to easily display optimized pages for mobile devices from your Drupal website.

  • Nov 19 2010