際際滷

際際滷Share a Scribd company logo

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

Download as PPTX, PDF
Lucian Tomua
Lucian Tomua

Optimising your Windows Phone apps for large screen phones. Take advantage of Nokia Lumia 1520's 6 inch display and its 1080p resolution.

1 of 19
Download to read offline
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/22/2013
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/22/2013
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/22/2013
ALL NEW... 1080P Scale factor: 1.5 (real scale factor is 2.25) 息 2012 Nokia. All rights reserved. 息 2012 Microsoft. All rights reserved. 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 息 2012 Nokia. All rights reserved. 息 2012 Microsoft. All rights reserved. 11/22/2013
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/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"); } } } 息 2012 Nokia. All rights reserved. 息 2012 Microsoft. All rights reserved. 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. 息 2012 Nokia. All rights reserved. 息 2012 Microsoft. All rights reserved. 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. 息 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/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 息 2012 Nokia. All rights reserved. 息 2012 Microsoft. All rights reserved. 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 息 2012 Nokia. All rights reserved. 息 2012 Microsoft. All rights reserved. 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 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/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%) 息 2012 Nokia. All rights reserved. 息 2012 Microsoft. All rights reserved. 11/22/2013
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/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 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/22/2013
DYNAMIC LAYOUTS How to apply dynamic layouts to an application? Demo. 息 2012 Nokia. All rights reserved. 息 2012 Microsoft. All rights reserved. 11/22/2013
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
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

More Related Content

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

  • 1. LUMIA APP LABS #17 OPTIMISING YOUR APPS FOR LARGE-SCREEN PHONES Lucian Tomuta Chief Engineer Twitter: @ltomuta
  • 2. 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/22/2013
  • 3. 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/22/2013
  • 4. 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/22/2013
  • 5. ALL NEW... 1080P Scale factor: 1.5 (real scale factor is 2.25) 息 2012 Nokia. All rights reserved. 息 2012 Microsoft. All rights reserved. 11/22/2013
  • 6. 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/22/2013
  • 7. 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/22/2013
  • 8. 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/22/2013
  • 9. 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/22/2013
  • 10. 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/22/2013
  • 11. 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/22/2013
  • 12. 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/22/2013
  • 13. 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/22/2013
  • 14. 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/22/2013
  • 15. 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/22/2013
  • 16. 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/22/2013
  • 17. DYNAMIC LAYOUTS How to apply dynamic layouts to an application? Demo. 息 2012 Nokia. All rights reserved. 息 2012 Microsoft. All rights reserved. 11/22/2013
  • 18. 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
  • 19. 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

Editor's Notes

  1. Nokia Create is a global app development competition for Nokia Lumia and Windows Phone 8. There are 15 missions built around 8 categories, so no matter what type of app you would like to develop there's an opportunity to win. You can also take this as a challenge to learn something new. The 8 categories are Image & Photo, NFC, Maps & Places, Music, Cross-8, Games & Fun, Work Life and Freestyle. Master Missions challenge you to create new apps.Mini Missions challenge you to update your existing apps: 2 just opened Big Screen and Localisation Do Good Mission challenges you to create new apps for the visually impaired or update your existing ones to make them more accessible. The prize packages include trips to exciting events, free devices, plus promotions, ad credits and more. There are also special extra prizes based on the category. Each Mission will have a winner and 9 runners up. There will be 1 Grand Prize winner. Deadlines vary, so check out the site for more info and sign up.