I have seen few discussions floating on sitecore forums regarding the best way to implement a mobile site in sitecore. There are many different ways to implement mobile site in sitecore. I will try to share few of the ways which we have implemented based on different requirements and architecture for a site. Sitecore mobile site implementation is covered in a three post series, where each posts covers different ways to implement mobile site.
3) Using different devices – Part 3 (I am working on it will be released soon.)
This post is Part 1 and shares information about sitecore mobile site implementation where the content tree is shared with other site for e.g. desktop site and mobile site are one. The requirements for the implementation can be,
– Content should be shared between mobile site (http://m.mysite.com/) and desktop site (http://mysite.com/).
– Sub-domain should be used for mobile site for e.g http://m.mysite.com/
So let’s first start with creating a device and then layouts and sublayouts.
What is a Device?
Devices represent different types of Web clients that connect to the Internet and place HTTP requests to other connected devices, such as Web servers. Each device represents a different type of Web client. Each device can have unique markup requirements. The layout engine applies the presentation components specified for the context device in the layout details of the context item.
Developers use devices to format the context item using different collections of presentation components for various types of Web clients.
Above definition is taken directly for Presentation Component Reference.
The first thing while implementing a mobile site would be to define a new device. A new device is created at “/sitecore/layout/Devices/”.
Below table provides information about the fields present on the “Device” template and their usage.
|Default||If checked it would be default device for all the items of a site.|
|Fallback device||Select a device, in case if an item does not have required device layout it will fallback to the device selected in this field. Usually “Default” device is selected.|
|Capabilities Type – Type, Assemblies||You can also apply your own custom logic (class reference) to determine the type capabilities.|
|Browser agent||Sitecore automatically detects the browser agent and tries to match it with the value of this field, if a match is found rendering would be done based on that device.|
|Query string||Use query string parameters for kicking in a particular device for e.g. www.mysite.com?m=1.|
|Default Simulator||Specify the default device simulator for a device.|
Layouts and Sublayouts
For mobile site we need to create separate layouts and sublayouts as the design of the mobile site may vary compared to desktop site.
Adding device to presentation details
Now for a particular page template assign the mobile layout to mobile device under presentation details. Make sure you do this on standard values of the template.
As the requirement is to have a different sub-domain for the mobile site which is a more cleaner approach as compared against query string approach (m=1). We need to use multisite approach of sitecore and tweak web.config as below,
Make a new entry for the mobile site at <sites>. Make sure you add attribute “device” and its value to the mobile device name that you have defined at “/sitecore/layout/Devices/”, in our case it would be “Mobile”.
Also the entry should precede the entry for default website.
The best part about this approach is you do not have to define many devices and populate the Browser Agent field with the user agent strings. Also it is cleaner in terms of SEO realization.
That’s it you now have a sitecore mobile site. If you have doubts post your comments and I will reply to them.