Lumia App Labs #17: Optimising your Nokia Lumia apps for large screen phones

LUMIA APP LABS #17

OPTIMISING YOUR APPS
FOR LARGE-SCREEN
PHONES
Lucian Tomuta
Chief Engineer
Twitter: @ltomuta

AGENDA
What’s new?
New features in Windows Phone Update 3
New Nokia Lumia smartphones
Scalable applications supporting 1080p
Layouts optimized for large displays?
Questions...

© 2012 Nokia. All rights reserved.
© 2012 Microsoft. All rights reserved.

11/22/2013

WHAT’S NEW …
Windows Phone Update 3 (aka GDR3)
Support for more powerful hardware
1080p resolution support
Layout optimization for large-screen displays
Changes in application memory limits
Change in IE’s viewport reported size
… more consumer focused features.
Windows Phone Preview for Developers

11/22/2013

WHAT’S NEW ...
Nokia Lumia 1520
Gorgeous 6’’ display @ 1080p
Qualcomm Snapdragon 800 2.2 GHz
Adreno 330
2 GB RAM
Nokia Lumia 1320
Gorgeous 6’’ display @ 720p
Snapdragon S4 1.7 GHz
Adreno 330
512 MB RAM


11/22/2013

ALL NEW... 1080P
Scale factor:
1.5 (real scale
factor is 2.25)


11/22/2013

YOUR EXISTING APP
...will work on 1080p without any* changes.
If your application is already declaring 720p layout support – it will install and run scaled-up on
the 1080p device
If your application does not declare 720p layout support – it will not install on the 1080p
device and not be offered by the Windows Phone Store
If your application is a WP7.x application (not updated to WP8) it will be made available to
1080p devices, but will run letterboxed

11/22/2013

OPTIMIZE FOR LARGE HD DISPLAYS
How can I make my app look better?
Detect device’s resolution
Design an auto-scaling layout
Optimize your graphic assets
Optimize your video assets
Optimize your fonts


11/22/2013

RESOLUTION DETECTION
public enum Resolutions { WVGA, WXGA, HD720p, HD1080p };
public static class ResolutionHelper
{
static private Size _size;
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 Is720p
{
get
{
return (App.Current.Host.Content.ScaleFactor == 150 && !Is1080p);
}
}

private static bool Is1080p
{
get
{
if(_size.Width == 0)
{
try
{
_size = (Size)DeviceExtendedProperties.GetValue("PhysicalScreenResolution");
}
catch (Exception)
{
_size.Width = 0;
}
}
return _size.Width == 1080;
}
}
public static Resolutions CurrentResolution
{
get
{
if (IsWvga) return Resolutions.WVGA;
else if (IsWxga) return Resolutions.WXGA;
else if (Is720p) return Resolutions.HD720p;
else if (Is1080p) return Resolutions.HD1080p;
else throw new InvalidOperationException("Unknown resolution");
}
}
}


11/22/2013

DEVICE EXTENDED PROPERTIES
Three new properties available starting with GDR3
System.ArgumentOutOfRangeException will be thrown if queried on earlier OS
versions.
Property

Value type

Description

PhysicalScreenResolution

Size

Width / height in physical pixels.

RawDpiX

Double

The DPI along the horizontal of the screen. When
the value is not available, it returns 0.0.

RawDpiY

Double

The DPI along the vertical of the screen. When
the value is not available, it returns 0.0.


11/22/2013

HIGH RESOLUTION GRAPHICS
For a crisp look on the 1080p device,
provide high resolution graphics

Avoid image distortion by using the
correct aspect ratio.


public class MultiResImageChooserUri
{
public Uri BestResolutionImage
{
get
{
switch (ResolutionHelper.CurrentResolution)
{
case Resolutions.HD1080p:
case Resolutions.HD720p:
//return 16:9 aspect ratio asset, high res
return new Uri("Assets/MyImage.screen-1080p.jpg", UriKind.Relative);
case Resolutions.WXGA:
case Resolutions.WVGA:
// return 15:9 aspect ratio asset, high res
return new Uri("Assets/MyImage.screen-wxga.jpg", UriKind.Relative);
default:
throw new InvalidOperationException("Unknown resolution type");
}
}
}
}

11/22/2013

HIGH RESOLUTION GRAPHICS
Make sure to load the files at needed resolution to reduce memory footprint
...
var bmp = new BitmapImage();
// no matter the actual size, this bitmap is decoded to 480 pixels width
// aspect ratio preserved and only takes up the memory needed for this size
bmp.DecodePixelWidth = 480;
bmp.UriSource = new Uri(@"AssetsDemo1080p.png", UriKind.Relative);
ImageControl.Source = bmp;
...

Optimize asset downloads to minimize data traffic


11/22/2013

ASSETS WITH PREDEFINED SIZES
Tiles
Smaller on large screen displays due to the 3 columns
layout.
Use WXGA tile sizes and rely on the platform scaling them
down.

Splash Screen
Provide resolution specific assets.
SplashScreenImage.Screen-720p.jpg will be loaded
correctly while SplashScreenImage.jpg is letterboxed

11/22/2013

FULL HD VIDEO
Full HD video supported, progressive or adaptive
We recommend Smooth Streaming technology, allowing the Player Framework
to optimized video download based on device’s capabilities and network
bandwidth restrictions.

Player Framework v1.3 now supports 1080p, get it from
http://playerframework.codeplex.com/

11/22/2013

TYPOGRAPHY
Predefined text styles are already
optimized for your device.

If using custom text styles, please
make sure to review their sizes.
Scale by 2.25 your title styles
For body texts, scale by 1.8 (80%)

11/22/2013

LAYOUT OPTIMISATION
It all depends on your app’s function and design.
Millimeter perfect UI?
Real scale factor is 2.25, not 1.5 as reported by the app.
Large display not optimal for single hand usage
Move controls closer to user’s fingers
More items vs. bigger items
Resize your UI elements to fit more useful content on the screen
May be necessary on 5’’ or larger devices

11/22/2013

DETECT SCREEN SIZE
...

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 we can read the new device
extended properties,
calculate size.

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.

If we can’t, OS is pre-GDR3,
screen size is ~= 4’’

_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);
}
}
}


11/22/2013

DYNAMIC LAYOUTS

How to apply dynamic
layouts to an
application?
Demo.


11/22/2013

A global app development competition
for Nokia Lumia and Windows Phone 8.

It’s your chance to win prizes that will get you noticed,
including trips to MWC, DVLUP XPs, devices, promotions
and much more.
Mini Mission 5: Big Screen.
10 other missions still open.

ENTER NOW > Nokia.ly/create

LUMIA APP LABS #17

THANK YOU!
QUESTIONS?
More information:
Nokia Lumia Developer's Library
http://developer.nokia.com/Resources/Library/Lumia/

Lucian Tomuta
Twitter: @ltomuta

Lumia App Labs #17: Optimising your Nokia Lumia apps for large screen phones

Recommended

Recommended

More Related Content

Similar to Lumia App Labs #17: Optimising your Nokia Lumia apps for large screen phones

Similar to Lumia App Labs #17: Optimising your Nokia Lumia apps for large screen phones (20)

Recently uploaded

Recently uploaded (20)

Lumia App Labs #17: Optimising your Nokia Lumia apps for large screen phones

Editor's Notes