a Mobile Web Blog

Using the Context module with Mobile Tools: create Mobile specific contexts

Since we all love the Context module so much, I figured it was time to integrate Context with Mobile Tools and create a special Mobile Tools plugin.

The new dev version of Mobile Tools currently allows you to create a context based on device type (mobile or desktop) or device groups.

In order to use this functionality, just create a new context and search the context for mobile devices context

Collecting examples of mobile drupal sites

Mobile DrupalWith an ever increasing number of users for the Mobile Tools module ( > 4000), I am looking to assemble a list of mobile drupal sites (that use or not use the mobile tools module). I get more and more requests from people asking for examples of mobile Drupal sites.

If I get a good amount of responses, I will feature these sites on this blog in order to demonstrate the mobile capabilities of Drupal and give readers some inspiration when thinking about their mobile site, functionality and design.

If you are interested in getting your site listed, please leave the url as a comment!

To name already a few:

Mobile Developers Guide to the Galaxy

Mobile developers guide to the Galaxy

Mobile device detection with Varnish

As I already have blogged before, if you are using Varnish as a page caching mechanism, Drupal cannot be used to detect the device that is visiting your website.

Already some examples have been created to detect devices in Varnish and add a header string that allows the Drupal backend to know about the device type.

This is just a small snippet that I use to redirect mobile users to a mobile url and desktop users to the desktop url.

# vcl_recv routine
sub vcl_recv {
  call device_detection;

AT&T Mobile Phones promotion site on Drupal

Last week I launched with Northpoint Solutions and VSHIFT another mobile drupal site. ATT&T Mobile Phones. A promotional website to consult the latest mobile phones and search stores on your mobile.

The site runs on Drupal 6 using Mobile Tools and WURFL.

ATT screen 1

Mobile Device Detection with Varnish

Thanks to fangel who wrote this week an interesting blog on using Varnish to detect mobile devices, we are a step closer to creating performant architectures that serve both mobile and desktop websites.

Northpoint sessions at Drupalcon Chicago

There are only 3 days left to cast your votes for Drupalcon chicago, so in case you are lost in the vast amount of sessions and you did not have the time yet to vote, I would like to share with you the sessions proposed by my colleagues at Northpoint.

We recently have build some large traffic sites like Mens Health, Fitbie.msn.com, Eat This Not that, ... we are currently working on the Drupal version of More.com, and we are creating Mobile Drupal sites for AT&T and Johnson&Johnson. Personally I have dedicated a lot of time to the Mobile Tools module and I would like to share some of the concepts behind it.

Relative font sizes on the iPhone: conversion to absolute sizes

Most designs we get for the mobile websites we create, are psd or illustrator files with width of 320pxs. This reflects the screen size of the iPhone and some other smart phones very well. Add to this the fact that most people are evaluating your mobile site on an iPhone, it is very tempting to use absolute font-sizes that match the sizes from your design.

However, this does not take into account the devices with small screen dimensions, but high resolutions ( = high dpi screens). An example is the Nokia ExpressMusic. Small font-sizes on iPhone tends to become almost unreadable on these high dpi devices.... The inverse can be true too... Big screen width lower solutions will display your font's too big (although this is never really an issue).

That's why there is the general suggestion to use relative font-sizes when developing mobile websites. The device translates relative font-sizes to absolute font-size, taking into account the DPI of the screen and thus optimizes the readability...

To help a themer with getting the right relative sizes, and to suggest developers which sizes they can use when creating mobile web designs with an "iPhone first" mindset, I experimentally made the following conversion table:

xx-small 6px
x-small 10px
small 13px
medium 16px
large 18px
x-large 23px
xx-large 32px

Proposed Mobile sessions for Drupalcon Chicago

One of the rewarding activities as maintainer of Mobile Tools is seeing how the adoption of the module is steadily growing. Since my first commit om march 22nd 2009, we have now a reported installation base of 2,630 installs and this number is steadily rising. This number can count as a good indicator how big the interest in mobile is getting...

With ericduran who stepped up as co-maintainer for the Drupal 7 branch we are preparing Mobile Tools for the future!

This upward mobile trend is also visible in the number of proposed sessions for Drupalcon Chicago (Check out my proposal).

I tried to assemble an overview of these session and categorize them in different topics:

Persist your session across your desktop and mobile site

This is a small tip for devs who decide to use separate domains for the desktop site and for the mobile site, and who want users to easily switch between both sites without loosing the session.


The trick is to let Drupal set your cookie for the base domain: drupal.org...

Doing this can simply done by changing the $cookie_domain variable in your settings.php file.