[Prisjakt – The Story is a series of blog posts about our experiences helping Prisjakt to write a Windows 8 Metro Style App using HTML/CSS/JavaScript. Today’s post shows a few of the way we adapted the Prisjakt/PriceSpy app to different resolutions and is authored by Tess Ferrandez]

Introduction

One of the challenges of building metro apps is that they have to behave well in many different resolutions and also in portrait/landscape and snapped view.

When you work in HTML/JavaScript/CSS you can make use of the media queries to adjust the layout based on resolutions and views.

The simulator that comes with Visual Studio will allow you to test your layout in different resolutions and the main resolutions you want to focus on are 1366x768, 1920x1080 and 2560x1440. Snapped view is always 320px wide independent of resolution and is not available in portrait or on screens less than 1280px wide

There is a very good article on the Building Windows 8 blog about how to think when building for different size screens http://blogs.msdn.com/b/b8/archive/2012/03/21/scaling-to-different-screens.aspx that is well worth a read.

Media Queries

In CSS you can use media queries to perform conditional styling for your app. For Metro apps you can use the –ms-view-state queries as seen below

All fullscreen views

@media screen and (-ms-view-state: fullscreen-landscape), screen and (-ms-view-state: fullscreen-portrait)

Full screen with a max-width of 1280px

@media screen and (-ms-view-state: fullscreen-landscape) and (max-width: 1280px)

Snapped view

@media screen and (-ms-view-state: snapped)

Five tips and tricks from the PriceSpy app

1. Display more content on larger screens

For most content apps it is good to not just “zoom” the content but to provide more content in larger resolutions so that you can work with images etc. in one resolution. But for some views you will want to consider having different image resolutions as well. In either case it is best to display the images in their natural resolution to avoid weird effects such as lines disappearing etc. when you shrink and growing images.

For the main screen of PriceSpy/Prisjakt we work with a fixed number of products in the “hot products” list to avoid side scrolling in this grid since we gave the column a fixed width. Before making the API query for these images we check the width of the screen and use this to decide how many products to bring back (3 different variations). The individual blocks have the same size in order to display the images in their natural resolutions.

clip_image002[4] clip_image004

2. Change the layout to display more at once on larger screens

On the details page we are using a “tab system” to display different kinds of information (prices/reviews/properties and related products). When we moved to the big screen we did a number of things differently.

Displayed the images in higher resolutions

Added a section of small images that you can click on. On both the smaller screen you can flip through the images in a flipview so all the images are there all the time, they just get more space on the bigger screen.

Because we didn’t want to simply make the listbox wider we decided to separate out the properties section so it got a separate column.

Most of this was done by hiding and showing different elements in CSS for different resolutions, but some of it was also done in the javascript code by checking the resolution.

clip_image006 clip_image008

3. Changing from a row to a column layout in portrait view

The view you see above uses a display: -ms-grid layout with 2 columns (3 columns for the 2560x1440 screen) for the content. The image section is in column 1 and the details in column 2.

For portrait we simply switched this to a –ms-grid layout with 1 column and 2 rows instead and changed the layout so the images end up in row 1 and the details in row 2 (changing the heights etc. a little bit). Using this technique, moving from landscape to portrait was very simple and we avoided scrolling both sideways and up and down.

clip_image010[4]

4. Change from GridLayout to ListLayout in Snap mode

Since snapview is so narrow compared to the full screen most lists look better in listlayout when in snapview. In the update layout function you can very simply switch list views from a grid layout to a list layout using code similar to the following.

if (viewState === Windows.UI.ViewManagement.ApplicationViewState.snapped) {

categoriesListView.layout = new ui.ListLayout();

} else {

categoriesListView.layout = new ui.GridLayout();

}

clip_image012

5. Really think about what you want to have in snap view to make the most use of it.

In the case of PriceSpy/Prisjakt we chose to have the list of resellers visible when in snap view in the detail page. This is a perfect example of the metro mantra “win as one” where 1+1 > 2. When you click on an item in the resellers list this opens the resellers page in IE and when you are in snapped view you can now browse through the resellers and look at their pages while still keeping PriceSpy active in the snapview to avoid having to switch back and forth between the apps.

clip_image014

Conclusion

When you build Windows 8 Metro apps you have to think about how your app should scale in different resolutions already at the design stage. We found that it was better to show more content in most cases rather than just zooming the content but we would love to hear your tips and tricks.