Now that Windows Phone has been in the market for several months and we’ve built up some good momentum around the platform (10,000 apps and more than 30,000 registered developers!) we thought it would be a great time to officially move our blog over to the Windows Phone Developer Blog. We’ve already posted some new information, so come and join us in our new home!

We made this decision for several reasons. First, it makes sense for us to have one central place where we disseminate developer-related information regarding Windows Phone. Second, the blog infrastructure that we’re moving to is much more modern – each one of us will be able to post under our own names and we’ll get much better distribution across our content network. Third, new developers are much more likely to find us there than under a separate, unrelated site, so our discoverability will improve.

For the moment, we’re going to leave the existing content in place so that we don’t break any links or bookmarks, but all new content will be posted at our new blog address. We’re looking forward to continuing the conversation with all of you at our new and improved location!

Joe Marini
Principal Program Manager
Internet Explorer, Windows Phone
@joemarini

Having the same core browsing engine on both Windows Phone and Windows Desktop is a dramatic step forward for our Web developer platform. We have worked closely with the IE9 team to ensure that mobile Web developers can take advantage of the same benefits that IE9 brings to the desktop – hardware-accelerated HTML5 graphics and video, rich support for today’s modern Web standards like CSS3, Geolocation, DOM Storage, SVG, HTML5 Canvas and video, and ECMAScript 5, and the ability to create highly interoperable sites and Web applications using the principle of “same markup”.

We didn’t stop there, of course – we made sure that mobile Web developers can use the must-have mobile technologies they’ve come to rely on, such as full support for the Viewport tag, data:// URIs, and rich implementation of CSS Media Queries. With IE9 on Windows Phone, Web developers will be able to build highly engaging, interoperable Web sites across the mobile and desktop spectrum.

In the coming months, we’ll have much more to say about IE9 on Windows Phone, and we’re very much looking forward to continuing the conversation with all of you and hearing your feedback. The entire team is incredibly excited about the work we’ve done and we can’t wait for all of you to be able to enjoy the fruits of our labor and begin creating incredible mobile Web sites on Windows Phone!

Joe Marini
Principal Program Manager, Windows Phone
https://twitter.com/joemarini

In this post I would like to expand on what Joe wrote a few months ago about the mobile viewport support on Windows Phone, but before getting started though I would like to introduce myself; My name is Jorge Peraza and I’m a Program Manager on the Windows Phone Browser team and I’m happy to come back as an active blogger now on the IE Mobile’s team blog.

Between Screens, Windows and Viewports…

Once upon a time, when browsers only lived on desktop computers, the web content “canvas” (a.k.a. the area on the screen that the web site can draw things on) was tied nicely with the size of the browser window which is convenient, predictable and works very well.  Then the rich mobile browsers grew in functionality to the point where the same sites could be displayed on the mobile screen as well… unfortunately for us that old model did not work really well since phone screens generally have a smaller pixel count and are primarily held in portrait.  The end result was that the layout of a number of sites was “compressed” as you can see here:

The solution was to decouple the “canvas” from the window into a “Layout viewport” used to for all layout calculations and the “Visual viewport” used to represent the visible portion of the site.

PPK has a very interesting post on this topic for more details.

Controlling the viewport

On Windows Phone 7 all sites, by default, have a layout viewport of 1024 pixels wide; the browser then selects the appropriate zoom level that is needed so the layout viewport fits horizontally the screen before rendering any content.  This is what gives the user a “thumbnail” view of the website when it is initial loaded.

Developers and designers have control over the layout viewport width by utilizing a special META tag called  viewport.  If this tag is present the browser will assume the content is optimized for mobile so it will also disable all the optimization the browser makes to enhance the readability of desktop sites,  this means that the content will be rendered exactly as specified by the markup.

Note: The height of the document is always calculated based on the phone orientation and the desired viewport width so it is at least a tall as the visual viewport.

Now, lets dig in into the details on how this tag works on WP7.  First lest create an HTML document with four rectangles of different sizes as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Viewport Test</title>
<style type="text/css">
.auto-style1 {
    font-size: large;
    color:white;
}
</style>
</head>

