Metro List View double line (ep. 2) – from PSD to HTML

I mentioned I was going to shelve this project for now, but I started thinking about implmenting the same style and layout in HTML.

“Metro in HTML?!”

Yes, I said it.  And its really not too far of stretch, especially when you think of the style of menus, focus on typography and the print and infographic-based design concepts. That’s very “webby”.

If you remember from the previous post, the goal was to match a Silverlight for Windows Phone page to the PSD Design Templates provided by the Windows Phone Design team. By the end of it, I was able to get very close only truly stumbling on the lack of font tracking or charcter spacing in Silverlight on the Windows Phone.

Instead of waiting for Silverlight 5 (which includes charcter spacing) to get on the Windows Phone (next year?) I thought I would try the same exercise in a technology that does in fact allow you to set font tracking – CSS.

You can see the results in action here -> Metro Line View double line in HTML.

Or check out the image below:

browser comparison of Metro List View in HTML

A few notes on the implementation:

– I started the project using the HTML5 Boilerplate is a project template.  It includes a CSS rest and normalization and a load of other useful features.  I expect to use it again in the future.

– There is no special CSS casing for different browsers.  I wanted to serve them all the same plate and see how they would render.

– I switched to “Segoe UI” from “Segoe WP” which works much better in the browser (which makes sense, of you think about it) so there are slight chracter differences no matter how close the layout.

– Letter-spacing is tricky (especially since the fonts are not the same).  It appears that in the first line item “Text” could use less space and “example” could use more.  I went with a happy medium for all.

– I went the easy route and decided to use absolute positioning and pixel values since the exact heights were important. In a real implementation, I’d likely need to move to a relative solution.

Relative values especially become important when you start thinking of different screens and devices. In the photo below you can see the test page loaded in an iPhoen 3GS, iPhone 4 and Samsung Focus (WP7 NoDo).

Metro List View in html on phones

The viewport is set to device-width and the initial scale is set to 1, the difference is the absolute values for font size and spacing mixed with the different levels dpi per screen and browser upscaling.  If I were to switch over to relative values I could get much more consistant results.

This was a fun exercise, but is it the first and last time, I’ll be implementing the Metro design language in HTML?

No, I don’t think so.

2 thoughts on “Metro List View double line (ep. 2) – from PSD to HTML

Leave a Reply