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

Twitter

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?