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