<body>
<div style="position:absolute;top:0px;left:0px;width:1024px;height:1024px;background-color:gray">
    <p style="text-align:right" class="auto-style1">1024px</p>
</div>
<div style="position:absolute;top:0px;left:0px;width:480px;height:480px;background-color:green">
    <p style="text-align:right" class="auto-style1">480px</p>
</div>
<div style="position:absolute;top:0px;left:0px;width:320px;height:320px;background-color:maroon">
    <p style="text-align:right" class="auto-style1">320px</p>
</div>
<div style="position:absolute;top:0px;left:0px;width:240px;height:240px;background-color:navy">
    <p style="text-align:right" class="auto-style1">240px</p>
</div>
</body>

</html>

This document when loaded on Windows Phone 7 will look like this:

Specifying a constant viewport size

When your site is designed for a specific viewport width, having a hard-coded value on the viewport tag will always produce the expected behavior independently of which device or screen orientation used to access it.  The browser will adjust the initial zoom factor so the content is fit to the specific device visual viewport.

For example, on the example site if we use:

<meta name="viewport" content="width=320" />

The site will look like this on portrait:

And, after rotating the device to landscape, the content is zoomed-in to allow the viewport width to remain constant:

but if we change the tag to be:

<meta name="viewport" content="width=480" />

The page will instead look like this:

Dynamic viewport sizing

To allow IE to select the viewport size you can use the special value ‘device-width’.  This value tells the browser that the site is designed to handle multiple resolutions and will be ready to change its layout on the fly as a result of orientation changes. 

Internally Windows Phone 7 will resolve device-width to  320px when on portrait and 480px on landscape.  Those values were chosen because the majority of mobile web sites currently deployed were not ready to scale to the higher DPI screens we use on our phones which will the experience for our end users less than ideal.  This is consistent with how other platforms are doing this today though I would encourage all web developers to only use dynamic sizing if their site can scale to different device configurations.

Lets put this to practice now by modifying the viewport META tag to use dynamic sizing

<meta name="viewport" content="width=device-width" />

And then load it on Windows Phone:

And after rotating the screen we the document gets resized as expected:

Alternative ways for changing the size of the viewport

Windows Phone 7 will also automatically resize the layout viewport if it determines that the content would be better rendered as a mobile optimized page. This include sites that use the XHTML Mobile profile, use the MobileOptimized or the HandheldFriendly META tags.

As always, any feedback is appreciated and also, please let us know if there are any topics you would like us to cover on the near future = ]

Jorge

Getting reacquainted with an old friend: IE Conditional Comments

Conditional Comments have been part of Internet Explorer since version 5.  They enable developers to include or exclude lines in the HTML document based on a features existence or version.  On Windows Phone 7 we have added a "IEMobile" feature.  Its version information matches the mobile token in our user agent string introduced here.  

<!--[if IEMobile]>
<p>Welcome to Internet Explorer Mobile.</p>
<![endif]—>
<![if !IEMobile]>
<p>All other browsers</p>
<![endif]>

The first block will display "Welcome to Internet Explorer Mobile" only on Windows Phone 7 devices.  The second block will display "All other browsers" on Internet Explorer, Firefox, Webkit, or Opera. This is because the second block is a downlevel-revealed comment, instead of the more common downlevel-hidden type.  More information on conditional comments is available on MSDN.

In the example above, the conditional comments surround HTML content.  While it is possible to use conditional comments on HTML, script, or CSS the remainder of this post will focus on the CSS case.  

Mixing it up with queries and comments

Add a couple lines where you include your mobile style sheet to add Windows Phone 7 support to your site.

<!—Mobile -->
<link rel="stylesheet" type="text/css" href="mobile.css" media="screen and (max-device-width: 480px)" />
<!--[if IEMobile 7]>
<link rel="stylesheet" type="text/css" href="mobile.css" media="screen"  />
<![endif]-->

