Daria Tokranova

1. Responsive Design
Darja Tokranova
IMKE12
Tuesday, January 15, 13

2. Apple Website in 1997
(width fixed to 600px)
Tuesday, January 15, 13

3. Wireless Application Protocol
(WAP)
Tuesday, January 15, 13

4. Tuesday, January 15, 13

5. Tuesday, January 15, 13

6. Desktop Mobile
Tuesday, January 15, 13

7. “New devices have erased
comfortable 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

8. Tuesday, January 15, 13

9. 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

10. Good Responsive Design Example:
The Boston Globe Page
Tuesday, January 15, 13

11. “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

12. Key elements of
responsive design:
• The Fluid Grid — When page changes size,
the content contracts and changes to fit.
Tuesday, January 15, 13

13. Key elements of
responsive 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

14. Key elements of
responsive 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

15. Huh? Media queries?
Tuesday, January 15, 13

16. But... what about Flash?
Tuesday, January 15, 13

17. Adaptive or responsive?
Tuesday, January 15, 13

18. “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

19. Thank you!
Tuesday, January 15, 13