Meta Refresh 2012

Web design could use some new ideas. We have the tech now.

Build a Responsive Design quickly with SASS + practical challenges & solutions

Submitted by Arpan CJ (@arpancj) on Mar 24, 2012

Section: Default Technical level: Intermediate Session type: Tutorial Status: Confirmed & Scheduled

Abstract

Simplify responsive design with SASS and deal with practical real-world problems.

Outline

Responsive Design is complex. You have to figure out the precise percentages required for the width of a container, the margins, the padding … and once you’re done, you still need to do it all over again for a different resolution!

But it does not have to be tough. SASS can do the heavy lifting for you, allowing you to focus on the actual design. Plus, this way, you don't have to clutter your HTML & CSS with extra divs and non-semantic class names.

The talk will cover

  • Using SASS + @media queries, and a flexible SASS framework to quickly create a simple responsive design
  • Create a complex responsive layout with
    • multiple nested elements
    • media: images, photos etc.
    • responsive navigation
    • hover & popups
  • Real world challenges
    • flexible content
    • flexible images
    • gestures for touch screens: pull to refresh, pinch to zoom etc.
    • limitations of touch screens
    • slow mobile connections
    • high dpi screens (retina displays)
  • Responsive Design: design challenges
    • Multi-device layout patterns
    • Responsive Navigation Patterns
    • Mobile First: advantages

Requirements

Basic knowledge of

  • HTML + CSS
  • SASS
  • Responsive Design

Speaker bio

I’m a designer who loves programming! Started out in print, moved to web design and then to UI design. Started using Ruby & Rails to implement my UIs.

Now I work with HordeSoftware ( http://hordesoftware.com/ ), dividing my time pretty evenly between design and code. Currently focusing on cross-device UI design, specifically in creating web sites & web apps that work well across various screen sizes & resolutions.

Links

Slides

http://www.hordesoftware.com/projects/responsive_design/

Comments

  • AC

    Arpan CJ

    @arpancj

    Proposer 8 years ago

    The talk isn’t about Responsive Design. It is about implementing Responsive Design using SASS.

    Responsive Design is a topic that is already being talked about. My proposal is that designing sites that are truly responsive is difficult in plain CSS. The code tends to

    • be brittle since it is based on very precise percentages, if you are not using a framework
    • or not very flexible in terms of layouts possible, if you are using a framework like bootstrap.

    Instead I propose that using the features that are available in SASS, it is possible to build a robust responsive design framework in a fraction of the time, and yet still have access to virtually any layout or design that you want to implement, since you are not confined by the limitations of any framework.

    I know that I submitted this talk at a late date, and it is likely that it won’t be selected. That’s fine. I’ll be attending the conference anyway, and if you’re interested, I’d be happy to share my ideas with you personally.

    Cheers.

  • Kiran Jonnalagadda

    @jace

    Crew 8 years ago (edited 8 years ago)

    This is the third proposal for a responsive design session. You’ll need something more than the basics to get voted up. Also, repeating a talk from another event isn’t nice.

  • AC

    Arpan CJ

    @arpancj

    Proposer 8 years ago

    Basically there are already talks on Responsive Design and talks on SASS.

    My talk will build on those two talks and show you how to use both techniques both simplify your work, while designing stuff that excels.

  • AC

    Arpan CJ

    @arpancj

    Proposer 8 years ago

    Also, I won’t be repeating the talk that I did at RubyConf, since this audience is completely different. That was mostly developers, this will be mostly designers. So although I am sharing the same technique, I will be reworking my entire talk and slides to cater to the different audience, as well as improve it based on feedback and Q&A from the previous talk. I promise you that if you compare the two videos at least 60% of the content will be different.

  • AC

    Arpan CJ

    @arpancj

    Proposer 8 years ago

    @Kiran: Would it be a good idea for me to change the target audience from beginner to intermediate or advanced. That way, I can skip the basics, and go right to showing how to use advanced techniques in SASS for Responsive Design. I would be able to cover twice the ground if I did that.

    • Kiran Jonnalagadda

      @jace

      Crew 8 years ago

      Good idea. If you are focusing on the intermediate level, it’ll make sense to have your session after an intro-level responsive design session. I totally like the idea of focusing on implementation with Sass (or Less or Stylus for some).

  • PK

    Praveen Kumar

    @apnerve

    8 years ago

    Now it sounds interesting. Voting up. Let’s see how it goes.

  • JV

    Jitendra Vyas

    @jitendravyas

    8 years ago

    I would like to attend this session

Login to leave a comment