A caveat to this method is that some of your mobile webkit CSS might not work on Internet Explorer and need to be tweaked.  Also this does not provide a mechanism to support import style media queries like below since conditional comments are only supported in the HTML markup not in CSS files.

@media screen and (max-device-width: 480px) { div {border:none;}}

One advantage of this approach is that unlike media queries, which download all the referenced style sheets even if the criteria is not met, conditional comments are part of the parsing stage and anything excluded from parsing will not be downloaded later.

Adding a conditional comment for Windows Phone 7 to a solution such as the one proposed in "Bulletproof CSS3 Media queries" would enable you to target Webkit based smartphone browsers, Windows Phone 7, and a large range of desktop browsers.

Mike O'Malley
Program Manager
Windows Phone

One of the main challenges involved with mobile Web development is getting content to lay out correctly on screens of varying sizes. Over the years, browser vendors have invented a variety of ways to allow developers to control how browsers lay out content, usually using a custom <meta> tag.

First among these was the HandheldFriendly tag, used initially by older Palm models as well as browsers like AvantGo, which has the format:

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

This tag indicates to the browser that the page has been laid out by the developer to be viewable on a small screen, and that the browser should not attempt any further layout enhancements. While somewhat effective, it does not offer any granular control over the layout width – it’s just a true/false flag.

Microsoft addressed this particular problem when it came up with the MobileOptimized tag for the PocketPC:

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

The MobileOptimized tag allowed the developer to inform the mobile browser of the screen width that the page had been optimized for (in this case 320). While an improvement over the simpler HandheldFriendly tag, it still doesn’t offer much control over the layout, especially for devices that have different screen widths.

Today, most modern mobile Web browsers use the Viewport <meta> tag, which allows Web developers to give explicit instructions to a mobile browser regarding how a page should be laid out and respond to user manipulation. The Viewport tag has the format:

<meta name=”Viewport” content=”width=320; user-scaleable=no; initial-scale=1.0” />

The  Viewport tag provides the following settings to allow the developer more fine-tuned control over the content’s layout:

*Note: In the initial release, IE Mobile for Windows Phone 7 does not support initial-scale, maximum-scale, or minimum-scale.

How Windows Phone 7 Implements “device-width”

The keyword “device-width” is intended to set the width of the Viewport to the width of the device that is viewing the page. On Windows Phone 7, the device width is 480 pixels. However, you will notice that if you set the Viewport width to “device-width”, IE actually sets the width to 320 (and also pins it to 320 if you specify a width of less than 320).

Why does IE do this? We made this decision after a large amount of testing real-world mobile Web sites and learning (to our chagrin) that a very large number of sites out there that were using the “device-width” property were in fact not laid out for the device’s width, but were actually optimized for 320 pixels, probably because the majority of devices available on the market prior to Windows Phone 7 were 320 pixels wide. On many sites, this resulted in an empty strip along the side of the page when viewed in Windows Phone 7, since the sites were often using fixed-width 320px elements like <div> tags.

Faced with the difficult decision of a) shipping a browser on which many common sites didn’t lay out optimally but was technically correct in using device-width, or b) making a slight adjustment to accommodate the many sites that didn’t use device-width properly, we decided to use 320 as the setting for device-width.

In addition, if you use "device-width" and then rotate the screen to landscape, IE Mobile will re-size the Viewport to use the new dimensions. You can choose to re-layout your content by listening for the onResize event and then measuring the new width. For hard-coded numbers, IE Mobile simply scales up the content to fit the screen (which is what most other browsers do).

Default Viewport Widths

Different phone manufacturers have different default widths for the Viewport. The following table lists the known defaults for the current crop of mobile browsers:

Windows Phone 7 Support for META Tags

IE in Windows Phone 7 will recognize all three of these meta tags, and will use the settings of the most modern tag that your page includes. IE will look for and use the settings in the following order:

1. HandheldFriendly
2. MobileOptimized (overrides HandheldFriendly)
3. Viewport (overrides both MobileOptimized and HandheldFriendly)

Summary

