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.

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

18. Responsive Layout

19. then, well done?

20. TECHNICAL CHALLENGES

21. PROGRESSIVE ENHANCEMENT

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