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.

#html5