Responsive web design

RESPONSIVE WEBDESIGN
FRONTEERS / MECHELEN / NOV 2011

These slides are the blueprint of a presentation I did at Fronteers recently.
I tried to make them understandable to people that didn’t attend the presentation
by including these dull looking quick notes.

THOMAS MOM CALLED ME
BYTTEBIER
IS HOW MY

as a kid, I wanted to be Maradona

NOW I WORK AS A

FREELANCE
WEBDESIGNER
FOCUS ON DESIGN

I realize that looks like quite a fail to the public, but I enjoy doing it

I tweet about all things design and web, follow me @bytte

my old-school website is at thomasbyttebier.com

RESPONSIVE WEBDESIGN
PROBLEMS / SEMI-SOLUTIONS / OWN EXPERIENCES

here’s what I talked about and what these slides are about

here’s a responsive website I made in 2010: sleepstreet.be

I went to Build a few weeks ago

with a few Belgian freelancers photo by Jelle Desramaults

I was lucky to see Wilson Miner speak at Build

if you don’t know Wilson Miner: he designed this pretty famous website

he talked about how few products had such in impact in our lives as the car in the 20th century

it even drastically changed our environment

at the end of the 20th century the pc was another product that dramatically changed our lives

that one is replaced by a hard drive

type writers are now called Microsoft Word

and sadly she’s replaced by a computer as well

mobile is having a huge impact in our lives right now

this dude even sleeps with his phone

there will be 7 billion connected phones in about 3 months from now

one of the Indonesian sulfur miners that risk their lives every day just to eek out a living

here’s the Ijen Crater full of poisonous smoke, see the sulfur down there?

this guy goes up and down the crater a few times a day carrying many kilos of sulfur on his shoulders

here’s a few more sulfur miners, they likely won’t live long as their lungs are poisened with sulfur

even these really poor people carry a phone, they get to know the internet through cheap mobile devices

the question is: how can we deliver a great experience to these 7 billion people?

ﬁrst thought: we need an app! hipness!

and let’s not discriminate the Blackberry people

hard + expensive to maintain, and frankly kind of silly to have an app mirroring your website

second thought: let’s make a mobile version of our website, it’ll work on all devices!

some good thinking there, but it’s still two versions...

“90% of all websites are too simple
to justify the time and money it
takes to develop a separate mobile
version.”

— COMMON SENSE THINKER

it’s hard to argue with that

one guy sat down and thought really hard

he wrote this article on A List Apart about responsive webdesign (Ethan Marcotte)

awesome idea: one website that adapts, looks and works great on all devices!

HTML
STRUCTURE CSSLAYOUT

based on simple principles we all know and stand behind

simple, but great results emerged from it
simple, but end products are great

antarcticstation.org by jérôme coupé

jobat.be, not sure who made this

lalemant.com by gorilla-webdesign.com

wolfslittlestore.be, freelance web designer

thisismadebyhand.com by Mandy Brown & Candi Ligutan

Ethan Marcotte, Scott Jehl ea.

a new trend setter: bostonglobe.com by Ethan Marcotte, Scott Jehl and others

“It is not the strongest of the
species that survives, nor the most
intelligent, but the one
most responsive to change.”

— CHARLES DARWIN

we all agree that the best design is to be found in nature and nature is full of responsive design

everyone knows this animal and how it responds to mood changes

this little spider turns yellow when it’s on yellow ﬂowers...

...and white when it’s on white ﬂowers—invisible to predators and insects

Source: webecoist.com

this octopus scares predators by mimicking the color and shape of its predators’ predators

responsive design may be hip at the moment, it’s based on a proven design principle and it’s here to stay

HOWCOMPONENTS
IT WORKS
2

%
1—fully based on ﬂuid web design

which is logical: this way it kind of automatically ﬁts all screens

“don’t get me started on ﬂuid web design”

it’s so nineties and is ugly from a certain viewport size onwards

CSS MEDIA QUERIES

2—meet css media queries

that’s awesomeness: load different styles as soon as the ﬂuid layout becomes unreadable or just ugly

here’s a simple example: looking good at 1024x768

but as it’s designed ﬂuidly, the text becomes unreadable at larger viewports

thanks to css media queries, we can change the layout at larger screen sizes: text is readable again

similar for smaller screens: default website scaling makes our initial design unreadable

all hail to media queries: this is a readable and usable layout

of course it works on other devices too

320
480
768
1024

most responsive designers use media queries to change layout at common sizes, but that’s no necessity

GREATNESS!
responsive web design is great, don’t you agree?

CSS MEDIA QUERIES...
WORKS IN ALL BROWSERS?

but does it work in all browsers?

not in older versions of internet explorer, but that’s ok, right?

1. Write CSS for desktop browsers—
the way you always did.

2. Use media queries to optimize for
smaller mobile screens.

SPOILER: DON’T DO IT THIS WAY!

