LUMIA APP LABS: OPTIMISING YOUR NOKIA LUMIA APPS FOR LARGE-SCREEN PHONES

  • 4,520 views
Uploaded on

This webinar presentation by Nokia chief engineer Lucian Tomuta looks at the features of Windows Phone 8 update 3, specifically those related to supported screen resolutions. Lucian starts by …

This webinar presentation by Nokia chief engineer Lucian Tomuta looks at the features of Windows Phone 8 update 3, specifically those related to supported screen resolutions. Lucian starts by providing an overview to the technical changes offer in the update. Then he looks at how the features to detect screen resolution and size can be used to optimise your apps and content for Nokia Lumia phone with physically large screen (of up to 6”) and supporting 1080p resolution. He specifically looks at issues around graphics and typography as well as layout optimisation. After this session you’ll be able to ensure your apps are optimally compatible with the latest Windows Phone products from Nokia.

For detailed documentation on working with large screens, see http://developer.nokia.com/Resources/Library/Lumia/#!optimising-for-nokia-phablets.html

For more details about developing for Nokia Lumia smartphones visit http://www.developer.nokia.com/windowsphone

Check out details of the other Lumia App Labs, including the future schedule, here: http://www.developer.nokia.com/Develop/Windows_Phone/Learn/

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
4,520
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
186
Comments
1
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. LUMIA APP LABS #17 OPTIMISING YOUR APPS FOR LARGE-SCREEN PHONES Lucian Tomuta Chief Engineer Twitter: @ltomuta
  • 2. 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/6/2013 Nokia Internal Use Only
  • 3. 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 © 2012 Nokia. All rights reserved. © 2012 Microsoft. All rights reserved. 11/6/2013 Nokia Internal Use Only
  • 4. 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 © 2012 Nokia. All rights reserved. © 2012 Microsoft. All rights reserved. 11/6/2013 Nokia Internal Use Only
  • 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/6/2013 Nokia Internal Use Only
  • 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/6/2013 Nokia Internal Use Only
  • 7. 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 © 2012 Nokia. All rights reserved. © 2012 Microsoft. All rights reserved. 11/6/2013 Nokia Internal Use Only
  • 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/6/2013 Nokia Internal Use Only
  • 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/6/2013 Nokia Internal Use Only
  • 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/6/2013 Nokia Internal Use Only
  • 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/6/2013 Nokia Internal Use Only
  • 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/6/2013 Nokia Internal Use Only
  • 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 device’s 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
  • 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/6/2013 Nokia Internal Use Only
  • 15. 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 © 2012 Nokia. All rights reserved. © 2012 Microsoft. All rights reserved. 11/6/2013 Nokia Internal Use Only
  • 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 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); } } } © 2012 Nokia. All rights reserved. © 2012 Microsoft. All rights reserved. 11/6/2013 Nokia Internal Use Only
  • 17. 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
  • 18. 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 Nokia Internal Use Only
  • 19. 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