188
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.

Responsive web design

Embed Size (px)

Citation preview

Page 1: Responsive web design

RESPONSIVE WEBDESIGNFRONTEERS / 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.

Page 2: Responsive web design

THOMAS BYTTEBIERIS HOW MY MOM CALLED ME

Page 3: Responsive web design

my brother is the cute one

Page 4: Responsive web design

as a kid, I wanted to be Maradona

Page 5: Responsive web design

picture says it all

Page 6: Responsive web design

FREELANCEWEBDESIGNER

NOW I WORK AS A

FOCUS ON DESIGN

Page 7: Responsive web design

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

Page 8: Responsive web design

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

Page 9: Responsive web design

my old-school website is at thomasbyttebier.com

Page 10: Responsive web design

RESPONSIVE WEBDESIGNPROBLEMS / SEMI-SOLUTIONS / OWN EXPERIENCES

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

Page 11: Responsive web design

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

Page 12: Responsive web design

this one I did early 2011

Page 13: Responsive web design

I went to Build a few weeks ago

Page 14: Responsive web design

with a few Belgian freelancers photo by Jelle Desramaults

Page 15: Responsive web design

I was lucky to see Wilson Miner speak at Build

Page 16: Responsive web design

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

Page 17: Responsive web design

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

Page 18: Responsive web design

it even drastically changed our environment

Page 19: Responsive web design

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

Page 20: Responsive web design

here’s an office anno 1962

Page 21: Responsive web design

that one is replaced by a hard drive

Page 22: Responsive web design

that one is in the cloud now

Page 23: Responsive web design

type writers are now called Microsoft Word

Page 24: Responsive web design

and sadly she’s replaced by a computer as well

Page 25: Responsive web design

leaving only this boring mofo

Page 26: Responsive web design

mobile is having a huge impact in our lives right now

Page 27: Responsive web design

everywhere

Page 28: Responsive web design

everyone

Page 29: Responsive web design

this dude even sleeps with his phone

Page 30: Responsive web design

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

Page 31: Responsive web design

SEVENFUCKING

BILLION

Page 32: Responsive web design

last year I went to Indonesia

Page 33: Responsive web design

poor but beautiful country

Page 34: Responsive web design

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

Page 35: Responsive web design

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

Page 36: Responsive web design

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

Page 37: Responsive web design

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

Page 38: Responsive web design

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

Page 39: Responsive web design

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

Page 40: Responsive web design

first thought: we need an app! hipness!

Page 41: Responsive web design

oh and one for Android too!

Page 42: Responsive web design

and Windows phones

Page 43: Responsive web design

and let’s not discriminate the Blackberry people

Page 44: Responsive web design

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

Page 45: Responsive web design

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

Page 46: Responsive web design

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

Page 47: Responsive web design

“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

Page 48: Responsive web design

one guy sat down and thought really hard

Page 49: Responsive web design

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

Page 50: Responsive web design

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

Page 52: Responsive web design

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

Page 53: Responsive web design

meacuppa.be by chilli.be

Page 54: Responsive web design

antarcticstation.org by jérôme coupé

Page 55: Responsive web design

jobat.be, not sure who made this

Page 56: Responsive web design

lalemant.com by gorilla-webdesign.com

Page 57: Responsive web design

handelsbeurs.be by netlash.be

Page 58: Responsive web design

wolfslittlestore.be, freelance web designer

Page 59: Responsive web design

trentwalton.com

Page 60: Responsive web design

thisismadebyhand.com by Mandy Brown & Candi Ligutan

Page 61: Responsive web design

Ethan Marcotte, Scott Jehl ea.

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

Page 62: Responsive web design

this is charles darwin

Page 63: Responsive web design

“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

Page 64: Responsive web design

everyone knows this animal and how it responds to mood changes

Page 65: Responsive web design

this little spider turns yellow when it’s on yellow flowers...

Page 66: Responsive web design

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

Page 67: Responsive web design

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

Source: webecoist.com

Page 68: Responsive web design

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

Page 69: Responsive web design

HOW IT WORKS2 COMPONENTS

Page 70: Responsive web design

%1—fully based on fluid web design

Page 71: Responsive web design

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

Page 72: Responsive web design

“don’t get me started on fluid web design”

Page 73: Responsive web design

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

Page 74: Responsive web design

CSS MEDIA QUERIES

2—meet css media queries

Page 75: Responsive web design

<link rel="stylesheet" href="print.css" media="print" />

nothing new: we all have used this media query for ages

Page 76: Responsive web design

<link rel="stylesheet" href="layout.css" media="screen and (min-width:400px)" />

@media (min-width:400px) { }

this one’s different: as soon as the browser viewport reaches 400 px, use this stylesheet

Page 77: Responsive web design

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

Page 78: Responsive web design

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

Page 79: Responsive web design

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

Page 80: Responsive web design

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

Page 81: Responsive web design

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

Page 82: Responsive web design

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

Page 83: Responsive web design

of course it works on other devices too

Page 84: Responsive web design

even this strange tablet

Page 85: Responsive web design

320480768

1024

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

Page 86: Responsive web design

GREATNESS!

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

Page 87: Responsive web design

WORKS IN ALL BROWSERS?CSS MEDIA QUERIES...

but does it work in all browsers?

Page 88: Responsive web design

no

Page 89: Responsive web design

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

Page 90: Responsive web design

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 workflow, older IE’s will always show the desktop version, which is ok as they’re used on desktops

Page 91: Responsive web design

but we need to dig deeper for better mobile browser stats

Page 92: Responsive web design

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

Page 93: Responsive web design

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

Page 94: Responsive web design

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

