Pawel Ciucias: Simple Mobile MasterPage

Now in the realm of Mobile web pages, kilo bytes matter; whether it’s because you don’t want your users waiting for your content to render or you hate mobile plan providers who sell 2 gigs worth of data for $50. Whatever the case for a good mobile experience you need to keep what you transfer over the cloud to a minimum. It is safe to say that mobile devices are used for consumption, granted you may be sending text messages and emails, but when was the last time you wanted to push out a new sub site from your iPhone or Andriod? Hopefully never... thus in this example there will be no ribbon, the mobile version of our site will simply be used for consumption.

So let’s get started with our simple minimum mobile master page:

Create a folder to put our MasterPage inside of
Add a module
Rename the module’s sample.txt file to Mobile.master

With our file structure set up, lets open up the Mobile.master page and paste the following over top of the place holder text.

<%@Master Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<%@Import Namespace="Microsoft.SharePoint" %>

<%@Import Namespace="Microsoft.SharePoint.ApplicationPages" %>

<%@Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls"
Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c" %>

<%@Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages"
Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c" %>

<%@Register Tagprefix="asp" Namespace="System.Web.UI"
Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35" %>

<%@Register TagPrefix="asp" Namespace="System.Web.UI.WebControls"
Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35" %>

    <title>

         <asp:ContentPlaceHolder ID="PlaceHolderPageTitle" runat="server" />

    </title>

<WebPartPages:SPWebPartManager ID = "WebPartManager" runat="Server"/>

</head>

<body>

Mobile Master Page

</div>

<div>

<asp:ContentPlaceHolder ID="PlaceHolderMain" runat= "server" />

</div>

        <asp:ContentPlaceHolder ID="PlaceHolderAdditionalPageHead" runat="server" visible = "false" />

<asp:ContentPlaceHolder ID="PlaceHolderPageTitle" runat= "server" visible = "false" />

<asp:ContentPlaceHolder ID="PlaceHolderTitleBreadcrumb" runat="server" visible = "false" />

<asp:ContentPlaceHolder ID="PlaceHolderTopNavBar" runat="server" Visible="false" />

<asp:ContentPlaceHolder ID="PlaceHolderPageTitleInTitleArea" runat="server" Visible="false" />

<asp:ContentPlaceHolder ID="PlaceHolderPageImage" runat="server" Visible="false" />

<asp:ContentPlaceHolder ID="PlaceHolderNavSpacer" runat="server" Visible="false" />

<asp:ContentPlaceHolder ID="PlaceHolderTitleAreaSeparator" runat="server" Visible="false" />

</form>

</body>

With your simple mobile master page made open up the elements.xml file and paste in the following

<?xml version="1.0" encoding="utf-8"?>

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">

  <Module Name="MasterPages" Url="_catalogs/masterpage" RootWebOnly="False">

    <File Path="MasterPages/Mobile.master" Url="Mobile.master" Type="GhostableInLibrary">

      <Property Name="ContentType" Value="$Resources:cmscore,contenttype_masterpage_name;" />

      <Property Name="MasterPageDescription" Value="Default mobil master page" />

    </File>

  </Module>

</Elements>

Deploy your project and you're done you have a simple mobile master page that will render your pages with as little overhead as possible.

Monday 9 July 2012

Simple Mobile MasterPage