responsive web design

in the next hour...

  • current state of the web
  • what is rwd?
  • examples
  • responsive vs adaptive
  • implementation
    • flexible grid
    • flexible media
    • media queries

  • considerations

interesting fact

Scott Jenson at WDS13 suggested we often use our past successes or experiences and apply it to new technologies/products - concept known as 'default thinking' and 'legacy vision'
  • television - read radio plays
  • telephone - listen to opera
  • movies - capturing stage/theatre plays

P.S Scott realised later concept was introduced in 1960s

what does that got to do with anything?

we are doing the exact same thing with web! 

the man who coined the term 'rwd'

ethan marcotte - "responsive web design"


responsive architecture

so how does rwd help?

     RWD a web design approach aimed at crafting sites to provide an optimal viewing experience - easy reading and navigation with a minimum of resizing, panning and scrolling - across a wide range of devices from mobile phones to desktop computer monitors



    live examples


      responsive vs adaptive

      main differences between the two:

      • responsive: should be fluid on ANY device size
      • adaptive: snaps to specific breakpoints(media queries)


      • flexible grid
      • flexible media
      • media queries



      • context is key! 
      • did I hear someone say, "performance"?
        • fastclick


      By adelaineho


      • 438
      Loading comments...

      More from adelaineho