responsive design
DESCRIPTION
Daria TokranovaTRANSCRIPT
![Page 1: Responsive design](https://reader031.vdocuments.us/reader031/viewer/2022020217/5553a213b4c905ba078b583a/html5/thumbnails/1.jpg)
Responsive Design
Darja TokranovaIMKE12
Tuesday, January 15, 13
![Page 2: Responsive design](https://reader031.vdocuments.us/reader031/viewer/2022020217/5553a213b4c905ba078b583a/html5/thumbnails/2.jpg)
Apple Website in 1997(width fixed to 600px)
Tuesday, January 15, 13
![Page 3: Responsive design](https://reader031.vdocuments.us/reader031/viewer/2022020217/5553a213b4c905ba078b583a/html5/thumbnails/3.jpg)
Wireless Application Protocol (WAP)
Tuesday, January 15, 13
![Page 4: Responsive design](https://reader031.vdocuments.us/reader031/viewer/2022020217/5553a213b4c905ba078b583a/html5/thumbnails/4.jpg)
Tuesday, January 15, 13
![Page 5: Responsive design](https://reader031.vdocuments.us/reader031/viewer/2022020217/5553a213b4c905ba078b583a/html5/thumbnails/5.jpg)
Tuesday, January 15, 13
![Page 6: Responsive design](https://reader031.vdocuments.us/reader031/viewer/2022020217/5553a213b4c905ba078b583a/html5/thumbnails/6.jpg)
Desktop Mobile
Tuesday, January 15, 13
![Page 7: Responsive design](https://reader031.vdocuments.us/reader031/viewer/2022020217/5553a213b4c905ba078b583a/html5/thumbnails/7.jpg)
“New devices have erasedcomfortable stereotypes about the way people use technology. There is no possible way we can impose resolution standards now, because people want to get data everywhere, anytime and on every device possible. “
! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! — Jamie Boyd
Tuesday, January 15, 13
![Page 8: Responsive design](https://reader031.vdocuments.us/reader031/viewer/2022020217/5553a213b4c905ba078b583a/html5/thumbnails/8.jpg)
Tuesday, January 15, 13
![Page 9: Responsive design](https://reader031.vdocuments.us/reader031/viewer/2022020217/5553a213b4c905ba078b583a/html5/thumbnails/9.jpg)
So, the responsive design is:Set of specific techniques and tools that allows the same website to respond to the devices it is displayed on.
Tuesday, January 15, 13
![Page 10: Responsive design](https://reader031.vdocuments.us/reader031/viewer/2022020217/5553a213b4c905ba078b583a/html5/thumbnails/10.jpg)
Good Responsive Design Example:The Boston Globe Page
Tuesday, January 15, 13
![Page 11: Responsive design](https://reader031.vdocuments.us/reader031/viewer/2022020217/5553a213b4c905ba078b583a/html5/thumbnails/11.jpg)
“Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts.”
— Ethan Marcotte A List Apart, 25 May 2010
Tuesday, January 15, 13
![Page 12: Responsive design](https://reader031.vdocuments.us/reader031/viewer/2022020217/5553a213b4c905ba078b583a/html5/thumbnails/12.jpg)
Key elements ofresponsive design:
• The Fluid Grid — When page changes size, the content contracts and changes to fit.
Tuesday, January 15, 13
![Page 13: Responsive design](https://reader031.vdocuments.us/reader031/viewer/2022020217/5553a213b4c905ba078b583a/html5/thumbnails/13.jpg)
Key elements ofresponsive design:
• The Fluid Grid — When page changes size, the content contracts and changes to fit.
• Flexible Images — as Fluid Grid expands or contracts, images inside this website are also scaled to fit.
Tuesday, January 15, 13
![Page 14: Responsive design](https://reader031.vdocuments.us/reader031/viewer/2022020217/5553a213b4c905ba078b583a/html5/thumbnails/14.jpg)
Key elements ofresponsive design:
• The Fluid Grid — When page changes size, the content contracts and changes to fit.
• Flexible Images — as Fluid Grid expands or contracts, images inside this website are also scaled to fit.
• CSS Media Queries — allow to apply proper stylesheet dynamically,depending on current screen size, its aspect ratio or color support. So as a screen size changes, the page contents reconfigure to provide an optimal layout.
Tuesday, January 15, 13
![Page 15: Responsive design](https://reader031.vdocuments.us/reader031/viewer/2022020217/5553a213b4c905ba078b583a/html5/thumbnails/15.jpg)
Huh? Media queries?
Tuesday, January 15, 13
![Page 16: Responsive design](https://reader031.vdocuments.us/reader031/viewer/2022020217/5553a213b4c905ba078b583a/html5/thumbnails/16.jpg)
But... what about Flash?
Tuesday, January 15, 13
![Page 17: Responsive design](https://reader031.vdocuments.us/reader031/viewer/2022020217/5553a213b4c905ba078b583a/html5/thumbnails/17.jpg)
Adaptive or responsive?
Tuesday, January 15, 13
![Page 18: Responsive design](https://reader031.vdocuments.us/reader031/viewer/2022020217/5553a213b4c905ba078b583a/html5/thumbnails/18.jpg)
“Empty your mind. Be formless, shapeless: like water. Now you put water into a cup, it becomes the cup. You put water into a bottle, it becomes a bottle. You put it in a teapot, it becomes a teapot.Water can flow or it can crash. Be water, my friend.
— Bruce Lee
Tuesday, January 15, 13
![Page 19: Responsive design](https://reader031.vdocuments.us/reader031/viewer/2022020217/5553a213b4c905ba078b583a/html5/thumbnails/19.jpg)
Thank you!
Tuesday, January 15, 13