Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Advanced Responsive Web Design

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

Christian Nwamba

October 28, 2017
Tweet

More Decks by Christian Nwamba

Other Decks in Technology

Transcript

  1. “Advanced” RWD

    View full-size 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 full-size 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 full-size slide


  4. When it starts
    with
    “Advanced”
    4

    View full-size slide


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

    View full-size slide


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

    View full-size 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 full-size slide


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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide