Making a Mobile MVC Music Store Part 5: Designing the Genre and Album Pages

Today I am going to review how I implement the genre and album details mobile web pages. Both pages present layout decisions opportunities needed to maximize the mobile experience. I am also going to utilize touch for a nice effect and plugin.

Part 1 Creating a Common Service Layer
Part 2 Creating the Core Mobile Layout
Part 3 Creating the Controllers and Views
Part 4 Creating the Home Page
Part 6 The Shopping Cart
Part 7 Big Finally

Each Genre page displays a list of albums belonging to the genre. I felt the use of a list like the desktop was a good layout for the mobile context. I really like it because it uses a large enough album thumbnail for a nice touch point. I also really liked it because each it uses a fixed width list item. This means each album will use a known width, creating a nice tile layout that will nicely reformat when the user rotates the phone.

Before I get into the list layout details I want to point out the use of the PageHeader section to render the Genre name in the pages Header tag.

@section PageHeader{

<

h2

class

="category-title"

>

@Model.Name Albums

</

h2

>


}

Not only is it part of the Header tag, it is rendered using all lower case letters. This is done by setting the CSS text-transform property to lowercase. This convention is often used in native Windows Phone 7 apps utilizing the Metro UI. If you are not aware the use of type face is a key component of design that can make an application visually stand out and guide the user. Also note the font-family uses the Segoe UI font if it is present, if not it falls back through a series of san-serif family fonts. Again this is a Metro UI convention. Windows machines have the Segoe UI font, other platforms may or may not have this font, so having a fallback option is important.

h2


{

border-style

:

none;


padding

:

5px 5px 5px 25px;


font-family

: Segoe UI, Tahoma, Arial, Verdana, sans

-serif;


font-size

:

1.35em;


font-weight

:

bold;


margin

:

5px auto 5px auto;


vertical-align

:

middle;


text-transform

:

lowercase;


font-style

:

normal;


line-height

:

100%;


letter-spacing

:

.1em;


text-decoration

:

none;


}

I did not change the core album list layout except for an additional empty SPAN tag. I will talk more about this later.

<

div

class

="genre"

>


<

ul

id

="album-list"

>


@foreach (var album in Model.Albums) {

<

li

><

a

href

="@Url.Action("

Details

", "

Store

",
new { id = album.AlbumId })"

class

="album"

>


<

img

alt

="@album.Title"

src

="@album.AlbumArtUrl"

/>


<

span

></

span

></

a

>


<

a

href

="@Url.Action("

Details

", "

Store

",
new { id = album.AlbumId })"

>

@album.Title

</

a

>


</

li

>


}

</

ul

>


</

div

>


To make this list work in Windows Phone 7 and the modern browsers on the iPhone and Droid I had to apply the following CSS rules. First, as I worked through rendering issues between browsers I realized you need to set the UL padding to 0. This is really a CSS reset issue because each browser has a different default padding rule for an UL. Setting this to 0 ensure the LI will actually cover 100% of the viewable horizontal area.

#album-list, #categories
{

color

:

#9b9993;


clear

:

left;


float

:

left;


width

:

100%;


list-style

:

none;


padding

: 0;
}

Each of the list items needs to have fixed dimensions and be floated to the left. The dimensions ensure you can have confidence in how many will be displayed. For the common mobile contexts this means 2 wide in portrait mode and 3 in landscape. The layout nicely flows as the layout changes.

I also want to point to how I handled the font size for the album title link. I would prefer to make it larger than it is, but some of the album titles were rather long and a larger font does not layout well in this context. Often the titles would run into the next block. At the UL tag style rule, #album-list, I set the font to 12px. In the anchor rule, #album-list li a, I scale this to 1em or retaining the 12px size. This seemed to work the best in this case.

The album cover thumbnail is 72x72, a nice large touch point. Notice I also added rules to create a drop shadow. This won’t be displayed on Windows Phone 7, yet, or other older browsers.

#album-list 

li


{

list-style

:

none;


margin

:

5px 5px 15px 5px;


padding

:

0px;


width

:

125px;


float

:

left;


height

:

130px;


position

:

relative;


text-align

:

center;


}

#album-list

li

a
{

display

:

block;


font-weight

:

bold;


margin

:

0 20 0 20px;


padding

:

3px 10px;


color

:

#9b9993;


position

:

relative;


font-size

:

1em;


text-align

:

center;


}

#album-list

li

a

img


{

position

:

relative;


z-index:

10;


-moz-box-shadow:

3px 3px 3px #666;


-webkit-box-shadow:

3px 3px 3px #666;


-ms-box-shadow:

3px 3px 3px #666;


-o-box-shadow:

3px 3px 3px #666;


box-shadow:

3px 3px 3px #666;


}

#album-list

li

a

h3


{

font-size

:

inherit;


text-align

:

center;


text-decoration

:

underline;


}

#album-list

li

a:hover
{

font-size

:

1em;


color

:

#000000;


}

#album-list

li

a

span


{

margin

:

auto;


display

:

block;


width

:

72px;


height

:

71px;


background

: url(../

img

/vinyl-album

.png

);

position

:

absolute;


left

:

25px;


top

:

3px;


z-index: 5;
}

Finally, look at the final CSS rule, @album-list li a span. This sets the style for the empty SPAN tag I added to the view’s markup. The height and width is set to 71 and 72px, making it match nicely with the album cover. If you look at the img rule applied to the album cover notice there is a z-index of 10 and position set to relative. This will place the album cover above the SPAN tag. The SPAN’s position is absolute.

