Making a mobile version of your Plone site

In the last few weeks, we’ve had requests from two of our biggest customers (Oxfam America and Harvard School of Engineering and Applied Sciences) to make a mobile version of their Plone-based website. This was not a requirement more than a year ago when we first built the sites, but now it is becoming a priority.

With the growing popularity of smart phones such as the iPhone and Google Android, more and more people are expecting websites to not only render properly on these devices, but to be optimized for these devices. This means not having to scroll and zoom in and out in order to use the site – essentially creating an iPhone-like browsing experience on the website.

I attended MobileCampBoston3 yesterday, a Barcamp style unconference that brought together mobile developers, entrepreneurs, business people and product companies to discuss the current and future of mobile application development. Yes, there were a few iPad sightings from those Apple fanboys who got up early in the morning to stand in line to be the first ones to get their hands on the new shiny toys.

All this discussion about mobile technologies, and the pressing need of our customers for a mobile version of their Plone site, got me thinking about how Plone stacks up in terms of support for mobile devices.

In a recent blog post by CMS analyst Janus Boye, he compared the websites of leading CMS vendors to see how well their sites looked on mobile devices. While the post incited a wave of controversy (read the critical comments), I think the fact that Plone “made the cut”, speaks to it’s strict adherence to web standards for accessibility including access from mobile devices.

While Plone was one of only 3 vendors reviewed that got a passing grade (the other two being WordPress and Sitecore), Janus did point out that “3 columns require quite some mobile interface real estate”. What he is essentially saying is that while Plone sites in general look okay on mobile devices, they are still not optimized for mobile devices since the default layout for Plone sites is 3 columns, rather than the 1 column that is common on mobile devices. This requires the website visitor to scroll from left to right, and zoom in and out to read the text. Not horrible, but also not ideal.

What mobile features does Plone have out-of-the-box?

So how can you make your Plone site look good on both standard desktop displays and mobile devices? Plone 3 comes with a mobile.css file that can be enabled to be used for handheld devices. You will find it the portal_css tool, but by default it is disabled. To enable it, you can either do it manually within the portal_css tool in the ZMI, or programmatically using GenericSetup and adding this line to your cssregistry.xml file:

<stylesheet title="" cacheable="True" compression="safe" cookable="True" enabled="1" expression=""
            id="mobile.css" media="handheld" rel="stylesheet" rendering="import"/>

In Plone 4, it looks like this:

<stylesheet id="mobile.css" media="handheld" enabled="1" />

If you look at the mobile.css.dtml file in CMFPlone/skins/plone_styles, you’ll see that the left and right columns have been hidden, so essentially you get a single column layout.

.hiddenStructure,
#portal-logo,
#portal-searchbox,
#portal-siteactions,
#portal-column-one,
#portal-column-two,
.addFavorite,
.documentActions,
#portal-colophon,
.netscape4 {
    display: none;
}

The problem is that this stylesheet is not used due to the inconsistencies in how different browsers handle the “handheld” media descriptor. This is described is more detail on this A List Apart article entitled Return of the Mobile Stylesheet.

For these reasons, the best way to ensure that mobile visitors get the mobile version of your site, and everyone else gets the normal version, is to use a subdomain (m.somesite.com) or a completely different top level domain name such as somesite.mobi. For the mobile site, you check the user-agent of the browser, and if it’s a handheld device, redirect the visitor to a mobile specific URL, where you can force a particular stylesheet that is optimized for mobile devices.

Mobilize your Plone site with gomobile.mobile

You might be thinking to yourself: this sounds like a lot more work just to get an optimized mobile site. Well, it is, but thanks to the gomobile.mobile suite of add-ons for Plone, all of the user-agent sniffing and browser redirection handling is taken care of as well as a bunch of other features:

• Mobile theming
• Handset detection
• Multichannel publishing
• Field level mobile overrides
• Preview
• Image resizer
• XHTML cleaner
• Microformats: call, SMS, location

gomobile.mobile was developed by Mikko Ohtamaa from mFabrik (formerly TwinApex) who I got a chance to hang out with at the Plone conference in Budapest last year. Incidentally, Mikko is also the author of the excellent Plone Developer Manual (written entirely in reStructured text and rendered in HTML using Sphinx). Kudos to Mikko for contributing these two hugely useful resources to the Plone community!

It was no April fool’s joke when Mikko announced on April 1st that gomobile.mobile is now feature complete, and they are preparing for a release.

Here is a short (17 slides) introdution to gomobile.mobile by Mikko:

Roll up your sleeves – let’s make a mobile enabled buildout for Plone

All of the source code for gomobile.mobile lives at Google Code except for some complementary add-ons which are hosted in the Plone collective, the community code repository for Plone Products and other add-ons – a useful place to find the very latest code for hundreds of add-ons to Plone.

Here are the steps to setting up a mobile version of a Plone site, using the gomobile.mobile suite of add-ons.

1. Checkout the sample buildout and update the buildout file

Execute these command in the terminal:

$ svn checkout http://plonegomobile.googlecode.com/svn/trunk/gomobile/gomobile.buildout
$ cd gomobile.buildout
$ wget http://python-distribute.org/bootstrap.py
$ cp example.cfg buildout.cfg

Now you must edit the buildout.cfg to update it to some newer versions of the software, and fix a few things:

[buildout]
...
extends =
    http://dist.plone.org/release/3.3.5/versions.cfg
    gomobile.trunk.cfg

