Build a Windows 8-esque Web Interface – an overview

The boom in Windows 8 ultrabooks is making web developers nervous. Why? Because Windows 8’s new Metro interface is unlike any User Interface (UI) that web developers have had to make before. It’s grid-based, which is good news if you’re familiar with the responsive grid-based frameworks such as Foundation and Bootstrap, but not so much if you haven’t met those yet. Also, it’s super-fluid, with no discernible loading times. For web developers, that means AJAX or complex CSS3 transitions – both tricky concepts to grapple with. In this article, we’ll use a recent CodePen code block to look at one take on replicating Windows 8’s native Metro features in to a web front-end.


The code and methods suggested here are adapted from a blog post by Sara Soueidan. By reproducing and altering Sara’s code, I make no claims as to her copyright.

Comments on the HTML

Sara has made excellent use of a very simple and lightweight grid system comprising three columns stacked with boxes of two different sizes (with classes of .big and .small, respectively). She has also decided to deploy IcoMoon, a premium icon font. Similarly to the more widely-used FontAwesome, IcoMoon makes use of browsers’ type-rendering capabilities to render simple vector-based iconry with very little overhead. IcoMoon’s icon selection is a little broader than FontAwesome’s, but the icons don’t conform to the latter’s established standard. We might have been tempted to use FontAwesome instead.

Comments on the CSS

Following the modern standard of mobile-first styling, Sara first establishes the default grid system behaviour which should deal with most of the block layout. Later on, she introduces media queries to deal with specific screen arrangements. Mobile-first styling is becoming ever-more popular due to strong growth trends in mobile data usage: according to Cisco, the number of mobile-connected devices will exceed the world’s population in 2013. There are other benefits to designing and developing for the small screen, too; such an approach encourages efficiency in the UI.

A much-praised feature of Windows 8 is the fluid ‘sliding doors’ animation beloved of the iOS home screens. Coding interfaces that resemble native device features is a popular trick – look at the number of mobile websites that borrow UI elements from iOS – but the growing ultrabooks category, with touch-optimised Windows 8 in tow, demands a new approach. Sara has chosen to avoid the difficulties of replicating swipes in the browser by adding buttons that call CSS keyframe animations to sweep the columns in or out. Swiping functionality could be implemented via the inclusion of a touch framework such as Brad Birdsall’s Swipe JavaScript slider, or more laboriously via JavaScript’s native onmouseenter and onmouseleave events.

Comments on the JavaScript

Sara’s JavaScript is ridiculously concise. She makes use of for loops to iterate over all the blocks in her grid, styling each with an individual class on the client-side. Such an approach could also be implemented via PHP and AJAX, which would help to reserve some of the trickier logical operations for the server itself (increasing compatibility with older devices). The dynamic class handling is very typical of a web application, which is apt in these circumstances: it also means the entire UI is highly extendable.

Overall comments

The replication of native UI features in a browser environment is not a new phenomenon, but it is a growing one. Browser technology – and the mobile hardware that supports it – is improving at a tremendous rate, such that higher-end devices will see little real difference in performance between a ‘native’ application and one ‘wrapped’ in a WebView (in fact, there are specific services which ‘package’ web applications for native App Store deployment, such as Adobe PhoneGap). Newer ultrabooks and tablets in particular – not to mention Chromebooks, whose Chromium OS runs almost exclusively via web technologies – will find that ‘web-based’ languages like HTML and CSS are going to become increasingly dominant, as their cross-platform compatibility significantly extends their user base. Examples like Sara’s are just the tip of the iceberg, and developers like Sara are the intrepid pioneers of a new, web-based world.

Tagged with: , , ,