Windows 8 and Microsoft Surface: IE10 meets modern mobile HTML5

October 26th 2012 is the big day for Microsoft: the launch of Windows 8, Internet Explorer 10 and the Microsoft’s tablet: the Surface. From an OS and an HTML5 point of view, it’s a really big step for Microsoft and for all web developers (even non-mobile) . Let’s review what’s important for us.

I will start with some bad news: you need to go and prepare your websites for the new ecosystem.

Even if you have only a desktop-optimized website, you need to go and prepare it. And if you are thinking: “hey, this will not affect my mobile site because it’s just for tablets” you are wrong.

Microsoft Surface tablet

Windows 8 will work on different kind of devices starting in just a few days; it will available as a Windows XP/Vista/7 update for desktop and many new desktop and notebook computers will start shipping with it. However, in this blog, I’m more focused on mobile devices and the Microsoft Surface is probably the first mobile device with this operating system.

Other hardware vendors are also starting to ship Windows 8 tablets but the Microsoft’s one will be like a key device in this environment.

First, it’s important to understand that Windows 8 is available in RT version and in a more classic version. The RT version works only on ARM-based devices, such as most tablets. The other version (available in many editions, such as Pro) is for Intel-compatible devices.

The Surface tablet is available both in RT and Win8 Pro versions, being the latest not available at the time of this writing. Why is this so important? The RT version doesn’t include the full desktop mode and that means, no classic windows, no desktop browsers that can be used. UPDATE: RT version do have a desktop mode but it runs only Microsoft apps, not x64 or x64 apps, such as other browsers.

Desktop users, and Windows 8 Pro tablets users will be able to install any Windows-compatible browser, such as Google Chrome, Firefox or Opera. However, they might not be optimized for touch-enabled browsing.

The Surface is a wide-screen tablet (16:9) with a medium density screen of 1366×768 pixels. The RT version support 5 simultaneous touches and it has typical tablet sensors, such as accelerometer, gyroscope and magnetometer.

On the RT version only apps in the Windows Store can be installed/purchased. Windows Store apps (previously known as Metro apps) can be developed using .NET or HTML5 and must follow store rules. In terms of limitations and feature access, we can say that it’s kind of similar to iPad. It’s not the same, but you are not getting access to anything you want as in classic Windows development.

While Firefox is working on a Windows Store app version of the browser, it’s not clear to me if it’s going to be approved in the store or not. It may be just a touch-enabled mode for non-RT devices (that can install apps without the store).

Internet Explorer 10 modes

On Windows 8 RT including the Surface tablet, the browser can be running in three modes:

1) Landscape or portrait: IE10 is the only foreground active screen. On portrait the default viewport is 1024px.

IE10 taking all the available screen on landscape and portrait

2) Snap mode: it’s sharing the active screen with some other Windows 8 Store app and the browser is snapped (right or left) using just a small portion of the screen (always same size). It only works on landscape mode and when the device has at least 1366px width.

When in snap mode, IE10 will be using less than a quarter of the available screen

3) Fill mode: it’s sharing the active screen with some other Windows 8 Store app in snap mode and the browser is talking 3/4 of the screen (filled). It only works on landscape mode and when the device has at least 1366px width.

IE10 can also share the screen with other snap app

On desktop mode, you can use a non-touch optimized Internet Explorer 10. That mode is the IE that we are used to. Internet Explorer 10 on desktop mode is available on both RT and non-RT versions of Windows 8.

Flash Player

Flash Player? What is that? :) Jokes apart, you believe you are in a desktop world with IE10 and you are not. Remember, “desktop meets mobile web”. Internet Explorer in desktop mode will support as much plugins as you want including Flash Player.

Most tablets, including the initial Surface, will use Windows 8 Store mode and that means no plugins, no Flash, HTML5 only. Well, that’s not completely true but your life will be much easier if you believe in that. Today, a week before Surface appears on the market, I don’t have any clear answer to know if it will include Flash Player or not.

However what I do know is that, if the device includes a Flash Player, IE10 on Windows 8 store mode (ex-Metro mode) will have it disabled by default. If you are not using a restricted API you can send an e-mail to Microsoft so they can white-list your website so Flash movies will work on your website. As weird as it sounds, you need to send an email to be white-listed. If not, you can add a meta tag or an HTTP Header so Windows 8 store Internet Explorer will suggest you to move to desktop mode. Too complex in my opinion.

HTML5 Compatibility

Some good news! If we compare IE9 and IE10 I believe it’s one of the biggest steps from one version to the next one in the browser history. I know, they’ve taken 19 months to upgrade IE9.

IE10 supports:

New form input types and validation API (excepting date-related ones and color)

Application Cache

Web Sockets

Web Workers

History

Drag and Drop

XHR 2

File API

