Mobile and device sites with Sitecore

Everyone wants a mobile site, or at least they want their digital presence to reach as many users on as many devices as possible -- and work well.

Often a client will already have a website that works for them, usually with a content management system behind it. The challenge is how to make best use of the available budget to improve the user experience on a mobile or other device.

Some great summaries of the options have become available recently, including talks at this weekend's StandardsNext conference and various articles (see 'sources' below). And each suggested option can act as a viable solution, depending on what you are trying to achieve.

1. Create a device specific App
2. Create a device specific site
3. Make your website responsive to different devices
4. Make your website adapt to different devices

Rachel McCollin has looked at how to approach these options with WordPress using themes and plugins. Similarly, Sitecore can help when creating sites that work for devices beyond the desktop. Using device detection with WURFL or a similar service, you can find out more about your users' device and screen size. Sitecore then allows you to set different presentation layers for 'devices' that you define based on any of these properties. This means there are lots of options available for improving the experience for users on a mobile, tablet or other device.

1. Create a device specific App

There are certainly scenarios when building a device specific App is still the best solution, but this requires technology native to the device such as iOS or Android, so is outside the scope of Sitecore.

2. Create a device specific site

The obvious option is to create a new site within your Sitecore solution which you can send mobile users to as m.yourdomain.com or yourdomain.mobi. This is great if you want users to have a completely different experience but is also likely to increase the work involved both in development and for CMS users. With Sitecore you could find ways to re-use content using this method but you need to maintain a separate sitemap tree. If you want to create a new page on both the website and mobile site you will have to duplicate the process; it might also be possible to re-use components but, in general, the two need to be managed separately. If the website and mobile site are not too different, this might not be the most efficient way to achieve your aims.Also note that, when implementing this option, you should always make sure users have a way to get back to the main website so they can access the additional functionality if they want to.

3. Make your website responsive to different screen sizes

If the website has been designed and built to be responsive to changing screen sizes, this may be sufficient to account for mobile use; if your content and images will rearrange themselves nicely for a different screen size, the experience of using your website on a smaller device may well be good enough.

However, there are other considerations to take account of, beyond screen size. Users are likely to use fingers rather than a keyboard and mouse to interact with the site, and you should account for this. They may also have lower bandwidth. Client side responsive design techniques using media queries, html5, CSS and JavaScript can go a long way in tailoring the experience to a device, but in some cases the server side can help you do a bit more.

4. Make your website adapt to different screen sizes

As mentioned, Sitecore enables you to set up 'devices' and give them different presentation details. Combined with the client side techniques mentioned above, this gives a lot of scope for optimising what the user sees. You could remove non-essential components from the mobile device presentation, or swap for a mobile-optimised component using the same content item but perhaps with smaller images, less content and bigger buttons. You only have one set of pages to maintain but you can tailor the page to the device.

As with option 2, you need to ensure the user has a way to access the full set of features, but if you don't set specific presentation details for a device it will fall back to the desktop version. This means an iterative approach will work well -- you can tailor the appearance of some key pages for mobile at first and add others later.. This is an effective way to make the most of what you have already while still improving the experience for a mobile audience.

No lack of options then!

Sources

A nice article on the options : http://www.lukew.com/ff/entry.asp?1509
Standard Next : http://standards-next.org/
Adapt and respond mobile-friendly layouts : http://www.slideshare.net/redux/adapt-and-respond-mobilefriendly-layouts-beyond-the-desktop
Adaptive images : http://adaptive-images.com/
Wordpress for mobile development : http://compass-design.co.uk/cmses-go-mobile-harnessing-wordpress-for-mobile-development/


Tiny Terrors – re-writing an iPhone App in HTML