You Can’t Ignore the Tablet: Designing & Developing Universal Phone & Tablet Apps
Lou Miranda Mobility Practice Lead, Magenic @TheNewLou LouMiranda.com
My Devices and MeiPhone 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
1. Do I need to have a tablet version of my app?
2. Is it going to double the cost of my phone app?
What You’ll LearnProduct 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
Text
Why Tablets?Sales figures, discoverability, hardware targets, user experience, SDKs
200+ Million iPads Sold
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
Hardware: iPad vs iPhoneiPad iPhone
Screen Size 9.7" 4.0"Touch ID 🚫 ✅
Camera 5 + 1.2 megapixel 8 + 1.2 megapixelCPU A7, 1.4 GHz A7, 1.3 GHzGraphics PowerVR G6430 PowerVR G6430RAM 1 GB 1 GB4G ✅ ✅
Storage 16, 32, 64, 128 GB 16, 32, 64 GBM7 Motion Coprocessor ✅ ✅
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
SDKs: iPhone vs iPadNo difference
None
OK... iPhone view reuse:
SplitView
Popovers
Modal Dialogs
Text
Learn From OthersHow Apple Does It How Not to Do It
Pages App: Word Processor
Reuse via Popovers
Reuse via Modal Dialogs
WordPress
99% reuse!
But looks like a giant phone app
Content is not king—chrome is
Didn't follow the HIG
Tabs moved
Tabs renamed
Tabs have different functionality
Looks like giant phone app
Text
Worst & Best PracticesStoryboards, embedded views, Autolayout, phone vs. tablet idioms, fragments, one model to save to cloud
Creating a Tablet AppDo 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
Packaging a Tablet AppDo 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
Architecting Your AppDo not have different data models
Don't want different data file formats when cloud syncing
Do reuse business logic
Model-View-Controller
UX Meets Code
Do not create views anew
Don't reinvent the wheel
Less coding, testing
Do reuse Storyboards
Reuse FlexibilityDo not hard code layouts
What about 1920x1080 iPhone 6? Or iPad Pro?
Do use Autolayout
Repurposing views in popovers or modals
New devices
Text
What Did We Learn?Reduce costs by planning for reuse from Day 1
Why Tablets?
200+ Million iPads sold
Hardware: iPad = iPhone
OS: iPad = iPhone
SDKs: iPad = iPhone
Learn from Other AppsGood: Pages App
Don't add clutter
Popovers & modals
Bad: WordPress & Twitter
Giant phone
Misuse controls
Too different
Worst & Best PracticesDo 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
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$?!
You Can’t Ignore the Tablet: Designing & Developing Universal Phone & Tablet Apps
Lou Miranda Mobility Practice Lead, Magenic @TheNewLou LouMiranda.com
Questions?
Recommended
