Introduction to Sitecore Mobile Web Development

Once your layouts for mobile have been defined, it is necessary to add them to page templates. For example: think about which existing components you could use on your mobile site. Many small components, like a newsletter subscription module or auto-complete filter of products module, could be reused  - of course, you need to provide different styles which can be done using different header modules for desktop and mobile that use different files for CSS. In the next screenshot, you can see the different mobile modules added to a page template that use a specific header for mobile.

For a desktop site, you could have a base layout as follows:

<%@PageLanguage="C#"AutoEventWireup="true"

CodeBehind="Base Layout.aspx.cs"

Inherits="Sample.Sitecore.Web.layouts.Master.Base_Layout" %>

<!DOCTYPEhtml>

<htmllang="en">

<headrunat="server">

    <metacharset="utf-8">    

    <title>Sample &#124;

        <%=pageTitle%>

    </title>

    <metaname="viewport"content="width=device-width, initial-scale=1.0">    

    <!-- Le styles -->

    <linkhref="/css/bootstrap.css"rel="stylesheet"media="screen, print">

    <linkhref="/css/main.css"rel="stylesheet"media="screen, print">

    <linkhref="/css/jquery.rating.css"type="text/css"rel="stylesheet"

 media="screen"/>

    <linkhref="/css/print.css"rel="stylesheet"media="print">

…

A mobile site’s layout has style references and scripts that help support mobile device requirements, like adaptation to device display, landscape and portrait modes, etc.:

<%@PageLanguage="C#"AutoEventWireup="true"

CodeBehind="Mobile Base Layout.aspx.cs"

    Inherits="Sample.Sitecore.Web.layouts.Master.Mobile_Base_Layout" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">    

    <title>Sample - Home</title>

    <metaname="viewport"content="width=device-width, initial-scale=1">

    <linkrel="stylesheet"href="/mobile/css/jquery.mobile-1.2.0.css"/>

    <linkrel="stylesheet"href="/mobile/css/main_mobile.css"/>

    <linkrel="stylesheet"href="/mobile/css/bootstrap.css"/>

    …

With this, you could begin to build a mobile web version of your current site. However, you’ll need to take several things into consideration:

• You need to provide a web design of your mobile site before you build the mobile version.
• You need to define which components will be shared for the two versions of the site considering the information to be displayed and if the design is similar to both cases.
• It's better to use different images for mobile site, smaller images will improve the performance. If you need to share images for both sites, you need to consider where the image will be displayed and its proportions (height and width) to avoid distort.