Scale iPhone App To iPad

A mix of experiences and a how to in order to scale iPhone apps to iPads.

Transcript

1. Scaling iPhone App To iPad Munich iOS
2. Scale iPhone App to iPad Introduction
3. Scale iPhone App to iPad Introduction ▸ Chris Blättermann
4. Scale iPhone App to iPad Introduction ▸ Chris Blättermann ▸ “Full Stack Software Developer”
5. Scale iPhone App to iPad Introduction ▸ Chris Blättermann ▸ “Full Stack Software Developer” ▸ riskmethods GmbH
6. Scale iPhone App to iPad Introduction ▸ Chris Blättermann ▸ “Full Stack Software Developer” ▸ riskmethods GmbH ▸ B2B SaaS Solution for Supply Chain Risk Management
7. Scale iPhone App to iPad Introduction ▸ Chris Blättermann ▸ “Full Stack Software Developer” ▸ riskmethods GmbH ▸ B2B SaaS Solution for Supply Chain Risk Management ▸ riskmethods Mobile Companion
8. Scale iPhone App to iPad Introduction ▸ Chris Blättermann ▸ “Full Stack Software Developer” ▸ riskmethods GmbH ▸ B2B SaaS Solution for Supply Chain Risk Management ▸ riskmethods Mobile Companion
9. Scale iPhone App to iPad Introduction ▸ Chris Blättermann ▸ “Full Stack Software Developer” ▸ riskmethods GmbH ▸ B2B SaaS Solution for Supply Chain Risk Management ▸ riskmethods Mobile Companion
10. Scale iPhone App to iPad Introduction ▸ Chris Blättermann ▸ “Full Stack Software Developer” ▸ riskmethods GmbH ▸ B2B SaaS Solution for Supply Chain Risk Management ▸ riskmethods Mobile Companion
11. Scale iPhone App to iPad Introduction ▸ Chris Blättermann ▸ “Full Stack Software Developer” ▸ riskmethods GmbH ▸ B2B SaaS Solution for Supply Chain Risk Management ▸ riskmethods Mobile Companion
12. Scale iPhone App to iPad Introduction ▸ Chris Blättermann ▸ “Full Stack Software Developer” ▸ riskmethods GmbH ▸ B2B SaaS Solution for Supply Chain Risk Management ▸ riskmethods Mobile Companion ▸ Universal Application
13. Scale iPhone App to iPad iPhone app on iPad
14. Scale iPhone App to iPad iPhone app on iPad ▸ Can’t avoid it
15. Scale iPhone App to iPad iPhone app on iPad ▸ Can’t avoid it ▸ Terrible but kind of works
16. Scale iPhone App to iPad iPhone app on iPad ▸ Can’t avoid it ▸ Terrible but kind of works
17. Scale iPhone App to iPad iPhone app on iPad ▸ Can’t avoid it ▸ Terrible but kind of works ▸ Disadvantages
18. Scale iPhone App to iPad iPhone app on iPad ▸ Can’t avoid it ▸ Terrible but kind of works ▸ Disadvantages ▸ Stretched app (1x/2x)
19. Scale iPhone App to iPad iPhone app on iPad ▸ Can’t avoid it ▸ Terrible but kind of works ▸ Disadvantages ▸ Stretched app (1x/2x)
20. Scale iPhone App to iPad iPhone app on iPad ▸ Can’t avoid it ▸ Terrible but kind of works ▸ Disadvantages ▸ Stretched app (1x/2x) ▸ No iPad keyboard
21. Scale iPhone App to iPad iPhone app on iPad ▸ Can’t avoid it ▸ Terrible but kind of works ▸ Disadvantages ▸ Stretched app (1x/2x) ▸ No iPad keyboard
22. Scale iPhone App to iPad iPhone app on iPad ▸ Can’t avoid it ▸ Terrible but kind of works ▸ Disadvantages ▸ Stretched app (1x/2x) ▸ No iPad keyboard ▸ Bad use of screen estate
23. Scale iPhone App to iPad What do we need?
24. Scale iPhone App to iPad What do we need? ▸ Autoresizing
 Layouting the old way
25. Scale iPhone App to iPad What do we need? ▸ Autoresizing
 Layouting the old way ▸ Universal App
 Awareness for iPad
26. Scale iPhone App to iPad What do we need? ▸ Autoresizing
 Layouting the old way ▸ Universal App
 Awareness for iPad ▸ Launch Screen
 Instead of Launch Image
27. Scale iPhone App to iPad What do we need? ▸ Autoresizing
 Layouting the old way ▸ Universal App
 Awareness for iPad ▸ Launch Screen
 Instead of Launch Image ▸ UISplitView
28. Scale iPhone App to iPad Autoresizing
29. Scale iPhone App to iPad Autoresizing
30. Scale iPhone App to iPad Autoresizing ▸ Springs
 Affecting the size
31. Scale iPhone App to iPad Autoresizing ▸ Springs
 Affecting the size ▸ Struts
 Affecting the position
32. Scale iPhone App to iPad Autoresizing ▸ Springs
 Affecting the size ▸ Struts
 Affecting the position
33. Scale iPhone App to iPad Autoresizing ▸ Springs
 Affecting the size ▸ Struts
 Affecting the position
34. Scale iPhone App to iPad Autoresizing ▸ Springs
 Affecting the size ▸ Struts
 Affecting the position
35. Scale iPhone App to iPad Autoresizing ▸ Springs
 Affecting the size ▸ Struts
 Affecting the position
36. Scale iPhone App to iPad Autoresizing ▸ Springs
 Affecting the size ▸ Struts
 Affecting the position
37. Scale iPhone App to iPad Autoresizing ▸ Springs
 Affecting the size ▸ Struts
 Affecting the position ▸ Problem
 It doesn’t really scale
38. Scale iPhone App to iPad Universal App
39. Scale iPhone App to iPad Universal App ▸ Switch to “Universal”
 
 

40. Scale iPhone App to iPad Universal App ▸ Switch to “Universal”
 
 

41. Scale iPhone App to iPad Universal App ▸ Switch to “Universal”
 
 

42. Scale iPhone App to iPad Universal App ▸ Switch to “Universal”
 
 

43. Scale iPhone App to iPad Universal App ▸ Switch to “Universal”
 
 

44. Scale iPhone App to iPad Universal App ▸ Switch to “Universal”
 
 

45. Scale iPhone App to iPad Universal App ▸ Switch to “Universal”
 
 
 ▸ Support all orientations
46. Scale iPhone App to iPad Launch Screen
47. Scale iPhone App to iPad Launch Screen ▸ Xib instead of images
 Allow for more flexibility
48. Scale iPhone App to iPad Launch Screen ▸ Xib instead of images
 Allow for more flexibility ▸ Visual bare minimum
 Illusion of fast loading app
49. Scale iPhone App to iPad Launch Screen ▸ Xib instead of images
 Allow for more flexibility ▸ Visual bare minimum
 Illusion of fast loading app ▸ Loading screen also possible
50. Scale iPhone App to iPad Launch Screen ▸ Xib instead of images
 Allow for more flexibility ▸ Visual bare minimum
 Illusion of fast loading app ▸ Loading screen also possible
51. Scale iPhone App to iPad Launch Screen ▸ Xib instead of images
 Allow for more flexibility ▸ Visual bare minimum
 Illusion of fast loading app ▸ Loading screen also possible
52. Scale iPhone App to iPad UISplitView
53. Scale iPhone App to iPad UISplitView ▸ Overview & detail view
54. Scale iPhone App to iPad UISplitView ▸ Overview & detail view ▸ Not limited to view types
 Mix & match views
55. Scale iPhone App to iPad UISplitView ▸ Overview & detail view ▸ Not limited to view types
 Mix & match views ▸ Good use of screen estate
56. Scale iPhone App to iPad UISplitView ▸ Overview & detail view ▸ Not limited to view types
 Mix & match views ▸ Good use of screen estate
57. Scale iPhone App to iPad UISplitView ▸ Overview & detail view ▸ Not limited to view types
 Mix & match views ▸ Good use of screen estate
58. Scale iPhone App to iPad The extra mile
59. Scale iPhone App to iPad The extra mile ▸ Auto Layout
 Intelligent screen usage
60. Scale iPhone App to iPad The extra mile ▸ Auto Layout
 Intelligent screen usage ▸ Size Classes
 Size adaptation of views
61. Scale iPhone App to iPad Auto Layout I
62. Scale iPhone App to iPad Auto Layout I ▸ Method of layouting
 More sophisticated than Autoresizing
63. Scale iPhone App to iPad Auto Layout I ▸ Method of layouting
 More sophisticated than Autoresizing ▸ Constraints
 Ruleset for view
64. Scale iPhone App to iPad Auto Layout I ▸ Method of layouting
 More sophisticated than Autoresizing ▸ Constraints
 Ruleset for view ▸ Relativity between views
65. Scale iPhone App to iPad Auto Layout I ▸ Method of layouting
 More sophisticated than Autoresizing ▸ Constraints
 Ruleset for view ▸ Relativity between views
66. Scale iPhone App to iPad Auto Layout I ▸ Method of layouting
 More sophisticated than Autoresizing ▸ Constraints
 Ruleset for view ▸ Relativity between views
67. Scale iPhone App to iPad Auto Layout II
68. Scale iPhone App to iPad Auto Layout II
69. Scale iPhone App to iPad Auto Layout II
70. Scale iPhone App to iPad Size Classes I
71. Scale iPhone App to iPad Size Classes I ▸ Requires Auto Layout
72. Scale iPhone App to iPad Size Classes I ▸ Requires Auto Layout ▸ Position elements
 Depending on window size
73. Scale iPhone App to iPad Size Classes I ▸ Requires Auto Layout ▸ Position elements
 Depending on window size ▸ Two window sizes
 Compact & Regular
74. Scale iPhone App to iPad Size Classes I ▸ Requires Auto Layout ▸ Position elements
 Depending on window size ▸ Two window sizes
 Compact & Regular ▸ Wildcard
 Any
75. Scale iPhone App to iPad Size Classes I ▸ Requires Auto Layout ▸ Position elements
 Depending on window size ▸ Two window sizes
 Compact & Regular ▸ Wildcard
 Any
76. Scale iPhone App to iPad Size Classes I ▸ Requires Auto Layout ▸ Position elements
 Depending on window size ▸ Two window sizes
 Compact & Regular ▸ Wildcard
 Any
77. Scale iPhone App to iPad Size Classes II Compact/Compact Any/Compact Regular/Compact Compact/Any Any/Any Regular/Any Compact/Regular Any/Regular Regular/Regular Width Height
78. Scale iPhone App to iPad Size Classes II Compact/Compact Any/Compact Regular/Compact Compact/Any Any/Any Regular/Any Compact/Regular Any/Regular Regular/Regular Width Height iPhone Landscape
79. Scale iPhone App to iPad Size Classes II Compact/Compact Any/Compact Regular/Compact Compact/Any Any/Any Regular/Any Compact/Regular Any/Regular Regular/Regular Width Height
80. Scale iPhone App to iPad Size Classes II Compact/Compact Any/Compact Regular/Compact Compact/Any Any/Any Regular/Any Compact/Regular Any/Regular Regular/Regular Width Height iPhone Portrait
81. Scale iPhone App to iPad Size Classes II Compact/Compact Any/Compact Regular/Compact Compact/Any Any/Any Regular/Any Compact/Regular Any/Regular Regular/Regular Width Height
82. Scale iPhone App to iPad Size Classes II Compact/Compact Any/Compact Regular/Compact Compact/Any Any/Any Regular/Any Compact/Regular Any/Regular Regular/Regular Width Height iPhone Plus Landscape
83. Scale iPhone App to iPad Size Classes II Compact/Compact Any/Compact Regular/Compact Compact/Any Any/Any Regular/Any Compact/Regular Any/Regular Regular/Regular Width Height
84. Scale iPhone App to iPad Size Classes II Compact/Compact Any/Compact Regular/Compact Compact/Any Any/Any Regular/Any Compact/Regular Any/Regular Regular/Regular Width Height iPad Portrait/Landscape
85. Scale iPhone App to iPad Size Classes II Compact/Compact Any/Compact Regular/Compact Compact/Any Any/Any Regular/Any Compact/Regular Any/Regular Regular/Regular Width Height
86. Scale iPhone App to iPad Size Classes II Compact/Compact Any/Compact Regular/Compact Compact/Any Any/Any Regular/Any Compact/Regular Any/Regular Regular/Regular Width Height Default All Sizes
87. Scale iPhone App to iPad Size Classes II Compact/Compact Any/Compact Regular/Compact Compact/Any Any/Any Regular/Any Compact/Regular Any/Regular Regular/Regular Width Height
88. Scale iPhone App to iPad Size Classes II Compact/Compact Any/Compact Regular/Compact Compact/Any Any/Any Regular/Any Compact/Regular Any/Regular Regular/Regular Width Height UISplitView
89. Scale iPhone App to iPad Size Classes II Compact/Compact Any/Compact Regular/Compact Compact/Any Any/Any Regular/Any Compact/Regular Any/Regular Regular/Regular Width Height
90. Scale iPhone App to iPad Size Classes III
91. Scale iPhone App to iPad Size Classes III
92. Scale iPhone App to iPad Size Classes III
93. Scale iPhone App to iPad Size Classes III
94. Scale iPhone App to iPad Keep in Mind
95. Scale iPhone App to iPad Keep in Mind ▸ Support for non-retina screens
 @1x images (iPad 2) when coming from retina-only iPhone app
96. Scale iPhone App to iPad Keep in Mind ▸ Support for non-retina screens
 @1x images (iPad 2) when coming from retina-only iPhone app ▸ Take your time with UISplitView
97. Scale iPhone App to iPad Keep in Mind ▸ Support for non-retina screens
 @1x images (iPad 2) when coming from retina-only iPhone app ▸ Take your time with UISplitView ▸ Design “Compact First”
98. Scale iPhone App to iPad Recap
99. Scale iPhone App to iPad Recap ▸ Switch to “Universal App”
100. Scale iPhone App to iPad Recap ▸ Switch to “Universal App” ▸ Support all orientations
101. Scale iPhone App to iPad Recap ▸ Switch to “Universal App” ▸ Support all orientations ▸ Use Launch Screen
102. Scale iPhone App to iPad Recap ▸ Switch to “Universal App” ▸ Support all orientations ▸ Use Launch Screen ▸ Enable Auto Layout
103. Scale iPhone App to iPad Recap ▸ Switch to “Universal App” ▸ Support all orientations ▸ Use Launch Screen ▸ Enable Auto Layout ▸ Use Size Classes
104. Scale iPhone App to iPad Recap ▸ Switch to “Universal App” ▸ Support all orientations ▸ Use Launch Screen ▸ Enable Auto Layout ▸ Use Size Classes ▸ Scale away!
105. Scale iPhone App to iPad Further Reading ▸ Adaptive User Interfaces
 ▸ iOS Human Interface Guidelines
 ▸ Auto Layout Guide
 ▸ Ray Wenderlich – Auto Layout Tutorial in iOS 9 Part 1 & 2 http://www.raywenderlich.com/115440/auto-layout-tutorial-in-ios-9-part-1-getting-started-2 https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/ MobileHIG/index.html https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/ AutolayoutPG/index.html https://developer.apple.com/design/adaptivity/
106. Scaling iPhone App To * Munich iOS