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 …
© 2012 Nokia. All rights reserved.© 2012 Microsoft. All rights reserved.
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 ...
© 2012 Nokia. All rights reserved.© 2012 Microsoft. All rights reserved.
04/09/2023
Scale factor:1.5 (real scale
factor is 2.25)
ALL NEW... 1080P
© 2012 Nokia. All rights reserved.© 2012 Microsoft. All rights reserved.
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
© 2012 Nokia. All rights reserved.© 2012 Microsoft. All rights reserved.
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
© 2012 Nokia. All rights reserved.© 2012 Microsoft. All rights reserved.
04/09/2023
RESOLUTION DETECTION
© 2012 Nokia. All rights reserved.© 2012 Microsoft. All rights reserved.
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
© 2012 Nokia. All rights reserved.© 2012 Microsoft. All rights reserved.
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
© 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"); } } }}
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
© 2012 Nokia. All rights reserved.© 2012 Microsoft. All rights reserved.
...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
© 2012 Nokia. All rights reserved.© 2012 Microsoft. All rights reserved.
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
© 2012 Nokia. All rights reserved.© 2012 Microsoft. All rights reserved.
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
© 2012 Nokia. All rights reserved.© 2012 Microsoft. All rights reserved.
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
© 2012 Nokia. All rights reserved.© 2012 Microsoft. All rights reserved.
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
© 2012 Nokia. All rights reserved.© 2012 Microsoft. All rights reserved.
...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
© 2012 Nokia. All rights reserved.© 2012 Microsoft. All rights reserved.
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/