Responsive design
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Responsive design

on

  • 1,118 views

Daria Tokranova

Daria Tokranova

Statistics

Views

Total Views
1,118
Views on SlideShare
417
Embed Views
701

Actions

Likes
0
Downloads
3
Comments
0

2 Embeds 701

http://ifi6079.wordpress.com 699
http://ixdworks.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive design Presentation Transcript

  • 1. Responsive Design Darja Tokranova IMKE12Tuesday, 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 MobileTuesday, 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 BoydTuesday, 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 PageTuesday, 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 2010Tuesday, 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 LeeTuesday, January 15, 13
  • 19. Thank you!Tuesday, January 15, 13