How Windows 8 touch relies on IE10

27th Jun 2011 | 12:00

How Windows 8 touch relies on IE10

Windows 8 builds on new web standards

Windows 8 touch: How it relies on IE10

Is the full-screen touch interface for Windows 8 'just a shell' on top of Windows?

Not really; there isn't an application running like Media Center that you could shut down and it isn't just a browser – this is another mode for the interface that you can switch in and out of. But it is the browser that powers it.

Apps for the immersive Windows 8 interface are written in HTML5, JavaScript and CSS (and presumably, Silverlight – this is the IE10 engine and there's no reason for it not to run plug-ins) and packaged up in an AppX container.

In fact, if you dig into the web standards support that Microsoft has added to IE10, it's clear to see that despite the resemblance to the Silverlight-powered Windows Phone 7 'Metro' interface, the layout of this new user interface is the biggest reason for adding those standards now.

One standard that Microsoft added to IE9, Media Queries, is always suggested as a way to have one web page display appropriately on different-sized screens – not just shrinking the page but reflowing the layout and adding or removing extra details to fit.

Media query

IE9: Media Queries change the layout of the page as you resize it

The IE Test Drive demo for Media Queries shows a page of pictures optimised for a smartphone, a netbook and a notebook or desktop: the images change size, lose the headline and caption and switch from a grid layout to a stack.

That's exactly the same change you see in the News application in the Windows 8 touch demo: when the app is full screen, you get large thumbnails with captions underneath them and the heading for each section has several links.

The layout is the same when another app takes up a slice of the screen, but when you slide the News app over so it takes up a smaller area, you only get one image and heading in each section and the images turn into small thumbnails to make room for the caption.

It's the same with the video player; as the window gets smaller the video doesn't just get resized – the layout changes with the title appearing underneath it, along with the playlist. That's exactly what you'd expect from an interface based on Media Queries.

Windows 8

WINDOWS 8: When the News app is full screen, you get a page of large images…

Incidentally, Media Queries let you change the layout of a page based on the orientation as well as the size. So far we've only seen the Windows 8 immersive user interface in landscape format, but we've also only seen it on a breadboxed ARM system that would be pretty hard to pick up and rotate, so it's still entirely possible that there will be a portrait version of the interface.

ARm

NEW LAYOUT: Drag the video player to take most of the screen and the News layout changes completely

Media Queries retrieve different layouts and views of the page from the server depending on the window size but getting a flexible layout in the first place takes a combination of three web standards only introduced in IE10 – including one that Microsoft came up with and only proposed to the W3C group that standardises HTML in April.

Windows 8 big nrews

VIDEO THUMBNAIL: Give the News app more room and the video player changes layout instead

Windows 8 touch: Grids and more

That's the Grid Layout standard, which "allows us to align content and create regions within an app," according to Markus Mielke, a senior lead program manager on the IE team – and IE10 is the first browser to include Grid Layout.

Resizing

HOW GRIDS WORK:This IE10 tutorial shows how an app can be divided into regions that align and stretch…

Grids can have headers, footers, main sections and gutters to divide areas. You can define the proportions of the areas as fractions of the page and use layers and alignment to position content inside the grid rather than counting pixels. "If you're familiar with the WPF grid [for laying out applications], some concepts should sound familiar," Mielke points out and grid is ideal for web apps – including the Windows 8 user interface.

Start screen

START GRID:The Start screen layout uses a grid of tiles…

Look at the way the tiles in the Windows 8 Start screen are laid out in grids, with three columns that can have one or two tiles in each cell of the grid, with a gutter between them to mark the edge of a 'page' (like the panoramas in Windows Phone 7 that means you can always see that there's more content than fits on screen). The Photo Feedr app has the same kind of grid layout, with different sized pictures arranged to fit into the grid.

Win 8 arm

PHOTO GRID:…and the Photo Feedr app has a grid layout of thumbnails

Within the grid layout the elements of an app don't have to all resize or stretch in the same way; that's handled by the flexible box standard (flexbox for short). And when there's content arranged in columns that you want to reflow as the window changes size, that's done by the multi-column standard.

Changing layout

STRETCH: As you make the window larger, flexbox stretches the layout but keeps the boxes aligned.

The flexbox standard is "in flux," Mielke says and it's only just entering the working draft stage, which is about stable enough to fit the IE team's maxim of only implementing standards that are ready for developers to work with. But the multi-column standard he calls "super stable"; it hasn't changed since the end of 2009, so it could easily have been in IE9 on that basis. It's most useful when you have flexbox and grid layout as well and our guess is that the IE team waited until it could work on them all together in IE10 – so the Windows team could use them to build their interface.

Windows 8

RELATIVE: Set the proportions for flexible boxes and different content areas get more of the space in a larger window

putting it all together

MULTISIZE: This IE10 demo app gets different layouts and content details depending on the window size – exactly the same principles you see in the Windows 8 touch apps

Another new standard implemented in IE10 is CSS3 transitions; the new HTML5 SkyDrive photo view uses this to rearrange image thumbnails using subtle animations as you resize your browser window – so the images flow into place rather than jumping. That looks very like the way the tiles on the Start screen flow into place as you scroll sideways.

HTML5

HTML5 SKYDRIVE:Animated transitions rearrange your photos and SkyDrive keeps the aspect ratio (like flexbox)

"If you think small you should not forget big as well," Mielke says of web apps; "it's not just about small devices, it's also about scaling up." Similarly the Windows 8 immersive interface isn't just for tablets; we're expecting a variant for big screen systems – perhaps one you can control with Kinect.

---------------------------------------------------------------------------------------------------

Liked this? Then check out Hands on: IE10 review (Platform Preview)

Sign up for TechRadar's free Week in Tech newsletter
Get the hottest tech stories of the week, plus the most popular reviews delivered straight to your inbox. Sign up at http://www.techradar.com/register

Follow TechRadar on Twitter * Find us on Facebook

Windows 8 Microsoft Internet Explorer operating systems TRBC
Share this Article
Google+

Most Popular

Edition: UK
TopView classic version