Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,760 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?

  • Be the first to comment

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?

×