 | 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:
