r.w.d 

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"



"canvas"




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


    think








    flexibility



    live examples

       http://www.designmadeingermany.de/magazin/5/
      http://responsivewebdesign.com/robot/



      responsive vs adaptive

      main differences between the two:

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



      implementation

      • flexible grid
      • flexible media
      • media queries

       



      considerations

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

      r.w.d

      By adelaineho

      r.w.d

      • 268
      Loading comments...

      More from adelaineho