you can’t ignore the tablet-designing & developing universal apps for phones and tablets-lou...
DESCRIPTION
From Mobile March 2014-Hundreds of millions of tablets have been sold since the advent of the iPad. For consumers, tablets accounted for an increasing proportion of retail sales during the holiday season. For enterprises, the portability, ease of training, and security of tablets can’t be beat. Whether you create consumer-facing or employee-facing apps, can you afford not to have a tablet-optimized app in 2014? Tablets provide significantly more area for the user to interact with, so an optimal experience involves a different layout than a phone has. Can you afford to produce both a phone and tablet version of your app? I will address the following questions: -Is designing and developing for tablets too much to bite off for your organization? -Are there reasonable ways of cutting costs when developing tablet apps? -How much visual design and code reuse is there? -How different is a tablet from a laptop, and how different is it from a phone? -What platform technologies can we leverage to simplify universal apps?TRANSCRIPT
![Page 1: You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones and Tablets-Lou Miranda](https://reader033.vdocuments.mx/reader033/viewer/2022052820/547bf2efb379595e2b8b4e4b/html5/thumbnails/1.jpg)
You Can’t Ignore the Tablet: Designing & Developing Universal Phone & Tablet Apps
Lou Miranda Mobility Practice Lead, Magenic @TheNewLou LouMiranda.com
![Page 2: You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones and Tablets-Lou Miranda](https://reader033.vdocuments.mx/reader033/viewer/2022052820/547bf2efb379595e2b8b4e4b/html5/thumbnails/2.jpg)
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
![Page 3: You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones and Tablets-Lou Miranda](https://reader033.vdocuments.mx/reader033/viewer/2022052820/547bf2efb379595e2b8b4e4b/html5/thumbnails/3.jpg)
1. Do I need to have a tablet version of my app?
2. Is it going to double the cost of my phone app?
![Page 4: You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones and Tablets-Lou Miranda](https://reader033.vdocuments.mx/reader033/viewer/2022052820/547bf2efb379595e2b8b4e4b/html5/thumbnails/4.jpg)
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
![Page 5: You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones and Tablets-Lou Miranda](https://reader033.vdocuments.mx/reader033/viewer/2022052820/547bf2efb379595e2b8b4e4b/html5/thumbnails/5.jpg)
Text
Why Tablets?Sales figures, discoverability, hardware targets, user experience, SDKs
![Page 6: You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones and Tablets-Lou Miranda](https://reader033.vdocuments.mx/reader033/viewer/2022052820/547bf2efb379595e2b8b4e4b/html5/thumbnails/6.jpg)
200+ Million iPads Sold
![Page 7: You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones and Tablets-Lou Miranda](https://reader033.vdocuments.mx/reader033/viewer/2022052820/547bf2efb379595e2b8b4e4b/html5/thumbnails/7.jpg)
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
![Page 8: You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones and Tablets-Lou Miranda](https://reader033.vdocuments.mx/reader033/viewer/2022052820/547bf2efb379595e2b8b4e4b/html5/thumbnails/8.jpg)
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 ✅ ✅
![Page 9: You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones and Tablets-Lou Miranda](https://reader033.vdocuments.mx/reader033/viewer/2022052820/547bf2efb379595e2b8b4e4b/html5/thumbnails/9.jpg)
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
![Page 10: You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones and Tablets-Lou Miranda](https://reader033.vdocuments.mx/reader033/viewer/2022052820/547bf2efb379595e2b8b4e4b/html5/thumbnails/10.jpg)
SDKs: iPhone vs iPadNo difference
None
OK... iPhone view reuse:
SplitView
Popovers
Modal Dialogs
![Page 11: You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones and Tablets-Lou Miranda](https://reader033.vdocuments.mx/reader033/viewer/2022052820/547bf2efb379595e2b8b4e4b/html5/thumbnails/11.jpg)
Text
Learn From OthersHow Apple Does It How Not to Do It
![Page 12: You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones and Tablets-Lou Miranda](https://reader033.vdocuments.mx/reader033/viewer/2022052820/547bf2efb379595e2b8b4e4b/html5/thumbnails/12.jpg)
Pages App: Word Processor
![Page 13: You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones and Tablets-Lou Miranda](https://reader033.vdocuments.mx/reader033/viewer/2022052820/547bf2efb379595e2b8b4e4b/html5/thumbnails/13.jpg)
Reuse via Popovers
![Page 14: You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones and Tablets-Lou Miranda](https://reader033.vdocuments.mx/reader033/viewer/2022052820/547bf2efb379595e2b8b4e4b/html5/thumbnails/14.jpg)
Reuse via Modal Dialogs
![Page 15: You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones and Tablets-Lou Miranda](https://reader033.vdocuments.mx/reader033/viewer/2022052820/547bf2efb379595e2b8b4e4b/html5/thumbnails/15.jpg)
WordPress
99% reuse!
But looks like a giant phone app
Content is not king—chrome is
Didn't follow the HIG
![Page 16: You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones and Tablets-Lou Miranda](https://reader033.vdocuments.mx/reader033/viewer/2022052820/547bf2efb379595e2b8b4e4b/html5/thumbnails/16.jpg)
Tabs moved
Tabs renamed
Tabs have different functionality
Looks like giant phone app
![Page 17: You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones and Tablets-Lou Miranda](https://reader033.vdocuments.mx/reader033/viewer/2022052820/547bf2efb379595e2b8b4e4b/html5/thumbnails/17.jpg)
Text
Worst & Best PracticesStoryboards, embedded views, Autolayout, phone vs. tablet idioms, fragments, one model to save to cloud
![Page 18: You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones and Tablets-Lou Miranda](https://reader033.vdocuments.mx/reader033/viewer/2022052820/547bf2efb379595e2b8b4e4b/html5/thumbnails/18.jpg)
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
![Page 19: You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones and Tablets-Lou Miranda](https://reader033.vdocuments.mx/reader033/viewer/2022052820/547bf2efb379595e2b8b4e4b/html5/thumbnails/19.jpg)
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
![Page 20: You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones and Tablets-Lou Miranda](https://reader033.vdocuments.mx/reader033/viewer/2022052820/547bf2efb379595e2b8b4e4b/html5/thumbnails/20.jpg)
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
![Page 21: You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones and Tablets-Lou Miranda](https://reader033.vdocuments.mx/reader033/viewer/2022052820/547bf2efb379595e2b8b4e4b/html5/thumbnails/21.jpg)
UX Meets Code
Do not create views anew
Don't reinvent the wheel
Less coding, testing
Do reuse Storyboards
![Page 22: You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones and Tablets-Lou Miranda](https://reader033.vdocuments.mx/reader033/viewer/2022052820/547bf2efb379595e2b8b4e4b/html5/thumbnails/22.jpg)
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
![Page 23: You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones and Tablets-Lou Miranda](https://reader033.vdocuments.mx/reader033/viewer/2022052820/547bf2efb379595e2b8b4e4b/html5/thumbnails/23.jpg)
Text
What Did We Learn?Reduce costs by planning for reuse from Day 1
![Page 24: You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones and Tablets-Lou Miranda](https://reader033.vdocuments.mx/reader033/viewer/2022052820/547bf2efb379595e2b8b4e4b/html5/thumbnails/24.jpg)
Why Tablets?
200+ Million iPads sold
Hardware: iPad = iPhone
OS: iPad = iPhone
SDKs: iPad = iPhone
![Page 25: You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones and Tablets-Lou Miranda](https://reader033.vdocuments.mx/reader033/viewer/2022052820/547bf2efb379595e2b8b4e4b/html5/thumbnails/25.jpg)
Learn from Other AppsGood: Pages App
Don't add clutter
Popovers & modals
Bad: WordPress & Twitter
Giant phone
Misuse controls
Too different
![Page 26: You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones and Tablets-Lou Miranda](https://reader033.vdocuments.mx/reader033/viewer/2022052820/547bf2efb379595e2b8b4e4b/html5/thumbnails/26.jpg)
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
![Page 27: You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones and Tablets-Lou Miranda](https://reader033.vdocuments.mx/reader033/viewer/2022052820/547bf2efb379595e2b8b4e4b/html5/thumbnails/27.jpg)
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$?!
![Page 28: You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones and Tablets-Lou Miranda](https://reader033.vdocuments.mx/reader033/viewer/2022052820/547bf2efb379595e2b8b4e4b/html5/thumbnails/28.jpg)
You Can’t Ignore the Tablet: Designing & Developing Universal Phone & Tablet Apps
Lou Miranda Mobility Practice Lead, Magenic @TheNewLou LouMiranda.com
Questions?