Sencha Roadshow 2017: Mobile First or Desktop First
0 likes575 views
The document discusses mobile-first and desktop-first development approaches, emphasizing the importance of responsive and adaptive design tailored for various devices. It highlights the necessity of providing a quality user experience across different platforms and suggests using a universal design strategy for shared code and tailored user experiences. The agenda covers best practices and encourages developers to architect applications with flexibility in mind while considering the diverse range of users and devices.
Sencha Roadshow 2017: Mobile First or Desktop First
- 1. Mobile First or Desktop First Marc Gusmano Senior Sales Engineer marc.gusmano@sencha.com
- 2. Agenda • Mobile First Approach • Desktop First Approach • Responsive Design • Adaptive Design • Universal Applications • Coworkee • Development Approach / Best Practices
- 3. Mobile First Approach • Progressive Enhancements • Put best foot forward on mobile, and as need arises, enhance progressively on larger platforms
- 4. Desktop First Approach • Graceful Degradations • Build every feature you need for the large screen, and scale back (gradually remove features) as viewport becomes smaller
- 5. Progressive Enhancements Wins! (start with minimal and focused features) So, let’s go Mobile First…
- 6. And… Desktop is dead, 2+ billion Mobile users worldwide So, let’s go Mobile First… or why not Mobile Only
- 7. But… everyone is talking about ‘Responsive Design’ Designers, developers, stakeholders… everyone
- 8. Responsive Design • Design for Desktop, and keep Mobile in mind… feels like porting desktop version to mobile • Practical Challenges - Image resizing consumes CPU - Unnecessary data download - Media queries hide stuff on mobile, not remove Not Mobile First – It’s one size fits all
- 9. Responsive Design – Resize/Hide/Reposition Widgets Big desktop Small desktop
- 10. How about ‘Adaptive’? • Device specific UX; detect screen size, load appropriate experience • We can start with mobile (and even ignore tablet to begin with) Image Source: http://www.pattronize.com/blog/
- 11. Adaptive Design – Distinct Layouts for Different Devices Phone (list) Tablet (grid)
- 12. In U.S. alone, 25% of Web Users are Mobile Only (rarely use Desktop) Flip side… 75% aren’t
- 13. As of Jan 2015, WhatsApp is on Desktop Sure… they started with ‘Mobile First’ ☺
- 14. Today’s reality… users move from device to device while interacting with apps Especially… business / enterprise apps
- 15. Bottom line… apps must provide a quality user experience, no matter what the device Responsive, Adaptive… whatever works
- 16. But… no matter the design approach… As developers… you should always think… Universal
- 17. Developers are expected to reuse code… Universal is about sharing code, and tailored UX
- 18. Mobile Design – Go for best UX
- 19. Desktop Design – Go for best UX
- 20. Sample Employee Directory App - Coworkee
- 21. Coworkee (Employee Directory) https://github.com/sencha-extjs-examples/Coworkee 22
- 22. Development Approach / Best Practices • Architect with Universal in mind… even if it was just mobile, or just desktop • When architecting for all platforms - Use only Modern toolkit. Comes at the expense of legacy browser support, but gives a lot of flexibility with CSS, responsive, etc., and avoids any duplication across classic & modern views - Avoid device specific theme, start with something neutral such as Material, Neptune, or Triton - Organize views into a) universal, b) profile-based - Share all (almost) logic and data (controller and model) across platforms, more shareable than views - Adopt a “whatever first” implementation for the view, “universal first” implementation for the controller and model
- 23. Development Approach / Best Practices • Approach for implementing views: - When almost similar across profiles, start as universal view, then customize by creating derived views at the profile level - When views are significantly different across profiles, create view for one profile, duplicate it to the other and modify - Finally, if there are similar parts, refactor into universal base views and derived views • Use profiles to instruct your app what views to use based on rules • Modern toolkit allows CSS layouts, making it easy to adjust layout (especially for content heavy screens)
- 24. Questions?