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

4. bigger screenmore pixelsmore content higher dpimore pixelsnicer graphics

6. Windows Phone Silverlight 8.1

7. LayoutAssets

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

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

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

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

13. 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?

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

15. ~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

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

17. 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

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

19. 2560 x 1440 1920 x 1080 1366 x 768 450 x 800 to scale Effective resolution (not app size) is important 384 x 683

21. Building adaptive apps for Windows

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

24. Effective size of assets determines detail level

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

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

27. Ignore this setting!

29. Steps to generating assets

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

31. Master assets at highest practical resolution

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

33. 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

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