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.

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
4. Responsive? ‣ “Responds” to various device/browsers ‣ Viewport sizes ‣ Pixel density
6. Responsive? ‣ “Responds” to various device/browsers ‣ Viewport sizes ‣ Pixel density
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