IndexedDB

Page Visibility

DeviceOrientation

Touch, Pointer and Gesture APIs (non-standard)

Animation Timing API (aka requestAnimationFrame)

If we compare it with Safari on iOS6, IE10 doesn’t have Web Audio and Web SQL (and it’s not going to add it in the future in favor of IndexedDB).

CSS3 compatibility

In terms of CSS3, IE10 has reached other browsers and in some situation has passed them with the addition of some experimental standards. IE10 is one of the first browsers supporting unprefixed well-known features, such as animations or transitions and it uses -ms- for other experimental styles.

Snap mode and the viewport problem

As we saw before, our website can be browser in IE10 snap mode. And as you can see, IE10 maintains a default 1024px viewport if the current browser window is narrower than that width. Therefore every, again, every website today will be zoomed out by default as seen in the picture.

With the snap mode, desktop meets mobile web because every website should now have a similar mobile view for IE10 snap mode, even for desktop devices.

Any desktop website -such as NYTimes.com- will be zoomed out unless you define a viewport as in the image below for mediaqueriestest.com

If your website has a responsive design and will automatically work properly on a narrower screen, you can use the following viewport declaration@-ms-viewport { width: device-width; }

To make our lives even stranger device-width will not be device’s width when in snap mode but the current window width.

If your website is not responsive and you want to provide a snap view mode you can define your own viewport mixed with some media queries as the following example:

Using 320px as a viewport will match most mobile device-width values, such as Safari on iPhone. I have a full explanation of this on my book (too much space to cover it in this post) and you can check Tim Kadlec great post.

Server-side identification

While you can use feature detection for most situations, sometimes server-side detection is necessary. The User Agent will never include hardware details. So we don’t know if we are on a Surface or other vendor’s tablet.

We can search for Windows NT 6.2 to know we are on Windows 8, the Touch keyword will be there on touch devices and the ARM word will be on Windows 8 RT devices.

Pinned sites

We can pin websites to the Start Screen and customize its appearance defining our own tile icon and the background image.

To do so we use the msapplication-TileImage and msapplication-TileColor meta tags:

The tile image should be a 144×144 PNG file, with a preferred transparent background and the tile color accepts a CSS color as a value that should be the main color of your logo or visual presence. We can use hexadecimal RGB values (such as #333333), named values (such as red) or using CSS functions, such as rgb. If you don’t provide a color, IE will take it from the most prominent color of your website icon or your tile image. The color and icons are also used in history search and other places inside Internet Explorer.

To combine with other icons, you can use just a white or black small icon over a plan color instead of a big colorful image. IE10 tile size 144×144 is the same as the iPad high-resolution icon size. However, be careful using the same icon for both platform as the idea of how they are being rendered on the screen is really different.

Internet Explorer 10 will use your current title page for the tile. If we want to define a different one, we can use the title meta tag.

<meta name="title" content="Tile title">

Live badge notifications

Of the big advantages of tile icons in Windows is the ability to update a badge number in the Start screen, so it becomes a Live Tile. Internet Explorer will poll for updates for pinned sites if we provide the right details.

First action is to create a badge XML, a really simple XML file that defines current badge number value to show inside the Tile. Of course, we can make a dynamic XML file.

The XML looks like

<?xml version="1.0" encoding="utf-8" ?>
<badge value="5" />

And then, we define using a msapplication-badge meta tag, the badge meta data, including frequency, and badge XML URL.

However, for some situations, such as gesture events, orientation changes, etc. tablets and the RT version may be different.

We can install a Windows Simulator that works only on Windows 8 and acts like a generic tablet device. You can download it for free included with Visual Studio Express for Windows 8.

The Simulator allows us to emulate:

Mouse, pointer or touch events

Gestures

Device rotation

Geolocation

Different screen resolutions

Store app integration

If you have a Windows Store app (on Windows 8) you can connect your website to it with some meta tags. Internet Explorer will show a menu as shown in next image so the user can quickly get the app from the store if it’s not already installed. If the app is installed then the menu changes to Switch to <name> app.

If you are thinking on the similarities between this feature and Smart App Banners on iOS 6, you are right. However, Microsoft has announced this feature before Apple.

In this case, a non-integrated website; a website that is integrated with an app (uninstalled); and the integration when the app is already installed.

There are five meta tags that can be defined in our website for this connection.

msApplication-ID: Mandatory. The identification that is defined in the application manifest.

msApplication-PackageFamilyName. Mandatory. Package family created by Microsoft Visual Studio to identify the app.

msApplication-Arguments. Optional. String that is going to be passed to your app. If we don’t provide this meta information, Internet Explorer will pass the current URL automatically.

msApplication-MinVersion. Optional. Enforces a minimum version of your app. Therefore, if your user has an older version when she tries to switch to the app, she will be first sent to the store to update it.

msApplication-OptOut. Optional. Allow our HTML document to not use the connection on some situations. Possible values are: install that will prevent the installation invitation if it’s not installed, switch that will prevent the switch invitation if the app is installed and both.

The Windows Store App can be created using HTML5, C++, C# or Visual Basic and it must be approved by Microsoft on the store using a Publisher account.

To show you an example Cut the Rope is an addictive game available on many mobile platforms -such as iOS and Android- and they are offering an HTML5 version available -sponsored by Internet Explorer 10- online at http://cuttherope.ie. The game is also available as a Windows Store app so to offer the functionality seen on the figure they are using the following meta tags.

Remember you can find this info and more details on this and other stuff around mobile web on my book.

Windows Store HTML5 Apps

Using HTML5 and Visual Studio we can create native apps that can be distributed through the Store. The HTML5 engine uses all of the IE10 engine and much more. When in HTML5 App, we have other API, other possibilities and styles from CSS and some specifics to native app, as working with native controls using just divs.

Conclusion

IE10 is the biggest step in Microsoft’s web life. Finally, IE meets modern HTML5 and it will make a change in the web world, as desktop or classic web meets mobile. Responsive sites will be more important in a world where users want our content anywhere. Just keep in mind that performance is one of the key issues of responsive sites; just be careful.

What do you think? Anything else that you believe I’ve not added in this list? Comment below.

You mean IE is catching up, somewhat, to what we’ve been doing for years in any other browser. And, as always, IE10 doesn’t work like IE9 which didn’t work like IE8, etc, etc, and we’ll have to code for all these different versions using different code that has to be written cause IE won’t work like any of the other far more modern browsers.

As always, IE10 will be inept and incompetent as all previous versions and still hold the crown as the worst browser on the planet. And now we’re stuck with it for at least another year.

@Rob thanks Rob for your comments. Windows 8 RT tablet users will use IE10, as iPad owners use Safari. If additional browsers appears I believe only just a small percentage of users will migrate to other browser.

While this article is very informative there are a bunch of things here that I’m not so hot for.

1.) the squished side-by-side app running.

