IE10 in Windows 8.0 has many nice features that help your website to look more like an app and also function better on touch screen devices. IE11 in Windows 8.1 improve those feature even further.

I have recently continued on one of my beta web app, http://bookmarks.vsoftstudio.com, built mainly to keep interesting URLs from all my devices (including Windows Phone), as well as to test all the amazing JavaScript framework and the new features of Internet Explorer. In IE10 and IE11, there are many new meta tags and APIs being introduced, but I will list some that you should definitely put in all your websites. Those are the ones that are very simple to use and really worth the little time spent.

Be aware that IE11 is still in preview, so those below relating to this version may changed in the future. So if you use them, make sure you re-visit your website after the final version of IE13 have been release to check all the preview features.

Pin tiles

You can pin any site onto your Start Screen from IE10 or IE11 Modern version (or Metro or Immersive as stated in IE11). In IE10, you can tap on the Pin button on the right of the address bar and choose Pin to Start. In IE11, it is slightly different: you will tap on the Favorite button (one with a star) that replaced the Pin button, then pinning the current site.

However, although you can pin basically any site, the pinned tiles will look very ugly if you do not provide some meta tags. IE simply gets the favicon and puts in the center of the tile; the background color is determined automatically by some “smart” algorithm, and the text is the current header of the page. The example below is when I tried to pin flickr.com to my Start Screen from IE11.

In IE10, you can overwrite the default behavior by providing 3 meta tags in your head section: application-name, msapplication-TileColor, msapplication-TileImage. Here is an example from my own page bookmarks.vsoftstudio.com.

<meta name=”application-name” content=”Bookmarks” />
<meta name=”msapplication-TileColor” content=”#276397″ />
<meta name=”msapplication-TileImage” content=”~/pin.png” />

The tile image must have the size of 144x144px (I have not tried otherwise), and it should be a transparent PNG since the background will have a little gradient from the top left to the bottom right corner. So now you could have a big logo with your own background color when the users pin your site.

The meta tags in IE10 also work in IE11. However, IE11 supports pinned tile resizing (all the 4 tile sizes of Windows 8.1), so it introduce 4 new meta tags: msapplication-square70x70logo, msapplication-square150x150logo, msapplication-square310x150logo, msapplication-square310x310logo. You may also realize that the sizes of the tile images are now the actual size of the tiles, so the image will cover the whole tile and it will be easier to design an amazing background as well.

In IE10, you can also put a badge icon or number on the bottom right corner. The badge icon will be set in a online XML file and that file will be polled in a defined periodic interval.

In IE11, you can even set a tile template in the XML file, and using multiple files at the same time, so it will look even more like a live tile from a native app.

You can read more on Pinned Tiles, periodic update, jump list, some new JavaScript APIs and see some examples here: http://msdn.microsoft.com/en-us/library/ie/bg183312(v=vs.85).aspx

@-ms-viewport

This one is not really a features, but a new way the Modern version of IE handle the width of the page.

If you have some experience with mobile web design, you may already know the idea of viewport. Basically, viewport will decouple the actual device width (and height)in pixel and the width (and height) that the page is rendered onto, so that a page does not look too small on a high DPI device. So it is like a virtual size of the browser.

The problem occurs when you implement a page with a responsive design and hope that it will look wonderful when you snap IE on the side. You will then quickly realize that all you get is a zoomed out version of the page, which looks awful and does not responsive as well. And you would not experience this in the desktop version of IE.

That problem is caused due to the way IE Modern handles viewport size. Basically, the viewport will be fixed at 1024 in width, no matter what the actual size on screen is. You can check this easily by outputting window.innerWidth by JavaScript (you can type javascript:alert(window.innerWidth) on the address bar).

The solution is to overwrite the default behavior by putting @-ms-viewport into your CSS. The easiest way is to put the below snippet on top of your main CSS file.

@-ms-viewport {
    width: device-width;
}

This is basically tell IE to set the viewport size exactly as the pixel size of the browser on screen. Then you can try to snap IE10 or resize IE11 and see the page changes exactly as you have expected (the width will now show as 320px when you snap the page).

You can also put @-ms-viewport inside the @media block, so that each block will correspond to 1 viewport size. More on this here: http://msdn.microsoft.com/en-us/library/ie/hh708740(v=vs.85).aspx.

There’s one catch here! IE10 on Windows Phone will recognize @-ms-viewport and react the same way. It is very stupid and will cause the page’s elements become very small on a Lumia 920 (or any at a similar DPI). You will find the same problem on www.modern.ie as well. It is considered as a bug in IE10 for WP8 (IE9 for WP7 is not affected), but I can confirm that it is not fixed in GDR2 update.

My current solution is to check the user agent string and only add those code when it is not a windows phone 8 (or only add when it is IE metro). I still don’t know how to properly solve this problem, so if you did figure something out, please let me know in the comments below! I could see that www.microsoft.com does not have that problem, but I am not sure how they fix that yet. I guess they use some JavaScript to change the width after the page is loaded.

Even More

There are even more interesting stuffs including Prerender, Prefetch and Flip Ahead that you may want to try on your website. You can see many demoes and documentations at http://ie.microsoft.com/testdrive/!