Devon 2011-f-1 반응형 웹 디자인

734 views
680 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
734
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Devon 2011-f-1 반응형 웹 디자인

  1. 1. Responsive Web Design Daum communications FT 개발 1팀 정승희
  2. 2. jQuery mobile test devices
  3. 3. Responsive Web DesignMAY 25, 2010 by Ethan Marcotte http://www.alistapart.com/articles/responsive-web-design/
  4. 4. The ingredients  A flexible, grid-based layout,  Flexible images and media, and  Media queries, a module from the CSS3 specification
  5. 5. RWD: The ingredients A flexible, grid-based layout,  Flexible images and media, and  Media queries, a module from the CSS3 specification
  6. 6. Fluid GridsMARCH 3, 2009 by Ethan Marcotte http://www.alistapart.com/articles/fluidgrids/
  7. 7. Fluid Grids isFlexible Layout
  8. 8. Flexible Layout
  9. 9. RWD: The ingredients  A flexible, grid-based layout, Flexible images and media, and  Media queries, a module from the CSS3 specification
  10. 10. Flexible images and media img, embed, object, video { max-width: 100%; _width: 100%; /* IE6 */ _overflow: hidden; /* IE6 */ }
  11. 11. RWD: The ingredients  A flexible, grid-based layout,  Flexible images and media, and Media queries, a module from the CSS3 specification
  12. 12. media queries Types Features  all  width  screen  height  device-width  print  device-height  projection  orientation  tv  aspect-ratio  handheld  device-aspect-ratio  …  color  color-index  …
  13. 13. media queries in action
  14. 14. Responsive Layout
  15. 15. then, well done?
  16. 16. TECHNICAL CHALLENGES
  17. 17. PROGRESSIVE ENHANCEMENT
  18. 18. An escalator can never break:it can only become stairs.
  19. 19. full desktop site + media queries = mobile site?
  20. 20. Mobile is differenet! http://www.slideshare.net/bryanrieger/going-mobile-a-pragmatic-look-at-mobile-design
  21. 21. media queries === silver bullets? full desktop site + media queries Sorry, not supported! = mobile site
  22. 22. Rethink! flexible mobile site + media queries = full desktop site
  23. 23. progressive enhancement with Javascript $(document).ready(function() { $.get(“slides.html”, function(data) { $(“.welcome .slides”) .append(data) .wrapInner(<div class=“slidewrap”> <div id=“welcome-slides” class=“slider”> </div></div>) .find(“.slidewrap”) .append(sNav) .carousel({ slide: .figure }); });
  24. 24. progressive enhancement with Javascript Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies. Modernizr.load([ { test : Modernizr.websockets && window.JSON, nope : functional-polyfills.js‘, both : [ app.js, extra.js ], complete : function () { myApp.init(); } } ]);
  25. 25. Hiding image tags or CSS background imagesusing css media query
  26. 26. RESPONSIVE WEB DESIGNIN ACTION
  27. 27. 1. Determining key breakpoints! + features and capabilities  screen size?  local storage?  touch event?  application cache? … http://martymoo.com/blog/2011/08/26/mobile-first-responsive-design-and-me/
  28. 28. Accessible on any browsersHTML CSS older browser, mobile browser…
  29. 29. Accessible on any browsers HTML + javascript CSSJavascript Accessible on any browsers HTML + javascript CSS3 + media queriesJavascript +…
  30. 30. complete development & test Build It! HTML CSS3Javascript features and capabilities screen size? local storage? touch event? application cache? …
  31. 31. features and capabilities HTML HTML HTML CSS3 CSS3 CSS3Javascript Javascript Javascript
  32. 32. features and capabilities http://www.daum.net screen size? local storage? touch event? application cache? …
  33. 33. server side HTML what get adaptive resources kind of…? CSS java script

×