Responsive Design work flow

Mobile Viewports

Media Queries

Fluid grids

Implementation of Responsive Design

Responsive Design consideration

Lack of control

Wide verity of browsers and operating systems

Different size screen and devices

Fixed width designs

Explosion

Viewports

iPhone 3GS

Safari: 980pxOpera:850px

Default Scaling

320px fixed width web page

Fluid Grids

Media Queries

@media [not | only] screen [and] (expression){}

media="screen and (min-width:480px), screen and (orientation:landscape)"

<link rel="stylesheet" href="main.css" media="screen and (min-width:480px)">

@import url(example.css) screen and (max-width:480px);

@media only screen and (max-width:480px){p{color:white;background: rgb(117,15,25);}

}

Break-points

Thank You

http://www.opensourcetechnologies.com