Microsoft has been adamant that design is central to the development of Windows 8, and early builds have proven that to be true. But so far, we’ve only really seen Windows 8 on a couple of devices, and Microsoft promises the Metro experience will be uniform regardless of screen size or form factor. But how?
In yet another sprawling MSDN essay written by UX program manager, David Washington, there are three areas that will prove key in Microsoft’s quest to accomplish this feat: adaptive layout frameworks, auto-scaling varying pixel densities and support for scalable vector graphics.
Adaptive Layouts
Microsoft’s use of CSS3 and XAML, which will allow developers to section off apps into pre-defined modules which can be rearranged on the fly. This will ensure that content will fit on a screen that’s 1024 pixels wide, or 2560 pixels wide. This also means app developers will need to consider these factors from the first moment they start working on an app.
Pixel Density Auto-Scaling
When you increase pixel density, things become very small on the screen unless you magnify it a little bit. Instead of offering more screen real-estate, on-screen assets instead become higher-fidelity. Microsoft is able to accomplish this on different screen sizes and resolutions by lumping displays into three categories — standard, HD and quad-XGA — and establishing scale factors.
Many Windows 8 tablet PCs will have pixel densities of at least 135 DPI – much higher than many of us are used to. Of course we’ve seen the introduction of HD tablets with Full HD 1920×1080 resolution on an 11.6″ screen, with a pixel density of 190 DPI or quad-XGA tablets with 2560×1440 on the same 11.6″ screen; that’s a pixel density of 253 DPI. Pixel densities can increase even more on lesser aspect ratios and smaller screens as we see in the new iPad. As the pixel density increases, the physical size of objects on screen gets smaller. If Windows wasn’t built to accommodate different pixel densities, objects on screen would be too small to easily tap or read on these tablets.
For those who buy these higher pixel-density screens, we want to ensure that their apps, text, and images will look both beautiful and usable on these devices. Early on, we explored continuous scaling to the pixel density, which would maintain the size of an object in inches, but we found that most apps use bitmap images, which could look blurry when scaled up or down to an unpredictable size. Instead, Windows 8 uses predictable scale percentages to ensure that Windows will look great on these devices. There are three scale percentages in Windows 8:
100% when no scaling is applied
140% for HD tablets
180% for quad-XGA tablets
Scalable Vector Graphics
Native support for scalable vector graphics will make it easy for developers to create assets that can adjust on-the-fly to varying resolutions and pixel densities without any additional coding from developers. If a developer doesn’t want to mess with SVG files, they can also save multiple images of the same file for the app to call on depending on screen size, or use CSS3 commands, which will automatically resize a file. Either way, it ensures an app will look the same regardless of screen size.
All in all, Microsoft has some smart ideas at play here, and it will be interesting to see how developers embrace these when Windows 8 hits the masses at the end of the year. [Microsoft]