Windows 8 and Microsoft Surface

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.

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.

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.

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