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:
- Why build mobile websites?
- Does your website get mobile traffic? Which pages?
- 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 :
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.
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:
And then the first three pages as views on an iPhone:
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:
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:
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:
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.