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

OPTIMISING YOUR APPS FOR LARGE-SCREEN PHONES

LUMIA APP LABS #17

Lucian TomutaChief EngineerTwitter: @ltomuta

04/09/2023

What’s new?New features in Windows Phone Update 3New Nokia Lumia smartphones

Scalable applications supporting 1080pLayouts optimized for large displays?Questions...

AGENDA

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

04/09/2023

Windows Phone Update 3 (aka GDR3)Support for more powerful hardware1080p resolution supportLayout optimization for large-screen displaysChanges in application memory limitsChange in IE’s viewport reported size… more consumer focused features.

Windows Phone Preview for Developers

WHAT’S NEW …


04/09/2023

Nokia Lumia 1520Gorgeous 6’’ display @ 1080pQualcomm Snapdragon 800 2.2 GHzAdreno 3302 GB RAM

Nokia Lumia 1320Gorgeous 6’’ display @ 720pSnapdragon S4 1.7 GHzAdreno 330512 MB RAM

WHAT’S NEW ...


04/09/2023

Scale factor:1.5 (real scale

factor is 2.25)

ALL NEW... 1080P


04/09/2023

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

YOUR EXISTING APP


04/09/2023

How can I make my app look better?Detect device’s resolutionDesign an auto-scaling layoutOptimize your graphic assetsOptimize your video assetsOptimize your fonts

OPTIMIZE FOR LARGE HD DISPLAYS


04/09/2023

RESOLUTION DETECTION


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

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

04/09/2023

Three new properties available starting with GDR3System.ArgumentOutOfRangeException will be thrown if queried on

earlier OS versions.

DEVICE EXTENDED PROPERTIES


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.

04/09/2023

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

Avoid image distortion by using the correct aspect ratio.

HIGH RESOLUTION GRAPHICS


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

04/09/2023

Make sure to load the files at needed resolution to reduce memory footprint

Optimize asset downloads to minimize data traffic

HIGH RESOLUTION GRAPHICS


...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(@"Assets\Demo1080p.png", UriKind.Relative);ImageControl.Source = bmp;...

04/09/2023

TilesSmaller on large screen displays due to the 3

columns layout.Use WXGA tile sizes and rely on the platform

scaling them down.

Splash ScreenProvide resolution specific assets.SplashScreenImage.Screen-720p.jpg will be

loaded correctly while SplashScreenImage.jpg is letterboxed

ASSETS WITH PREDEFINED SIZES


04/09/2023

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/

FULL HD VIDEO


http://playerframework.codeplex.com/

04/09/2023

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 stylesFor body texts, scale by 1.8

(80%)

TYPOGRAPHY


04/09/2023

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 fingersMore items vs. bigger items

Resize your UI elements to fit more useful content on the screenMay be necessary on 5’’ or larger devices

LAYOUT OPTIMISATION


04/09/2023

If we can read the new device extended properties, calculate size.

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

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

04/09/2023

How to apply dynamic layouts to an application?

Demo.

DYNAMIC LAYOUTS


ENTER NOW > Nokia.ly/create

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.

THANK YOU!QUESTIONS?

LUMIA APP LABS #17

Lucian TomutaTwitter: @ltomuta

More information:Nokia Lumia Developer's Libraryhttp://developer.nokia.com/Resources/Library/Lumia/

http://developer.nokia.com/Resources/Library/Lumia/

http://developer.nokia.com/Resources/Library/Lumia/

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

Technology

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