Why a Dedicated Mobile Web Site?
I am a proponent of dedicated sites to each client platform. In other words there will be two unique web site projects, not one with intermingled views and controllers. This will only lead to confusion and a closed mind when it comes to architecting the user experience. Each site serves a specific purpose and will be used in different contexts.
I know there is a lot of buzz right now around Responsive UI, which I am not a big fan. The idea behind Responsive UI is to design your site to simply scale to the window size and still be usable. While the underlying purpose is noble; it forgets a key aspect of UI design, proper information architecture. Here you architect your user experience to match the context it is used. User context is a primary consideration when architecting your client applications, which drives the need for a more dedicated UI client. In today’s world this is changing quickly with smartphones, tablets, televisions and good ole fashion computer desktops.
Create Site
Let’s get to creating the Mobile Music Store, I call the new MVC 3 site Mobile.MvcMusicStore. After the site is created you need to add a reference to the Model.MvcMusicStore class library we created yesterday. The MVC 3 project template creates a starter site structure with some initial controllers and views along with supporting folders for CSS, JavaScript, etc.
For now I am going to keep those initial folders in place, but I am going to add some new folders that I feel are a bit more efficient.
Out of the box the MVC 3 template creates a scripts folder for JavaScript files, I changed that to js. The CSS files are found in the Content folder that also contains the Images folder. I created root folders for each of these, css & img. The Content folder structure seems odd to me. Once you add these folders copy the site’s initial site.css file to the css folder and any images to the img folder. There is also a Themes folder in the Content folder, I am going to leave that alone for now.
I also use slightly shorter folder names to make referencing the resources less taxing. I know it may be petty, but the longer the Url the more data has to be transferred on each request and the larger the markup has to because it contains the slightly longer Urls. But in the mobile game bandwidth is precious even today. 4G is not ubiquitous yet and even when it is who’s to say it will actually meet our demands. So in an effort to make your site more efficient use shorter Urls wherever possible. Conserving bandwidth is a cardinal rule when it comes to mobile, data plans are expensive and usually capped. So be courteous to your users.
Create Master Page
Now that we have the its time to layout the site Master or _Layout page. In the site’s Views\Shared folder you will find a _Layout.cshtml file. This is file is the Razor view engine equivalent to a Master page. Since its 2011 I am going to create an HTML5 layout.
I decided to go all out and start from the HTML5 boilerplate, making modifications as I saw fit. The only things I really changed is the reference to files to use the @Url.Content and the user of the ViewBag.Title in the Title tag.
I do want to point out two mobile features included in the HTML5 boilerplate. First is the use of the viewport Meta Tag. This is very important to include in any mobile centric web site. I am not going to go into details today about the viewport, but instead point you to an excellent article the Windows Phone team posted a few weeks ago on the viewport.
<!
DOCTYPE
html
>
<
html
>
<
head
>
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<
meta
http-equiv
="X-UA-Compatible"
content
="IE=edge,chrome=1"
>
<
title
>
@ViewBag.Title
</
title
>
<
meta
name
="description"
content
=""
>
<
meta
name
="author"
content
=""
>
<!-- Mobile Viewport Fix
j.mp/mobileviewport & davidbcalhoun.com/2010/viewport-metatag
device-width : Occupy full width of the screen in its current orientation
initial-scale = 1.0 retains dimensions instead of zooming out if page height > device height
maximum-scale = 1.0 retains dimensions instead of zooming in if page width < device width
-->
<
meta
name
="viewport"
content
="width=device-width; initial-scale=1.0;"
>
<!-- Place favicon.ico and apple-touch-icon.png in the root of your domain and delete these references -->
<
link
rel
="shortcut icon"
href
="@Url.Content("
~/
favicon
.
ico
")"
>
<
link
rel
="apple-touch-icon"
href
="@Url.Content("
~/
apple-touch-icon
.
png
")"
>
<
link
href
="@Url.Content("
~/
css
/
Site
.
css
")"
rel
="stylesheet"
type
="text/css"
/>
@RenderSection("Header", required: false)
<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
<
script
src
="@Url.Content("
~/
js
/
modernizr-1
.
6
.
min
.
js
")"
></
script
>
</
head
>
The next tag is the link to the apple-touch-icon tag. This meta tag allows you to specify the icon used when a user pins a web site to their iPhone’s desktop. The icon is a 57x57 image, although I have seen some larger versions being used. I have not found an equivalent for the apple-touch-icon for the Droid or Windows Phone 7. I hope these platforms will support a similar tag soon. For now when a user pins a site to start on the Windows Phone 7 it uses a screen shot of the page instead of a specified image. So it would be a much better user experience is an icon could be specified.
The @RenderSection(‘Header’, require: false) gives content page the freedom to insert page specific page header tags. This is the Razor equivalent of a ContentPlaceHolder.
Finally I want to point out the use of the Modernizr library. This is a great little javascript library that will polyfil gaps in older browsers to make HTML5 semantic tags work. It also provides a battery of properties you can check to see if the browser supports HTML5/CSS3 features. This is the only JavaScript file you should include in the site’s header only because you need it to apply any needed polyfils before the markup is loaded. I plan on writing more about Modernizr at a later time.
Now onto the actual page markup. The page starts with a header tag which includes an H1 tag with the site name and an optional PageHeader section. The PageHeader section again gives the content pages the ability to inject content in the page’s visible header. I think this is just a good practice based on experience. As you will see in the Mvc Music site I inject a secondary header tag.
The header tag is a new HTML5 semantic tag. This tells the browser and other parsers this content is a header and will contain things like H1 tags and other title type content. Using the Modernizr library means you can apply style rules to this and other HTMl5 semantic tags.
<
body
>
<
header
class
="title-header"
>
<
h1
>
MVC Music Store
</
h1
>
@RenderSection("PageHeader", required: false)
</
header
>
<
div
id
="container"
>
<
div
id
="main"
>
@RenderBody()
</
div
>
</
div
>
<
footer
class
="appBar"
id
="appBar"
>
<
nav
>
<
ul
>
<
li
><
a
href
="@Url.Content("
~/
")"
>
<
img
src
="@Url.Content("
~/
img
/
home
.
png
")"
alt
="Home"
width
="32"
height
="32"
/></
a
></
li
>
<
li
><
a
href
="@Url.Content("
~/
Store
/
")"
>
<
img
src
="@Url.Content("
~/
img
/
headphone
.
png
")"
alt
="Categories"
width
="32"
height
="32"
/></
a
></
li
>
<
li
><
a
href
="@Url.Content("
~/
CartSummary
")"
>
<
img
src
="@Url.Content("
~/
img
/
container
.
png
")"
alt
="Shopping Cart"
width
="32"
height
="32"
/></
a
></
li
>
<
li
><
a
href
="http://localhost:26644/"
>
<
img
src
="@Url.Content("
~/
img
/
computer
.
png
")"
alt
="Desktop Site"
width
="32"
height
="32"
/></
a
></
li
>
<
li
><
a
href
="#"
>
...
</
a
></
li
>
</
ul
>
</
nav
>
</
footer
>
</
body
>
<
script
src
="@Url.Content("
~/
js
/
jquery-1
.
5
.
1
.
min
.
js
")"
type
="text/javascript"
></
script
>
<script src=
"@Url.Content("
~/js/jquery.mvc-music.js
")"
type=
"text/javascript"
>
</
script
>
@RenderSection("scripts", required: false)
</
html
>
#mobile #mobileapp
