Advanced Responsive Web Design

This talk was given at Frontstack's Responsive Web Design conference. You can learn more about Frontstack at https://frontstack.io

Transcript

1. “Advanced” RWD
   

   View Slide

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

   View Slide

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

   View Slide

4. “
   When it starts
   with
   “Advanced”
   4
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. 21
    Thanks!
    Any questions?
    Twitter: @codebeast
    

    View Slide