MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

Within the body of content, then, Windows app design encourages these layout principles:
• Let content flow from edge to edge.
• Keep ergonomics in mind: pan along the long edge of the view (primarily horizontal in
landscape views, vertical in snapped view and possibly portrait).
• Pan on a single axis only to create a sense of stability and to support swiping to select (as with
the ListView controls), or employ rails to limit panning directions to a single axis.
• Create visual alignment, structure, and clarity with the Windows 8 silhouette, aligning elements
on a grid for consistency. Refer again to Laying out an app page. This shape is what allows a
consumer’s eyes to recognize something as a Store app without having to think about it, which
provides a feeling of familiarity and confidence.
As I’ve mentioned before, the project templates in Visual Studio and Blend have these principles
baked right in and thus provide a convenient starting point for apps. Even if you start with the Blank
App template, the others like the Grid App will serve as a reference point. This is exactly what we did
with the Here My Am! app in Chapter 2, “Quickstart.”
The other important guiding principle that’s relevant to layout is “snap and scale beautifully.” This
means making sure you design every page in your app to handle all four view states and to be
appropriately adaptive across different display resolutions and pixel densities. We’ll look at this subject
in the “View States and the Many Faces of Your Display” section below. First, however, let’s look at a
little piece of core layout code.
Quickstart: Pannable Sections and Snap Points
In Chapter 5, “Collections and Collection Controls,” we spent a little time looking at when a ListView
control was the right choice and when it wasn’t. One of the primary cases where developers have
inappropriately attempted to use a ListView is to implement a home or hub page that contains a variety
of distinct content groups arranged in columns, as shown in Figure 6-4 and explained on Navigation
design for Windows Store apps. At first glance this might look like a ListView, but because the data it’s
representing really isn’t a collection, just a layout of fixed content, it makes sense to use tried-and-true
HTML and CSS for the job!
I point this out because with all the great controls that WinJS provides, it’s easy to forget that
everything you know about HTML and CSS still applies in Store apps. After all, those controls are in
themselves just blocks of HTML and CSS with some additional methods, properties, and events.
237