Sitecore and mobile phones; it’s a huge topic holding a vague title. It could mean this is a blog post on creating a mobile-specific site somewhere in a content tree, setting up content for ingestion by a mobile app, or even mobile content authoring in Sitecore. Let me rein it in a little and say this blog is about the fastest, and what we consider to be the best, way to get a mobile view of your current website onto the screens of everyone’s smart phones.

I hear the yelling already - that just skinning a site for mobile isn’t a valid mobile strategy, and I agree, it’s not. But I think having a mobile view of your site is a valid first step in creating a full mobile strategy, if only to create momentum in this modern direction.

So we have a full-on website developed in Sitecore, all laid out the way we want and ready to be rendered in any way we please.  Creating a mobile view of this site should be a breeze, right? For the most part, it fortunately is, as long as you have a few things in place. 

We are going to need a centralized point where every page’s lifecycle touches early on. For me, this is a Page Load event on a centralized base page for the rendering of all “full site” web pages. This allows you to easily centralize your logic for “should I be showing the Default view, or Mobile?” You will also want every page’s layout to be specified in the __renderings field (or the “Presentation” menu ribbon) as opposed to being added via treelist or other means. This keeps the developer from having to re-write a mobile version of any logic, ingesting a treelist of callouts to layout on a page to use the mobile version of that callout.

Now we are ready to begin, let’s see what we are up against. For one, new devices are always being released to the public with new browsers, screen resolutions and user agents. To keep tabs on what a request looks like coming from a Droid X vs. iPhone 4s vs. <insert newest greatest smart phone here> is a part-time job on its own! To solve this problem we use the “Mobile Device Detector” (trac.sitecore.net/MobileDeviceDetector) Sitecore shared source module and the WURFL database.  This will make a trivial task out of figuring out not only what kind of device is requesting a page on your site, but what its manufacturer is, what resolution its screen is, what version of what software it’s running, etc. WURFL is a veritable mobile device goldmine of information, and with it you could get as granular as having a specific rendering for devices that are mobile, not a tablet, with 800x600 pixel resolution and are manufactured by Motorola (not that you would, but it’s nice to say you can). 

As far as screen resolutions go, I have to note that having a responsive design that reacts to varying resolutions is a great approach for a site intended to render on varied mobile devices with wide spread resolutions and pixel densities (http://www.abookapart.com/products/responsive-web-design). Note that responsive design only deals with the layout of pages at different sizes, while the mobile device in Sitecore can render completely different HTML per device.

Great, now we have the mobile device detector installed and know what kind of device is requesting a page on our site, now what?  Now we do a couple standard Sitecore things:

• Create a device for mobile with a rule (Mobile Device Detector adds the ability to choose rendering device based on rules) to encompass the desired mobile devices.
  • Add a proper fallback device (usually “Default”).
• Setup a new site node in the web.config to respond to a host header characterizing the mobile site (usually “m.sitename.com” as opposed to “www.sitename.com”).
  • Note not to setup the default device as your new mobile device, we will leave the device up to the Mobile Device Detector.
• Create a mobile base layout item and aspx file.
• Create any mobile-specific callouts or modules you want on your mobile site as Sublayouts.
• Setup the standard values of your page templates to use the new mobile base layout, and any applicable sublayouts for the mobile device.

Now we are getting close! We have Sitecore ready and willing to render mobile versions of any page through your mobile base page layout. To test this, remember, you can use the query string param ?sc_device=<device name>. The last piece to the puzzle is taking care of every situation with respect to which site is being accessed, with what viewing preference, and on what device. This will be what dictates when to render a full page versus a mobile page, when to redirect someone to the “www” site or to the “m” sub domain. 

In most cases it is best to create an interstitial page when switching from mobile to full site to ease the jolt of seeing a different layout. Also, most sites will have a “view full site” link somewhere in the mobile base page, and vice versa in the full site.  Here are all possible scenarios of a request coming to your site, given that you have a link option to view full site or mobile site, you have created an interstitial page and not all pages have mobile layout defined:

• Without a viewing preference set (cookie) to mobile or full site
  • Request a page without a mobile layout defined
    • On www.
      • On a mobile device - redirect to m. and follow  rule below
      • On a computer - render the page using the default device
    • On m.
      • On a phone - put URL in session and redirect to interstitial page
      • On a computer - redirect to www.
  • Request a page with mobile layout
    • On www.
      • On a phone - redirect to m.
      • On a computer - render the page using the default device
    • On m.
      • On a phone - render the page using the mobile device
      • On a computer - redirect to www.
  • Select "View Full Site" on m. - redirect to www. and set a cookie to "Default"
  • Select "View Mobile Site" on www. - redirect to m. and set a cookie to "Mobile"
• With viewing preference (cookie) set to Mobile
  • Request a page without mobile layout
    • On www.
      • On a phone - redirect to m. and follow  rule below
      • On a computer - redirect to m. and follow rule below
    • On m.
      • On a phone - put URL in session and redirect to interstitial page
      • On a computer - put URL in session and redirect to interstitial page
  • Go to a page with mobile layout
    • On www.
      • On a phone - redirect to m.
      • On a computer - redirect to m.
    • On m.
      • On a phone - render the page using the mobile device
      • On a computer - render the page using the mobile device
• With cookie set to Default
  • On www.
    • On a phone - render the page using the default device
    • On a computer - render the page using the default device
  • On m.
    • On a phone - redirect to www.
    • On a computer - redirect to www.

Given the actions above, there are a few things that the Mobile Device Detector does not get you. The main thing being if you are on a phone and request a page on www that does not have mobile layout, you will load in the full site base page and not know you are on a phone. To find out if you are on a phone you can use this piece of code, specific to the Sitecore Mobile Device Detector, to find the device first attempted to render through via the rules available on all device items (note this was reflected from the DLL given in the module):

private static DeviceItem GetRulesDevice(Database database)
{
    DeviceItem[] all = database.Resources.Devices.GetAll();
    DeviceItem[] array = all;
    for (int i = 0; i < array.Length; i++)
    {
        DeviceItem deviceItem = array[i];
        RuleContext ruleContext = new RuleContext();
        foreach (Rule<RuleContext> current in RuleFactory.GetRules<RuleContext>(new Item[]
        {
            deviceItem.InnerItem
        }, "Conditions").Rules)
        {
            if (current.Condition != null)
            {
                RuleStack ruleStack = new RuleStack();
                current.Condition.Evaluate(ruleContext, ruleStack);
                if (!ruleContext.IsAborted && ruleStack.Count != 0 && (bool)ruleStack.Pop())
                {
                    return deviceItem;
                }
            }
        }
    }
    return null;
}

With this piece of code, and the list of situations above, you can create a mobile base page and default device base page that function according to what we feel are best practices for a site with a mobile view. 

Note that the Mobile Device Detector allows for a “View Full Site” link to have a query string variable for sc_device=default and persisted=true. This will show the site in whichever sc_device you choose for the rest of the session, but it will not allow you to switch to another device until you clear cookies or start a new session. For this reason we had to create our own cookie to handle these cases (as noted above).

In summary, making a mobile view of a well-made Sitecore site is not an insurmountable task, and can be attacked in a generic way for any type of site. Nearly all major sites have at least some mobile device strategy, and adding a mobile view of existing content is an easy first step.