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