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

8th June 2011 | Tags:

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.

The The­ory

The idea behind the approach I’m going to take is to attempt to detect what device a user is using to access your Drupal-​based site, and tai­lor it accord­ingly. In the most part, this is achieved by switch­ing theme; this doesn’t just allow you to change the way the site is dis­played (which could poten­tially be achieved using respon­sive design tech­niques), but it also allows you to con­trol what the user sees. The point is though, that you’re not cre­at­ing an entirely sep­a­rate site, so the con­tent can be uni­form across all devices and man­aged in one place. (It should be pointed out, though, that whilst switch­ing to the mobile ver­sion is fine in gen­eral, you should still allow a user to view the desk­top site on their mobile device if they so wish — we’ll look at how this can be achieved later.) You may also wish to have a mobile ver­sion of a site on a sep­a­rate domain (e.g. acme​.mobi) or sub­do­main (e.g. m.acme.com); such a set-​up can be achieved using this method, whereby both domains are served from a sin­gle Dru­pal installation.

Dru­pal Mod­ules and Themes for Mobile Development

I’m going to use a com­bi­na­tion of mod­ules and themes, out­lined below. There are alter­na­tives to all of them, of course — indeed, you can use some of these in com­bi­na­tion with other mod­ules. I’ll briefly dis­cuss some of the alter­na­tive approaches later, but also explain why I’ve used the mod­ules I have. I should also point out that the approach is far from per­fect. A lot of hard work has gone into this area, but there’s no fool-​proof solu­tion, only a num­ber of options which could be used as the basis for fur­ther work. Here’s a quick run-​down of the mod­ules I’m going to use.

Mobile Tools

The pri­mary func­tion of the Mobile Tools mod­ule is to main­tain sep­a­rate ver­sions of a web­site, typ­i­cally switch­ing the theme and option­ally, by enabling us to use sep­a­rate domains (typ­i­cally either a sim­ple sub­do­main — such as m.acme.com — or using a .mobi top-​level domain). There are other use­ful fea­tures of Mobile Tools, too. There’s an option to offer an alter­na­tive home­page for the mobile ver­sion, as well as the abil­ity to alter the num­ber of posts fea­tured on the front-​page for the mobile ver­sion (which is par­tic­u­larly use­ful if your site func­tions as a blog). Mobile Tools also allows you to cre­ate equiv­a­lent user roles for mobile users; for exam­ple along­side your stan­dard anony­mous user role you can con­fig­ure an anony­mous mobile user role, who might for exam­ple have a sub-​set of the stan­dard user’s per­mis­sions. In this way we can strip out cer­tain con­tent or func­tion­al­ity for mobile users, where it’s not appro­pri­ate or useful.

Notable alter­na­tives to Mobile Tools include Mobile Plu­gin and Domain Access.

Nokia Mobile

Nokia Mobile is a Dru­pal theme which also incor­po­rates some use­ful addi­tional func­tion­al­ity. Most impor­tantly it pro­vides a solid basis for a mobile theme. One of the advan­tages of the Nokia Mobile theme is that it incor­po­rates the notion of device groups — some­thing also pro­vided by Mobile Tools — which allow the theme to be re-​used across vary­ing “classes” of devices; from high-​end smart­phones down to more lim­ited, older devices with sig­nif­i­cantly reduced capabilities.

Notable alter­na­tives to Nokia Mobile include mobile_​garland, Mobile and for iPhones, iUI.

Brows­cap

Fun­da­men­tally, the mech­a­nism for cus­tomis­ing a web­site for mobile devices over a desk­top ver­sion — or tweak­ing a theme accord­ing to the capa­bil­i­ties of the device being used to dis­play it — is based on browser detec­tion; that is, exam­in­ing your user agent string to try and deter­mine what device you’re access­ing the site on. Browser detec­tion is a far from fool­proof process which is fraught with com­pli­ca­tions and dif­fi­cul­ties — some his­tor­i­cal, some come are down to vari­a­tions (or lack of) stan­dards, and are essen­tially a by-​product of the sheer num­ber of devices out there. Brows­cap is a store of infor­ma­tion about the capa­bil­i­ties of var­i­ous devices — of which there are a con­sid­er­able num­ber — which is updated reg­u­larly. This infor­ma­tion is made avail­able as a zipped-​up text file, and the Dru­pal mod­ule pop­u­lates the data­base with this information.

One notable alter­na­tive to Brows­cap is WURFL. Device Atlas offers a sim­i­lar type of device infor­ma­tion com­mer­cially, although there doesn’t appear to be a Dru­pal inte­gra­tion (yet?).

In the next part, I’ll look at the instal­la­tion and con­fig­u­ra­tion of the Mobile Tools module.

Comments

    Hi,
    Did you create a second post about this? I have installed the modules above but I have no idea on how they can be used. Providing a clear and concise example on how all these modules can be used will be great.
    Thanks!

    2nd October 2012
    Khaled
    Khaled

    I also need same thing ie "how these modules will be used in drupal", i will wait for your kind reply……thanx

    14th December 2012
    WaQaR Ali
    WaQaR Ali

Links and images are allowed, but please note that rel="nofollow" will be automactically appended to any links.