Making a Mobile MVC Music Store Part 2: Creating The Core Mobile Layout

Yesterday I started a new series to build a mobile web version of the MVC Music Store reference application. In part 2 of my series of making a mobile version of the MVC Music store I am going to create the core mobile layout. This requires adding a new MVC 3 Web Site to the Music Store Solution.

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

>


The next section is the main body of the page and contains the @RenderBody section call. Again this is a Razor convention to render the primary content for each page.

After the main content section is a footer tag. This will get more interesting later in this series. Notice I used the id and class name 'appBar', just a tease. I am using this section as a bottom navigation. I like putting the navigation at the bottom of a mobile web site because users tend to hold their phone's so their thumb is along the device's bottom. Placing the navigation at the bottom makes it a little more ergonomically friendly to navigate.

Lastly are the script file references. They are all included at the bottom of the page. This is a web best practice I see violated time after time in code samples and demos. Please if you get anything out of this series please place all script references at the bottom of your pages. This will give your site's a huge performance edge. The only script you should reference in your header is a polyfil script like modernizr.

Again notice there is an optional @RenderSection to allow content pages to inject page specific scripts.

Create CSS Reset

I am not going to post the CSS code here, its just too much for a blog post. I will post the download of the project before week's end, so just bear with me. But if you are not familiar with CSS resets they basically give you a common base to start your style rules. Each browser sets their default stylesheet and they all vary, making it more complicated to manage the way a page is rendered. Defining a base set of CSS rules you control abstracts these varying rules to something you are in complete control.

One thing I chose to do is set the font-family to use the Segoe UI font. This is the primary font used in the Windows Phone 7 Metro UI and I want to try and style the site using the Metro UI theme. If a device does not have the Segoe UI font install it falls through a series of other suitable fonts.

font-family

: Segoe UI, Tahoma, Arial, Verdana, sans

-serif;


As I go through various site features I will cover the various rules to make the site look like I want.

Common js Files

For now I am keeping the default JavaScript files that come with the MVC 3 template. But I have added the latest jQuery release, version 1.5.1. I also added the Modernizr library and a site specific script, jquery.mvc-music.js. As I need custom plugins I will add those files and explain the decisions behind them.

Before I finish the site I will remove any unused scripts. For example, right now I don't use any of the Microsoft validation scripts and will most likely remove those.

At this point I have a decent starting foundation for the site. Now I need to start adding the controllers and views to make the MVC Music store happen. Tomorrow I will post those details.

Share This Article With Your Friends!

Googles Ads Facebook Pixel Bing Pixel LinkedIn Pixel