Slide 1
Slide 1 text
RESPONSIVE
DESIGN
Slide 2
Slide 2 text
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…
Slide 3
Slide 3 text
How did we get here?
“The web is an ever changing place” — we have heard this many times, but what does this
actually mean?
Slide 4
Slide 4 text
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].
Slide 5
Slide 5 text
A party for everyone
The web however is by nature build on mostly open technology and knows no vendor
restrictions.
Slide 6
Slide 6 text
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, …
Slide 7
Slide 7 text
Oh, and then there’s this…
Slide 8
Slide 8 text
“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”.
Slide 9
Slide 9 text
“Mobile internet use nearing 50%”
— BBC Technology, August 2011
The mobile web is exploding and will still continue to grow rapidly …
Slide 10
Slide 10 text
How are we approaching this situation?
The mobile web is exploding and will still continue to grow rapidly …
Slide 11
Slide 11 text
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.
Slide 12
Slide 12 text
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.
Slide 13
Slide 13 text
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]
Slide 14
Slide 14 text
Let’s take a step back and do something that happens way to little in our field. Let’s take a
deep breath and think for a second what it is that we’re trying to do.
Slide 15
Slide 15 text
CONTENT FIRST
We’re trying to communicate something to our users/visitors. Always! That’s the essence of
the web, the essence of media.
Slide 16
Slide 16 text
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?
Slide 17
Slide 17 text
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.
Slide 18
Slide 18 text
Getting the message across
So, having established that we’ve come a little off the road, what are we going to do about it?
Slide 19
Slide 19 text
Here’s a great idea! — Responsive design. Content aware. Browse/device concious.
Slide 20
Slide 20 text
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]
Slide 21
Slide 21 text
A few examples in the wild…
http://hicksdesign.co.uk/
http://cognition.happycog.com/
http://www.ampersandconf.com/
http://www.bostonglobe.com/
Slide 22
Slide 22 text
SO, HOW DOES IT WORK?
Slide 23
Slide 23 text
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.
Slide 24
Slide 24 text
HTML5
Slide 25
Slide 25 text
Setup
Semantically meaningful mark–up, serving content only — not appearance — makes the base.
As accessibility nut this is a late but well deserved victory.
Slide 26
Slide 26 text
Get mobile viewport under control and disable zooming.
Slide 27
Slide 27 text
Media Queries
Slide 28
Slide 28 text
Media types
Slide 29
Slide 29 text
@media screen {
#selector {…}
}
@media print {
#selector {…}
}
Media types in stylesheets
Slide 30
Slide 30 text
@media screen and (min-width: 720px) {
#selector {…}
}
Media query in stylesheets
Slide 31
Slide 31 text
Media types in stylesheets
Slide 32
Slide 32 text
@import url("foo.css")
screen and (min-width: 720px);
Media types in stylesheets
Slide 33
Slide 33 text
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…)
Slide 34
Slide 34 text
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
Slide 35
Slide 35 text
Layout / Grids
Define font sizes in em and grid columns in percentage. Fluid layouts.
Slide 36
Slide 36 text
Responsive images (and media)
Slide 37
Slide 37 text
img,
embed,
object,
video {
max-width: 100%;
}
Slide 38
Slide 38 text
Related
Slide 39
Slide 39 text
Progressive Enhancement
EXAMPLES: Image listing to slide show with support for touch events, custom input elements
Slide 40
Slide 40 text
enhance.js
modernizr.js
yepnope.js
Slide 41
Slide 41 text
Why bother?
Slide 42
Slide 42 text
Focus
SEO aspects aside, your content is the single most valuable asset on your site. And while the
definition of quality might depend on your user base, quality is what they will seek and find
elsewhere if you don’t provide it.
Slide 43
Slide 43 text
Maintainability
Initially slightly higher costs due to longer design processes are soon balanced by the
benefits of having to maintain a single code base for *all* clients.
Slide 44
Slide 44 text
Challenges
Slide 45
Slide 45 text
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.
Slide 46
Slide 46 text
The currently widespread approach.
Slide 47
Slide 47 text
Proposed and fictional solution.
Slide 48
Slide 48 text
Temptations to fall back in to old habits
User agent and/or Browser detection e.g.
Slide 49
Slide 49 text
Browser limitations
Media queries aren’t fully supported everywhere. Javascript support across devices is very
different [EXAMPLE: DOM manipulation]
Slide 50
Slide 50 text
Shims, shivs and polyfills
Overcome browser limitations with Javscript
Slide 51
Slide 51 text
The future
Slide 52
Slide 52 text
Responsive (web) applications
Slide 53
Slide 53 text
Even stronger focus on content
à la Readability
More than 10GB worth of ad impressions per day / US citizen.
Slide 54
Slide 54 text
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
Slide 55
Slide 55 text
Jetpacks
Slide 56
Slide 56 text
Thanks!