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