Creating a Mobile Drupal Website with Mobile Tools, Nokia Mobile and Browscap - Part One

Posted 8th June 2011

With a few handy con­tributed mod­ules, cre­at­ing a mobile ver­sion of a Dru­pal web­site can be sur­pris­ingly pain­less. In this series of posts, I’ll run through one approach for doing so, using a few of those mod­ules and themes.

Why cre­ate a sep­a­rate mobile version?

You don’t always need to cre­ate a sep­a­rate ver­sion at all, of course. Using respon­sive web design tech­niques — includ­ing media queries — sites can be re-​worked to dis­play bet­ter on mobile devices; how­ever to do so may not fully utilise the ben­e­fits of cer­tain mobile fea­tures, has a num­ber of key inef­fi­cien­cies and a one-​size-​fits-​all approach ignores the fact that mobile users might have dif­fer­ent moti­va­tions for access­ing and using your site. (I’ve writ­ten about this before.) Instead, it’s rel­a­tively easy to chan­nel your con­tent to mobile devices with­out just using respon­sive design tech­niques — which might help you tweak how you’re show­ing your site con­tent, but not what you’re showing.

Pop-overs on Mobile Websites

Posted 7th June 2011

This morn­ing a Tweet piqued my inter­est; “FT​.com launches sub­scrip­tion web app aimed at Smart­phone & tablet users bypass­ing app store tar­iffs”. An inter­est­ing con­cept, so I fol­lowed the link which took me straight to the FT​.com web­site. Now, if there’s any­thing that’s going to drive me away from a web­site it’s a pop-​over — except, that is, a pop-​over when I just hap­pen to be try­ing to access your site using my mobile. This is what I got:

Screenshot of the FT Pop-over on an iPhone
Screen­shot of the FT Pop-​over on an iPhone

The irony that the arti­cle was about a ser­vice aimed at Smart­phone users was’t lost on me.

Responsive Web Design and Media Queries: Not The Silver Bullet

Posted 19th September 2010

There’s cer­tainly a big buzz right now about respon­sive web design; flex­i­ble lay­outs that adapt dynam­i­cally to the user’s device and its capa­bil­i­ties; screen size, res­o­lu­tion and so on. One of the major uses for this tech­nique — a com­bi­na­tion of flex­i­ble grids, resize­able images and CSS media queries — is as a mech­a­nism for cre­at­ing a mobile ver­sion of a site. And it’s a very use­ful approach — dynam­i­cally chang­ing the lay­out accord­ing to your device’s capa­bil­i­ties enables con­tent to be re-​structured for the small screen with lit­tle effort. Also, putting the onus on the device to inter­pret the style rules makes sense, remov­ing the need for messy, server-​side browser detec­tion based on user agent strings. How­ever as tempt­ing as it might be to use this tech­nique as your sole approach to mobile-​enabling a site, it is to ignore a num­ber of other fac­tors and issues preva­lent in design­ing — and build­ing — for the mobile web. Dis­play­ing a web­site in such a way that it looks bet­ter on a mobile device is only a part of the process for cre­at­ing a mobile ver­sion; there are other fac­tors which should be con­sid­ered, such as how and where the mobile ver­sion of the site is going to be used, a user’s moti­va­tion for using the site and assess­ing what is appro­pri­ate for the mobile-​friendly ver­sion of the site. Whilst it is true that some peo­ple will only ever visit your site from a mobile device, it is likely to be used dif­fer­ently and should be tai­lored as such — it’s not just about mak­ing it look right on a small screen. For exam­ple if I’m access­ing the RAC web­site via my mobile, it’s much more likely I’m doing so for break­down assis­tance or real-​time traf­fic infor­ma­tion, than research­ing my options for car insur­ance. Inter­faces need to be con­sid­ered care­fully on a mobile site; it’s not just about styling. If I visit a web­site for a cin­ema chain I’d expect some­thing like a drop-​down where I can select the cin­ema I’m inter­ested in; on their mobile site they’d be miss­ing a trick if they didn’t use geo-​location to save me time. My sec­ond argu­ment is more prag­matic and tech­ni­cal. Take the sim­ple exam­ple of a blog, with a typ­i­cal two col­umn lay­out — using media queries, the right-​hand col­umn might be shifted below the main con­tent area (i.e. the arti­cles). Or per­haps the ter­tiary nature of a typ­i­cal right-​hand col­umn means it can be stripped out alto­gether. How­ever this cre­ates two major inef­fi­cien­cies — the HTML is fetched from the server and never used, and typically-​dynamic con­tent, whilst most prob­a­bly cached, still has to be gen­er­ated from some­where and it seems illog­i­cal to gen­er­ate some­thing which doesn’t ever get seen. Respon­sive web design calls for images to be resized by the device; but by this time the full-​size image has been down­loaded (at least on iPhones) — a sig­nif­i­cant inef­fi­ciency, and bad news if you’re on an old mobile net­work. Even Apple them­selves advise not to rely on this tech­nique. Bet­ter to use servcer-​side resiz­ing or a web ser­vice such as tinySrc. The solu­tion? Use media queries to fine-​tune the dis­play of a mobile ver­sion of a site, not just realign or tweak the con­tent of a desk­top web­site. Imple­ment a sep­a­rate strat­egy for the mobile ver­sion, and use server-​side tech­nol­ogy to cherry pick the required con­tent and ele­ments, and present this using an alter­na­tive theme layer. (Ensur­ing, of course, that the desk­top ver­sion is avail­able if required.) Take advan­tage of fea­tures that work well on mobile devices such as geo-​location. I do sup­port media queries in respon­sive web design to help enhance the mobile expe­ri­ence. If you’ve got a sim­ple site and want it to work okay on mobile device, go for it. But blindly assum­ing that they can be used alone to cre­ate a rich user expe­ri­ence on mobile devices is a lit­tle short-​sighted.