Slide 1

Slide 1 text

“Advanced” RWD

Slide 2

Slide 2 text

“ Don’t let the word “ADVANCED” fool you. It’s just supposed to make you feel you will have super powers after coming for this meetup. 2

Slide 3

Slide 3 text

“ DON’T KNOW WHY Some developers don’t feel they should waste their time on contents that start with “Basic” or “Fundamental”. 3

Slide 4

Slide 4 text

“ When it starts with “Advanced” 4

Slide 5

Slide 5 text

“ Then they leave their PCs halfway like... 5

Slide 6

Slide 6 text

“ Let’s not go home crazy. Let’s go home with 10 essentials of RWD 6

Slide 7

Slide 7 text

Hi, I’m Christian (Codebeast) Nwamba Program Manager at Scotch.io Dev Evangelist at Cloudinary African Community Builder Webpack Africa Ambassador . . . Bitkoin.Africa Advocate from today 7

Slide 8

Slide 8 text

“ 8 Before we Begin RWD is NOT (only) about Screen Sizes

Slide 9

Slide 9 text

10 Essential Tips as a Checklist for RWD Do this at least for every website you build

Slide 10

Slide 10 text

1. Contents should flow with screen size ➔ Use media queries generously ➔ Consider responsive grids ➔ Have information hierarchy and hide less important information in smaller devices

Slide 11

Slide 11 text

2. Responsive Typography ➔ Line height ➔ Measure ➔ Scale Most Responsive CSS frameworks handle this for you

Slide 12

Slide 12 text

3. Visual Variation ➔ Width is not the only property that should be fluid ➔ DEMO

Slide 13

Slide 13 text

4. Don’t rely on Image Dimensions ➔ This code is not a silver bullet: ➔ DEMO

Slide 14

Slide 14 text

6. Art Direction ➔ Focus on Art Meaning ➔ Crop out unnecessary portion ➔ DEMO

Slide 15

Slide 15 text

7. Image Optimization ➔ Choose right Image format ➔ Choose optimal image quality ➔ DEMO

Slide 16

Slide 16 text

8. Responsive Video ➔ Width: 100% for HTML5 ➔ Intrinsic ratios for embeds

Slide 17

Slide 17 text

8. Responsive Video ➔ Width: 100% for HTML5 ➔ Intrinsic ratios for embeds

Slide 18

Slide 18 text

9. Remember Gestures ➔ Users touch on mobile; they don’t click ➔ Do not hide important information behind hovers

Slide 19

Slide 19 text

Content is Like Water ➔ Be ready for any device ➔ Make research to know what devices users use.

Slide 20

Slide 20 text

10. Appendix ➔ https://css-tricks.com/NetM ag/FluidWidthVideo/Article-F luidWidthVideo.php ➔ https://cloudinary.com/docu mentation/image_transform ations

Slide 21

Slide 21 text

21 Thanks! Any questions? Twitter: @codebeast