Responsive Web Design (RWD) with Sass+Compass

7 407 vues

Publié le

My presentation is available for download from here:

Mobile matters. There are more than 4x the number mobile devices activated each day than there babies born and the question of how to effectively deliver your content to everyone, regardless of how they get there, should be the most important question for product owners and developers today. Enter responsive design.

Responsive design comes from the idea that there is not a mobile web and a desktop web but instead a single, unified web. The most obvious new design paradigm to come from this new thinking are websites that are not built on a fixed width grid but rather one that expands and contracts depending on how much screen real estate is available to the current user. To be able to do this, however, you want a powerful set of tools at your disposal in order to aid in you in the large amount of work needed to build a responsive design. Enter Sass+Compass

Sass 3.2 introduces a number of new features designed specifically to aid in responsive design including the ability to modularize your media queries and call them on-demand or to write media queries based on calculations in your Sass files. Compass v0.12 improves upon Compass's already impecable mixin and function libraries with a large update to Compass's Image Sprite functionality, a traditionally hard technique made drop-dead easy and essential to the Mobile First Responsive Design philosophy that should be taken when designing websites.

Compass also allows us to tap into all a community of extensions to make your lives easier, including some that are specifically designed to help us with responsive design, including Susy for fluid grids, Breakpoint and Respond-To to name and manage media queries, and RWD Kickstart to get you up and running from scratch with best practices quickly as quickly as possible.

Drupal 7 also provides us with some capability to greatly reduce the development costs for our mobile-first development, including some great projects including HTML5 Project for clean, semantic HTML5 markup, the Borealis Suite for semantic blocks and mobile-first responsive images, and Drupal 7's awesome new AJAX system to assist in lazy loading content, reducing download size and speed.

Publié dans : Technologie, Design
1 commentaire
14 j’aime
  • Anyone who suggests a website will run fast using responsive design would never get a job at my company. It's a great 'quick-fix' but not a usable solution unless you're talking about a blog or short article magazine. ;

    Mobile usability is far from web-page land. If you're thinking web pages, you don't understand how people use mobile. Web pages are really slow on mobile. Single page applications is the only approach people should use for mobile if they want people to use their website regularly.

    Responsive design is currently a good approach for making sure most of your audience sees the page best for their screen resolution on their pc or laptop (80%+ of the web browsing audience of most websites) aka 30' screens down to 10 inch netbooks.
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
Aucun téléchargement
Nombre de vues
7 407
Sur SlideShare
Issues des intégrations
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Responsive Web Design (RWD) with Sass+Compass

  1. 1. #RWD WITH SASS+COMPASS Come On Get SassySunday, July 22, 12
  2. 2. WHO AM I? Sam Richard Organizer of NYC Responsive Web Design Frontend Developer Meetup @Snugug on Twitter Co-Organizer of NYC Sass Meetup Snugug on D.O. Co-Organizer of SassConf Very Sassy ManSunday, July 22, 12
  3. 3. WHAT IS THIS SESSION? I WILL: I WON’T: Give you an overview of Try and convince you some tools and to start building techniques for RWD Responsively Show you how to use Teach the basics of Sass+Compass in new Sass+Compass and exciting ways for RWD and Progressive Show you how to Enhancement compile Sass with DrupalSunday, July 22, 12
  4. 4. WHAT FEATURES DO YOU NEED FOR RESPONSIVE WEB DESIGN? As outlined in Ethan Marcotte’s Phrase-Coining A List Apart article, Responsive Web Design needs the three following things: Fluid Grids Media Queries Flexible MediaSunday, July 22, 12
  5. 5. WHAT PRINCIPLES DO YOU NEED FOR RESPONSIVE WEB DESIGN? Design your websites for Mobile First Make Content and Navigation primary concerns over visual flair and social sharing Embrace Progressive Enhancement and build on standard Web technologies (HTML/CSS/JS) Design on a grid, ideally one specific to your design Design in BrowserSunday, July 22, 12
  6. 6. You can’t articulate fluidity on paper. Brad FrostSunday, July 22, 12
  7. 7. THE TOOLS OF THE TRADE Sass+Compass Modern Web Browser (I like Google Chrome) Susy Compass Extension LiveReload Breakpoint / Respond-to Compass Extensions Adobe Shadow + Devices Toolkit Compass Extension Illustrator for creating vector graphics Modernizr Text Editor (I like TextMate or Sublime Text)Sunday, July 22, 12
  8. 8. STUFF TO AVOID Browser Plugins (like Flash and Silverlight) Single browser prefixes (just -webkit, just -moz, etc…) CSS Frameworks The phrase “Pixel Perfect” Photoshop Designing around known devices Device DetectionSunday, July 22, 12
  9. 9. The web is an inherently unstable medium Ethan MarcotteSunday, July 22, 12
  10. 10. Brad FrostSunday, July 22, 12
  11. 11. The point of creating [responsive] sites is to create functional (and hopefully optimal) user experiences for a growing number of web-enabled devices and contexts. Brad FrostSunday, July 22, 12
  12. 12. Repeat after me: Responsive Web Design isn’t about current devices and known unknowns, it’s about future devices and unknown unknowns. Donald RumsfeldSunday, July 22, 12
  13. 13. Your device detection is bad and you should feel bad Dr. John A. ZoidbergSunday, July 22, 12
  14. 14. BEFORE YOU GO ANYWHERE, LET’S CHEAT AT CSS @import compass; * { @include box-sizing(border-box); } // From Paul Irishs Blog PostSunday, July 22, 12
  15. 15. SUSY FLUID GRIDS FULL OF WIN > gem install susy --pre require susy @import "susy"; $total-columns: 12; $column-width: 4em; $gutter-width: 1em; $grid-padding: $gutter-width;Sunday, July 22, 12
  16. 16. SUSY FLUID GRIDS FULL OF WIN #page-wrapper { @include container; } #main { @include span-columns(8); } #sidebar-first { @include span-columns(4 omega); }Sunday, July 22, 12
  17. 17. SUSY FLUID GRIDS FULL OF WIN #page-wrapper { #main { *zoom: 1; width: 66.102%; max-width: 59em; float: left; _width: 59em; margin-right: 1.695%; margin-left: auto; display: inline; margin-right: auto; } padding-left: 1em; padding-right: 1em; #sidebar-first { } width: 32.203%; float: right; #page-wrapper:after { margin-right: 0; content: ""; #margin-left: -1em; display: table; display: inline; clear: both; } }Sunday, July 22, 12
  18. 18. SUSY FLUID GRIDS FULL OF WIN #user-name { @include span-columns(3, 4); } #social { @include span-columns(1 omega, 4); }Sunday, July 22, 12
  19. 19. SUSY FLUID GRIDS FULL OF WIN #user-name { #social { width: 73.684%; width: 21.053%; float: left; float: right; margin-right: 5.263%; margin-right: 0; display: inline; #margin-left: -1em; } display: inline; }Sunday, July 22, 12
  20. 20. BREAKPOINT MEDIA QUERIES MADE EASY > gem install breakpoint require breakpoint @import "breakpoint"; $breakpoint-default-media: all; $breakpoint-default-feature: min-width; $breakpoint-default-pair: width; $breakpoint-to-ems: false;Sunday, July 22, 12
  21. 21. Start with the small screen first, then expand until it looks like shit. TIME FOR A BREAKPOINT! Stephen HaySunday, July 22, 12
  22. 22. BREAKPOINT MEDIA QUERIES MADE EASY $main-nav-inline: 482px; $main-nav-inline-right: 823px; #main-nav { clear: both; li { display: block; @include breakpoint($main-nav-inline) { display: inline-block; } } @include breakpoint($main-nav-inline-large) { @include span-columns(9 omega); } }Sunday, July 22, 12
  23. 23. BREAKPOINT MEDIA QUERIES MADE EASY #main-nav { @media (min-width: 482px) { clear: both; #main-nav li { } display: inline-block } #main-nav li { } display: block; } @media (min-width: 823px) { #main-nav { width: 74.576%; float: right; margin-right: 0; #margin-left: -1em; display: inline; } }Sunday, July 22, 12
  24. 24. BREAKPOINT MEDIA QUERIES MADE EASY $breakpoint-to-ems: true; @media (min-width: 30.125em) { #main-nav li { display: inline-block #main-nav { } clear: both; } } @media (min-width: 51.438em) { #main-nav li { #main-nav { display: block; width: 74.576%; } float: right; margin-right: 0; #margin-left: -1em; display: inline; } }Sunday, July 22, 12
  25. 25. RESPOND-TO SEMANTIC BREAKPOINT NAMING $breakpoints: inline main navigation (482px), inline main navigation, floated right (823px); #main-nav { clear: both; li { display: block; @include respond-to(inline main navigation) { display: inline-block; } @include respond-to(inline main navigation, floated right) { @include span-columns(9 omega); } } }Sunday, July 22, 12
  26. 26. TOOLKIT FOR MODERN WEB DEVELOPMENT > gem install toolkit require toolkitSunday, July 22, 12
  27. 27. A NOTE ON RESPONSIVE MEDIA Sass will not magically give you Responsive Media. Neither will Compass, Modernizr, any CSS or JS Framework, or even Drupal. For Responsive Media to be a reality, we need a new browser based standard. There are currently some proposed solutions for Images, and Apple is forging ahead with a non-standard solution in iOS6, but until then, everything is a hack. There are some tricks you can do in CSS to make media Fluid, however, and Sass rocks at this.Sunday, July 22, 12
  28. 28. TOOLKIT FOR FLUID MEDIA @import "toolkit/fluid-media"; // Included Automatically img { max-width: 100%; height: auto; } .bar { .foo { @include scale- @include scale-elements; elements($ratio: 4/3); } }Sunday, July 22, 12
  29. 29. TOOLKIT FOR FLUID MEDIA .foo, .bar { .foo { position: relative; padding-top: 56.25%; height: 0; width: 100%; } } .foo > *, .bar > * { .bar { display: block; padding-top: 75%; position: absolute; width: 100%; width: 100%; } height: 100%; top: 0; margin: 0; padding: 0; }Sunday, July 22, 12
  30. 30. TOOLKIT FOR PROGRESSIVE ENHANCEMENT Download a custom build of Modernizr @import "toolkit/pe"; .foo { @include enhance-with(touch) { min-height: 44px; } @include degrade-from(touch) { min-height: 20px; } }Sunday, July 22, 12
  31. 31. TOOLKIT FOR PROGRESSIVE ENHANCEMENT .touch .foo { min-height: 44px; } .no-touch .foo, .no-js .foo { min-height: 20px; }Sunday, July 22, 12
  32. 32. TOOLKIT FOR PROGRESSIVE ENHANCEMENT $user-bar-icons: "assets/user-bar/*.png"; @include sprite-map-generator($user-bar-icons); .bar { @include replace-text-pe($user-bar-icons, user); } .baz { @include replace-text-pe($user-bar-icons, necktie, $inline-svg: false); }Sunday, July 22, 12
  33. 33. TOOLKIT FOR PROGRESSIVE ENHANCEMENT > create images/assets/user-bar-s01cf12a717.png .bar { width: 24px; height: 21px; } .svg .bar { .bar, .baz { background-image: url(data:image/svg text-indent: 110%; +xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0…); white-space: nowrap; background-size: 24px 21px; overflow: hidden; } } .no-svg .bar, .no-js .bar { background-position: 0 -18px; .no-svg .bar, .no-js .bar, .no-svg .baz, .no-js .baz { } background-image: url(../images/assets/user-bar- s01cf12a717.png); background-repeat: no-repeat; .baz { } width: 8px; height: 27px; } .svg .baz { background-image: url(../images/assets/user-bar/ necktie.svg?1341407937); background-size: 8px 27px; } .no-svg .baz, .no-js .baz { background-position: 0 -39px; }Sunday, July 22, 12
  34. 34. TOOLKIT TO KICKSTART YOUR DEVELOPMENT Existing Project require toolkit > compass install toolkit - or - > compass install toolkit/respond-to New Project > compass create <my_project> -r toolkit --using toolkit - or - > compass create <my_project> -r toolkit --using toolkit/respond-toSunday, July 22, 12
  35. 35. TOOLKIT TO KICKSTART YOUR DEVELOPMENT Compass Development Modernizr Build with yepnope Toolkit loader.js to hold yepnope Susy tests Either Breakpoint or hammer.js for touch events Respond-to Sass stylesheets and Border Box Box Model default, empty partialsSunday, July 22, 12
  36. 36. DID I MENTION… Everything you just saw? Yah, it’s all backend independent. You can use it anywhere, with anything, for any project. Sass Rocks.Sunday, July 22, 12
  37. 37. GO FORTH, BE RESPONSIVE, AND MAY THE SASS BE WITH YOU People to Follow: If you liked this talk, I’m Sam @Snugug, @Compass, @TheSassWay, Richard. If not, I was Mason @GoTeamSass, @CodingDesigner, @ScottKellum, @ItsMissCS, Wendell. @ChrisEppstein, @nex3, @beep, @lukew, @brad_frost, @globalmoxie If you have questions, come to my BoFs tomorrow or Things to Read: find me. I’m happy to talk. Please rate this session (and all of the others)! Thank you!Sunday, July 22, 12