This document discusses the mobile-first approach to responsive web design. It explains that mobile-first means designing first for the smallest screens and progressively enhancing the design for larger screens. This helps ensure mobile optimization and usability as mobile traffic continues to grow. The mobile-first process involves content inventory, wireframing with visual hierarchy, style guides, designing the smallest screens first and scaling up, designing for touchscreens, and iterating designs through an agile process.

1. Mobile-first
Mindset
in Responsive Web Design
HSU 01/2018

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. What is mobile-first
responsive web design?

4. Design from

5. Design from

6. Why mobile first?

9. Bounce rate of mobile is still higher than desktop

10. Why so?

11. Many websites are not mobile-friendly

12. Many responsive websites are not optimized for mobile

13. 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.

14. Mobile-first
Mindset
Entering

15. Progressive Enhancement
Mobile First
=

16. Example of Graceful Degradation

17. Chrome is the new Internet Explorer

20. Do websites need to look exactly
the same in every browser?

22. Example: CSS border-radius

23. Content First Strategy
Mobile First
=

24. The mobile-first approach organically leads to a design
that’s more content-focused, and therefore user-focused

25. Stop using Lorem ipsum

26. Mobile-First
Design Process

27. 1. Content Inventory

28. 2. Wireframing with Visual
Hierarchy

29. 3. Prepare Design Style Guide
and Component Kitchen Sink

30. 4. Design with the smallest
breakpoints and then scale up
Phone Tablet Desktop

31. 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

32. 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

33. What’s next for
Web Designer?

34. • 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)

35. Q&A