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. “ 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
  2. “ DON’T KNOW WHY Some developers don’t feel they should

    waste their time on contents that start with “Basic” or “Fundamental”. 3
  3. 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
  4. 10 Essential Tips as a Checklist for RWD Do this

    at least for every website you build
  5. 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
  6. 2. Responsive Typography ➔ Line height ➔ Measure ➔ Scale

    Most Responsive CSS frameworks handle this for you
  7. 6. Art Direction ➔ Focus on Art Meaning ➔ Crop

    out unnecessary portion ➔ DEMO
  8. 9. Remember Gestures ➔ Users touch on mobile; they don’t

    click ➔ Do not hide important information behind hovers
  9. Content is Like Water ➔ Be ready for any device

    ➔ Make research to know what devices users use.