For my first real Windows Metro style app, I decided to port my Area Code Look Up app from the phone over to Windows Metro.

The word “port” is somewhat misleading: there’s not really a lot of code sharing: the phone version is Silverlight and the Metro version is JavaScript. Yes, JavaScript.

Area Code Look Up on Windows Phone 7

Area Code Look Up was my first published app for Windows Phone and has been quite successful: it’s been downloaded just over 12,000 times.

It’s free and, if you’d like to try it out for yourself, here’s the link to get it.

For reference, this is what the Area Code Look Up app looks like on WP7.

Very clean and very adherent to the Metro design guidelines.

However, when I started writing the Windows 8 version, something did “feel” right.

A Slate is Not a Phone

Really, at the core of all this is: real estate. Phones, by their nature, are always going to small and portable. As such, they will have smaller screens.

Slates/laptops/desktops/etc will have more larger screens and feel downright luxuriously huge when compared to phone.

This space needs to be used, but used wisely.

Using Space Wisely

Having a very sparsely decorated UI works well on a small screen, but on larger screens, the space cries out for more.

For reference, here’s what the Area Code Look Up app for Windows 8 looks like.

Note the use of colorful images that closely convey meaning and add value to the core content (area codes).

Functionally, both apps provide the same information, but they do it in ways that make sense for the platform it’s running on.

Having the state flag of Maryland (or applicable state/province) in the background makes sense on Windows 8 Metro, but would be too distracting on the phone.