Improve Mobile User Experience With an HTML5 Metro UI Tiles
Last Updated -
If you know me you know over the past few years I have been a big fan of Metro UI and the tiles. I have been hacking at doing the Metro UI in web applications for a while now, so there are a lot of things I have learned, and some I have not quite mastered yet. Doing tiles is a big part of Metro and this is a relatively easy trick to pull off using common CSS techniques. I created what I refer to as the FourSquare prototype last summer for my team to build the Moesion home screen.
When I refer to FourSquare in this instance I am referring to the FourSquare Windows Phone 7 application which is one of the best Metro UI applications I have used. I really like the way the home screen works because it gives you 8 big easy to read tiles of the 8 most likely places you want to check in when you open the application. In fact it takes 3 touches, including the tap to open the application to check in, just a great UX in my opinion.
But today I want to talk about how to recreate the tiles on the home panel as well as tiles in general that you can reuse in your web applications. I have found it fairly easy to use various DOM elements to make tiles. Today's examples will utilize LI elements, but I have also used DIV, SPAN and SECTION tags as well. They all work out the same. Each item in the list uses the block-item-large class.
<
ul
class
="block-item-list"
>
<
li
class
="block-item-large"
>
Title</
li
>
<
li
class
="block-item-large"
>
Title</
li
>
<
li
class
="block-item-large"
>
Title</
li
>
<
li
class
="block-item-large"
>
Title</
li
>
<
li
class
="block-item-large"
>
Title</
li
>
<
li
class
="block-item-large"
>
Title</
li
>
<
li
class
="block-item-large"
>
Title</
li
>
<
li
class
="block-item-large"
>
Title</
li
>
</
ul
>
In this example the blocks are what I consider to be large. I also use classes, -medium and -small, to size smaller blocks when needed as well as a -wide we will see shortly for rectangles. In this example I set the border to none and add a shadow behind the tile. The shadow is so I could see what it looks like, typically you would not add this sort of accoutrement in Metro. To make a square set the height and width to the same value, 96 pixels in this case. 96 is a good number to use because it ensures the user has a solid touch point to hit. It is also a multiple of 6, which is a common scale used in Metro layouts.
li
.block-item-large
{border
:none;
cursor
:move;
display
: inline-block;
height
:96px;
width
:96px;
padding
:4px;
margin
:12px 21px 12px 0px;
color
:#FFFFFF;
background-color
:#318AC6;
-webkit-box-shadow:5px 5px 20px 0px #1a1b1f;
-moz-box-shadow:5px 5px 20px 0px #1a1b1f;
box-shadow:5px 5px 20px 0px #1a1b1f;
}
To add to the touch target features the margin that provides adequate spacing between elements. In this example I set the left margin to 0 and the other margins to various multiples of 6 & 3. When you are designing touch targets it is very important to use space between elements to help the user touch the right spot, or provide extremely large targets to touch. I will talk about this at some point in the future.
The final CSS rule that makes the tiles work is using dsplay: inline-block. This lets the tiles line up side by side while retaining their block attributes. I find myself using inline-block quite a bit when doing modern layouts because it gives me the best of both worlds. One advantage it gives me is the ability to do a more fluid layout. In the case of the sample layout I have 10 tiles in a bounding container sporting 500 pixels wide. With the size of each tile and its margin spacing this means that only 3 tiles can line up horizontally. But the inline-block setting allows the tiles to naturally create a new line. In this example that makes 3 lines, 2 with 3 tiles and one with 2 tiles.
The next group of tiles I call medium and they are almost identical to the large tiles except there is no shadow and they are smaller. I also added a white border around them to help them standout. These tiles are 48 x 48 squares. I don't have a -small tile to share today. But I do not recommend smaller than 30 x 30, it makes for a tough target to accurately hit with your finger.
li
.block-item-medium
{border
:thin solid #FFFFFF;
cursor
:move;
display
: inline-block;
height
:48px;
width
:48px;
padding
:4px;
margin
:10px 20px 13px 0px;
color
:#FFFFFF;
background-color
:#318AC6;
}
Finally a wide tile. Again the difference is the tile's dimensions, which in this case are a 2:1 ratio. In my example I choose 84 pixels hight and 168 wide.
li
.block-item-wide
{border
:thin solid #FFFFFF;
cursor
:move;
display
: inline-block;
height
:84px;
width
:168px;
padding
:4px;
margin
:10px 20px 13px 0px;
position
:relative;
color
:#FFFFFF;
background-color
:#318AC6;
}
Creating Metro style tiles using basic HTML and CSS is very easy. Using display inline-block helps you create tiles that not only hold their shape they also naturally cascade across their container to form natural rows and columns. Proper size and spacing helps user have quality touch points so they can successfully use the application. I will make another post soon on how to format inner elements to add icons and titles to the tiles to add more value to the user.