StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The Metro design philosophy is certainly an interesting one. There's no doubt it can be used to make pretty stunning applications, but it's most certainly not for every application. </p> <p>Ignoring Windows Store Apps (or whatever Microsoft is calling them this week), the more unique aspects of Metro are:</p> <ul> <li>Chrome-less</li> <li>No gradients</li> <li>No rounded corners on borders or containers</li> <li>No sub-pixel rendering/anti-aliasing - everything is crisp and sharp</li> <li>No shadows, transparency or glass effects *</li> <li>Context sensitivity</li> <li>Strong use of typography</li> <li>Strict usage of colour</li> </ul> <p>* Microsoft actually breaks this one a couple of times - particularly with drop down lists.</p> <p>A good example of Metro done well in a traditional data-heavy application is Outlook 2013:</p> <p><img src="https://i31.photobucket.com/albums/c369/tomallen35/desktop.jpg" alt="Outlook 2013 Preview"></p> <p>It sticks to the core principles of Metro where data is king and UI distractions should be kept to a minimum. It also lets you see how the same data can be presented via outlook.com:</p> <p><img src="https://i31.photobucket.com/albums/c369/tomallen35/web.jpg" alt="Outlook.com"></p> <p>And here's the same site on the mobile site which demonstrates the consistency of the look and feel while making the data manageable for a completely different form factor:</p> <p><img src="https://i31.photobucket.com/albums/c369/tomallen35/mobile.png" alt="Outlook.com"></p> <p><em>Disclaimer: I personally don't consider touch to be an implicit aspect of Metro design - touch requires additional consideration for things like gesture control, graphical feedback and control spacing. People will no doubt disagree on that one, but then no one ever agrees when it comes to design :)</em></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload