LUMIA APP LABS #17 OPTIMISING YOUR APPS FOR LARGE-SCREEN PHONES Lucian Tomuta Chief Engineer Twitter: @ltomuta

AGENDA Whats 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/6/2013 Nokia Internal Use Only

WHATS 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 IEs viewport reported size more consumer focused features. Windows Phone Preview for Developers 2012 Nokia. All rights reserved. 2012 Microsoft. All rights reserved. 11/6/2013 Nokia Internal Use Only

WHATS 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 2012 Nokia. All rights reserved. 2012 Microsoft. All rights reserved. 11/6/2013 Nokia Internal Use Only

ALL NEW... 1080P Scale factor: 1.5 (real scale factor is 2.25) 2012 Nokia. All rights reserved. 2012 Microsoft. All rights reserved. 11/6/2013 Nokia Internal Use Only

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 2012 Nokia. All rights reserved. 2012 Microsoft. All rights reserved. 11/6/2013 Nokia Internal Use Only

OPTIMIZE FOR LARGE HD DISPLAYS How can I make my app look better? Detect devices resolution Design an auto-scaling layout Optimize your graphic assets Optimize your video assets Optimize your fonts 2012 Nokia. All rights reserved. 2012 Microsoft. All rights reserved. 11/6/2013 Nokia Internal Use Only

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"); } } } 2012 Nokia. All rights reserved. 2012 Microsoft. All rights reserved. 11/6/2013 Nokia Internal Use Only

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. 2012 Nokia. All rights reserved. 2012 Microsoft. All rights reserved. 11/6/2013 Nokia Internal Use Only

HIGH RESOLUTION GRAPHICS For a crisp look on the 1080p device, provide high resolution graphics Avoid image distortion by using the correct aspect ratio. 2012 Nokia. All rights reserved. 2012 Microsoft. All rights reserved. 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/6/2013 Nokia Internal Use Only

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 2012 Nokia. All rights reserved. 2012 Microsoft. All rights reserved. 11/6/2013 Nokia Internal Use Only

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 2012 Nokia. All rights reserved. 2012 Microsoft. All rights reserved. 11/6/2013 Nokia Internal Use Only

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 devices capabilities and network bandwidth restrictions. Player Framework v1.3 now supports 1080p, get it from http://playerframework.codeplex.com/ 2012 Nokia. All rights reserved. 2012 Microsoft. All rights reserved. 11/6/2013 Nokia Internal Use Only

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%) 2012 Nokia. All rights reserved. 2012 Microsoft. All rights reserved. 11/6/2013 Nokia Internal Use Only

LAYOUT OPTIMISATION It all depends on your apps 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 users 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 2012 Nokia. All rights reserved. 2012 Microsoft. All rights reserved. 11/6/2013 Nokia Internal Use Only

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 cant, 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); } } } 2012 Nokia. All rights reserved. 2012 Microsoft. All rights reserved. 11/6/2013 Nokia Internal Use Only

DYNAMIC LAYOUTS How to apply dynamic layouts to an application? Demo. 2012 Nokia. All rights reserved. 2012 Microsoft. All rights reserved. 11/6/2013 Nokia Internal Use Only

A global app development competition for Nokia Lumia and Windows Phone 8. Its 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 Nokia Internal Use Only

LUMIA APP LABS #16 THANK YOU! QUESTIONS? More information: Nokia Lumia Developer's Library http://developer.nokia.com/Resources/Library/Lumia/ Lucian Tomuta Twitter: @ltomuta