Mobile Drupal (part 1): The groundwork

Recently I was involved in a project to convert a site into a mobile site for Drupal. During the process I had to overcome a number of problems – problems which pretty much everyone designing a mobile site will have to solve. This series of articles covers a bit of theory, the practical problems and the various decisions I made. Hopefully it will help some of you out. The solutions offered may not be the best or only solution by any means – in many cases you need to decide what is best for your site or setup.

Get amped for mobile

In the past it has been easy to not even consider mobile when designing a site or an application. However, there are so many compelling reasons these days to treat your mobile site as a key component of your web strategy. Mobile devices are becoming increasingly popular, more of your users will be accessing your site through a phone or tablet. They will expect a good experience from your site or else will not return. Watching a user attempt to browse your unoptimised desktop app on a mobile device is an embarrassing experience for you and frustrating for the user.

Drupal in a tablet world [Dries Buytaert]: Dries opens up a discussion about the future of Drupal for mobile and tablets. “This all begs the question: in a world of tablets and mobile handheld devices, what do we need to do so that Drupal will be a go-to platform? How can Drupal contribute so as to be a player in the ever-expanding ecosystem of tablets and mobile phones?”
Everything you ever wanted to know about mobile, but were afraid to ask [Tomi T Ahonen]: A long article which covers the myths and misconceptions about mobile. Very useful for getting your head around just what a remarkable medium it is.

There are many reasons for choosing to develop a mobile web site as opposed to a “native app”. This doesn’t have to be an either/or decision of course, however, developing a mobile site first is probaly a sensible decision. Firstly, the fractured nature (programming language, feature sets, application stores) of the “native apps” space across the various mobile platforms (iPhone, Android, Blackberry, etc, etc) makes development of separate apps an expensive and time consuming process. WebKit and HTML5 offer a lot of promise for developing richer clients which approach the features provided by native apps. It is interesting to note that Google and Apple continue to support WebKit even though they have their own native app platforms. Secondly, the chances are that you are going to have more visitors hitting your site after searching Google than will download a custom app. Optimising this user experience from Google makes sense.

Design philosophy

Before jumping into the nitty gritty of tweaking Drupal up to accommodate a mobile site, it’s worth putting in a bit of groundwork. Planning for and designing a mobile website should involve taking a fresh approach to your site or application. By focussing on mobile, and it’s inherent limitations and features, we can concentrate on what is truely important to users. I thoughly recommend that you take 10 minutes and flick through the following slideshow:

Rethinking the Mobile Web by Yiibu: Slideshow covering the old and new ways of doing mobile. “Progressive enhancement” and “Responsive web design” techniques discussed.

Of particular interest to us is Slide 43 which covers a soup of considerations we face when designing a mobile site. These are some of the thorny issues which crop up:

device detection,
content adaption,
multiple sites,
device capabilities,
doctypes,
multiple templates.

There are a lot of issues to deal with and this article will deal with many of them. There is no silver bullet to solving a lot of this stuff. However, we will go into the exercise armed with some solid principles which should serve us well. Slide 125 lays it out for us:

mobile first,
well structured meaningful markup,
progessively enhance,
adapt content,
compress content.

Drupal as a platform is pretty good at well structured markup, adaptable content and compressed content. Two themes worth pondering a little further at this point are “mobile first” and “progressive enhancement” as they will help us think about the mobile site in a functional way rather than just as a cut down version of the desktop site.

Mobile first

Mobile has traditionally been considered an afterthought, if at all. However the landscape has shifted and it is now vitally important. Luke Wroblewski, a strong proponent of the approach, identifies three key reasons:

Mobile is exploding
Mobile forces you to focus
Mobile extends your capabilities

Focussing on the mobile platform forces the developer to prioritize the important things. What are the key actions and data for your application? Strip everything away and focus on just that. The end result will be an app which is simpler, easier to understand, just as functional and much better. This brings development back from flashy extraneous eye candy to a functional site which is designed to serve the user.

Some questions you might ponder. Why are your users accessing the site? What are the likely actions they want to perform? What information do they want to access? What’s the simplest way to do it? Do I need that navigation? Are those icons distracting? Is the page fast to load? Do I need a better algorithm for finding nearest locations…

Mobile First [Luke Wroblewski]: Three reasons why Web applications should be designed for mobile first instead.
Mobile First [Luke Wroblewski]: “In this presentation, Luke Wroblewski will dig into the three key reasons to consider mobile first: mobile is seeing explosive growth; mobile forces you to focus; and mobile extends your capabilities.”
Barcelona: Mobile First: Eric Schmidt (Google) talks mobile. Google encourages developers to work on mobile first before desktop. “The phone is no longer the phone, it’s your alter ego. It’s the extension of everything we are. It doesn’t think as well as we do, but it has a better memory…. This is the time for us, now is the time for us to get behind this. … We understand that the new rule is mobile first.”

Progressive enhancement

One of the big conceptual advancements in web development in the last seven years has been a move away from “graceful degradation” towards progressive enhancement. Coined by Steve Champeon (of hesketh mailing list fame), progressive enhancement describes a process of starting with the basics and then building up functionality for richer clients. That is, instead of designing for a rich client and taking away bits and pieces for simpler devices, we start with semantic HTML and the progressively add CSS, Javascript and other goodies which improve the content.

