HTML5 and CSS3 on Windows Phone: A Simple Boilerplate

Up until recently, it’s been all about the apps written in Silverlight. With hardware-accelerated video, text rendering, canvas drawing, and the high-speed “Chakra” JavaScript engine, IE9 compiled for ARM processors means business. But diving into HTML5 without considering the differences in characteristics of mobile web browsers is a mistake. Therefore, I’m going to show you some HTML5 and CSS3 that you can use as a starting point for your mobile web apps.

Below, you can see the simplified DOCTYPE, html, charset, and stylesheet tags that are the hallmark of HTML5. In order to be accomodate small screens on Windows Phones, I’ve added the viewport, mobile optimized, and handheld friendly tags to keep the browser from trying to render a desktop web site.

You probably also noticed that I placed the script tags just before the closing body tag instead of inside the head tags. This ensures that the mobile page fully renders in the browser before the JavaScript parsing begins.

Along with this simple HTML goes an equally simple stylesheet that provides a basic, Windows Phone Metro look and feel:

@media screen and (max-width:480px) {

body {

font-family: “Segoe WP”,Tahoma,Geneva,Verdana;

background-color: #000000;

color: #ffffff;

padding: 18px;

}

h1, h2, h3, h4, h5, h6 {

font-family:“Segoe WP Semibold”;

margin-bottom:7px;

}

h1 {

font-size: 48pt;

}

h2 {

font-size: 40pt;

}

h3 {

font-size:32pt;

}

h4 {

font-size:24pt;

}

h5 {

font-size:20pt;

}

h6 {

font-size:18pt;

}

p {

font-size: 14pt;

}

input, select, button {

color: #ffffff;

background-color: #000000;

border: 2px solid white;

vertical-align: baseline;

font-size: 17pt;

min-width: 40px;

min-height: 40px;

}

label {

vertical-align:baseline;

font-size:17pt;

}

input.hasfocus {

background-color:white;

color:black

}

fieldset, legend {

font-family:“Segoe UI Semibold”;

font-size:12pt;

}

fieldset {

padding:12pt;

border: 1px solid white;

}

}

I’ve included a simple media query in the CSS to only apply the style to devices with a maximum width of 480 pixels. Additionally, this will definitely give you the Segoe fonts, black background, and white borders that you’re accustomed to in Windows Phone Silverlight apps. You’ll also notice that I set minimum heights and widths for some of the UI elements to give mobile users a larger hit target.

I’m having issues running scripts on the IE for Windows Phone 7.5. Can you suggest if we can write scripts for it in same manner as we do for desktops or are there any conventions to be followed for the same. Also I face the Window not Closing issue in IE for Windows Phone 7.5 any work arounds, shall be greatful.