The Viewport tag provides a de-facto standard way of exerting much better control over your content’s layout in today’s mobile browsers. Hopefully, this post has been helpful in illustrating how IE Mobile uses the Viewport and in making your Web sites look great on Windows Phone.

Happy Coding!

Joe Marini
Principal Program Manager, Windows Phone
Microsoft Corp.
joemarin@microsoft.com
https://twitter.com/joemarini
https://developer.windowsphone.com

In addition to these, there are three East Asian fonts that we include:

• Japanese: Meiryo UI
• Simplified Chinese: Microsoft YaHei
• Korean: Malgun Gothic

And here’s a snapshot of how they look on the phone:

Joe Marini
Principal Program Manager
Windows Phone
https://twitter.com/joemarini

Our original intent in adding support for this WebKit-specific property was to make Web developers’ lives a bit easier by not having to add yet another vendor-prefixed CSS property to their pages to control how text was scaled. Even more specifically, we intuited that the most common use case for this property was to explicitly set it to “none” in order to tell the browser not to scale a particular section of text.

For example, if you have a picture in your page with an associated caption, you would use this property to prevent the browser from scaling the text, which would cause it to remain on a single line, reflecting the original intent of the designer, as in the following example:

After hearing the community’s feedback on this issue (and a couple of face-palms when we realized the broader implications of implementing other browser vendors’ CSS properties), we’ve decided that it’s best to only implement the -ms- prefixed version and not the -webkit- one.

We thank all of the passionate Web contributors who weighed in on the issue, and we’re looking forward to building a great mobile Web browser that all developers can develop for with clarity and certainty.

Best Regards,

Joe Marini
Principal Program Manager
Windows Phone

The new scripting functions are:

• getElementsByClassName(name): given the class specified by name, returns all of the elements or sub-elements within the scope of this function call
• querySelector(selector): given the selector, returns the first element within the sub-tree of the scope of this function call that matches the selector
• querySelectorAll(selector): given the selector, returns all elements within the sub-tree of the scope of this function call that match the selector

We've also added support for the -webkit-text-size-adjust CSS selector. This selector allows you to control how text on the Web page is scaled to increase readability for the user (you can also use -ms-text-size-adjust, IE Mobile recognizes both).

You can set the value of the selector to "none", "auto", or a percentage value.

• "none": turns off text size adjustment. For example, html { -ms-text-size-adjust:none } turns off text adjustment for the entire page.
• "auto": sets the text size adjustment to the automatic setting
• percentage: use the specified percentage value to adjust text size. For example, .title { -ms-text-size-adjust: 150% } will adjust the text size for elements that are assigned the "title" CSS class.

[Update 05/11/2010: based on community feedback, we will only be implementing the -ms- prefix, not the -webkit- one.]

Joe Marini
Principal Program Manager
Windows Phone

If you are developing a mobile Web app and want to test it out in the Windows Phone emulator running IE Mobile, you don't need to launch the Windows Phone developer tools with a dummy project each time and hit F5 just to click on the IE icon in order to get the browser running.

Create a shortcut icon, right-click it and choose Properties, and set the Target field to:

"{Install Drive}:\Program Files\Microsoft XDE\1.0\XDE.exe" "{Install Drive}:\Program Files\Microsoft SDKs\WindowsPhone\v7.0\Emulation\Images\WM70C1.bin"

Then you can just use this shortcut to launch the Emulator as a standalone image each time and start the browser.

Enjoy!

Joe Marini
Principal Program Manager
@joemarini

To aid in this effort, I've pulled together a short list of sessions that I consider to be must-see for any Web developer looking to build robust, modern applications.

• Developing with WCF RIA Services Quickly and Effectively
• Designing and Developing for the Rich Mobile Web
• The Laws of User Experience
• Modern Web Form Design
• Building Great Standards-Based Websites for the Big Wide World with Microsoft ASP.NET 4
• Improving Software Quality for the Modern Web
• The Tale of JavaScript. I Mean ECMAScript.

Enjoy!

Joe Marini
Principal Program Manager, Windows Phone
@joemarini