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.
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
Is there any support for the ‘manifest’ feature in the HTML tag? This is what allows apps to run in offline mode.
Also, is there a way to save web apps to the Home Screen?
With these two features, web apps will be practical on WP devices.
George,
Unfortunately, IE9 doesn’t support the manifest feature to run offline web apps. That being said, you can easily “pin” web apps to a tile on the start screen.
-Rob
Thanks, Rob,
I hope that feature is on the list – it would make web apps practical for the platform. We look forward to being there!
Hi !!,
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.
Regards
Govind Goswami