Making a Mobile MVC Music Store Part 4: Creating the Home Page

At this point in this series I have shown how to build the core site infrastructure for an ASP.NET MVC 3 mobile web site using the Razor View Engine. So far nothing real exciting has happened as far as true mobile web development. Today that starts changing.

  • Part 1 Creating a Common Service Layer
  • Part 2 Creating the Core Mobile Layout
  • Part 3 Creating the Controllers and Views
  • Part 5
  • Part 6
  • Part 7

The desktop MVC Music Site’s home page is composed of the site layout with the header navigation, a list of categories down the left-hand side, a promotional graphic in the center of the page and a list of featured albums below the feature graphic. This layout will not work on a mobile home page.

The first issue is you do not have the horizontal space on a mobile device. The second is dealing with touch. Mobile sites typically have a single column design. You also have to contend with limited vertical space, combined with large enough fonts and touch points to make the page readable and actionable.

These contextual limitations mean you have to face a design/architecture decision, what to place on the site’s home page? In working through this site I tried using the genre or album category list and the featured albums list by themselves. The genre list is probably the most useful choice to place on the homepage because it allows the user to quickly drill into the category they are interested.

A common convention to use in mobile applications is to have a nicely spaced vertical list with arrows on the right-hand side of each list item. Most of the time each list item has a gradient background that changes in response to a user touching it. This most likely comes from the Apple iPhone design guidelines.

I want reiterate my design goal with this application is to follow the Windows Phone 7 Metro UI guidelines. There is no real Metro UI guidelines when it comes to lists, but in many windows phone 7 applications use three predominate styles, plain list and big button images. A third style is a hybrid of a thumbnail image, a title and possibly a few other details.

The Netflix application genres panel is a good example of a plain list. Notice just how clean the panel looks.

The Ebay application utilizes the large thumbnail images. Its easy to use image buttons like these because they provide a nice large touch point area.

One panel to the right Ebay uses a hybrid list, showing a product thumbnail and product details on the right. The entire list item is touchable, taking you to a full detail page.

Initially I have chosen to create a plain list of genres with plans to enhance it. I think adding an album cover thumbnail for a genre is a good idea, but will require some Linq voodoo to select a sample album. For now I chose a simple linq query to eager load the albums for a genre. I plan on tightening that up later.

But for now as each genre is rendered the first album in the list is used to create an album cover to visually represent it.

First a function to retrieve the genres with albums (Yes I know it says random album, I am working on that).

private

List<Genre> GetGenresWithRandomAlbum() {

var genres = storeDB.Genres
.Include(

"Albums"

)
.ToList();

return

genres;
}
The home page’s action method, Index, passes the list of genres to the View.

public

ActionResult Index() {

return

View(GetGenresWithRandomAlbum());
}

In the View the list of Genres is looped to add a new LI to an UL containing the first album’s cover and the genre name. The album cover and genre name are encapsulated in a link to browse the albums in a category.

<ul id=

"categories"

>
@

foreach

(var genre

in

Model)
{
<li><a href=

"@Url.Action("

Browse

", "

Store

",
new { Genre = genre.Name })"

>
<img width=

"32"

height=

"32"

src=

"
@genre.Albums.FirstOrDefault().AlbumArtUrl"

/>@genre.Name
</a>
</li>
}
</ul>

Now I could stop right there, but that would just be boring. I want to start adding touch support functionality. In the case of each list item I want something visible to let the user know what they are about to ‘click’ with their finger.

Before I get too deep into this, I am still working on dealing with touch events. Not all mobile browsers support touch even if the phone is a touch phone. Just look at the Windows Phone 7! If a phone supports touch events it supports the touchstart and touchend events. If the browser does not offer touch events the mousedown and mouseup events are reasonable facsimiles and can often be used.

On the Mobile MVC Music Store I want to change the list item’s background color to a light grey, #CECECE, when it is touched. After the touch is over the background color is reverted back to to white.

$(

"#categories li"

).bind(

"mousedown touchstart"

,

function

(e) {
$(

this

).css(

"background-color"

,

"#cecece"

);
});

$(

"#categories li"

).bind(

"mouseup touchend"

,

function

(e) {
$(

this

).css(

"background-color"

,

"#ffffff"

);
});

I have been trying to study more about how touch is handled in touch device browsers. The more I learn the more I realize I need to know and try.

Before I wrap this entry up I want to review the CSS used in the list. The album image is a 40x40 thumbnail, which makes it a reasonable touch target. Normally you want images to be at least 40x40 to give them enough area to be touched. You also want at least 20 pixels spaced between touch points. In the #categories li img style rule I specified a 24 pixel right-margin. This gives a little more space between the thumbnail and the genre name text.

#categories 

li


{

list-style

:

none;


margin

:

5px 5px 5px 5px;


padding

:

0px;


border-style

:

none none outset none;


border-width

:

thin;


border-color

:

#333333;


/* list-style-image:


url('../img/icons/65-note.png'); */


}

#categories

li

img


{

display

:

inline;


margin

-

right

:

24px;


}

#categories

li

a
{

display

:

block;


font-weight

:

bold;


margin

:

0 20 0 20px;


padding

:

3px 10px;


color

:

#333333;


position

:

relative;


font-size

:

2.0em;


text-align

:

left;


text-decoration

:

none;


}


The genre name text is rather large compared to its desktop counterpart. For mobile sites you want to use larger than normal fonts. In the case of a genre name I used 2 em. If you are not familiar with em, it is a scalable unit equal to the fixed font-size of the containing element. So if the Body has a fix font-size of 12px a 2em font would be 24px. The em is a common unit because it is scalable, which works great across browsers and platforms. The genre name is designated as 2em, making it a nice large readable and touchable item on the page.

So that’s it for today. I have shown you how to make some common mobile design decisions you need to make for the majority of mobile sites and applications. These include what to show on the home page and how. I also demonstrated some basic touch event processing. Finally I reviewed some CSS Rules to arrange touch point spacing and font-sizes.

Tomorrow, assuming my schedule cooperates, I will be reviewing decisions related to the category and album detail. I will follow that up with the shopping cart where we will have to study mobile forms. Then I plan on reviewing some overall style decisions followed up with a super secret finally.

Share This Article With Your Friends!