You Can’t Ignore the Tablet:
Designing & Developing Universal
Phone & Tablet Apps
Lou Miranda
Mobility Practice Lead, Mage...
My Devices and Me
iPhone 5S, iPad Air, Retina iPad mini, iPod touch, Samsung
Galaxy Player, Nexus 7, Nokia Lumia 521, Surf...
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 Learn
Product Owner:

Increase user engagement & keep
costs in check
UX Designer:

Think about tablet design &...
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 s...
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,...
OS: iPhone vs iPad
Muscle Memory
4 columns of icons
5 icons per column
Folders: 3x3 grid, paged
Swipe to Page
Control Cent...
SDKs: iPhone vs iPad
No difference
None
OK... iPhone view reuse:
SplitView
Popovers
Modal Dialogs
Text
Learn From Others
How 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 Practices
Storyboards, embedded views, Autolayout, phone vs.
tablet idioms, fragments, one model to save...
Creating a Tablet App
Do not stretch a phone app
Waste of white space
User gets no value
Do create a unique first
screen
Us...
Packaging a Tablet App
Do not create 2 separate
apps
Extra download for user
2x the provisioning,
testing, deployment, &
m...
Architecting Your App
Do not have different
data models
Don't want different
data file formats when
cloud syncing
Do reuse ...
UX Meets Code
Do not create views
anew
Don't reinvent the
wheel
Less coding, testing
Do reuse Storyboards
Reuse Flexibility
Do not hard code layouts
What about 1920x1080
iPhone 6? Or iPad Pro?
Do use Autolayout
Repurposing views...
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 Apps
Good: Pages App
Don't add clutter
Popovers & modals
Bad: WordPress & Twitter
Giant phone
Misuse cont...
Worst & Best Practices
Do not stretch a phone app; 

Do create a unique first screen.
Do not create 2 separate apps;
Do cre...
Does Adding a Tablet Version
Double the Cost of an App?
Think about Total Project
Costs
UX Reuse
Code & Resource Reuse
QA ...
You Can’t Ignore the Tablet:
Designing & Developing Universal
Phone & Tablet Apps
Lou Miranda
Mobility Practice Lead, Mage...
Upcoming SlideShare
Loading in …5
×

You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones and Tablets-Lou Miranda

1,537 views

Published on

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?

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,537
On SlideShare
0
From Embeds
0
Number of Embeds
538
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones and Tablets-Lou Miranda

  1. 1. You Can’t Ignore the Tablet: Designing & Developing Universal Phone & Tablet Apps Lou Miranda Mobility Practice Lead, Magenic @TheNewLou LouMiranda.com
  2. 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. 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. 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. 5. Text Why Tablets? Sales figures, discoverability, hardware targets, user experience, SDKs
  6. 6. 200+ Million iPads Sold
  7. 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. 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. 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. 10. SDKs: iPhone vs iPad No difference None OK... iPhone view reuse: SplitView Popovers Modal Dialogs
  11. 11. Text Learn From Others How Apple Does It How Not to Do It
  12. 12. Pages App: Word Processor
  13. 13. Reuse via Popovers
  14. 14. Reuse via Modal Dialogs
  15. 15. WordPress 99% reuse! But looks like a giant phone app Content is not king— chrome is Didn't follow the HIG
  16. 16. Twitter Tabs moved Tabs renamed Tabs have different functionality Looks like giant phone app
  17. 17. Text Worst & Best Practices Storyboards, embedded views, Autolayout, phone vs. tablet idioms, fragments, one model to save to cloud
  18. 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. 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. 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. 21. UX Meets Code Do not create views anew Don't reinvent the wheel Less coding, testing Do reuse Storyboards
  22. 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. 23. Text What Did We Learn? Reduce costs by planning for reuse from Day 1
  24. 24. Why Tablets? 200+ Million iPads sold Hardware: iPad = iPhone OS: iPad = iPhone SDKs: iPad = iPhone
  25. 25. Learn from Other Apps Good: Pages App Don't add clutter Popovers & modals Bad: WordPress & Twitter Giant phone Misuse controls Too different
  26. 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. 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. 28. You Can’t Ignore the Tablet: Designing & Developing Universal Phone & Tablet Apps Lou Miranda Mobility Practice Lead, Magenic @TheNewLou LouMiranda.com Questions?

×