BLOG: POST

Mobile First sites with BrowserCMS

February 28, 2012 19:51

We recently released the Mobile module, with the goal of making mobile websites easier to build. In this post, I wanted to discuss a bit about why we built the module, how the module works, and why we designed it the way we did. As a side note, while the mobile module is currently a separate module for 3.3.x, we do plan on eventually inlining it into the core of the CMS (probably in 3.5.x), as we feel mobile should be a 'first class citizen' in any CMS going forward.

Backstory

It will likely come as no surprise to anyone in the web development industry that mobile web development is a hot topic of late. At trade shows or just meeting with clients, the single most common request is often some variant of:

"How do I make my website mobile friendly?"

When building sites for clients, our typical development strategy has been to go with some variation of a Mobile First strategy that can involve anything ranging from:

  1. CSS Media Queries
  2. Responsive Web Design
  3. User Agent Detection

In short, to date, we have been mostly leaning on Rails capabilities for handling mobile and implementing custom strategies on a site by site basis. That has been great for experimentation purposes, but I think we have finally reach the point where we can codify our experiences into something repeatable.

No True Mobile CMS

Even within the Rails community, there is no agreed upon consensus about how to do mobile. Even some other CMS's you may have heard of are making it a major initiative to be more mobile friendly. As such, how a mobile CMS should work probably isn't completely obvious.  Here is how we approached it:

Our Mobile Strategy

Our approach to mobile can be summed up as:

  1. Use an m. subdomain
  2. Optional Mobile templates
  3. Opt-out Device Redirection

Much of the approach we took was based on Mobile Devices and Rails by Ernie Miller which happens to work pretty well with how BrowserCMS is setup. 

1. Mobile subdomain

All visitors to a mobile ready BrowserCMS site can see the 'mobile' version by going to the m. subdomain. So if the site was http://www.browsercms.org, the mobile version would be http://m.browsercms.org (sorry, this won't work... Yet!) There are some very important benefits from this, including:

  1. Easily testable - You don't need a mobile device to see what a mobile page is going to look like.
  2. SEO - Googlebot-Mobile (and other mobile search engines) can crawl the mobile version of your site. 
  3. Speed - We can have separate page caches for the full and mobile versions of the site

Each page in the site can be viewed on either the mobile or full version of the site automatically, with no additional work on the content creators part. To make a page mobile friendly though, we need to create some mobile templates...

2. Optional Mobile Templates

For each template on the site, a developer can create a 'mobile' template which can be optimized for a smaller resolution. This could be as simple as removing a left or right hand column, or using different stylesheets. If there is no mobile specific template, then the 'full' template will be used. For developers, this allows for gradual enhancement of an existing site, rather than being forced to convert the entire site to mobile all at once.

For example, consider a CMS site with these template files:

app/views/layouts/mobile/homepage.html.erb
app/views/layouts/templates/homepage.html.erb
app/views/layouts/templates/subpage.html.erb

Here we have defined a mobile template for our homepage, which will be shown to visitors on m.browsercms.org, with visitors to www.browsercms.org will get the full version. But visitors to both sites will get the same full subpage template on any other page that uses it.

 

3. Opt-out Device Redirection

Once you have created your mobile site, the next question is, how do we get visitors browsing on their iWhatevers over to it? User Agent Detection is the key. In the Apache config file, we use Mod Rewrite to to automatically redirect a specific set of User Agents over over to m. when they come the the full version of the site. Here's some sample config from the wiki

RewriteCond %{HTTP_USER_AGENT} "android|blackberry|googlebot-mobile|iemobile|ipad|iphone|ipod|opera mobile|palmos|webos" [NC]
RewriteRule ^/(.*) http://m.browsercms.org/ [L,R=302]

However, since can be horribly annoying for users on mobile devices that want to see the full site, we need to provide them a way to opt out. A simple link that redirects them to the main site, and sets a cookie that basically says 'I want the full site!' does the trick. The  configuration for this is a bit complex currently, but you can see the full example on the project wiki.

Next Steps

As we roll this module out for client sites, we will be looking to refine the module further. As mentioned previously, we view mobile as so important that we anticipate inlining the module into an upcoming release of the core BrowserCMS project as well.