There’s been quite a lot of attention paid to the new user interface in Windows 8, especially the Start Screen that’s replacing the Start menu, but perhaps if you’re a web developer you’ve been thinking none of this has much relevance for you.
Whether that’s actually right depends a bit on what sort of devices you’ve been targeting up until now.
The desktop environment you’re used to still exists in Windows 8 (more or less) but there’s also a new type of application called Metro-style Windows Store apps. By default, these run full screen, with much of the usual user interface hidden away so that, in the case of a web browser, almost all you see on screen is the page content.
Internet Explorer, if launched from the Start screen, will open as a Windows Store app by default, so you’ll start browsing full screen. Chrome, Firefox and Opera have each indicated that there’ll be a Windows Store versions of their browsers, so what follows will also apply to them.
Most commentary on Windows Store apps has tended to stop there, with the app running full screen, and gone on to talk about how you interact with it.
What hasn’t been commented on quite so much is what happens if you want to have more than one app on screen at once.
Although you can launch several apps and switch between them, the most you can display simultaneously is two apps side-by-side, as in the following picture, where you can see the BBC home page in Internet Explorer on the left, and a weather app “snapped” on the right, with the two separated by a black splitter bar:
You can click through the screen shots to see them full size.
Internet Explorer on the left is basically the web content, with an address bar and a few other things visible at the bottom of the screen. The weather app on the right displays the current weather and forecast weather for the next few days vertically down the side of the page. Nothing too challenging about that so far.
The weather app is a native application – not a web page – and it’s displaying in the snapped view. Internet Explorer is now displaying in the fill view, rather than full screen, but there isn’t a big practical difference between the two. Snapped view is another story though.
A window in the snapped view is a fixed 320 pixels wide – no more, no less – and runs from the top of the screen to the bottom. It can be snapped to either the right of the screen or the left. It’s only available for screen resolutions above 1366x768 – if you have a lower resolution, running Windows Store apps full screen is your only option, with no way to display them side by side. Fill view fills everything except for that 320-pixel-wide strip.
All Windows Store apps are required to support the snapped view, and as you can see the weather app does so clearly enough. As this version of Internet Explorer is also a Windows Store app, it’s require to support snapped view too. Let’s see what happens if we move the splitter bar across to the left so that IE is in snapped view and the weather app is in fill view:
Note that the weather app’s adjusted to make use of the space available to it (there are more interesting and practical examples of Windows Store apps, but I chose the weather app because the information in it’s innocuous). IE has also adapted; it’s now displaying the BBC home page 320 pixels wide.
If you’ve taken a responsive mobile-first approach to designing your site, using media queries, then your pages may appear OK. If you haven’t, you’ll get a 1024-pixel-wide rendering of your site scaled down to 320 pixels wide. Here’s how that BBC site looks, full size – not particularly usable:
Windows 8 is a game changer for web development, because it means that “mobile” design is no longer restricted to mobile devices. 320 pixels wide is narrower than many phones (though certainly not all – link via andrewducker). The Windows Store app version of IE is what your users will get by default when launching IE from the Start Screen, and even if there’s a push back against this, it can be guaranteed that some proportion of your audience will prefer to browse this way (and this will presumably become true for other browsers too in due course).
It’s true this’ll only be an issue when a Windows Store browser window’s snapped. Your users won’t be affected if the browser’s full screen, nor if it’s in fill view; and if they use the desktop version of the browser rather than the Windows Store version everything will be as it was in previous versions of Windows. Remember though that they may not think much of your site if it forces them into using their operating system in a particular way.
Think of it like this; if your site isn’t designed for mobile, you’re now accepting that some of the time it’s going to be unusable on Windows too.
Here’s some specific advice on how to start responding to this change (also pay attention to the helpful comment from Karl Dubost of Opera Software).