Designing for Humans – Responsive Design – Liberté

View Github Repository Open presentation in a new window

mshwery

See all presentation from mshwery

Designing for Humans – Responsive Design – Liberté

0 0

liberte

On Github mshwery / liberte

Designing for Humans

Maximizing Respondent Experience & Preparing for Mobile in Fulcrum

Presented by Matt Shwery, Lucy Warburton, and Michael Velez

Where are we?

  • Post-PC - Thousands of devices
  • 12x Mobile traffic in 2012 versus entire Internet in 2000 (source)
  • 2013 - the year the number of mobile-connected devices will outnumber the world's population. (source)

How do you design for every device?

Don't

Responsive Design

Design once. And for all.

This gives you freedom.

Dimension Independence.

Device Agnosticism.

Call it what you want.

But what does it mean?

#1 Design around content.

Let your content determine breakpoints and layout shifts as it adapts to different sizes.

#2 Design for types of interaction.

  • Touch
  • Keyboard
  • Mouse
  • Touchpad
  • Voice?
  • Multi-touch

Fat Fingers

width = device-width

Appropriate Keyboards

#3 Design for modes of viewing.

Sometimes attention is fleeting. Sometimes it's undivided.

#4 Design for performance.

Performance is a feature. How fast is your site? How lightweight is it?

Liberté

How we're preparing the way in Fulcrum.

  • Responsive Design
  • Better Usability
  • Client-side Validation
  • Templating + Caching
  • HTML5 + Patterns
  • Smarter Routing

Templating + Caching

  • More flexible

    "Oh hey Iphone, let me render this better for you."

  • More reusable

    Less maintenance + less coupling = developer happiness

  • More standardized

    Forces best-practice data architecture

  • Fewer server trips

    Cache everything that's static

  • API friendly

    Why load the same page twice?

What about smaller screens?

Stop designing for devices.

Design for Humans

Thanks

By Matt Shwery / @mshwery