Adaptive Layout on Windows Phone

Lately, I have been getting into responsive, adaptive and fluid layout design techniques and development.

Since Windows 8 supports native development using HTML/CSS/JS and IE has been performing quite well on HTML5 features support along with Chrome (my default browser by the way !), I have been getting more attracted to the idea to master the concepts behind the evolution of web applications and how we can attack the growing quantity of different devices, all with different screen sizes and resolutions, without forgetting ultra books, tablets, laptops, desktops, larger screens and out of home experiences.

The slowing down trend on plugin-based web development, especially with Flash (it’s future seems darker every day) and Silverlight (which has evolved into a whole platform outside the browser) also put more weight on the importance of knowing and mastering HTML5 responsive and adaptive layout design techniques.

Along my regular reading and research I found an amazing tutorial by Matt Doyle on Elated.com demystifying the whole thing and explaining in an impressive clear, concise and practical way, the concepts behind it and how to achieve a layout that can successfully and quite effortlessly adapt to a multiple set of screen sizes and resolutions.

  

I wanted to test the results on Windows Phone, not only on the emulator but also on an actual device. Here are some screenshots from the results.

    

Windows Phone Emulator

    

Windows Phone HTC Mozart

I encourage you to read the tutorial first. I’m sure it will be really helpful. Is clear that the author, Matt Doyle did a really good job, since the layout adapts perfectly to the Windows device without any need for modifications.  

Get Responsive, get adaptive !