?

Log in

No account? Create an account
Gavin Greig [userpic]

Why web developers should care about Windows 8

September 18th, 2012 (12:17 am)
current location: KY16 8SX

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:

IE in fill view on the left, and a weather app in snapped view on the right.

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:

IE in snapped view on the left, and a weather app in fill view on the right.

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:

BBC site at 320 pixels wide

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

Comments

Posted by: Marcus L. Rowland (ffutures)
Posted at: September 18th, 2012 10:11 am (UTC)

Oh good grief...

Thanks - that looks repulsive, but I suppose I might as well tool up for it - I think I'm mostly OK apart from one frame on the front page of my sites. I'll just have to do an alternative front page for mobiles and windows 8 which links to that bit as a separate page.

Posted by: Gavin Greig (ggreig)
Posted at: September 18th, 2012 11:04 am (UTC)
Judge Greig

Glad if it's helped. I thought it was something worth highlighting since I'm not really seeing it discussed much anywhere.

Posted by: Marcus L. Rowland (ffutures)
Posted at: September 18th, 2012 08:19 pm (UTC)

Any chance you could take a look

http://www.forgottenfutures.co.uk/

I've just linked to the blog rather than having it framed in the mobile version, no other changes.

Posted by: Gavin Greig (ggreig)
Posted at: September 19th, 2012 09:05 am (UTC)
Judge Greig

It still looks squished because it's being rendered at 1024px then scaled down to 320px. I'll mail a possible fix to you - tried including it here, but it was going to be a major pain to fix the HTML necessary to make it display properly in the comment.

Posted by: Steve Pugh (very_true_thing)
Posted at: September 18th, 2012 10:57 am (UTC)
HTML

Sounds okay.

320 pixels is the same as the iPhone so my existing adapative layouts should work okay for the snapped view.

And the minimum width of the fill view is 1366-320-width of splitter bar? So 1000 and a bit? So fill view will get my desktop layout (but not my widescreen layout on those sites that have them).

Are Windows Store apps only for touch screen devices? Or might there be scrollbars added as well? 320 pixels with a scrollbar would be a pain.

Posted by: Gavin Greig (ggreig)
Posted at: September 18th, 2012 11:20 am (UTC)

I think it's 1024 pixels (minimum - more on a wider screen), once you take stuff like the splitter bar into account - they're targeting existing resolutions to try to avoid breaking stuff too much.

Windows Store apps aren't just for touch devices, although they're certainly more likely to be at home there. It'll be interesting to see how much people hate them; I think there'll be quite a strong conservative reaction, but having said that I've also met people who are enthusiastic about the new style. (Personally, I'm still getting used to it and on the fence. I don't think the current apps are good enough, but we'll see what developers make of it.)

Specifically on the scrollbars, I just tried a long page in snapped view, and there is a scrollbar, but it isn't visible unless I try to interact with page, in which case it fades up over the top of the content. It's transparent, and fades away again after a few seconds if I do nothing.

Edited at 2012-09-18 11:21 am (UTC)

Posted by: magentodesigns (magentodesigns)
Posted at: October 23rd, 2012 10:27 am (UTC)
Magento Developers

Thanks for sharing this useful information,It will be helpful for the beginner as well as the experts. Magento Website Developer

Posted by: touch4laptop (touch4laptop)
Posted at: May 3rd, 2017 02:37 pm (UTC)

well, but the windows 10 is the best of all time especially on touch screens

8 Read Comments