devon 2011-f-1 반응형 웹 디자인
DESCRIPTION
TRANSCRIPT
![Page 1: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/1.jpg)
Responsive Web Design
Daum communications FT 개발 1팀 정승희
![Page 2: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/2.jpg)
![Page 3: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/3.jpg)
jQuery mobile test devices
![Page 4: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/4.jpg)
![Page 5: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/5.jpg)
![Page 6: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/6.jpg)
![Page 7: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/7.jpg)
Responsive Web Design MAY 25, 2010 by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design/
![Page 8: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/8.jpg)
The ingredients
A flexible, grid-based layout, Flexible images and media, and Media queries, a module from the CSS3 specification
![Page 9: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/9.jpg)
RWD: The ingredients
A flexible, grid-based layout, Flexible images and media, and Media queries, a module from the CSS3 specification
![Page 10: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/10.jpg)
Fluid Grids MARCH 3, 2009 by Ethan Marcotte
http://www.alistapart.com/articles/fluidgrids/
![Page 11: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/11.jpg)
Fluid Grids is
Flexible Layout
![Page 12: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/12.jpg)
Flexible Layout
![Page 13: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/13.jpg)
RWD: The ingredients
A flexible, grid-based layout,
Flexible images and media, and Media queries, a module from the CSS3 specification
![Page 14: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/14.jpg)
Flexible images and media
img, embed, object, video { max-width: 100%; _width: 100%; /* IE6 */ _overflow: hidden; /* IE6 */ }
![Page 15: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/15.jpg)
RWD: The ingredients
A flexible, grid-based layout, Flexible images and media, and
Media queries, a module from the CSS3 specification
![Page 16: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/16.jpg)
media queries
Types
all screen print projection tv handheld …
Features
width height device-width device-height orientation aspect-ratio device-aspect-ratio color color-index …
![Page 17: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/17.jpg)
media queries in action
![Page 18: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/18.jpg)
Responsive Layout
![Page 19: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/19.jpg)
then, well done?
![Page 20: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/20.jpg)
TECHNICAL CHALLENGES
![Page 21: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/21.jpg)
PROGRESSIVE ENHANCEMENT
![Page 22: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/22.jpg)
An escalator can never break: it can only become stairs.
![Page 23: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/23.jpg)
full desktop site + media queries = mobile site?
![Page 24: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/24.jpg)
Mobile is differenet!
http://www.slideshare.net/bryanrieger/going-mobile-a-pragmatic-look-at-mobile-design
![Page 25: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/25.jpg)
media queries === silver bullets?
full desktop site + media queries = mobile site
Sorry, not supported!
![Page 26: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/26.jpg)
Rethink!
flexible mobile site + media queries = full desktop site
![Page 27: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/27.jpg)
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' }); });
});
![Page 28: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/28.jpg)
progressive enhancement with Javascript
Modernizr.load([ { test : Modernizr.websockets && window.JSON, nope : 'functional-polyfills.js‘, both : [ 'app.js', 'extra.js' ], complete : function () { myApp.init(); } } ]);
Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies.
![Page 29: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/29.jpg)
Hiding image tags or CSS background images using css media query
![Page 30: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/30.jpg)
RESPONSIVE WEB DESIGN IN ACTION
![Page 31: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/31.jpg)
1. Determining key breakpoints!
http://martymoo.com/blog/2011/08/26/mobile-first-responsive-design-and-me/
+ features and capabilities screen size? local storage? touch event? application cache? …
![Page 32: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/32.jpg)
HTML CSS
Accessible on any browsers older browser, mobile browser…
![Page 33: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/33.jpg)
HTML CSS
Javascript
Accessible on any browsers + javascript
HTML CSS3
Javascript
Accessible on any browsers + javascript + media queries + …
![Page 34: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/34.jpg)
HTML CSS3
Javascript
Build It!
complete development & test
features and capabilities screen size? local storage? touch event? application cache? …
![Page 35: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/35.jpg)
features and capabilities
HTML CSS3
Javascript
HTML CSS3
Javascript
HTML CSS3
Javascript
![Page 36: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/36.jpg)
http://www.daum.net features and capabilities
screen size? local storage? touch event? application cache? …
![Page 37: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/37.jpg)
what kind of…?
server side
HTML
CSS java
script
get adaptive resources
![Page 38: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/38.jpg)
![Page 39: Devon 2011-f-1 반응형 웹 디자인](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c7bfee4a7959395c8b457d/html5/thumbnails/39.jpg)