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
- 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)
-
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
- context is key!
- did I hear someone say, "performance"?
- fastclick
r.w.d
By adelaineho
