mobile and responsive design with sass
DESCRIPTION
Is your site ready for the mobile web? Are you sure? Go ahead, check it on your phone, and your kid's phone, and a tablet, and some Android dealies, and a Bleakberry. And a TV or two. I'll wait. That was an eye-opener, right? Web design and front end development has never been more complex than it is now, and it's likely to get worse before it gets better. Should you design your site "Mobile First"? How about "Adaptive" or "Responsive"? What's the difference between those again? I want to talk about why you might want to choose these approaches to your project. CSS is also not really up to the task of managing all this complexity. Sure, it *can* do it, but pure CSS strains almost to the breaking point under the pressure. So let's welcome Sass to the party. Sass is a CSS preprocessor that gives CSS authors the tools we've been aching for in creating and managing large and complex CSS projects. We'll cover a few of the Sass basics, but the real value here is in the more sophisticated tools that let you manage all the moving parts necessary in creating all this new-fangled wizardry. We'll cover: - Mobile First - Adaptive Design - Responsive Design - Stand-alone mobile options - Sass - Mobile-focused tools - Compass - Survival Kit - SusyTRANSCRIPT
Mobile and Responsive Design
with Sass
What is a Sass, and How Will I Know if
I’m Shaking it?
I
Mobile First
What Is The Mobile Web?
371k Babies are born each day
Compare that to 1.5 million mobile device activations
http://www.lukew.com/presos/preso.asp?26
Most Personal Computer
Most Personal Computer
Constraints: Space, Attention
• Small screens
• Frequent and sporadic use. Distracted
Capabilities: New Api's
• Geolocation
• Touch
• Camera
• Orientation
Your phone sees you when you’re
sleeping.
II
Responsive Web Design
My Website Totally Shrinks On Phones
Fluid GridsProportional grids
Use %, not px
Fluid Imagessrc set
The future. Get used to it?
Fluid Imagessimple css
The best we have. For now.
Media Queries
Magic!• @media screen and (min-width: 400px) { … }
• @media screen and (min-width: 400px) and (max-width: 700px) { … }
• @media screen and (device-width: 800px) { … }
• @media screen and (device-aspect-ratio: 16/9) { … }
Current Properties• width
• height
• device-width
• device-height
• orientation
• aspect-ratio
• device-aspect-ratio
• color
• color-index
• monochrome
• resolution
• scan
• grid
Feature Detection
Modernizr
• modernizr.com
• use javascript to test for browser features
• write a css class to <html> if that feature exists
Modernizr
III
SassCSS Preprocessor
Adds more power to the process of writing CSS
sass-lang.com
Variables
Sass
Compiled CSS
Nesting
Sass
Compiled CSS
Mixins
Sass Mixin
Compiled CSSSass
Extend
Use in Sass
Compiled CSS
Setup Extendables
Media Bubbling
Compiled CSSSass
CompassUtilities
CSS3
Images
Sprites
More
Compass Extensions
Sassy ButtonsThat fancy CSS3 button look with
none of the work
http://jaredhardy.com/sassy-buttons/
Modular ScaleCalculate typographic scales
github.com/scottkellum/modular-scale
Survival KitA Toolset for Designing Web Sites
in the Browser
thecodingdesigner.com/survivalkit
SusyResponsive grids for Compass
susy.oddbird.net
Singularity GridALPHA
Infinite possibilities. Impossibly small.
singularity.gs
BreakpointReally simple media queries in Sass
breakpoint-sass.com
Crazy thingssassy mother effing text shadow
sassymothereffingtextshadow.com
IV
DrupalGreat Content Management System.
Bad Templates.
What is the best starter theme for responsive web
design in Drupal?
Avoid Cookie Cutters &
Assertive Frameworks
V
Putting It Together
GoalsCustom designs for your needs and content.
Create the mobile experience first.
Have our content meet any device.
Be future friendly.
Acknowledge and embrace unpredictability.
Custom Is Your FriendStart with no theme,
or a “bare-bones” theme.
Zen + Zen Grids
• Zen - Tried and tested in the Drupal
• Zen Grids
Survival KitDesigned For Style Guide Driven Design
Designed For Sass And Compass
Intentionally Simple
Use whatever grid you like
Just a few guides, but use whatever styles you like
Demo
The Future
Survival Kit ModuleWill show the style guide pages from
the standard Survival Kit
Sass ConfSpring 2013
sassconf.com
Sass TrainingsFollow
@GoTeamSass and @Zivtech
for details.
Questions & Contact
Zivtech zivtech.com
Mason Wendell - Creative Director
Twitter, Dribbble & Drupal: codingdesigner
github: canarymason