Responsive Design

Transcript

1. Accessibility Responsive Design @ PageUp
2. Agenda PageUp’s mobile strategy Responsive design definition Grid system GEL responsive templates Design phase Development phase Testing
3. Native App Mobile website Responsive design
4. Mobile Strategy @ PageUp
5. Accessibility What is Responsive Design?
6. What is Responsive Design? Responsive design is about creating great experience on all devices! Responsive design will automatically adjust for different screen sizes and viewports. Responsive design is about using HTML and CSS to automatically show/hide, shrink/enlarge, resize, reorder UI elements on a page, to make functionalities work in various viewports on all devices.
7. What needs to “be responsive” Navigation UI component Typography Spacing Content - copy, images, charts, video Layout
8. Grid system
9. Grid system - 12 columns
10. Breakpoints
11. Layout - Adaptive vs Fluid
12. Layout - Adaptive
13. Layout - Adaptive - grids Fix width container Fix width container
14. Layout - Fluid
15. Layout - Fluid - grids
16. Nested grid
17. Designer
18. Identify users
19. Define UI design principles Mobile First Desktop First Desktop focus
20. Design on grids
22. Handover • Mockup design with annotation • Mockup with grid layer • UX walkthrough
23. Developers
24. Understand BT grid • Viewport and breakpoints • 12 Grids • Spacing • Positioning and alignment • Display • Sizing
25. Reference Responsive design is about using HTML and CSS to automatically show/hide, shrink/enlarge, resize, reorder UI elements on a page, to make functionalities work in various viewports on all devices. • Display • Flex • Grid • Sizing • Spacing
27. Testing
28. Stats (2020)
29. Dev tool
31. Recap
32. FQA Do I need write CSS in media query in my project? ❖ No, if use GEL, for layout purpose ❖ No, if it is standard page, standard components When do I write CSS in media query? ❖ If not use GEL ❖ If specific problem ❖ Side projects
33. Thanks and Questions