Setting up mobile sites

jefffis edited this page Jan 22, 2013 · 12 revisions
Clone this wiki locally

BrowserCMS allows any page to be served in a mobile optimized format for specific mobile devices. Pages can have mobile optimized templates that can reduce their download weight and layout for reduced screen/bandwidth platforms.

It's worth noting, that some features will not work in production unless you are using Apache/mod_rewrite and can configure subdomains/redirects to handle automatically redirecting users to specific subsites.

This guide is for v3.5.x.

Setup

Things you will need to do:

  • Create Mobile templates
  • Configure the Production server with a m. subdomain.
  • (Optional) Configure the Cache directories

1. Create Mobile Templates

For each page template, you can create a parrallel mobile version. Assuming I had a template app/views/layouts/template/subpage.html.erb, I can create a mobile version of this template like so:

$ rails g cms:template subpage --mobile

Then make any necessary edits to 'mobilize' it (i.e. remove sidebars, image, etc). Once a page has mobile template, the 'View as Mobile?' toggle will appear on the toolbar. This will allow you see change between the mobile and desktop templates.

1a. Add Full/Mobile Site links

In production, the site should configured to automatically redirect users on mobile devices to the mobile subdomain. However, they may still want to visit the full site. To do this, you can add links to your mobile/full site template toggle between the two sites with the following helpers:

<%= link_to "See the Full Site", full_site_url %>
<%= link_to "See the Mobile Site", mobile_site_url %>

Note that to work, these require configuration at the Web Server layer (i.e. Apache) to handle setting cookies (see Configuring Apache below).

2. Configure the production server with an m. subdomain

Working locally, we recommending a server like Pow (see Setting up Pow below) that can automatically handle subdomains. In production though, you will need to set up a m. subdomain. See Configuring a Mobile Subdomain for Apache for details on how to do this.

2a. Configure the development server with an m.subdomain.your-project.com subdomain

If you're working on a development server with multiple subdomains, you need to configure the app to work within this different environment. However, it's pretty simple -- just add the following in your environments/development.rb file:

config.consider_all_requests_local = true
config.action_dispatch.tld_length = 2

You might need to restart apache (or whatever you are running) to force the changes through.

3. Configuring the Cache Directories

By default, there are two separate cache directories for both full page and mobile versions of the site, with reasonable defaults. To change where BrowserCMS writes out its mobile and/or full page cache, you can specify new locations via:

# config/environments/production.rb
YourSite::Application.configure do
  config.cms.mobile_cache_directory = File.join(Rails.root, 'public', 'cache' 'mobile-site')
  config.cms.page_cache_directory = File.join(Rails.root, 'public', 'cache', 'desktop')
end

4. Testing in Development

Using webrick (or other Rails servers) locally in development, you will be able to develop and test mobile templates. However, the mobile subdomains will not work. To enable those, you have two options:

4a. Use Pow

Working in development requires subdomains to be enabled locally. If you set up POW, you can use the basic subdomains.

Steps:

$ gem install powder
$ cd your_project
$ powder link

This will make the following subdomains available for testing.

4b. Use Apache/Passenger in development

If you want to test out the redirection in development, you will need to setup Apache/Passenger locally. This is probably not worth the trouble in 99% of cases, and can just be tested in production/staging.

The reason is that User Agent redirection is configured via Apache. See the 'Development' apache.conf file on this page for a sample Configuring-a-mobile-subdomain-for-apache. On OSX, you can can create a new file called /private/etc/apache2/other/your-site.conf

See these instructions for setting up Passenger on OSX.