Responsive Web Design

Daum communications FT 개발 1팀 정승희

jQuery mobile test devices

Responsive Web Design MAY 25, 2010 by Ethan Marcotte

http://www.alistapart.com/articles/responsive-web-design/

The ingredients

A flexible, grid-based layout, Flexible images and media, and Media queries, a module from the CSS3 specification

RWD: The ingredients

A flexible, grid-based layout, Flexible images and media, and Media queries, a module from the CSS3 specification

Fluid Grids MARCH 3, 2009 by Ethan Marcotte

http://www.alistapart.com/articles/fluidgrids/

Fluid Grids is

Flexible Layout

Flexible Layout

RWD: The ingredients

A flexible, grid-based layout,

Flexible images and media, and Media queries, a module from the CSS3 specification

Flexible images and media

img, embed, object, video { max-width: 100%; _width: 100%; /* IE6 */ _overflow: hidden; /* IE6 */ }

RWD: The ingredients

A flexible, grid-based layout, Flexible images and media, and

Media queries, a module from the CSS3 specification

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 …

media queries in action

Responsive Layout

then, well done?

TECHNICAL CHALLENGES

PROGRESSIVE ENHANCEMENT

An escalator can never break: it can only become stairs.

full desktop site + media queries = mobile site?

Mobile is differenet!

http://www.slideshare.net/bryanrieger/going-mobile-a-pragmatic-look-at-mobile-design

media queries === silver bullets?

full desktop site + media queries = mobile site

Sorry, not supported!

Rethink!

flexible mobile site + media queries = full desktop site

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' }); });

});

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.

Hiding image tags or CSS background images using css media query

RESPONSIVE WEB DESIGN IN ACTION

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? …

HTML CSS

Accessible on any browsers older browser, mobile browser…

HTML CSS

Javascript

Accessible on any browsers + javascript

HTML CSS3

Javascript

Accessible on any browsers + javascript + media queries + …

HTML CSS3

Javascript

Build It!

complete development & test

features and capabilities screen size? local storage? touch event? application cache? …

features and capabilities

HTML CSS3

Javascript

HTML CSS3

Javascript

HTML CSS3

Javascript

http://www.daum.net features and capabilities

screen size? local storage? touch event? application cache? …

what kind of…?

server side

HTML

CSS java

script

get adaptive resources