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