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.

Part of the content of this post are from my book “Programming the Mobile Web, second edition” to be published soon.

Overview

In this post, we will cover:

  • Microsoft Surface tablet
  • Internet Explorer 10 modes
  • Flash Player
  • HTML5 compatibility
  • CSS3 compatibility
  • Snap mode and the viewport problem
  • Server-side identification
  • Pinned sites
  • Tablet Simulator
  • Store app integration
  • Windows Store HTML5 Apps

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.

IE10 supports:

  • CSS Animations
  • CSS Transitions
  • CSS 2D and 3D transforms
  • CSS Fonts
  • CSS Gradients
  • CSS Device Adaptation (viewport definition through CSS)
  • CSS Exclusions
  • CSS Flexible Box (aka FlexBox)
  • CSS Grid Layout
  • CSS Multi-column layout
  • CSS Regions
  • CSS Filter Update: it’s just SVG Filter support, CSS Filters are not supported.

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:

@media only screen and (max-width: 400px) {
@-ms-viewport { width: 320px; }
}

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:

<meta name="msapplication-TileImage" content="tile.png">
<meta name="msapplication-TileColor" content="#ef0303">

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.

<meta name="msapplication-badge" content="frequency=1440; polling-uri=http://mysite.com/badge.xml">

Tablet simulator

If you install Windows 8 on a desktop computer, Intel-based tablet or notebook, you can test most of the features of IE10. You can download a preview version for developers at http://windows.microsoft.com/en-US/windows-8/release-preview.

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.

<meta name="msApplication-ID" content="App"/>
<meta name="msApplication-PackageFamilyName"
content="ZeptoLabUKLimited.CutTheRope_sq9zxnwrk84pj"/>

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.

Share

Tags: , , , ,