using this workﬂow, older IE’s will always show the desktop version, which is ok as they’re used on desktops

but we need to dig deeper for better mobile browser stats

here’s a more detailed table representing media query support for all common mobile browsers

you know, not all of us browse the web using the latest and hippest mobile devices

there’s lots of older, popular and less capable devices around that don’t support media queries

1. Write CSS for desktop browsers—
the way you always did.

smaller mobile screens.

using this workﬂow means these devices won’t show our mobile layout. argh.

friends who can’t afford a desktop computer or expensive mobile phones will have a bad mobile experience

and frankly: there’s lots of them—developing countries get to know the internet through mobile devices

Brian Rieger
make sure to check out Brian Rieger’s presentation on that matter, it’s on Slideshare

dude even wrote a book about it

1. Start with a fluid mobile layout.

bigger screens.

this is a mobile first approach: all devices are served a mobile layout at first

meaning even devices that don’t support media queries will display the mobile version of your website!

most desktop browsers understand media queries so they’ll serve the desktop layout

but what about older internet explorer versions?

NOT GREAT, YET NOT CRAZY BROKEN

the layout will be broken but the content will still be readable

unless you use javascript solutions such as respond.js, forcing older ie versions to interpret media queries!

meaning as good as all desktop browsers will show your desktop layout! greatness!

“Mobile ﬁrst forces you to focus.”

— LUKE WROBLEWSKI
the book dude

there’s even more advantages to a mobile ﬁrst approach

websites tend to get stuffed with mostly irrelevant information nowadays

thinking about mobile ﬁrst forces you to focus: there’s less screen real estate to abuse, so relevance ﬁrst

the design community picked this up earlier with great results

thinking mobile ﬁrst is an excellent exercise in design, usability and information architecture

A MOBILE FIRST APPROACH LEADS TO
LESS & CLEANER CSS

another advantage of mobile ﬁrst, at least in my experience

about a year ago I designed sleepstreet.be using a desktop ﬁrst approach

/* CSS for desktop version */

@media
(min-width:320px) and
(max-width:380px) { /* make it white & 1 column */ }

@media
(max-width:480px) { /* make it white & 2 columns */ }

@media
(max-width:800px) { /* make it black & 2 columns */ }

/* all the way up... */

DON’T DO IT THIS WAY!
it led to cluttered, repeated, less-readable and hard-to-maintain CSS code

a few months ago I worked on madebywolf.com, using a mobile ﬁrst approach

/* CSS for mobile version */

@media
(min-width:400px) { /* from now on white & 2 columns */ }

@media
(min-width:800px) { /* from now on 3 columns */ }

@media
(max-width:1100px) { /* from now on black & 4 columns */ }

/* all the way up... */

the CSS is much cleaner, easier to read, easier to maintain and there’s just less code

HOW CAN WE MAKE
RESPONSIVE IMAGES

one problem solved, but here’s another one

Use desktop-sized images in your
mobile ﬁrst design & scale down using
CSS.

SPOILER: DON’T DO IT THIS WAY!

the solution’s easy at ﬁrst thought

img { width:100%; }

here’s a 600px wide image scaled down using CSS to a more appropriate mobile size

They look great on the desktop
version of your website too.

that’s a plus!

But their ﬁlesize looks great on the
mobile version of your website too.

200kb for a
300px wide photo!

that’s a minus!

“If I hadn’t used media queries, the
user would have seen the desktop
website with desktop-sized images
anyway.”

— UNCARING WEB DESIGNER

there’s truth in that

and if we don’t care, who will?

Use desktop-sized images in your
mobile ﬁrst design & scale down using
CSS.

have a heart: we just can’t do it this way

there’s many possible solutions yet not one is ideal

2
if I were you, designing a responsive website, I’d have a look at at least two of them

ﬁrst one is the one Jason Grigsby is going to write about in his upcoming book on responsive web design

Jason looked at all solutions & made a choice based on a number of factors, most noteably future friendliness

he chooses the sencha.io technique and it’s based on device detection. hmmmm....

“How strange it is to think of device
detection as the most future
friendly technique for responsive
images? I ﬁnd it hard to argue with
the logic.”

— JASON GRIGSBY

make sure to read Jason’s blog posts on the topic at cloudfour.com

“At least that’s how I see it for the
book. For your project and use
case, it depends.”

— JASON GRIGSBY

as always: make a deliberate choice, because, well, it depends on all kinds of factors

here’s another interesting technique

I’ve used it on sleepstreet.be, it works and I’m more than ok with it

it’s also used—in a modiﬁed way as I understand—on bostonglobe.com

<img src=”small.jpg?full=large.jpg” />

here’s how it works, pretty easy huh?

small.jpg large.jpg

using javascript and url rewrites the appropriate image is served to the appropriate device

small.jpg large.jpg

an advantage: as the technique requires 2 images, you can create more detailed images for smaller devices

