You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones and Tablets-Lou Miranda
•
1 j'aime•2,019 vues
The document discusses designing and developing universal phone and tablet apps. It provides tips for increasing reuse between phone and tablet versions to reduce costs. Specifically, it recommends (1) creating a unique first screen for tablets while reusing components via popovers and modals, (2) developing a single universal app instead of separate phone and tablet apps, and (3) reusing business logic, storyboards, and autolayout to design flexible views instead of hardcoding layouts. By planning for reuse from the start, the overall cost of adding a tablet version can be reduced to around 20% more than a phone-only app.
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (7)
Similaire à You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones and Tablets-Lou Miranda
Similaire à You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones and Tablets-Lou Miranda (20)
Plus de Mobile March
Plus de Mobile March (20)
You Can’t Ignore the Tablet-Designing & Developing Universal Apps for Phones and Tablets-Lou Miranda
- 1. You Can’t Ignore the Tablet: Designing & Developing Universal Phone & Tablet Apps Lou Miranda Mobility Practice Lead, Magenic @TheNewLou LouMiranda.com
- 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. 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. 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. Text Why Tablets? Sales figures, discoverability, hardware targets, user experience, SDKs
- 6. 200+ Million iPads Sold
- 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. 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. 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. SDKs: iPhone vs iPad No difference None OK... iPhone view reuse: SplitView Popovers Modal Dialogs
- 11. Text Learn From Others How Apple Does It How Not to Do It
- 12. Pages App: Word Processor
- 14. Reuse via Modal Dialogs
- 15. WordPress 99% reuse! But looks like a giant phone app Content is not king— chrome is Didn't follow the HIG
- 16. Twitter Tabs moved Tabs renamed Tabs have different functionality Looks like giant phone app
- 17. Text Worst & Best Practices Storyboards, embedded views, Autolayout, phone vs. tablet idioms, fragments, one model to save to cloud
- 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. 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. 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. UX Meets Code Do not create views anew Don't reinvent the wheel Less coding, testing Do reuse Storyboards
- 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. Text What Did We Learn? Reduce costs by planning for reuse from Day 1
- 24. Why Tablets? 200+ Million iPads sold Hardware: iPad = iPhone OS: iPad = iPhone SDKs: iPad = iPhone
- 25. Learn from Other Apps Good: Pages App Don't add clutter Popovers & modals Bad: WordPress & Twitter Giant phone Misuse controls Too different
- 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. 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. You Can’t Ignore the Tablet: Designing & Developing Universal Phone & Tablet Apps Lou Miranda Mobility Practice Lead, Magenic @TheNewLou LouMiranda.com Questions?