Sitecore mobile website – Shared content tree structure – Part -1

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.

1)      Shared content tree structure – Part 1

2)      Separate content tree structure – Part 2

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.

Implementation

 

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.

Creating Device

The first thing while implementing a mobile site would be to define a new device. A new device is created at “/sitecore/layout/Devices/”.

sitecore device-1

sitecore device-2

Below table provides information about the fields present on the “Device” template and their usage.

Field 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.

 

Web.config

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.

sitecore mobile web config

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.

One thought on “Sitecore mobile website – Shared content tree structure – Part -1

  1. Hi Brijesh.

    Thanks for the article. I’ve just found it and as I can see part 3 has not be written yet 🙂 Anyway, I’m wondering how the 3rd option differs from the 1st option you have mentioned at the beginning of the post. I would say that these two options are equivalent, aren’t they?

Leave a Reply

Your email address will not be published. Required fields are marked *