Here is where I am going with this, I want a record album to ‘fall out’ of the album jacket when a user ‘hovers’ over the album cover. This is actually fairly hard to pull off in a touch context because so many other things can happen on the phones when a user touches the screen.

I took the core code from a tutorial showing how to display your Last.FM playlist using jQuery. I thought the effect was pretty darn cool and it works great in a desktop browser. My testing on my HTC Arrive does cause the album to appear, maybe not as smoothly as I would like though. But it’s a neat animation that placed into a little jQuery plugin. I am thinking about improving this with more animation.

$(document).ready(

function

() {

//...



$(

"#album-list li a"

).albumPeak();

});

jQuery.fn.albumPeak =

function

(options) {

var

settings = {
showLeft:

"60px"

,
hideLeft:

"25px"


};

if

(options) {
$.extend(settings, options);
}

// return jQuery elements to allow chaining


return

this

.each(

function

() {

var

target = $(

this

);

target.bind(

"mousedown touchstart"

,

function

(e) {
$(

this

).children(

"span"

).stop(

true

,

true

)
.animate({

"left"

:

settings.showLeft

}, 500);
});

target.bind(

"mouseup touchend"

,

function

(e) {
$(

this

).children(

"span"

)
.animate({

"left"

:

settings.hideLeft

}, 500);
});


});
}

This is as good of a screen shot as I could take using the Opera Mobile browser on my desktop. The trick here is to animate the SPAN’s CSS left property to 60px. When the mouse or touch leaves the album the left property is set back to 25px, making it hidden from view again.

Now for the Album details page. Here I chose to make the album title rather large so the user can easily read it. I also made the album cover at least 200 pixels wide. I recommend having a properly sized product image instead of pixilating the image like I have done in this example. But you do want to make sure all your images are properly compressed and a no larger than 25kb. Mobile browsers do not locally cache resources, such as images, CSS or JavaScript files if they are over 25kb. I am not necessarily monitoring those rules at this point in the project lifecycle. But you should make sure you check this before going to production.

I have been using a Flyleaf album cover for this demo. I wanted to have a real cover for my sample. The original MVC Music site uses a placeholder album cover, an artifact of the old I Buy Spy sample application. That just did not feel right to me. But at the same time I did not want to spend a lot of time downloading covers for the sample, etc.

I am a fan of using list for just about everything now. The details page is another UL with LI for each detail displayed on the page; image, Genre, artist name, price and purchase button. The genre name is a link to the parent genre, helping the user to go back to the previous page.

<

ul

id

="album-details"

>


<

li

><

h3

>

@Model.Title

</

h3

></

li

>


<

li

class

="album"

><

img

alt

="@Model.Title"


src

="@Model.AlbumArtUrl"

width

="200"

/></

li

>


<

li

><

em

>

Genre:

</

em

>

@Html.ActionLink(Model.Genre.Name,
"Browse", "Store",
new { genre = Model.Genre.Name }, null)

</

li

>


<

li

><

em

>

Artist:

</

em

>

@Model.Artist.Name

</

li

>


<

li

><

em

>

Price:

</

em

>

@String.Format("${0:F}", Model.Price)

</

li

>


<

li

>

@Html.ActionLink("Add to cart", "AddToCart",
"ShoppingCart", new { id = Model.AlbumId },
new { @class = "add-cart"})

</

li

>


<

li

></

li

>


</

ul

>


The following CSS rules manage the layout so it renders nicely in the various platforms. There is nothing terribly exciting about these rules. I did make the Add to Cart button fairly large. Again this is to make it a good touch point. Besides soft-keyboards small buttons on a touch interface drive me nuts. So I want to lead by example and make buttons touchable.

I did not make the button use the entire width of the browser. I may change that before I am done with the site because this makes it even easier to touch.

ul


{

margin

:

0px;


}

#album-details
{

width

:

100%;


padding

:

0px;


}

#album-details

li


{

margin

:

0px;


width

:

100%;


line-height

:

1.65em;


font-size

:

1.5em;


list-style

:

none;


}

#album-details

li

em


{

margin

-

left

:

75px;


margin

-

right

:

20px;


}

#album-details

li

.album


{

text-align

:

center;


}

#album-details

li

h3


{

margin

:

5px 10px 10px 10px;


font-size

:

1.5em;


text-align

:

center;


}

#album-details

li

img


{

text-align

:

center;


-moz-box-shadow:

8px 8px 8px #666;


-webkit-box-shadow:

8px 8px 8px #666;


-ms-box-shadow:

8px 8px 8px #666;


-o-box-shadow:

8px 8px 8px #666;


box-shadow:

8px 8px 8px #666;


}

#album-details

li

a, #album-details

li

a:visited
{

text-decoration

:

underline;


color

:

#000000;


}

#album-details

li

a:hover
{

font-style

:

italic;


}

a

.add-cart

, #album-details

li

a

.add-cart


{

padding

:

5px 10px 5px 10px;


color

:

#FFFFFF;


font-size

:

1.5em;


background-color

:

#333333;


border-style

:

solid;


border-width

:

thin;


border-color

:

#999999 #333333 #333333 #999999;


float

:

right;


margin

-

right

:

50px;


margin

-

top

:

5px;


margin

-

bottom

:

15px;


text-decoration

:

none;


font-weight

:

bold;


}

I hope this was another insightful examination of making the mobile MVC Music web site. The next installment will examine the site’s shopping cart component. That tutorial will provide some good examples of leading the user and how to properly define mobile forms.

Today we looked at some layout decisions that need to be made in the context of touch and the limited view port. I also showed how to add a pretty neat effect that fires in reaction to touching.

Share This Article With Your Friends!