Responsive Web Design

with susy




what is RWD


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


WHY

  • reach more users 
  • provide better user experience
  • save time and money


ways




RWD(front-end)

pros

  • one -- code base, deployment,  URL
  • easier to manage
  • device agnostic

https://developers.google.com/webmasters/smartphone-sites/

cons

  • image resizing
  • device bugs
  • backwards compatibility

Responsive Image

srcset vs picture

srcset
<img src="desktop.jpg" srcset="mobile-s.jpg 320w, mobile-m.jpg 320w 2x, mobile-l.jpg 640w, mobile-xl.jpg 640w 2x">
support: http://caniuse.com/srcset
picture
<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> 

                     use picturefill 2.0 : http://scottjehl.github.io/picturefill/ 


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


setting: 
$susy

shorthand:  
+layout( $span   $grid   $keywords )


demo 
http://sassmeister.com/gist/90a1319d70ec41892a01

TOOLKIT

both with function and mixin

  • layout : span / gutters
  • margin : pre / post / pull /squish
  • padding : prefix / suffix / pad
  • helper : bleed /  isolate / gallery

...more 
http://susydocs.oddbird.net/en/latest/toolkit/

demo
 ( http://sassmeister.com/gist/368763ee484705f5d3d9 )

responsive

with breakpoint
breakpoint / susy-breakpoint



demo
http://sassmeister.com/gist/a271717b3be2c5985dfa



off-canvas demo

http://sassmeister.com/gist/a53ba99b8acdb9321969




fin

Made with Slides.com