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.
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:
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="Base Layout.aspx.cs"
Inherits="Sample.Sitecore.Web.layouts.Master.Base_Layout" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8">
<title>Sample |
<%=pageTitle%>
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Le styles -->
<link href="/css/bootstrap.css" rel="stylesheet" media="screen, print">
<link href="/css/main.css" rel="stylesheet" media="screen, print">
<link href="/css/jquery.rating.css" type="text/css" rel="stylesheet"
media="screen" />
<link href="/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.:
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="Mobile Base Layout.aspx.cs"
Inherits="Sample.Sitecore.Web.layouts.Master.Mobile_Base_Layout" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Sample - Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/mobile/css/jquery.mobile-1.2.0.css" />
<link rel="stylesheet" href="/mobile/css/main_mobile.css" />
<link rel="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: