1. You Can’t Ignore the Tablet:
Designing & Developing Universal
Phone & Tablet Apps
Lou Miranda
Mobility Practice Lead, Magenic
@TheNewLou
LouMiranda.com

2. My Devices and Me
iPhone 5S, iPad Air, Retina iPad mini, iPod touch, Samsung
Galaxy Player, Nexus 7, Nokia Lumia 521, Surface RT
iPhone OS 2.0, iOS 3.0-7.1
Android 1.6-4.4
PhoneGap, Titanium, Xamarin
DOS, Windows 3.0+, OS/2, Web, J2EE:
developer & architect for 20 years
Master of Science in Molecular Biology

3. 1. Do I need to have a tablet
version of my app?
2. Is it going to double the
cost of my phone app?

4. What You’ll Learn
Product Owner:
Increase user engagement & keep
costs in check
UX Designer:
Think about tablet design &
pattern reuse
Developer:
Techniques for reusing code and
components
Techniques apply to iOS, Android,
and soon Windows[Phone] 8.1

5. Text
Why Tablets?
Sales figures, discoverability, hardware targets,
user experience, SDKs

6. 200+ Million iPads Sold

7. Discoverability
Search for an iPhone-only
app on the App Store on an
iPad
Not Found—it's invisible
User must specifically select
"iPhone Only" from the menu
Your iPhone-only app misses
the opportunity for easy
discoverability

8. Hardware: iPad vs iPhone
iPad iPhone
Screen Size 9.7" 4.0"
Touch ID 🚫 ✅
Camera 5 + 1.2 megapixel 8 + 1.2 megapixel
CPU A7, 1.4 GHz A7, 1.3 GHz
Graphics PowerVR G6430 PowerVR G6430
RAM 1 GB 1 GB
4G ✅ ✅
Storage 16, 32, 64, 128 GB 16, 32, 64 GB
M7 Motion
Coprocessor ✅ ✅

9. OS: iPhone vs iPad
Muscle Memory
4 columns of icons
5 icons per column
Folders: 3x3 grid, paged
Swipe to Page
Control Center
Notification Center

10. SDKs: iPhone vs iPad
No difference
None
OK... iPhone view reuse:
SplitView
Popovers
Modal Dialogs

11. Text
Learn From Others
How Apple Does It
How Not to Do It

12. Pages App: Word Processor

13. Reuse via Popovers

14. Reuse via Modal Dialogs

15. WordPress
99% reuse!
But looks like a giant
phone app
Content is not king—
chrome is
Didn't follow the HIG

16. Twitter
Tabs moved
Tabs renamed
Tabs have different
functionality
Looks like giant
phone app

17. Text
Worst & Best Practices
Storyboards, embedded views, Autolayout, phone vs.
tablet idioms, fragments, one model to save to cloud

18. Creating a Tablet App
Do not stretch a phone app
Waste of white space
User gets no value
Do create a unique first
screen
Use the space
But don't fill it up with junk

19. Packaging a Tablet App
Do not create 2 separate
apps
Extra download for user
2x the provisioning,
testing, deployment, &
maintenance
Do create a universal app
One binary to rule them all

20. Architecting Your App
Do not have different
data models
Don't want different
data file formats when
cloud syncing
Do reuse business logic
Model-View-Controller

21. UX Meets Code
Do not create views
anew
Don't reinvent the
wheel
Less coding, testing
Do reuse Storyboards

22. Reuse Flexibility
Do not hard code layouts
What about 1920x1080
iPhone 6? Or iPad Pro?
Do use Autolayout
Repurposing views in
popovers or modals
New devices

23. Text
What Did We Learn?
Reduce costs by planning for reuse
from Day 1

24. Why Tablets?
200+ Million iPads sold
Hardware: iPad =
iPhone
OS: iPad = iPhone
SDKs: iPad = iPhone

25. Learn from Other Apps
Good: Pages App
Don't add clutter
Popovers & modals
Bad: WordPress & Twitter
Giant phone
Misuse controls
Too different

26. Worst & Best Practices
Do not stretch a phone app;
Do create a unique first screen.
Do not create 2 separate apps;
Do create a universal app
Do not have different data
models (cloud sync);
Do reuse business logic
Do not create views anew;
Do reuse Storyboards
Do not hard code layouts;
Do use Autolayout

27. Does Adding a Tablet Version
Double the Cost of an App?
Think about Total Project
Costs
UX Reuse
Code & Resource Reuse
QA Reuse
Deployment &
Maintenance Reuse
Only adds about 20% to cost
2x$?!

28. You Can’t Ignore the Tablet:
Designing & Developing Universal
Phone & Tablet Apps
Lou Miranda
Mobility Practice Lead, Magenic
@TheNewLou
LouMiranda.com
Questions?