Page 95: Responsive web design

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

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

using this workflow means these devices won’t show our mobile layout. argh.

Page 96: Responsive web design

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

Page 97: Responsive web design

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

Page 98: Responsive web design

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

Page 99: Responsive web design

DAMN

Page 100: Responsive web design

NOW WHAT?

Page 101: Responsive web design

here’s the solution!

Page 102: Responsive web design

dude even wrote a book about it

Page 103: Responsive web design

HUH?what’s mobile first?

Page 104: Responsive web design

1. Start with a fluid mobile layout.

2. Use media queries to optimize for bigger screens.

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

Page 105: Responsive web design

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

Page 106: Responsive web design

YAY!

Page 107: Responsive web design

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

Page 108: Responsive web design

but what about older internet explorer versions?

Page 109: Responsive web design

NOT GREAT, YET NOT CRAZY BROKEN

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

Page 110: Responsive web design

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

Page 111: Responsive web design

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

Page 112: Responsive web design

“Mobile first forces you to focus.”

— LUKE WROBLEWSKIthe book dude

there’s even more advantages to a mobile first approach

Page 113: Responsive web design

websites tend to get stuffed with mostly irrelevant information nowadays

Page 114: Responsive web design

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

Page 115: Responsive web design

the design community picked this up earlier with great results

Page 116: Responsive web design

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

Page 117: Responsive web design

pretty obvious, right?

Page 118: Responsive web design

LESS & CLEANER CSSA MOBILE FIRST APPROACH LEADS TO

another advantage of mobile first, at least in my experience

Page 119: Responsive web design

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

Page 120: Responsive web design

/* CSS for desktop version */

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

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

@media (min-width:481px) and (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

Page 121: Responsive web design

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

Page 122: Responsive web design

/* 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

Page 123: Responsive web design

RESPONSIVE IMAGESHOW CAN WE MAKE

one problem solved, but here’s another one

Page 124: Responsive web design

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

SPOILER: DON’T DO IT THIS WAY!

the solution’s easy at first thought

Page 125: Responsive web design

img { width:100%; }

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

Page 126: Responsive web design

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

that’s a plus!

Page 127: Responsive web design

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

200kb for a 300px wide photo!

that’s a minus!

Page 128: Responsive web design

“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

Page 129: Responsive web design

but bandwidth is expensive

Page 130: Responsive web design

and connections are slow

Page 131: Responsive web design

and if we don’t care, who will?

Page 132: Responsive web design

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

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

Page 133: Responsive web design

there’s many possible solutions yet not one is ideal

Page 134: Responsive web design

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

Page 135: Responsive web design

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

Page 136: Responsive web design

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

Page 137: Responsive web design

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

Page 138: Responsive web design

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

— JASON GRIGSBY

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

Page 139: Responsive web design

“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

Page 140: Responsive web design

here’s another interesting technique

Page 141: Responsive web design

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

Page 142: Responsive web design

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

Page 143: Responsive web design

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

here’s how it works, pretty easy huh?

Page 144: Responsive web design

small.jpg large.jpg

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

Page 145: Responsive web design

small.jpg large.jpg

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

Page 146: Responsive web design

small.jpg large.jpg

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

Page 147: Responsive web design

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

Page 148: Responsive web design

SCALABLE VECTOR GRAPHICS

let’s talk svg

Page 149: Responsive web design

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

the best invention since sliced bread

Page 150: Responsive web design

I’ve used svg for the sleepstreet logo

Page 151: Responsive web design

here’s the logo, designed by Ward Heirwegh

Page 152: Responsive web design

it’s used proportionally on small screen devices

Page 153: Responsive web design

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

Page 154: Responsive web design

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

Page 155: Responsive web design

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

Page 156: Responsive web design

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

Page 157: Responsive web design

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

Page 158: Responsive web design

an improvement if you ask me

Page 159: Responsive web design

So why is not everyone using svg?

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

Page 160: Responsive web design

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

Page 161: Responsive web design

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

Page 162: Responsive web design

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

Page 163: Responsive web design

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

Page 164: Responsive web design

VIDEO

responsive video will kill the video star

Page 165: Responsive web design

I’ve used responsive video on madebywolf.com

Page 166: Responsive web design

OK

NOT OK!

.video { width: 100%;}

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

Page 167: Responsive web design

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

Page 168: Responsive web design

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

Page 169: Responsive web design

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

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

Page 170: Responsive web design

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

Page 171: Responsive web design

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

Page 172: Responsive web design

DATA TABLES

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

Page 173: Responsive web design

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

Page 174: Responsive web design

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

— GARRETT DIMON

excellent tweet, couldn’t have said it any better

Page 175: Responsive web design

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

Page 176: Responsive web design

Chris takes this table...

Page 177: Responsive web design

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

Page 178: Responsive web design

eg. there’s no way to easily compare rows

Page 179: Responsive web design

Scott Jehl took this data table...

Page 180: Responsive web design

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

Page 181: Responsive web design

DESIGN

I wrapped up my presentation sharing some thoughts about designing responsively

Page 182: Responsive web design

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

Page 183: Responsive web design

there’s no right tools for the job

Page 184: Responsive web design

I can’t design in the browser, it’s no design tool whatsoever—still need to find a better workflow

Page 185: Responsive web design

fact is: fluid grids grow more and more important

Page 186: Responsive web design

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

Page 187: Responsive web design

THANKS FOR LISTENINGTALK TO ME ON TWITTER: @BYTTE

Page 188: Responsive web design

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/459020985http://www.flickr.com/photos/torek/2266105751

http://www.flickr.com/photos/smokingpermitted/2052869864/