Mobile and Responsive Design with Sass
Upcoming SlideShare
Loading in...5
×
 

Mobile and Responsive Design with Sass

on

  • 3,157 views

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.

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
- Susy

Statistics

Views

Total Views
3,157
Views on SlideShare
3,033
Embed Views
124

Actions

Likes
2
Downloads
23
Comments
1

3 Embeds 124

http://www.schoox.com 80
http://www.nyccamp.org 31
http://nyccamp.org 13

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Mobile and Responsive Design with Sass Mobile and Responsive Design with Sass Presentation Transcript

  • Mobile andResponsive Design with Sass
  • What is a Sass, andHow Will I Know if I’m Shaking it?
  • I
  • MobileFirst
  • What IsThe Mobile Web?
  • 371k Babiesare born each day Compare that to 1.5 million mobile device activationshttp://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 Apis• Geolocation• Touch• Camera• Orientation
  • Your phone sees you when you’re sleeping.
  • II
  • ResponsiveWeb Design
  • My Website TotallyShrinks On Phones
  • Fluid Grids Proportional grids Use %, not px
  • Fluid Images src setThe future. Get used to it?
  • Fluid Images simple cssThe 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 • color• height • color-index• device-width • monochrome• device-height • resolution• orientation • scan• aspect-ratio • grid• device-aspect- ratio
  • FeatureDetection
  • Modernizr• modernizr.com• use javascript to test for browser features• write a css class to <html> if that feature exists
  • Modernizr
  • III
  • Sass CSS PreprocessorAdds more power to the process of writing CSS sass-lang.com
  • VariablesSass Compiled CSS
  • NestingSass Compiled CSS
  • MixinsSass Compiled CSSSass Mixin
  • ExtendSetup Extendables Use in Sass Compiled CSS
  • Media BubblingSass Compiled CSS
  • Compass Utilities CSS3 Images Sprites More
  • Compass Extensions
  • Sassy Buttons That fancy CSS3 button look with none of the workhttp://jaredhardy.com/sassy-buttons/
  • Modular Scale Calculate typographic scalesgithub.com/scottkellum/modular-scale
  • Survival KitA Toolset for Designing Web Sites in the Browserthecodingdesigner.com/survivalkit
  • SusyResponsive grids for Compass susy.oddbird.net
  • Singularity Grid ALPHAInfinite possibilities. Impossibly small. singularity.gs
  • BreakpointReally simple media queries in Sass breakpoint-sass.com
  • Crazy thingssassy mother effing text shadowsassymothereffingtextshadow.com
  • IV
  • DrupalGreat Content Management System. Bad Templates.
  • What is the beststarter theme for responsive webdesign 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 Friend Start 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 Module Will show the style guide pages from the standard Survival Kit
  • Sass Conf Spring 2013 sassconf.com
  • Sass Trainings Follow@GoTeamSass and @Zivtech for details.
  • Questions & Contact Zivtech zivtech.com Mason Wendell - Creative DirectorTwitter, Dribbble & Drupal: codingdesigner github: canarymason