If you have some experience developing with Sitecore you know that a best practice is to separate the components of a page into modules that you could reuse through the website, even between device versions of the site if the module is appropriate. However you may have to separate different layouts for desktop site and mobile site to provide the best experience to either one.
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 |
<%=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.
Note: This post doesn’t take into consideration responsive design that you could use to provide a different presentation for your site when is visited through a mobile device, that’s other topic. J
Sources:
- www.viralblog.com/mobile-and-apps/11-incredible-mobile-marketing-statistics/
- blog.codecomputerlove.com/2012/03/07/mobile-and-devices-with-sitecore/