find-links =
    http://dist.plone.org/release/3.3.5

eggs =
    PIL
    Products.LinguaPlone==3.0.1  # might as well use the latest final release of LinguaPlone

[versions]
# you can remove the following line entirely and it will use the default version in versions.cfg
zc.buildout = 1.4.3    

[instance]
...
# this is so that you can access your computer from your mobile device without setting up Apache vhosts
http-address = 0.0.0.0:8080

2. Update the gomobile configuration file

The gomobile.trunk.cfg file needs to be updated with the following:

[buildout]
...
always-check = true
auto-checkout =
    python-Levenshtein
    collective.fastview
    mfabrik.behaviorutilities
    mobile.sniffer
    mobile.heurestics
    mobile.htmlprocessing
    gomobile.imageinfo
    gomobile.mobile
    gomobile.convergence
    gomobile.supporter
    gomobiletheme.basic

[gomobile]
...
# This is for developers without commit rights
checkout-protocol = http

3. Run the buildout and start up the instance

Buildout will complain about a missing “products” directory, so we need to make that before we can run buildout:

$ mkdir products
$ python2.4 bootstrap.py
$ ./bin/buildout -v

If you didn’t get any catastrophic errors, then you can start up the instance:

$ ./bin/instance fg
...
2010-04-04 13:03:30 INFO Zope Ready to handle requests

4. Create and configure the Plone site

From the ZMI, create a new Plone site called “Plone” and then go into the Site Setup – Add/Remove Products, and you should see these three add-ons:

• Go Mobile
• Go Mobile Convergence
• Go Mobile Default Theme

Check the box next to each add-on, and then click the Install button at the bottom of the screen. There’s one more thing that you need to do before you can see your mobile site.

As per the instructions on the gomobile.mobile pypi page, you must edit your /etc/hosts file with the following:

127.0.0.1       localhost m.localhost mobi.localhost web.localhost preview.localhost

Notice that I added a m.localhost entry as well, since it seems that this is the one that is used if the user-agent is set to Safari/iPhone.

5. Test the site using a mobile device simulator

If you are on a Mac, Safari has a special developer menu which if enabled, let’s you specify what user-agent to use. So that you can trick the Plone site into recognizing your browser as a mobile device.

You must enable the developer menu by going into the Preferences and selecting Advanced. Then click the checkbox next to Show Develop menu in menu bar.

Once you’ve enabled this menu, then you can choose from the Develop menu, User Agent and then Mobile Safari 3.1.3 – iPhone.

Now when you go to http://localhost:8080/Plone, it should redirect you to http://m.localhost:8080/Plone, and show you the mobile optimized themed.

If you don’t have Safari, or another way to override the user-agent, you can still see what the mobile version of the site looks like by going to http://m.localhost:8080/Plone or http://mobi.localhost:8080/Plone.

6. Tweak the settings for production deployment

Obviously, these values are only for local testing, but when you want to deploy to a production server, you would want to change these to be the real subdomain or TLD names.

If you go into the ZMI, and click on portal_properties and then mobile_properties, you can change the following values:

mobile_domain_prefixes: Subdomain names for mobile requests. All prefixes are accepted for incoming requests. When rewriting URLS pick first one on the list.

mobile_domain_suffixes: TLD names for mobile requests. All suffixes are accepted for incoming requests. When rewriting URLS pick first one on the list.

preview_domain_prefixes: Subdomain names for mobile site preview requests. All prefixes are accepted for incoming requests. When rewriting URLS pick first one on the list.

web_domain_prefixes: Subdomain names for web site requests. All prefixes are accepted for incoming requests. When rewriting URLS *no* prefix is put in.

mobile_skin: Old style skin name for mobile theming

image_resizer_secret: Magic string which protects against the denial of service attack by doing
many requsts to (slow) image resizer.

default_canvas_width and default_canvas_height: This information is used for image resizer when we don’t
use mobile user agent sniffer to determine

tracker_name: User mobile analytics backend name. See gomobile.mobile.interfaces.IMobileTracker

tracking_id: Input your tracking code if mobile analytics service is used. See gomobile.mobile.interfaces.IMobileTracker

tracker_debug: Should mobile tracker print out debug information. Useful for tracing tracker problems. Set special HTTP response header. Print console output

no_folder_listing_view_ids: List of view ids when not to show folder listing viewlet

image_resize_cache_path: Where we store mobile resized copies of images

Live examples

Where can you see gomobile.mobile in action? Mikko has a hat-trick in that he has given us the site plonecommunity.mobi, a great collection of Plone resources optimized for your mobile viewing pleasure. This is a great showcase for how to use gomobile.mobile to make a fast and intuitive browsing experience for mobile users. If you want to build the plonecommunity.mobi site yourself, Mikko has made available the code including a sample buildout.

Alternatives

The prolific WebLion folks at Penn State University have built another tool to mobilize Plone sites called well… Mobilize. Michael Mulich (aka pumazi on IRC) has taken this one step further by turning it into a WSGI middleware package, which does not provide a theme like Products.Mobilize did in the past. See the code and the sample paster ini files.

Another way to provide a mobile optimized version of your Plone site would be to find a non-Plone theme (just HTML/CSS) that has already been optimized to work well with various handheld devices, and then use Deliverance or xdv to feed the dynamic content from Plone into that theme. We’ll explore this approach in a future blog post about using Deliverance/xdv to mobilize your Plone site.