Responsive Design - Speaker Deck

Slide 1

Slide 1 text

Accessibility Responsive Design @ PageUp

Slide 2

Slide 2 text

Agenda PageUp’s mobile strategy Responsive design deﬁnition Grid system GEL responsive templates Design phase Development phase Testing

Slide 3

Slide 3 text

Native App Mobile website Responsive design

Slide 4

Slide 4 text

Mobile Strategy @ PageUp

Slide 5

Slide 5 text

Accessibility What is Responsive Design?

Slide 6

Slide 6 text

What is Responsive Design? Responsive design is about creating great experience on all devices! Responsive design will automatically adjust for diﬀerent 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.

Slide 7

Slide 7 text

What needs to “be responsive” Navigation UI component Typography Spacing Content - copy, images, charts, video Layout

Slide 8

Slide 8 text

Grid system

Slide 9

Slide 9 text

Grid system - 12 columns

Slide 10

Slide 10 text

Breakpoints

Slide 11

Slide 11 text

Layout - Adaptive vs Fluid

Slide 12

Slide 12 text

Layout - Adaptive

Slide 13

Slide 13 text

Layout - Adaptive - grids Fix width container Fix width container

Slide 14

Slide 14 text

Layout - Fluid

Slide 15

Slide 15 text

Layout - Fluid - grids

Slide 16

Slide 16 text

Nested grid

Slide 17

Slide 17 text

Designer

Slide 18

Slide 18 text

Identify users

Slide 19

Slide 19 text

Deﬁne UI design principles Mobile First Desktop First Desktop focus

Slide 20

Slide 20 text

Design on grids

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Handover ● Mockup design with annotation ● Mockup with grid layer ● UX walkthrough

Slide 23

Slide 23 text

Developers

Slide 24

Slide 24 text

Understand BT grid ● Viewport and breakpoints ● 12 Grids ● Spacing ● Positioning and alignment ● Display ● Sizing

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Testing

Slide 28

Slide 28 text

Stats (2020)

Slide 29

Slide 29 text

Dev tool

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

Recap

Slide 32

Slide 32 text

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 speciﬁc problem ❖ Side projects

Slide 33

Slide 33 text

Thanks and Questions