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 108...
WHAT’S NEW …
Windows Phone Update 3 (aka GDR3)
Support for more powerful hardware
1080p resolution support
Layout optimiza...
WHAT’S NEW ...
Nokia Lumia 1520
Gorgeous 6’’ display @ 1080p
Qualcomm Snapdragon 800 2.2 GHz
Adreno 330
2 GB RAM
Nokia Lum...
ALL NEW... 1080P
Scale factor:
1.5 (real scale
factor is 2.25)

© 2012 Nokia. All rights reserved.
© 2012 Microsoft. All r...
YOUR EXISTING APP
...will work on 1080p without any* changes.
If your application is already declaring 720p layout support...
OPTIMIZE FOR LARGE HD DISPLAYS
How can I make my app look better?
Detect device’s resolution
Design an auto-scaling layout...
RESOLUTION DETECTION
public enum Resolutions { WVGA, WXGA, HD720p, HD1080p };
public static class ResolutionHelper
{
stati...
DEVICE EXTENDED PROPERTIES
Three new properties available starting with GDR3
System.ArgumentOutOfRangeException will be th...
HIGH RESOLUTION GRAPHICS
For a crisp look on the 1080p device,
provide high resolution graphics
Avoid image distortion by ...
HIGH RESOLUTION GRAPHICS
Make sure to load the files at needed resolution to reduce memory footprint
...
var bmp = new Bit...
ASSETS WITH PREDEFINED SIZES
Tiles
Smaller on large screen displays due to the 3 columns
layout.
Use WXGA tile sizes and r...
FULL HD VIDEO
Full HD video supported, progressive or adaptive
We recommend Smooth Streaming technology, allowing the Play...
TYPOGRAPHY
Predefined text styles are already
optimized for your device.
If using custom text styles, please
make sure to ...
LAYOUT OPTIMISATION
It all depends on your app’s function and design.
Millimeter perfect UI?
Real scale factor is 2.25, no...
DETECT SCREEN SIZE
...

class ScreenSizeHelper
{
static private double _screenSize = -1.0f;
static private double _screenD...
DYNAMIC LAYOUTS

How to apply dynamic
layouts to an
application?
Demo.

© 2012 Nokia. All rights reserved.
© 2012 Microsof...
A global app development competition
for Nokia Lumia and Windows Phone 8.
It’s your chance to win prizes that will get you...
LUMIA APP LABS #16

THANK YOU!
QUESTIONS?
More information:
Nokia Lumia Developer's Library

http://developer.nokia.com/Re...
Upcoming SlideShare
Loading in …5
×

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

5,537 views

Published 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 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/

Published in: Real Estate, Technology, Business
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
5,537
On SlideShare
0
From Embeds
0
Number of Embeds
60
Actions
Shares
0
Downloads
188
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. LUMIA APP LABS #17 OPTIMISING YOUR APPS FOR LARGE-SCREEN PHONES Lucian Tomuta Chief Engineer Twitter: @ltomuta
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×