Although an interesting idea, aside for something that is a “feed” of some kind (Twitter, News, Weather, Sports…) I don’t see much usefulness in such a feature running in a 1/4 screen size. Supporting this “mini” view may not make sense for many sites/apps.

2.) My experience so far is that no one ever pins a site. This is because it isn’t obvious and because the “visual gains” are far out-weighed by the “restricted capabilities” when using pinned sites (at least as they work on Windows 7 so far)

3.) We have favicon images/meta tags used in browsers for ages – I really wish Microsoft would have used/extended this behavior vs. adding their own completely different tag system.

4.) The user agent should have ideally indicated something about whether the user is in Metro IE or the desktop IE. Metro IE is very different on a PC vs a Tablet… and even more so IE10 in desktop mode is very different on a PC vs a Tablet

5.) Metro IE has some additional JavaScript differences, omissions, and behavior changes that developers should be aware of (or Microsoft should fix). Since I suspect that Microsoft has no plans to fix them (Win8/IE10 has already gone RTM) developers should beware.

As for browser adoption… *if* I “upgrade” to Windows 8 and there are other non-IE Metro mode browsers available I can almost guarantee that I will install them and switch. Usability matters and IE has always fallen short in this department.

Yes, I still support my opinion. It’s the biggest step in Microsoft’s web life. No doubt about that; just compare any version with the previous one and you will see. Even it is the first version that tries to adhere to as much standards as possible, that’s why there is no support for Web SQL, they prefer the CSS Viewport version and about the Touch events, look at this: http://www.webmonkey.com/2011/12/is-apple-using-patents-to-hurt-open-standards/ It seems Apple has patents on the Touch events we are used to, so the W3C may change the standard and it seems the IE10 approach can be one way to go, so there is a draft submitted at http://www.w3.org/Submission/pointer-events/

Thanks for the heads up and background on the -ms-viewport declaration and device adaptation for IE10 & Win 8. Very useful and timely! Curious, if you are using media queries and using ems, would you use something like this on each media query?:

Thanks for this. You’ve given me a few things to investigate. Always makes me laugh reading IE-hater comments on these types of posts. Made my day ;-) When will people learn that the Web is for all devices, not just a designers favourite?!

I do naot have acces to a real version of IE10 but I have done some tests with IE netrenderer and I have found some real strange behaviour of responsive designs. Twitter Bootstrap does not work properly and some older designs (2010-2011) by myself behave very strange: if I load a design repeatedly it seems IE10 mixes-up the various viewports: some elements are “regular” site designs and some are “mobile” parts. I do have -a lot- of testing to do to see what parts trigger the wrong layout: very annoying!