Responsive Web Design

with susy

what is RWD

a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices

WHY

ways

• frontend--responsive web
  
  
• backend--server side
  youtube .com  http://www.bloomberg.com/visual-data/world-cup/
  
• RESS 
  (responsive web design + server side components)
  http://www.slideshare.net/4nd3rsen/ress-responsive-design-server-side-components-10084972
  

RWD(front-end)

Responsive Image

<img src="desktop.jpg" srcset="mobile-s.jpg 320w, mobile-m.jpg 320w 2x, mobile-l.jpg 640w, mobile-xl.jpg 640w 2x">

<picture> 
  <source src="mobile-s.jpg   media="min-width:320px">
  <source src="mobile-m.jpg media="max-width:640px">
  <source src="mobile-l.jpg media="max-width:960px">
  <img src="desktop.jpg>
</picture> 

how

viewpoint

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

media query

  @media (min-width: 60em) {

  }

fluid unit

 .demo {
    width: 80%;
 } 

frameworks

Bootstrap ,foundation...etc

front-end framework for faster and easier web development

SUSY

an agnostic set of tools for creating powerful, custom layouts

SUSY V2

http://susy.oddbird.net/  

• SASS (require) 
  
•  Compass / Breakpoint
   (not necessary but for some function & minxin)
  

TRY IT ONLINE  (sassmeister.com)

Grid

TOOLKIT

responsive

off-canvas demo

fin