Responsive Design

RESPONSIVE DESIGN

How I stopped worrying and learned to love the bomb
Responsive design is not just set of techniques or design rules, it’s more of a new mindset. If put into action properly, designing responsive sites will provide an entirely new perspective. Let me show you what I mean…

How did we get here? “The web is an ever
changing place” — we have heard this many times, but what does this actually mean?

A party for two In many ways, Apple is the
direct opposite of the web. Uses mostly closed and proprietary technology and doesn’t deal with vendors which is in part reason for it’s unprecedented success [EXPLAIN].

A party for everyone The web however is by nature
build on mostly open technology and knows no vendor restrictions.

This much openness comes with pain for everyone, but mostly
the responsible (as in being *) developers. We have to deal with X different vendors and then different versions of everything: OS, Browser, plugins, mark–up/CSS specs, …

Oh, and then there’s this…

“The Best Browser is the One You Have with You“
— Stephanie Rieger, ALA The web has become ubiquitous, it’s everywhere and on every device. And each of these devices comes with it’s own set of “rules”.

“Mobile internet use nearing 50%” — BBC Technology, August 2011
The mobile web is exploding and will still continue to grow rapidly …

How are we approaching this situation? The mobile web is
exploding and will still continue to grow rapidly …

The way we have always done and not very well.
We have come to like our sites and their designs (as owners at least) and don’t want to say good bye just yet. So we wrap them into a new layer.

Which leads to weird side effects. Believe it or not,
not every mobile browser runs on iOS. Also, sharing a link to such a site will in many cases render the page in the mobile version no matter what device requests the page.

Where’s my jetpack anyways? Why does this not work as
good as hoped? —The web does not leap in big jumps forward. It gradually evolves: Despite what we have been told: * Not all publishing moved to digital. * We’re not browsing the web only on mobile devices. / [EXPLAIN theory of niches, using physical books]

Let’s take a step back and do something that happens
way to little in our ﬁeld. Let’s take a deep breath and think for a second what it is that we’re trying to do.

CONTENT FIRST We’re trying to communicate something to our users/visitors.
Always! That’s the essence of the web, the essence of media.

The success of apps like Readability or Instapaper are clear
indicators for the necessity to focus stronger on the content. Where did this essential piece get lost?

Why isn’t that happening yet? In the beginning there were
no pure web designers. Most people designing for the web came from a print background and tried to apply what they knew to the web.

Getting the message across So, having established that we’ve come
a little off the road, what are we going to do about it?

Here’s a great idea! — Responsive design. Content aware. Browse/device
concious.

With “crotch–grabbing–face– slapping new great”–effect Having said that the web
evolves steadily, rapid change is rarely seen and real innovation is rare. Even rarer is innovation based on existing tools so clever and so painfully obvious… [EXPLAIN further]

A few examples in the wild… http://hicksdesign.co.uk/ http://cognition.happycog.com/ http://www.ampersandconf.com/ http://www.bostonglobe.com/

SO, HOW DOES IT WORK?

Foundation mark–up Semantically meaningful mark–up, serving content only — not
appearance — makes the base. As accessibility nut this is a late but well deserved victory.

<!DOCTYPE html> HTML5

Setup Semantically meaningful mark–up, serving content only — not appearance
— makes the base. As accessibility nut this is a late but well deserved victory.

Media Queries

@media screen { #selector {…} } @media print { #selector
{…} } Media types in stylesheets

@media screen and (min-width: 720px) { #selector {…} } Media
query in stylesheets

@import url("foo.css") screen and (min-width: 720px); Media types in stylesheets

width height device-width device-height orientation aspect-ratio device-aspect-ratio color color-index …
not only width and height, in theory a lot more (browser–depending…)

Breakpoints * “Traditional” way: pick most common devices and use
screen sizes as break points * Works, but seems feels off — haven’t we done this before? (Remember the 960 grid?) * Let the content decide over break points, not hypothetical screen sizes * Start from smallest screen size

Layout / Grids Deﬁne font sizes in em and grid
columns in percentage. Fluid layouts.

Responsive images (and media)

img, embed, object, video { max-width: 100%; }

enhance.js modernizr.js yepnope.js

Why bother?

Focus SEO aspects aside, your content is the single most
valuable asset on your site. And while the deﬁnition of quality might depend on your user base, quality is what they will seek and ﬁnd elsewhere if you don’t provide it.

Maintainability Initially slightly higher costs due to longer design processes
are soon balanced by the beneﬁts of having to maintain a single code base for *all* clients.

Challenges

Responsive images (media) Responsive images are (still) a problematic topic.
Difficult, no real solution yet. Every existing solution depends either on JS and or cookies. New problem: image prefetching implemented by newer browsers. Flash and overhead.

<img src="mobile.jpg" data-full="full.jpg" /> <img src="mobile.jpg" data-medium="medium.jpg" data-full="full.jpg" /> The
currently widespread approach.

<picture> <source src="full.jpg" media="min-width: 720px" /> <source src="mobile.jpg" /> <img
src="mobile.jpg" /> </picture> Proposed and ﬁctional solution.

Temptations to fall back in to old habits User agent
and/or Browser detection e.g.

Browser limitations Media queries aren’t fully supported everywhere. Javascript support
across devices is very different [EXAMPLE: DOM manipulation]

Shims, shivs and polyfills Overcome browser limitations with Javscript

The future

Responsive (web) applications

Even stronger focus on content à la Readability More than
10GB worth of ad impressions per day / US citizen.

No more ”hacks“ Every "hack" equals technical dept and needs
to "grow up" eventually ** It's okay to abuse stuff to get results when in an early stage ** But in the long run a solution adhering to the provided circumstances needs to be found, especially in an open environment such as the web

Jetpacks

Thanks!

Responsive Design

Responsive Design

More Decks by Florian Plank

Other Decks in Design

Featured

Transcript