Loading Facebook Comments ...
  1. #1 written by Rob October 17th, 2012 at 18:07

    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.

    No one should use IE.

    RE Q
  2. #2 written by firt October 17th, 2012 at 18:11

    @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.

    RE Q
  3. #3 written by Steve October 17th, 2012 at 19:11

    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.

    RE Q
  4. #4 written by firt October 17th, 2012 at 19:33

    Steve, thanks for your opinion. Some things I’d like to clarify from your comment:

    2) Take in consideration that the pin button is much more accessible than on IE9/desktop mode. It’s a big PIN icon at the right of the reload button (on Windows 8 store mode).

    3) Microsoft is still using the favicon ICO format and it will use it if you don’t provide the new Tile icon. However, the Tile icon has a new resolution not available on the ico format.

    5) There are plenty of new stuff that I didn’t cover here. Do you know any other specific problems that you should be aware of on ex-Metro mode that works different on the desktop mode.

    RE Q
  5. #5 written by Tom October 17th, 2012 at 20:26

    “IE10 is the biggest step in Microsoft’s web life.”

    Really? I don’t believe so, in a browser which uses custom events (prefixed MSPointer) instead of proposal’ ones. Read http://msdn.microsoft.com/en-us/library/ie/hh673557(v=vs.85).aspx and let me know if you still support that opinion.

    Working Draft: http://www.w3.org/TR/2011/WD-touch-events-20110505/

    RE Q
  6. #6 written by firt October 17th, 2012 at 20:35

    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/

    RE Q
  7. #7 written by Henry October 17th, 2012 at 20:51

    Although im all for new tech and varied tablets on the market.

    It just seems that MS and IE10 are becoming more and more a bigger frustration. Why make things so more complicated, when other browsers are setting paths to follow.

    Not only is html5 a right pain to support across multi browsers now, we will have to deal with IE 10 and there pathetic attempts. So frustrating.

    RE Q
  8. #8 written by Harri H October 17th, 2012 at 20:57

    Hi,

    Great summary!

    A small correction: the 3rd view mode is called fill/filled mode, not full mode.

    RE Q
  9. #9 written by firt October 17th, 2012 at 21:00

    Thanks, updated!

    RE Q
  10. #10 written by Joe Snell October 17th, 2012 at 21:34

    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?:

    @media (min-width: 48em) and (max-width: 61em) {
    @-ms-viewport{
    width:device-width;
    }
    /* css for 48em to 61em here */
    }
    For some reason that doesn’t seem logical to me. Am I missing something?

    Also, do you keep the meta declaration? I think you would.

    RE Q
  11. #11 written by ken October 18th, 2012 at 02:09

    Anyone know if css transitions and animations are hardware accelerated on RT?

    RE Q
  12. #12 written by Dan Eastwell October 18th, 2012 at 12:03

    Any thoughts about the best approach for a test set up for Win 8 / IE10 desktop?

    Either – upgrade from Win 7 and run Hyper-V http://www.winsupersite.com/article/windows8/windows-8-feature-focus-client-hyperv-142889 requiring a 64 bit machine or, run Win 8 in Windows Virtual PC.

    Given what you’ve said about viewport, it would seem you have run full Win 8, rather than a preview?

    Any thoughts?

    (I was referring to this preview on Win 7 http://blogs.msdn.com/b/ie/archive/2012/10/17/ie10-on-windows-7-available-in-november.aspx)

    RE Q
  13. #13 written by Paul Yabsley October 18th, 2012 at 16:28

    Couldn’t get the title meta tag to work when I tried. It still defaulted to the page title.

    TileImage and TileColor seemed to work and with Tile Color the gradient was applied automatically.

    RE Q
  14. #14 written by Trevor October 19th, 2012 at 17:11

    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?!

    RE Q
  15. #15 written by Darryl October 22nd, 2012 at 14:39

    @Trevor

    I’m not sure IE Hater is fair, yes everyone is free to use what they want the sad thing is not every client understands the difficulty in developing for IE’s foibles.

    Time is not free, time spent developing extra code for IE especially so.

    RE Q
  16. #16 written by Tyler October 24th, 2012 at 20:37

    I am a proud IE-hater. Not because it is IE, not because I’m a chrome or firefox or opera fanboy.

    I’m an IE-hater because it is the only, I repeat ONLY, web browser that requires special treatment for every app I develop.

    If I were to try selling any product that required special treatment to use, with no extra frills, no one would buy it.

    The problem isn’t that we are developing “for our favourite” web browser, it’s that we are forced to develop crutches for sub-par technology.

    RE Q
  17. #17 written by firt October 24th, 2012 at 20:38

    Tyler, at least on the mobile browser world I disagree. There is much more specific stuff on Safari for iOS than on other browsers.

    RE Q
  18. #18 written by Tyler October 24th, 2012 at 20:43

    That could be so; I have not developed in the mobile space and don’t know much about it.

    RE Q
  19. #19 written by Eelco Deuling October 25th, 2012 at 13:07

    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!

    RE Q
  20. #20 written by JJ October 28th, 2012 at 01:36

    Can you please post some information for how to install Flash player other then mentioned above..

    RE Q
  21. #21 written by thinsoldier November 8th, 2012 at 21:11

    @ firt

    They need to discuss what’s in MS’s pointer proposal a lot more but I’m liking it so far.

    RE Q
  22. #22 written by icomir November 29th, 2012 at 07:36

    Windows 8 is ok, but Windows RT is very aggressive to my websites. JQuery,Flash facing problems.

    Do you know any useful tool to test website on RT version?

    They just want to dominate the web, they want all, eager people!
    I am pretty sure that Google will beat them and especially Android!
    GO Android, go!

    RE Q
  23. #23 written by KK November 30th, 2012 at 00:52

    one thing i dont understand is, ie10 supports orientationchange events but doesnt support window.orientation.. very frustrating…

    RE Q
  24. #24 written by KK November 30th, 2012 at 01:03

    actually, i retract my previous comment. ie10 doesnt even support the orientationchange event

    RE Q
  25. #25 written by jim jones December 20th, 2012 at 15:53

    Someone know, how to avoid zooming? user-scalable= no not working

    RE Q

SetPageWidth