How to get your website ready for Windows 8

How to get your website ready for Windows 8

Windows 8 brings with it not just one new web browser, in the shape of Internet Explorer 10 – but two, as IE 10 turns out to be twins: one for the new "modern" style user interface – previously known as Metro, - and one for the more familiar desktop. They may share code, with a common HTML rendering engine and JavaScript compiler, but they're very different browsers.

Microsoft has encouraged web sites to take advantage of Internet Explorer 9's site pinning features, with new larger favicons and tools for notifying users of changes to sites (as well as jump lists that give you deep links into a site or a web application). Those tools are still there for Windows 8's desktop - there's still the ability for your users to pin a shortcut to your site to the Windows task bar - but the task bar isn't the only place for pinned sites. They can also be live tiles on the new Windows 8 Start screen.

So how can you get your site ready for IE10?

The Internet Explorer team has been giving a lot of guidance on its IE Engineering Team Blog ( Everything you did for IE9 still works on IE10, even down to pinned sites on the task bar, so many of the Windows 8 features you'll get for free. Some of these features, like jump lists, translate to the new touch IE, while others work with the Start screen – but to get the most, it's worth investigating the new features introduced especially for Windows 8.

IE10 s JavaScript support for touch gestures means you can build tablet apps in the browser like this photo table with multi touch rotate and zoom gestures

IE10's JavaScript support for touch gestures means you can build tablet apps in the browser, like this photo table, with multi-touch rotate and zoom gestures

Creating an RT tablet and touch-friendly site

If you're using Flash or any other plug-in platform, switch to HTML5. The new "modern" Internet Explorer won't run plug-ins (including Microsoft's own Silverlight). While it does have a built-in Flash player, it will only display sites that have been certified by Microsoft. If you haven't been working with Microsoft to put together a touch-friendly version of your site, then you're not going to be on that list. With IE10's improved HTML5 support design tools like Flash and Silverlight aren't necessary – and a site designed for IE10 will look the same in Chrome or Firefox.

Right click in the chromeless modern style IE10 to show the pushpin icon that creates Start screen live tiles

Right click in the chromeless modern-style IE10 to show the pushpin icon that creates Start screen live tiles

Sites that have started to move to HTML5 will want to take advantage of IE10's touch features alongside familiar mouse actions. These add support for tapping, pressing, pinch, rotate, swipe and drag. You'll need to write some JavaScript code to handle these new actions, which can be simply repurposing existing mouse handlers, or whole new sections of code to add more dynamic actions. Adding touch to HTML5 makes it easier to support new hardware – including Windows RT tablets.

While you're getting a site ready for HTML5 you can still use your choice of plug-ins. If you use the appropriate HTTP headers or meta tags, the "modern" IE10 will detect whether plugins are being used, and can redirect users to the desktop browser. However it's not the most user friendly way of doing things, as it can distract users in the middle of a transaction, or when they're waiting to watch a video.

Creating Windows 8 title icons for your site

Once you're delivering HTML5 to your users, you can start to add Windows 8 specific features. The most obvious is to create a 32x32 pixel version of your site's favicon. This is used when a site is pinned to the taskbar or to the start screen, with IE10 extracting the main colour from the icon to use as the colour of your site's Start screen tile. You can use the tools at the X-icon site ( to convert image assets into icons, ready for use on your site. Upload a JPEG, GIF, BMP or PNG file, then crop to a square before converting to an icon.