phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions

bigger screenmore pixelsmore content higher dpimore pixelsnicer graphics

Windows Phone Silverlight 8.1

LayoutAssets

LayoutAssets Physical Size & Shape Viewing Distance Effective Resolution Detail Level Scale Factors Mastering

40” 30” 24” 18” 14” 10” 8” 6” 4” to scale App size (not device resolution) is important

App shape (not device orientation) is important wide tall square

LayoutAssets Physical Size & Shape Viewing Distance Effective Resolution Detail Level Scale Factors Mastering Physical Size & Shape

4K TV: 3840 x 2160 But I just upgraded to a 4K TV! If a 4” phone is 800 pixels wide, does that mean a 40” monitor is 8,000?

Close objects appear larger than further-away ones x y 2x 2y θ that’s an eye…

~4” phone at 10 feet Close objects appear larger than further-away ones ~40” screen at 10 feet ~4” phone at 1 foot Same angle of view

LayoutAssets Physical Size & Shape Viewing Distance Effective Resolution Detail Level Scale Factors Mastering Viewing Distance

Effective resolution embraces viewing distance ~40” screen at 10 feet Same effective resolution ~4” phone at 1 foot X × Y effective pixels Same angle of view

40” 30” 24” 18” 14” 10” 8” 6” 4” to scale App size (not device resolution) is important

2560 x x x x 800 to scale Effective resolution (not app size) is important 384 x 683

Building adaptive apps for Windows

LayoutAssets Physical Size & Shape Viewing Distance Effective Resolution Detail Level Scale Factors Mastering Effective Resolution

Effective size of assets determines detail level

LayoutAssets Physical Size & Shape Viewing Distance Effective Resolution Detail Level Scale Factors Mastering Detail Level

Relative density (not DPI) is important Also known as “scale factor” or “resolution scale” 2x as dense

Ignore this setting!

Steps to generating assets

LayoutAssets Physical Size & Shape Viewing Distance Effective Resolution Detail Level Scale Factors Mastering Scale Factors

Master assets at highest practical resolution

LayoutAssets Physical Size & Shape Viewing Distance Effective Resolution Detail Level Scale Factors Mastering

Where’s the code? PropertyDescription ResolutionScale Scale factor (enum) – Windows RawPixelsPerViewPixel Scale factor (double) – Windows Phone RawDpiX, RawDpiY Ignore unless measuring real-world objects (ruler, hardware, etc.) LogicalDpi Avoid unless working with Direct2D or legacy code that assumes 96 DPI

Minimum effective resolution for Phones Lumia 920 Physical resolution Scale Factor Effective Resolutio n Silverlight (8.x)768 x x 800 XAML / HTML768 x x 640 multiply constants by 0.8