×
Namespaces

Variants
Actions
Revision as of 18:33, 10 March 2014 by chintandave_er (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

All About Designing apps for Big Screen Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search

This article explains almost everything about designing apps for big screen devices like Nokia Lumia 1520 and optimizing existing apps for these devices.

WP Metro Icon UI.png
WP Metro Icon Graph1.png
WP Metro Icon WP8.png
Article Metadata
Code ExampleTested with
SDK: Windows Phone 8.0 SDK
Devices(s): Lumia 1520, 920
Compatibility
Platform(s):
Windows Phone 8
Dependencies: Windows Phone 8 GDR3
Article
Created: chintandave_er (21 Nov 2013)
Last edited: chintandave_er (10 Mar 2014)

Note.pngNote: This is an entry in the Nokia Imaging and Big UI Wiki Competition 2013Q4.

Contents

Introduction

Recently Windows phone update 3 also known as GDR3 was introduced. It comes with 1080p resolution and support for large screen displays. So new Lumias, such as Lumia 1520/1320, launched with big 6 inch displays. Lumia 1520 comes with 1080x1920 and Lumia 1320 with 720x1280 resolutions with 16:9 aspect ratios.

Due to this 1080p resolution and big display screen support, designing app concepts for such phones has changed a little bit. Existing apps that run on smaller 4 inch devices and don't support 720p resolution need to be optimized for large screen phones.

In this article, we will go through all aspects of designing and optimizing apps for 6 inch large screen phones.

Supported Resolution in GDR3

Below table describes supported resolution, aspect ratio, and scaled resolution for Windows Phone 8 GDR3. On a 1080p resolution screen, the scaleFactor property will return 1.5 although real scale factor is 2.25 which used internally by Windows Phone 8 OS.

Below table also shows how a screen appears in phones that have different resolutions. (Though 720p resolution could have 2 column layout start screen too, like in HTC 8x and 3 column layout in Lumia 1320)

Name: WVGA WXGA
Type1 720 startscreen.png
Type1 720 startscreen.png
Resolution: 480 x 800 768 x 1280
ScaleFactor: 15:9 15:9
Scaled Resolution: 480 x 800 480 x 800
Lumias: ND link: 525, 625, 520, 620, 720, 820 ND link: 1020, 925, 928, 920
Name: 720p 1080p
Type1 1080 startscreen.png
Type1 1080 startscreen.png
Resolution: 720 x 1280 1080 x 1920
ScaleFactor: 16:9 16:9
Scaled Resolution: 480 x 853 480 x 853
Lumias: ND link: 1320 ND link: 1520

How existing app will look on 1080p resolution

Both Windows Phone 7 and 8 apps run differently on 1080p resolutions.

Windows Phone 7 Apps

Windows Phone 7 apps were designed to run on 15:9 scale and don't scale perfectly on 16:9 so when WP7 apps run on 1080p application, black ribbon is displayed below system tray on top of the app as shown below in image.

To remove this black ribbon from app on 1080p resolution devices these wp7 apps need to port to Windows Phone 8 and support 720p resolution.

Wp7 App not supporting 720p running on 1080p device

Windows Phone 8 Apps

Windows Phone 8 apps which support 720p resolution support will automatically be up-scaled to 1080p resolution and will display as full screen without black ribbon. In GDR3 update, 1080p support is implemented as up-scaled 720p. Therefore an app must have 720p support to run in 1080p resolution without ribbon.

To support 720p, app must have declared this in application manifest file WMAppManifest.xml like below. Note there is no dedicated value for 1080p resolution, instead 720 tag is for both 720 and 1080p. This must be declared in ScreenResolutions tag as shown below.

<ScreenResolutions>
<ScreenResolution Name="ID_RESOLUTION_WVGA"/>
<ScreenResolution Name="ID_RESOLUTION_WXGA"/>
<ScreenResolution Name="ID_RESOLUTION_HD720P"/> <!-- This also use for 1080p-->
</ScreenResolutions>

Below you can see app supporting 720p resolution running on devices having 720p and 1080p resolution. You can note from second screenshot that app screen is bigger and it shows more content.

App supporting 720p running on 720p device
App supporting 720p running on 1080p device

Testing Application and 1080p Simulator

Currently there is no Simulator released for 1080p to test and verify app look on 1080p but one can test app and verify layout of their app in 720p resolution in current emulator. We can test our apps for different resolution by checking ​Microsoft.Devices.Environment.DeviceType and ​App.Current.Host.Content.ActualWidth APIs.

Microsoft soon will release Windows Phone GDR3 SDK update which will have 1080p supported Emulator in it.

Optimizing Existing Apps for 1080p resolution

Why do we need to optimize our apps

Phones supporting 1080p resolution has bigger screen like 6inch or greater. So in bigger screen phones, app can show bigger and so it has more content to show than lower screen size phones. So as per User Experience Design Guide, user can easily navigate and app can cover the most of the screen area.

So to make UX better on these big screen phone, we need to optimize our apps so that UX on this device gets better when user use our apps. User can navigate easily and can able to see more content area than on lower devices. So for this we need to optimize below things:

  • UI Layout
To show more content on content area
To make easy navigation
  • Graphics, to look good for bigger screen
Images size and resolution
Videos size and resolution
  • Splash screen
  • Fonts


Below are two steps to optimize our existing apps for 1080p resolution. You can also follow this steps to create apps for all resolutions.

  1. Resolution Dependent Layout - Detect device’s resolution and load different assets
  2. Dynamic layout - Design an auto scaling layout

1. Resolution Dependent Layout (By detecting device’s resolution)

In this type, we first detect device scaleFactor using App.Current.Host.Content.ScaleFactor and from it we recognize resolution of the device which should be either WVGA, WXGA or HD (720/1080) and as per the detected resolution we show various assets like UI layout, Graphics, Images, Videos, fonts.

To detect resolution of device, we need to detect scaleFactor using App.Current.Host.Content.ScaleFactor. Below ReferenceHelper.cs class reruns the current resolution of device. By getting resolution of this helper class we can load various assets as per resolutions and our needs.

ReferenceHelper.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
 
namespace ResolutionDependant
{
public enum Resolutions { WVGA, WXGA, HD };
 
public static class ResolutionHelper
{
private static bool IsWvga
{
get
{
return App.Current.Host.Content.ScaleFactor == 100;
}
}
 
private static bool IsWxga
{
get
{
return App.Current.Host.Content.ScaleFactor == 160;
}
}
 
private static bool IsHD
{
get
{
return App.Current.Host.Content.ScaleFactor == 150;
}
}
 
public static Resolutions CurrentResolution
{
get
{
if (IsWvga) return Resolutions.WVGA;
else if (IsWxga) return Resolutions.WXGA;
else if (IsHD) return Resolutions.HD;
else throw new InvalidOperationException("Unknown resolution");
}
}
}
}

And using this helper class, we will load respective various content. Below in class Reference.cs, we first get the resolution and set the content like Image, Video or navigate to other page layout which has all image, videos, page link etc. for that particular resolution. Here in sample example, we just showing detected resolution on screen of the app.

Reference.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
 
namespace ResolutionDependant
{
public class Resolution
{
public string BestResolutionImage
{
get
{
switch (ResolutionHelper.CurrentResolution)
{
case Resolutions.HD:
return "720/1080. Load 720p Assets or page layout.";
case Resolutions.WXGA:
return "WXGA. Load 768x1280 res Assets or page layout.";
case Resolutions.WVGA:
return "WVGA. Load 480x800 res Assets or page layout.";
default:
throw new InvalidOperationException("Unknown resolution type");
}
}
}
}
}

Here are some screenshot of sample app created to get idea about this resolution based optimization technique.

Source Code: You can download source code of this simple app to detect screen resolution from here: Media:ResolutionDependant.zip

2. Dynamic layout (Design an auto scaling layout)

In this technique of optimization, we need to first check that whether device is big screen device or not and based on it we set the style them of the page and/or app to show different layout for bigger screen devices.

To make a page render correctly on phones with WVGA, WXGA, 720p, and 1080p resolutions, don’t hard-code the height and width or the margins of the controls. After you drag and drop controls from the Toolbox, delete or carefully test the Margins that were added automatically.

Windows Phone 8 Update GDR3 introduces 3 new resolution related properties which can be get using the DeviceExtendedProperties API. The new properties are:

  1. PhysicalScreenResolution - Width / height in physical pixels.
  2. RawDpiX - The DPI along the horizontal of the screen. When the value is not available, it returns 0.0.
  3. RawDpiY - The DPI along the vertical of the screen. When the value is not available, it returns 0.0.

Note.pngNote: In case of Pre-GDR3 OS, above 3 properties give un-handled exception

Below we will see how we can use Dynamic Layout technique to optimize our apps for bigger screens.

Detecting Bigger Screen devices - Below is the code to know that screen is bigger or not using above new properties.

using Microsoft.Phone.Info;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
 
namespace DynamicLayout
{
class ScreenSizeHelper
{
static private double _screenSize = -1.0f;
static private double _screenDpiX = 0.0f;
static private double _screenDpiY = 0.0f;
static private Size _resolution;
 
static public bool IsBigScreen
{
get
{
// Use 720p emulator to simulate big screen.
if (Microsoft.Devices.Environment.DeviceType == Microsoft.Devices.DeviceType.Emulator)
{
_screenSize = (App.Current.Host.Content.ScaleFactor == 150) ? 6.0f : 0.0f;
}
 
if (_screenSize == -1.0f)
{
try
{
_screenDpiX = (double)DeviceExtendedProperties.GetValue("RawDpiX");
_screenDpiY = (double)DeviceExtendedProperties.GetValue("RawDpiY");
_resolution = (Size)DeviceExtendedProperties.GetValue("PhysicalScreenResolution");
 
// Calculate screen diagonal in inches.
_screenSize =
Math.Sqrt(Math.Pow(_resolution.Width / _screenDpiX, 2) +
Math.Pow(_resolution.Height / _screenDpiY, 2));
}
catch (Exception e)
{
// We're on older software with lower screen size, carry on.
Debug.WriteLine("IsBigScreen error: " + e.Message);
_screenSize = 0;
}
}
 
// Returns true if screen size is bigger than 5 inches - you may edit the value based on your app's needs.
return (_screenSize > 5.0f);
}
}
}
}

Using above help class we will first find that device is the bigger screen and if it is bigger screen phone than we set Theme style we have created for bigger screen to show more content. Below is the code use above helper and set Style.

Public class StyleSelector
{
static public void SetStyle()
{
if(ScreenSizeHelper.IsBigScreen)
{
var appTheme = new ResourceDictionary {
Source = new Uri("/ScreenStyle;component/Themes/Style1080p.xaml", UriKind.Relative)
};
 
Application.Current.Resources.MergedDictionaries.Add(appTheme);
}
}
}

We will call above method in App's constructor.

public partial class App : Application
{
public static PhoneApplicationFrame RootFrame { get; private set; }
 
/// <summary>
/// Constructor for the Application object.
/// </summary>
public App()
{
UnhandledException += Application_UnhandledException;
 
InitializeComponent();
 
// Load style for bigger screen
StyleSelector.SetStyle();
 
InitializePhoneApplication();
 
InitializeLanguage();
}

So this way we can set dynamic layout using Theme Style for bigger screen setting runtime after checking device screen size.

To get more information about this, check out Nokia Developer Library for Optimizing Layout for Big Screen here.

Sample of Dynamic layout (Nokia Developer Example)

Nokia developer Library has given one sample of how we can make use of Dynamic Layout where they have change the dataItem using different Style setting at runtime after detecting screen size.

We have shown above how to detect screen size and set different Them Style at runtime and below is one example using it.

They created one XAML file which has a Grid and one Image control in it. We will set different style at runtime to these controls.

    <DataTemplate x:Key="SampleDataItemTemplate">
<Grid Margin="12,6,12,6" Style="{StaticResource GridItem}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
 
<Image Grid.Row="0" Source="{Binding DataImage}" Style="{StaticResource GridImage}" />
 
<TextBlock Grid.Row="1"
Margin="0"
Style="{StaticResource LargeBoldText}"
Text="{Binding DataTitle}" />
</Grid>
</DataTemplate>

And then They have created two different Theme style to apply over above controls.

First Theme Style for Smaller Screen: SampleDataItemStyleDefault.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
<!-- Text -->
<Style x:Key="NormalText"
BasedOn="{StaticResource PhoneTextNormalStyle}"
TargetType="TextBlock" />
 
<Style x:Key="LargeBoldText" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Segoe WP Semibold" />
<Setter Property="FontSize" Value="32" />
</Style>
 
<!-- Layout -->
<Style x:Key="GridImage" TargetType="Image">
<Setter Property="Width" Value="204" />
<Setter Property="Height" Value="204" />
</Style>
 
<Style x:Key="GridItem" TargetType="Grid">
<Setter Property="Width" Value="204" />
</Style>
 
</ResourceDictionary>

You can see above in SampleDataItemStyleDefault.xaml that they have added 4 style for

  1. NormalText
  2. LargeBoldText
  3. GridImage
  4. GridItem

So they want to optimize Text size and Layout for large screen phones by overriding style for large screen over default one. Below is the style theme for Larger screen:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
<!-- Large Screen Overrides -->
 
<!-- Text -->
<Style x:Key="LargeBoldText" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Segoe WP Semibold" />
<Setter Property="FontSize" Value="22" />
</Style>
 
<!-- Layout -->
<Style x:Key="GridImage" TargetType="Image">
<Setter Property="Width" Value="128" />
<Setter Property="Height" Value="128" />
</Style>
 
<Style x:Key="GridItem" TargetType="Grid">
<Setter Property="Width" Value="128" />
</Style>
 
</ResourceDictionary>

And then they have checked the screen size using above explained code using ScreenSizeHelper helper class and override style at runtime in case of big screen using Application.Current.Resources.MergedDictionaries.Add

  • NormalText:- In case of Large Screen Style, NormalText has been removed and they only want to apply LargeBoldText.
  • LargeBoldText:- In case of Large Screen style, text size of LargeBoldText style has been reduces to 22 while it was 32 in Small screen Style. They have reduced text size as on bigger screen, it shows bigger than in smaller screen as it should be adjusted accordingly by OS.
  • GridImage:- In this style key they have changed the value of width and height of Image control.
  • GridItem:- In this style key they have changed the value of width of Grid control so that we get more column in bigger screen size than smaller screen.

Note.pngNote: This is just an example shows how to implement Dynamic layout using different style. Here only Text and Layout like Image size,Grid size are optimised for bigger screen. We can define Style for bigger screen for other controls as well so that our apps look better in bigger screen phones.

Nokia Developer Example Screenshot:

Applied Default Style on 720p device
Applied Bigger1080p Style on 1080p device

Some UI Design Tips for Dynamic layout

  • Provide high enough resolution assets to avoid up-scaling of low resolution images: up-scaling becomes more apparent with large screens.
  • Don't give fix width or hight to any control
  • Don't give fix margin to any control as it would be different for various screen sizes
  • During dropping the control from toolbox, check that it has not given fix margin etc and remove it.
  • Create different style themes for different screen sizes which can be set at runtime
  • Try to cover as much as room in bigger screen and show more content
  • Don't give fix sizes in Fonts

Splash Screen

One common Splash Screen Image for each resolutions

To display common single splash screen for all resolutions, use a single image file named SplashScreenImage.jpg that is 768 × 1280. The phone automatically scales the image to the correct size for each resolution.

Pixel perfect splash screen for all resolutions

If you want to provide pixel-perfect splash screens for all resolutions, you can add images with the following file names. All splash screen images must be in the root folder of your app project.

  • WVGA Resolution: SplashScreenImage.Screen-WVGA.jpg
  • WXGA Resolution: SplashScreenImage.Screen-WXGA.jpg
  • 720p Resolution: SplashScreenImage.Screen-720p.jpg
  • 1080p Resolution: SplashScreenImage.Screen-720p.jpg


Note above in 1080p resolution splash screen, we have provided same 720p splash screen image as there is no need to provide 1080p resolution image and phone will default using 720p splash screen image for 1080p phone.

Lock Screen

If your app setting up lock screen, it is recommended to use high resolution image for lock screen as it will be automatically down scaled for smaller screen devices but up scaling of lower resolution image decrease image quality and make it blur and noisy.

If your app creating lock screen image with fonts or image in it at runtime, I would suggest to use create new lock screen image with optimized images, fonts, by detecting resolution and/or screen size at runtime.

Applied Default Style on 720p device
Applied Bigger1080p Style on 1080p device

Tiles

For Tile, we only need to include tile images for WXGA resolution. The phone automatically scales tile images to the correct size for WVGA, 720p, and 1080p screens. So No need to optimize or change anything.

You can get more information regarding Tiles Design for bigger screen here in Nokia Developer Library.

App icons / List

Like Tile, for app icons, we only need to include tile images for WXGA resolution. The phone automatically scales tile images to the correct size for WVGA, 720p, and 1080p screens. So No need to optimize or change anything.

You can get more information regarding App Icon Design for bigger screen here in Nokia Developer Library.

Fonts

System fonts are automatically scaled by a 2.25 factor. Other fonts however (like PhoneFontFamilyNormal, PhoneFontSizeMediumLarge) are scaled just to 80% of the 2.25 factor. So they are scaled from 25.333px to 46px (25.333*2.25*0.8) instead of 57px (25.333*2.25). Custom font styles in applications should be adjusted accordingly.

You can get more information regarding the Fonts Sizes for bigger screen size phones on Nokia Developer Library.

Graphics

Graphics are automatically scaled down or scaled up in bigger screen but it is better way to use high resolution graphics as it will automatically scaled down for lower screens but for if we use lower resolutions images and OS scaled up it for bigger screens, it will become blurry and noisy with low quality.

You can get more information regarding the Graphics for bigger screen size phones on Nokia Developer Library.

Example 1: Picture Hub App

Below are the screenshot of the Picture Hub which optimised for bigger 1080p devices like Lumia 1520 and 1320. You can note that grid of 2 column shown in first image optimized to grid with 3 columns for bigger screen to cover more room and show more content. You can also note that the sizes of images also reduced in case bigger device for optimisation.

2 column layout on Smaller 4.3 inch screen
3 column layout on Bigger 6 inch screen

Though Grid with 4 columns in smaller phones remains same with 4 column in bigger phones but size of the image and total items shown in screen has change for bigger screen phones.

4 column layout with different image size on Smaller 4.3 inch screen
4 column layout with different image size on Bigger 6 inch screen

Example 2: People Hub App

You can also noticed that people hub for bigger screen has been optimised so that it show more content in bigger screen phones. You can noticed from below screenshots that grid with 2 column in smaller screen converted to 3 column for bigger screen but for the case of 4 columns it remains 4 columns grid for bigger screen but the size of the shown item has been reduced.

2 column Grid layout with different image size on Smaller 4.3 inch screen
3 column Grid layout with different image size on Bigger 6 inch screen
2 column Grid layout with different image size on Smaller 4.3 inch screen
3 column Grid layout with different image size on Bigger 6 inch screen

Example 3: Nokia Music Explorer

Nokia Developer recently update their Code example project Nokia Music Explorer and updated to optimise it for bigger resolution screen and updated with 3 column layout to get more benefits of large screen like Lumia 1520. This code example shows best optimisation for higher resolution screens.

You can get more information about this from Nokia Developer Library and also download source code of this Music Explorer from CodeExample:Music Explorer

Here are the screenshot of old 2-column layout and new 3-column layout for 1080p inspired with its new startscreen.

2 column Grid layout with different image size on Smaller 4.3 inch screen
3 column Grid layout with different image size on Bigger 6 inch screen

Source code

Resolution Dependant

Here you can download the source code for Resolution dependant technique to optimize apps which will help you to optimize your app. Media:ResolutionDependant.zip

Dynamic Layout Sample

Nokia Developer has provided a sample source code for Dynamic Layout. You can download it from Github which will help you to implement Dynamic Layout in your app.

References

Here are some helpful links:

Optimising for large screen phones
Dynamic Layout Sample
Multi-resolution apps for Windows Phone 8
Lumia App Labs: Episode 17: Optimising apps for large screens
Aspect ratio considerations
Design considerations

This page was last modified on 10 March 2014, at 18:33.
367 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×