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