Microsoft Unveils Windows 8 Ads in Apps (AiA) Concept at Cannes Lion 2012 - Adapt Your Website to Windows 8 Metro Style Browser in the Snapped View and Portrait

While on Windows 8 news, Microsoft Advertising at the Cannes Lion 2012, unveils Windows 8 AiA concepts.Up until now, the Microsoft Advertising SDK for Windows 8 (in technical preview) has allowed developers to embed standard text, image and video ads in Metro apps with relatively standard and ugly display ads. But that might change for […]

While on Windows 8 news, Microsoft Advertising at the Cannes Lion 2012, unveils Windows 8 AiA concepts.

Up until now, the Microsoft Advertising SDK for Windows 8 (in technical preview) has allowed developers to embed standard text, image and video ads in Metro apps with relatively standard and ugly display ads. But that might change for the better as Microsoft is hoping to push the boundaries.

"Our creative agency partners include AKQA, Big Spaceship, Razorfish, Team Detroit, UM and Y&R. All six will be lending us their creative minds and expertise as we co-develop early advertising concepts. With these partners, we will look to create a new standard for what ads within Windows 8 apps can and will be, as well as ensure that experiences will be engaging for consumers and effective for marketers and publishers," Microsoft stated.

To give you a sense for what this might look like, here is an example of what an ad experience in a Windows 8 app environment could potentially look like - in the ad for a new shoe from Adidas is integrated into a Windows 8 app that promotes the Seattle Sounders soccer team. Clicking on the ad will bring the user to a full Adidas site.

Microsoft Shows Off Windows 8 AiA Ad of Adidas at Cannes Lion 2012

Also, Microsoft explains that IE10 in the Windows 8 Release Preview supports the width and height properties of the W3C Working Draft CSS Device Adaptation. "This gives Web developers a simple tool to control automatic content scaling across various window dimensions. In particular, it enables Web sites to easily adapt to Windows 8 Metro style browser in the snapped view and portrait orientation," said Matt Rakow, Program Manager, Internet Explorer.

The blog says, most websites today are optimizated for a 1024 pixel wide window. "This ensures a good user experience for a wide variety of displays when the browser is maximized."

However, sites may not work well on new form factors like tablets and portrait screen orientation if they haven't optimized for other window sizes as well. In particular, pages often clip or distort layout when viewed in a narrow width.

In the Metro style IE10 browser, the snapped view and portrait mode are auto-scaled by default to ensure at least 1024 pixels of layout width. Mobile devices take a similar approach when displaying non-mobile-optimized sites on a narrow form factor. "Since most sites are built to work well at 1024 pixels, this ensures that they are laid out well and do not clip content by default," he said.

In the screenshots bleow: First, Wikipedia displayed in very narrow windows - and second, Wikipedia displayed in Windows 8 Metro style browser in snapped view:

Wikipedia displayed in very narrow windows on IE10 in Windows 8Wikipedia displayed in Windows 8 Metro style browser in snapped view

"The best narrow layouts are those that have been custom-made by the Web developer. In addition to fitting the site into a narrower region, this also may require changes to image sizes, reordering of content, alternative tools for site navigation, or other fundamental changes to content. If your site has already made these modifications for narrow windows, then Device Adaptation can be used to override the default scale," he said.

Rakow, says that Microsoft recommend testing your site in layout widths of 768 pixels (portrait on most slates) and 320 pixels (snapped Metro style browser) in addition to 1024 pixels and wider (landscape).