Meta Refresh 2012

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

HTML5 and CSS3 have very quickly moved from being tentative new standards to the base standards for every major desktop and mobile browser. HTML5 is now just HTML, a modular, living standard that no longer needs a version number.

Now that we are no longer fighting over platforms, it’s time to put the specs aside and revisit the construction of user interface: how do we raise the bar for stellar user interface on the web?

Meta Refresh is a follow-up to DocType HTML5 from 2010-11 and is a conference on web UI engineering.

More about the event: http://metarefresh.in
Registrations: http://metarefresh.doattend.com

Hosted by

Meta Refresh is an umbrella forum for conversations about different aspects of design and product including: 1. UX and interaction design 2. CMS, content management, publishing and content marketing 3. Information architecture 4. Product design 5. Privacy in product design more

Arpan CJ

@arpancj

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

Submitted Mar 24, 2012

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

{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

Meta Refresh is an umbrella forum for conversations about different aspects of design and product including: 1. UX and interaction design 2. CMS, content management, publishing and content marketing 3. Information architecture 4. Product design 5. Privacy in product design more