Click here to Skip to main content
Click here to Skip to main content

Tagged as

The Windows 8 Metro Page Grid

, 19 Feb 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
Chapter excerpt from Windows 8 Apps with HTML5 and JavaScript
Windows 8 Apps with HTML5 and JavaScript

By Dan Shultz, Joel Cochran, and James Bender

Windows 8 gives users a flexible, responsive surface for business applications, productivity tools, photos, games, and music. For developers, the new HTML and JavaScript tools and frameworks for Windows 8 apps offers an equally nimble coding environment. By blending standard lightweight tools with the full power of the Win8 and WinRT platforms, you can create fast, fluid apps for phones, tablets, laptops, and desktops using technologies that are second nature to most web developers. These apps are fully compatible with the Win8 apps you build using C# and XAML, easy to deploy, and ready for the Windows Store where you have instant access to millions of users around the world. This article, based on the chapter 3 of The Windows 8 Metro Page Grid, the authors show you how to use the Metro Data grid.

You may also be interested in…

When you finally get to the point where you are ready to deploy your application, you’ll find that having a good foundational knowledge of Metro design and the Metro Page Grid will make the submission process go much more smoothly. In this article, based on chapter 3 of JavaScript and HTML5 for Windows 8, the authors show you how to use the grid.

As a design aid, Microsoft has provided us a “silhouette” or basic application layout. What lies beneath it is Windows 8 grid system. This grid can help ensure that our app will harmoniously coexist with other Windows 8 apps, and avoid a jarring effect when switching between apps. The grid is also flexible enough to allow for uniqueness and flexibility.

The grid is divided up into 20 pixel units. Each 20 pixel unit can be divided into subunits of 5 × 5 pixels, so there are 16 subunits per unit. Figure 1 shows the grid in the upper-left corner of the screen. The image is enlarged to show pixels, subunits, and units.

Figure 1 Image depicting the basic grid for designing Windows 8 Metro applications. The upper left is enlarged to show subunits, and units.

Page heading

The baseline of the page heading should be 5 units from the top (100 pixels). The left margin for the page header is 120 pixels or 6 units. The font used should be 42 point Segoe UI Light. Keep in mind that there is flexibility to placement of elements on the grid, but the 6-unit left margin is an area you should avoid at all costs because this area is also reserved for the user’s swipe-back to previous apps or web pages. So interference with this area can affect the navigation that is built into the Metro framework. Also, keep in mind that right margin—the user will use this area frequently when accessing the Charms Bar for searching, sharing, settings, and so on.

Figure 2 The Page Heading on the Metro grid. The baseline of the text should be 6 units from the left and 5 units from the bottom.

Content area

The area containing the content for the page should be 7 units, or 140 pixels from the top. The left margin, again, is 6 units, or 120 pixels. The bottom margin is flexible. If your content pans horizontally, then it should be no more than 6.5 units (130 pixels), or no less than 2.5 units (50 pixels). If your content pans vertically, the top and left margins remain the same. Obviously, if your content pans vertically, there’s no bottom margin. If your content doesn’t pan, you’ll want to leave a comfortable margin on the right hand as well.

Also, now that we’re looking at our fonts and typography within a grid system, remember that our emphasis on typography is not just necessarily for the sake of appearances; it clearly establishes the hierarchy of our textual content

It shows meaningful differences between “this is the headline” and readable body text, for example, as well as indicating the hierarchy of subheadings within the app. So, it really helps us clarify our information hierarchy.

Figure 3 The content area for a horizontally-panning Metro application. Note the maximum and minimum heights for the bottom margin.

Horizontal and vertical padding

Padding is one place where the subunits come into play. Padding and the separation of items within the grid differs depending on the types of content. Items like images and user tiles have clear 2 subunits, or 10 pixels, of padding between them and their accompanying text. Lists have clear 2 units of padding between columns. Hard-edged items have 2 subunits of padding between columns.

Vertical padding also varies depending on the item types. Tile and text lists have 1 unit, or 20 pixels, of vertical padding between items in a row. Hard-edged objects have 2 subunits, or 10 pixels, of padding between items in a row.

The padding between groups of differing items is clean 4 units, or 80 pixels. This padding is wider to allow enough separation to easily distinguish one group from the next when the user is panning between items.

Figure 4 The Metro Grid showing suggested column widths and gutters between various types of items that can exist on a screen.

This obviously isn’t the most exciting layout of all time, and don’t feel like you’re restricted to using one particular layout. The grid is very flexible, and you can format and lay out your application any way you want to while still using this underlying grid foundation.

Below is an example of a completely unique layout for an application, but notice that it’s still based on the grid system.

Figure 5 Sample custom layout for a Metro application using the grid

This layout is completely unique to the application, but by relying on the Windows 8 Metro grid system there’s a real feeling of continuity and stability for the user when they’re switching between your app and other Metro apps.

It’s not a law to even use the grid system; you might have a game that doesn’t really lay out content, and it might not make sense.

But if you do need to layout content, it will make sense to use grid and be familiar with the common layout system for Metro apps. And if you use the built in templates, they already implement this grid, so it’s done for you out of the box.

“But I’m Not a Designer”

Typography and page layout is typically in the domain of designers rather than developers and may feel a bit foreign to many developers making the leap into Metro application development. Earlier Microsoft development tools focused heavily on rapid development and included simple UI forms and controls suited for creating simple “battleship grey” interfaces—simple applications with grey backgrounds and minimal layout. Silverlight and WPF development allowed for developing applications with much more elaborate user interfaces, but now with Metro application development, a well planned out UI is even more of a necessity. In fact, there are many UI standards you’ll want to know about, and adherence to these standards will be examined closely before an application will be accepted in the Windows Store.

Takeaways

The good news for developers is that this grid system is built into the Visual Studio, and the Metro controls were designed specifically with the grid system in mind. So, use the templates.

Eventually though, you will outgrow the templates—or at least you’ll end up using them only as a foundation and then honing your UI into something that is uniquely your app. At the Windows Store, a large percentage of the applications are basically one of these built-in templates containing a scrollable grid of images. Your app is unique—you’ll want to customize your UI for your specific needs—not just another quickly skinned Visual Studio template.

But, don’t forget, Visual Studio 2012 still contains all project types we’ve used in the past—ASP.NET MVC, Windows Forms, Console apps—depending on the needs of the application. You need to make sure you’re not “shoehorning” something into a Windows 8 HTML app that would be better served using another project type.

Here are some other Manning titles you might be interested in:

HTML5 for .NET Developers
Jim Jackson II and Ian Gilman

Learn Windows IIS in a Month of Lunches
Jim Jackson II and Ian Gilman

Windows 8 XAML in Action
Pete Brown

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Manning

United States United States
No Biography provided

Comments and Discussions

 
QuestionThanks. Really helpful. PinmemberBukan iJam13-Feb-14 5:28 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.141015.1 | Last Updated 19 Feb 2013
Article Copyright 2013 by Manning
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid