Montag, 4. März 2013

Make your web site ready for Windows Phone in 4 steps

My personal web site isn't pretty. It's certainly nothing you would want to look at for any period of time. However, it gets even worse on a mobile. This is what my web site looked when you brought it up on a Windows Phone 7 before:

Web site (before)
Web site (after optimization)
The viewport appears zoomed too far out, the text is out of proportion and the image is way too small. The Windows Phone 7 has a display of 480x800 px², so why doesn't the web site at least display the true size of the pixels?

The answer is: WP7 assumes that web sites are built to display for 1024 px wide. This assumption is reasonable; however, it gets in the way of actually displaying some readable text.

So, what to do? I promised four steps in the title and here they are:
  1. Change doctype to the HTML5 type <!DOCTYPE html>
  2. Set classes and move styles to separate style definition files
  3. Configure media queries for each file
  4. Adjust the viewport and scale to fit 480px width
Changing the doctype to HTML5 means making your life somewhat easier. The WP7 behaves differently towards web sites, when they have that doctype. Also, we need it for step 3, because media queries will be ignored if the doctype declaration is missing.
Set classes and declare them in separate definition files is something everybody should do when they start development. First, move any formatting element like <center> to a proper CSS style. If you used tables for a fixed layout, you'll have to do it again for the mobile. Well, they told you, you shouldn't use tables for layout.

Next up, move all the styles to a new file called "layout.css" and set up two media query like this:

<link rel="stylesheet" type="text/css" href="mobile.css" media="only screen and (max-device-width: 480px)" />
<link rel="stylesheet" type="text/css" href="layout.css" media="screen and (min-device-width: 800px)" />

Of course, you can continue to use your existing files and just set the media attribute. That should be easy enough. The file "mobile.css" will contain our layout definitions for the mobile device. Mine looks like this:

* { 
    max-width: 480px;

Up until this point, the website still doesn't display right. The tricky bit was figuring out why. The elements are scaled for 480px, but they still don’t fill the screen. This is because the default viewport on WP7 is 1024 px and not the actual device width. It can be fixed by setting the viewport in a meta tag:

<meta name="viewport" content="width=480px,initial-scale=1.0,user-scalable=yes;">

There we go. I admit my web site is rather minimal, so yours may be a little more tricky to adjust.

Keine Kommentare:

Kommentar veröffentlichen