HTML5 and CSS3 on Windows Phone: A Simple Boilerplate

Mobile Web on Windows Phone

Internet Explorer 9 running on Windows Phone 7.5 has seriously raised the HTML5 mobile web profile of Microsoft’s latest phone operating system.

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.

<!DOCTYPE html>

<html lang=”en”>

    <head>

        <meta charset=”utf-8″/>

        <meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=yes”/>

        <meta name=”MobileOptimized” content=”width”/>

        <meta name=”HandheldFriendly” content=”true”/>

        <link rel=”stylesheet” href=”wp.css”>

        <title>Mobile Web Title</title>

    </head>

    <body>

           <h3>Mobile Web</h3>

           <script></script>

   </body>

</html>

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.

Mobile Web on Windows Phone

Good luck with your next HTML5 + CSS3 mobile web site!

Sharing my knowledge and helping others never stops, so connect with me on my blog at https://robtiffany.com , follow me on Twitter at https://twitter.com/RobTiffany and on LinkedIn at https://www.linkedin.com/in/robtiffany

Discover more from Rob Tiffany

Subscribe now to keep reading and get access to the full archive.

Continue reading