small.jpg large.jpg

it’s written mobile ﬁrst and browsers that don’t support javascript will only download the small image

older ie’s (6 & 7) will download both images, but I can live with that

SCALABLE VECTOR GRAPHICS

let’s talk svg

No pixels.
Always crisp at all sizes.
Extremely small ﬁle sizes.
Scalable in every fucking way.
Pretty epic.

the best invention since sliced bread

I’ve used svg for the sleepstreet logo

here’s the logo, designed by Ward Heirwegh

it’s used proportionally on small screen devices

but scaling it up proportionally on larger screens would render the logo quite big

and it would result in a huge logo on desktop computers (clients would have loved it :)

then again I could’ve used it proportionally but I didn’t like the extra whitespace

as it’s svg I could use javascript to reposition anchor points based on screen width (thanks @christaanvdp)

resulting in the side banners expanding/contracting as the browser window scales

So why is not everyone using svg?

if svg is so great, why is not everyone using it all the time?

frankly: it’s a pain in the ass to implement in a cross-browser fashion

there’s a solution: raphaël is a cross-browser solution I used to implement the svg logo

but it required me to redraw the logo using javascript. and that’s not how you want to spend your day.

but the future is bright! @joggink is working on a solution called willistrator (no joke!)

VIDEO

responsive video will kill the video star

I’ve used responsive video on madebywolf.com

.video {
width: 100%;
}

OK

NOT OK!

you can’t use the same css you’d use for scaling images

but smart people have written good articles about the matter, such as Thierry Koblentz on a list apart

another great article about responsive video, by Chris Coyier of css-tricks.com

video {
width: 100%;
height: auto;
}

basically this is all you have to do if you want responsive video using the html5 video tag

but if you depend on external video hosting services you may need to support different embedding solutions

ﬁtvids.js takes care of that: it makes video scale responsively with embed, object, iframe tags...

DATA TABLES

we’re almost done... let’s look at data tables

spoiler: not easy, if you have a site that depends heavily on data tables, better close your browser window

“Data tables don’t do so well with
responsive design. Just sayin’.”

— GARRETT DIMON

excellent tweet, couldn’t have said it any better

Chris Coyier of css-tricks.com came up with a possible solution

...and turns it to this on mobile: it’s ok, but not ideal for many reasons...

eg. there’s no way to easily compare rows

Scott Jehl took this data table...

...and made a pie chart of it on mobile! great but works only with numerical data of course

DESIGN

I wrapped up my presentation sharing some thoughts about designing responsively

basically it came down to this: less than ever we have a ﬁxed canvas to design in

there’s no right tools for the job

I can’t design in the browser, it’s no design tool whatsoever—still need to ﬁnd a better workﬂow

fact is: ﬂuid grids grow more and more important

web design & typography is moving away from print design more than ever (great poster by Wim Crouwel)

THANKS FOR LISTENING
TALK TO ME ON TWITTER: @BYTTE

Thanks to these people for sharing their photos with a creative commons license:

http://www.flickr.com/photos/sashakimel/6189771935/
http://www.flickr.com/photos/strebkr/3151902438/sizes/l/in/photostream/
http://www.flickr.com/photos/julietbanana/4733245476/sizes/z/in/photostream/
http://www.flickr.com/photos/canadianveggie/167924582/sizes/l/in/photostream/
http://www.flickr.com/photos/yourdon/3568718036/sizes/l/in/photostream/
http://www.flickr.com/photos/missningyou/2679843655/sizes/l/in/photostream/
http://www.flickr.com/photos/kiwanja/3169449999/sizes/o/in/photostream/
http://www.flickr.com/photos/crfullmoon/22195292/sizes/l/in/photostream/
http://www.flickr.com/photos/42244964@N03/4325982802/sizes/l/in/photostream/
http://www.flickr.com/photos/frak_tal/2455855855/sizes/l/in/photostream/
http://www.flickr.com/photos/dinoowww/4557829098/sizes/z/in/photostream/
http://www.flickr.com/photos/kentclark/4720549350/sizes/l/in/photostream/
http://www.flickr.com/photos/hanneorla/1439963888/sizes/l/in/photostream/
http://www.flickr.com/photos/ter-burg/1405605889/sizes/o/in/photostream/
http://www.flickr.com/photos/spyker3292/3721376470/sizes/l/in/photostream/
http://www.flickr.com/photos/soylentgreen23/491093601/sizes/l/in/photostream/
http://www.flickr.com/photos/danielygo/6209676842/sizes/l/in/photostream/
http://www.flickr.com/photos/extraketchup/459020985
http://www.flickr.com/photos/torek/2266105751
http://www.flickr.com/photos/smokingpermitted/2052869864/

Responsive web design

Recommended

Recommended

More Related Content

More from Thomas Byttebier

More from Thomas Byttebier (8)

Recently uploaded

Recently uploaded (20)

Responsive web design