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.

Comparison SaaS, IaaS and PaaS

SaaS-IaaS-PaaS-1 SaaS-IaaS-PaaS

SaaS: Software as a Service

Cloud application services or “Software as a Service”(SaaS) are probably the most popular form of cloud computing and are easy to use. SaaS uses the Web to deliver applications that are managed by a third-party vendor and whose interface is accessed on the clients’ side. Most SaaS applications can be run directly from a Web browser, without any downloads or installations required. SaaS eliminates the need to install and run applications on individual computers. With SaaS, it’s easy for enterprises to streamline their maintenance and support, because everything can be managed by vendors: applications, runtime, data, middleware, O/S, virtualization, servers, storage, and networking. Gmail is one famous example of a SaaS mail provider.

For further reading you can visit wiki’s SaaS explanation here

PaaS: Platform as a Service

The most complex of the three, cloud platform services or “Platform as a Service” (PaaS) deliver computational resources through a platform. What developers gain with PaaS is a framework they can build upon to develop or customize applications. PaaS makes the development, testing, and deployment of applications quick, simple, and cost-effective, eliminating the need to buy the underlying layers of hardware and software. One comparison between SaaS vs. PaaS has to do with what aspects must be managed by users, rather than providers: With PaaS, vendors still manage runtime, middleware, O/S, virtualization, servers, storage, and networking, but users manage applications and data. PaaS provides the computing infrastructure, the hardware, and the platforms that are installed on top of the hardware. Similar to the way that you might create macros in Excel, PaaS allows you to create applications using software components that are controlled by a third-party vendor. PaaS is highly scalable , and users don’t have to worry about platform upgrades or having their site go down during maintenance. Users who benefit most from PaaS include companies who want to increase the effectiveness and interactivity of a large staff. For the needs of larger companies and independent software vendors, Apprenda is one provider of a private cloud PaaS for .NET and Java business-application development and deployment.

Some examples of PaaS include Google App Engine [17], Microsoft Azure Services [18], and the Force.com [19] platform.

For further reading you can visit wiki’s PaaS explanation here

 

IaaS: Infrastructure as a Service

Cloud infrastructure services, known as “Infrastructure as a Service” (IaaS), deliver computer infrastructure (such as a platform virtualization environment), storage, and networking. Instead of having to purchase software, servers, or network equipment, users can buy these as a fully outsourced service that is usually billed according to the amount of resources consumed. Basically, in exchange for a rental fee, a third party allows you to install a virtual server on their IT infrastructure. Compared to SaaS and PaaS, IaaS users are responsible for managing more: applications, data, runtime, middleware, and O/S. Vendors still manage virtualization, servers, hard drives, storage, and networking. What users gain with IaaS is infrastructure on top of which they can install any required platforms. Users are responsible for updating these if new versions are released.

For further reading you can visit wiki’s IaaS explanation here

Sitecore Installation

It has been more than 100 times I would have installed sitecore without any issues, but there are always exceptions in technical world. I am sharing one of my sitecore installations error in this post where I was setting up sitecore in my new machine. We (Me & Kiran) lastly figured out that it had nothing to do with sitecore installation but was issue with IIS installation. So after completing sitecore installation if css, images and javascripts are not loading then below details might be helpful.

So if you see a screen as below after your sitecore installation read further with this post. At first look it seems css, images and javascripts are not loading for sitecore and it might have issue with sitecore installation.

Sitecore installation

To nail down the issue we carried out following steps,

1)      Provide necessary folder access right to Network Service account

2)      Used Fiddler which showed HTTP 200 Ok status for all images and resources.

This made us think there should be some issue with IIS so we made a hit to Default website and got the same response where in the css and images were not loading. So it was now clear there is an issue with IIS installation and not Sitecore.

We moved to check which features have not been available on IIS and found that,

Turn windows features on or off => Internet Information Services => World Wide Web Services => Common HTTP Features => Static Content

Was not checked after enabling the feature IIS was up to the mark and my sitecore installation too.

Even the tool tip was giving some hint.

Static content