Devon 2011-f-1 반응형 웹 디자인
1 like704 views
The document discusses responsive web design, which involves creating websites that automatically adapt their layout to different screen sizes and devices using flexible grids, flexible images and media, and media queries. The key ingredients of responsive web design are a flexible grid-based layout, flexible images and media that resize appropriately, and media queries which allow the application of CSS styles based on characteristics of the device. Responsive design aims to provide an optimized viewing and interaction experience across a wide range of devices without the need for separate mobile sites.
![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();
}
}
]);](https://image.slidesharecdn.com/devon-2011-f-1-responsive-web-design-120821082011-phpapp01/85/Devon-2011-f-1-28-320.jpg)
Devon 2011-f-1 반응형 웹 디자인
- 1. Responsive Web Design Daum communications FT 개발 1팀 정승희
- 3. jQuery mobile test devices
- 7. Responsive Web Design MAY 25, 2010 by Ethan Marcotte http://www.alistapart.com/articles/responsive-web-design/
- 8. The ingredients A flexible, grid-based layout, Flexible images and media, and Media queries, a module from the CSS3 specification
- 9. RWD: The ingredients A flexible, grid-based layout, Flexible images and media, and Media queries, a module from the CSS3 specification
- 10. Fluid Grids MARCH 3, 2009 by Ethan Marcotte http://www.alistapart.com/articles/fluidgrids/
- 11. Fluid Grids is Flexible Layout
- 12. Flexible Layout
- 13. RWD: The ingredients A flexible, grid-based layout, Flexible images and media, and Media queries, a module from the CSS3 specification
- 14. Flexible images and media img, embed, object, video { max-width: 100%; _width: 100%; /* IE6 */ _overflow: hidden; /* IE6 */ }
- 15. RWD: The ingredients A flexible, grid-based layout, Flexible images and media, and Media queries, a module from the CSS3 specification
- 16. 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 …
- 17. media queries in action
- 19. then, well done?
- 22. An escalator can never break: it can only become stairs.
- 23. full desktop site + media queries = mobile site?
- 24. Mobile is differenet! http://www.slideshare.net/bryanrieger/going-mobile-a-pragmatic-look-at-mobile-design
- 25. media queries === silver bullets? full desktop site + media queries Sorry, not supported! = mobile site
- 26. Rethink! flexible mobile site + media queries = full desktop site
- 27. 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' }); });
- 28. 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(); } } ]);
- 29. Hiding image tags or CSS background images using css media query
- 30. RESPONSIVE WEB DESIGN IN ACTION
- 31. 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/
- 32. Accessible on any browsers HTML CSS older browser, mobile browser…
- 33. Accessible on any browsers HTML + javascript CSS Javascript Accessible on any browsers HTML + javascript CSS3 + media queries Javascript +…
- 34. complete development & test Build It! HTML CSS3 Javascript features and capabilities screen size? local storage? touch event? application cache? …
- 35. features and capabilities HTML HTML HTML CSS3 CSS3 CSS3 Javascript Javascript Javascript
- 36. features and capabilities http://www.daum.net screen size? local storage? touch event? application cache? …
- 37. server side HTML what get adaptive resources kind of…? CSS java script