Drupal has been very good in this regard. There is a strong emphasis on producing semantic HTML with no inline styles or Javascript. Inline images for presentation are avoided. Drupal pages rock when viewed with no stylesheet whatsoever. They are pretty pure. The ultimate expression of this is the Stark theme in Drupal 7 which shows the quality of the HTML produced by Drupal.

However, there is a very strong bias towards designing for Desktop sites. Many recent developments in theming revolve around areas such as 960 grid designs. Further, the use of jQuery as a default Javascript library means that many modules and themes make use of it is presenting a page. This isn’t bad on its own but does present problems when it isn’t easy to turn off. In short, Drupal is in a good position as far as progressive enhancement is concerned but there are a few hurdles to jump.

Inclusive Web Design For the Future with Progressive Enhancement [Champeon and Finck]: The original presentation at SXSW 2003.
Graceful degradation versus progressive enhancement [Christian Heilmann]: Article from Opera with practical examples.

Responsive Web Design

Another meme which has emerged recently is that of Responsive Web Design. Ethan Marcotte wrote a short article for A List Apart coining the phrase which basically describes fluid layouts which work well on a variety of screen sizes. By using floated divs, which are relatively narrow, layouts can adapt to the screen size. The secret sauce here is the use of media queries to serve progressively enhanced CSS to clients with more screen real estate. The “mobile” site is the “default” site suitable for the most basic of clients and the “desktop” site is the enhancement.

Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts.

This approach is counter to the traditional way of theming in Drupal where the presumption is for the desktop site. Currently there aren’t any themes that I am aware of which take this approach. Anyone?. It possibly is an area for experimentation in the future. So while we won’t necessarily be able to immediately make use of the mechanics of the technique (media queries) the basic principle of using floated divs in areas such as Views is certainly one we can make good use of.

Responsive Web Design [Ethan Marcotte]: A Discusses fluid grids and media queries. Outlines a possible future where the default version of the site looks good in all browsers but can be progressively enhanced using extra stylesheets for bigger screens.
Responsive Web Design Book [Ethan Marcotte]: Learn how to think beyond the desktop and craft beautiful designs that anticipate and respond to your users’ needs.
Media Queries: “A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Among the media features that can be used in media queries are ‘width’, ‘height’, and ‘color’. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself. “
Responsive Web Layout – in anticipation of the Mobile Event [nodiac]: One of the few mentions of responsive web design on GDO.
Responsive web design – Drupal theming: Slideshow which covers the details of media queries with some good advice on being practical within the confines of Drupal.

Zen of mobile

In the spirit of the Zen of Python here is my Zen of Mobile. Consider these things when sketching out a design for your mobile site. Import this

simple is better than complex,
fast is better than slow,
sparse is better than busy,
fewer options are better than more,
most important to least important,
every element must add,
every page to satisfy a single aim.

Some more practical pointers after looking around at a few decent mobile sites:

banner to be frugal on vertical space,
search is crucial gateway to site,
main content first,
single “focus” image for the page is OK,
other ancialliary images are distracting,
lists are good,
primary nav is available but not necesarily at top of page,
collapsing divs are good to compress blocks to be readily consumed on single screen,
minimise clicks by displaying simple form on that page if user likely to want to take action,
minimise typing if possible,
homepage gateway to user paths with focus on single key task.

Mobile Web Design Trends For 2009: Some good tips and screenshots from popular, well designed mobile sites.
A Study of Trends in Mobile Design: Stats on different approaches taken by various websites.
http://www.w3.org/TR/mobile-bp/ [W3C]: Best practices to follow when designing for mobile devices.

Location aware

Mobile devices have extra capabilities over traditional desktop environment making them more immediate and powerful. The Mobile First section mentioned that mobile devices are superior to normal desktop devices and that apps should take advantage of this. The most obvious is the ability to be location aware. The massive dollop of cream that can go on top of the mobile cake is knowing where your users are. This then enables you to pre-empt many of the tasks the user might wish to carry out at that point in time: where is the nearest store, best deals in the area, directions, etc. from a functional perspective we can better guess what they want to do.

Modern mobile clients offer APIs which allow developers to ask the user for access to their location. If the user agrees this data can be used to customise their experience. This may mean running custom queries on the DB using lon/lat or querying other APIs such as Google Places or other geo services. Want to carve out a niche for yourself? This could be just the area. I’ll leave that for another article

Supported OS Platforms & Widget Frameworks: Outlines the various platforms and the plugins/frameworks/apis to access geo location info from the client.

Preparation

As you will be testing the site initially in your web browser it is a good idea to set it up so as to resemble a mobile browser. If you are using Firefox to test the site there are a couple of add ons, both developed by Chris Pederick, which make your life easier.

User Agent Switcher: Allows you to switch your user agent across to iPhone or any other agent you care to define. This is great for testing that your redirect rules are working.
Web Developer Tools: Has a “resize” feature where you can define widths for 240, 320 and 480 to see what the page looks like on narrow screens.

Finally, have a couple of target devices around so that you can give the designs a final once over in the wild.

This article is the first in a four part series on mobile sites in Drupal.

Feel free to comment if you have any other tips, recommendations or corrections. The example code presented is for Drupal 6 only and not necessarily production ready.

Be Sociable, Share!

Mobile Drupal (part 1): The groundwork

Get amped for mobile