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.

Mobile First Design Mindset

47 views

Published on

My talk at Hoa Sen University's talk show for future Web designer students

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Mobile First Design Mindset

  1. 1. Mobile-first Mindset in Responsive Web Design HSU 01/2018
  2. 2. Trần Trọng Thanh Co-founder & CTO Nâu Studio • int3ractive.com • twitter.com/trongthanh • fb.me/trongthanh • linkedin.com/in/trongthanh
  3. 3. What is mobile-first responsive web design?
  4. 4. Design from
  5. 5. Design from
  6. 6. Why mobile first?
  7. 7. Bounce rate of mobile is still higher than desktop
  8. 8. Why so?
  9. 9. Many websites are not mobile-friendly
  10. 10. Many responsive websites are not optimized for mobile
  11. 11. It is graceful degradation. Mobile phones are slower than desktop in terms of performance but often be the last devices to be considered by designers and developers.
  12. 12. Mobile-first Mindset Entering
  13. 13. Progressive Enhancement Mobile First 
 =
  14. 14. Example of Graceful Degradation
  15. 15. Chrome is the new Internet Explorer
  16. 16. Do websites need to look exactly the same in every browser?
  17. 17. Example: CSS border-radius
  18. 18. Content First Strategy Mobile First 
 =
  19. 19. The mobile-first approach organically leads to a design 
 that’s more content-focused, and therefore user-focused
  20. 20. Stop using Lorem ipsum
  21. 21. Mobile-First 
 Design Process
  22. 22. 1. Content Inventory
  23. 23. 2. Wireframing with Visual Hierarchy
  24. 24. 3. Prepare Design Style Guide and Component Kitchen Sink
  25. 25. 4. Design with the smallest breakpoints and then scale up Phone Tablet Desktop
  26. 26. 5. Design for touchscreen and one-handed • Enlarge touch targets (minimum 40x40px) • Avoid UI hidden behind mouse hover • Optimize UI for one-handed interactions • Test look and feel in real devices
  27. 27. 6. Iterate the designs in an Agile process • Wireframing using Sketch or Axure • Design with Sketch or Photoshop • Share mockups to client to get feedbacks and approval using Marvel (free) or Invision Apps • Deliver designs to developers with: Sketch files or upload to Zeplin • Iterate designs
  28. 28. What’s next for 
 Web Designer?
  29. 29. • Save money and buy a smartphone ;) • Practice and side projects • Learn HTML & CSS • Learn CSS Grid • Get to know new Web features (https://codepen.io/una/ full/Wjvdqm)
  30. 30. Q&A

×