Building Hi-DPI (Retina) Responsive websites with Sass & Compass

Building Hi-DPI (Retina) Responsive websites with Sass & Compass

Using Sass & Compass to build Retina-enhanced, Responsive websites. An intro to the concept of Responsive design, and a brief intro to using the Susy Compass extension to build fluid Responsive layouts.

E70a3c5fafb85c326fb0b8965b1f6692?s=128

Nathan Henderson

April 20, 2013
Tweet

Transcript

  1. Building Hi-DPI (Retina) Responsive websites with Sass & Compass Nathan

    Henderson – @nathos BarCamp Rochester Spring 2013 – 4/20/2013
  2. Responsive? ‣ “Responds” to various device/browsers ‣ Viewport sizes ‣

    Pixel density
  3. None
  4. Responsive? ‣ “Responds” to various device/browsers ‣ Viewport sizes ‣

    Pixel density
  5. None
  6. Responsive? ‣ “Responds” to various device/browsers ‣ Viewport sizes ‣

    Pixel density
  7. None
  8. Why Repsonsive? ‣ Support for more devices & contexts ‣

    Requires designers think about content
  9. Downsides? ‣ More time & effort ‣ Perhaps not appropriate

    for every site or app
  10. How Responsive Works

  11. Media Queries .profile-pic { float: left; width: 250px; } @media

    screen and (max-width: 320px) { .profile-pic { width: 100px; float: none; } }
  12. Media Queries @media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio:

    1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) { /* your Retina styles */ } http://mir.aculo.us/2012/11/28/the-ultimate-target-retina-screens-media-query/
  13. Sass Media Queries .profile-pic { float: left; width: 250px; @media

    screen and (max-width: 320px) { width: 100px; float: none; } } http://vimeo.com/nathos/sass-and-compass
  14. Sass Media Queries .profile-pic { float: left; width: 250px; }

    @media screen and (max-width: 320px) { .profile-pic { width: 100px; float: none; } } .profile-pic { float: left; width: 250px; @media screen and (max-width: 320px) { width: 100px; float: none; } } “@media bubbling”
  15. Build Mobile-first

  16. .profile-pic { float: left; width: 250px; @media screen and (max-width:

    320px) { width: 100px; float: none; } }
  17. .profile-pic { float: left; width: 250px; @media screen and (max-width:

    320px) { width: 100px; float: none; } } .profile-pic { width: 100px; @media (min-width: 620px) { width: 250px; float: left; } }
  18. Scale Down Images .container { /* Force images to scale

    down to their container widths. */ img max-width: 100%; height: auto; }
  19. Retina Images? ‣ Several options (server-side, JavaScript, media queries) ‣

    Consider using 2x resolution JPEGs at lower quality (higher compression) ‣ http://dh.karelia.com/retina/ ‣ Be careful, as this can result in very high res images; might hit mobile browser limits & use lots of RAM ‣ Do you need to retinafy content images at all?
  20. Susy Responsive Grids

  21. http://susy.oddbird.net

  22. Sass Variables for Grid Constants // Define mobile-first grid constants.

    $total-columns : 4 // You can use ems, px or % to define the grid. $column-width : 60px $gutter-width : 20px $grid-padding : $gutter-width / 2
  23. Sass Variables for Breakpoints // Define breakpoints, in this case

    when there's room for the specified columns. $break-phone-landscape: 6 $break-tablet: 8 $break-desktop: 12 $break-huge: 16
  24. Semantic Grid Declarations @include at-breakpoint($break-tablet) .main-column, .sidebar @include span-columns(8, 8)

    @include at-breakpoint($break-desktop) .main-column @include span-columns(8, 12) .sidebar @include span-columns(4 omega, 12) @include at-breakpoint($break-huge) .main-column @include span-columns(10, 16) @include suffix(1) .sidebar @include span-columns(5 omega, 16)
  25. Other Tips ‣ Avoid images where possible ‣ Use CSS,

    Unicode characters, icon fonts, SVG ‣ Retinafy your favicon ‣ http://daringfireball.net/2013/01/retina_favicons ‣ http://www.xiconeditor.com
  26. Examples & Resources https://github.com/chorn/barcamproc.org https://github.com/nathos/amicus http://susy.oddbird.net http://mediaqueri.es/

  27. Thank You