Page 1
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
THOMAS BYTTEBIERIS HOW MY MOM CALLED ME
Page 3
my brother is the cute one
Page 4
as a kid, I wanted to be Maradona
Page 5
picture says it all
Page 6
FREELANCEWEBDESIGNER
NOW I WORK AS A
FOCUS ON DESIGN
Page 7
I realize that looks like quite a fail to the public, but I enjoy doing it
Page 8
I tweet about all things design and web, follow me @bytte
Page 9
my old-school website is at thomasbyttebier.com
Page 10
RESPONSIVE WEBDESIGNPROBLEMS / SEMI-SOLUTIONS / OWN EXPERIENCES
here’s what I talked about and what these slides are about
Page 11
here’s a responsive website I made in 2010: sleepstreet.be
Page 12
this one I did early 2011
Page 13
I went to Build a few weeks ago
Page 14
with a few Belgian freelancers photo by Jelle Desramaults
Page 15
I was lucky to see Wilson Miner speak at Build
Page 16
if you don’t know Wilson Miner: he designed this pretty famous website
Page 17
he talked about how few products had such in impact in our lives as the car in the 20th century
Page 18
it even drastically changed our environment
Page 19
at the end of the 20th century the pc was another product that dramatically changed our lives
Page 20
here’s an office anno 1962
Page 21
that one is replaced by a hard drive
Page 22
that one is in the cloud now
Page 23
type writers are now called Microsoft Word
Page 24
and sadly she’s replaced by a computer as well
Page 25
leaving only this boring mofo
Page 26
mobile is having a huge impact in our lives right now
Page 29
this dude even sleeps with his phone
Page 30
there will be 7 billion connected phones in about 3 months from now
Page 31
SEVENFUCKING
BILLION
Page 32
last year I went to Indonesia
Page 33
poor but beautiful country
Page 34
one of the Indonesian sulfur miners that risk their lives every day just to eek out a living
Page 35
here’s the Ijen Crater full of poisonous smoke, see the sulfur down there?
Page 36
this guy goes up and down the crater a few times a day carrying many kilos of sulfur on his shoulders
Page 37
here’s a few more sulfur miners, they likely won’t live long as their lungs are poisened with sulfur
Page 38
even these really poor people carry a phone, they get to know the internet through cheap mobile devices
Page 39
the question is: how can we deliver a great experience to these 7 billion people?
Page 40
first thought: we need an app! hipness!
Page 41
oh and one for Android too!
Page 42
and Windows phones
Page 43
and let’s not discriminate the Blackberry people
Page 44
hard + expensive to maintain, and frankly kind of silly to have an app mirroring your website
Page 45
second thought: let’s make a mobile version of our website, it’ll work on all devices!
Page 46
some good thinking there, but it’s still two versions...
Page 47
“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
one guy sat down and thought really hard
Page 49
he wrote this article on A List Apart about responsive webdesign (Ethan Marcotte)
Page 50
awesome idea: one website that adapts, looks and works great on all devices!
Page 51
HTML CSSSTRUCTURE
LAYOUT
based on simple principles we all know and stand behind
Page 52
simple, but end products are greatsimple, but great results emerged from it
Page 53
meacuppa.be by chilli.be
Page 54
antarcticstation.org by jérôme coupé
Page 55
jobat.be, not sure who made this
Page 56
lalemant.com by gorilla-webdesign.com
Page 57
handelsbeurs.be by netlash.be
Page 58
wolfslittlestore.be, freelance web designer
Page 60
thisismadebyhand.com by Mandy Brown & Candi Ligutan
Page 61
Ethan Marcotte, Scott Jehl ea.
a new trend setter: bostonglobe.com by Ethan Marcotte, Scott Jehl and others
Page 62
this is charles darwin
Page 63
“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
everyone knows this animal and how it responds to mood changes
Page 65
this little spider turns yellow when it’s on yellow flowers...
Page 66
...and white when it’s on white flowers—invisible to predators and insects
Page 67
this octopus scares predators by mimicking the color and shape of its predators’ predators
Source: webecoist.com
Page 68
responsive design may be hip at the moment, it’s based on a proven design principle and it’s here to stay
Page 69
HOW IT WORKS2 COMPONENTS
Page 70
%1—fully based on fluid web design
Page 71
which is logical: this way it kind of automatically fits all screens
Page 72
“don’t get me started on fluid web design”
Page 73
it’s so nineties and is ugly from a certain viewport size onwards
Page 74
CSS MEDIA QUERIES
2—meet css media queries
Page 75
<link rel="stylesheet" href="print.css" media="print" />
nothing new: we all have used this media query for ages
Page 76
<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
that’s awesomeness: load different styles as soon as the fluid layout becomes unreadable or just ugly
Page 78
here’s a simple example: looking good at 1024x768
Page 79
but as it’s designed fluidly, the text becomes unreadable at larger viewports
Page 80
thanks to css media queries, we can change the layout at larger screen sizes: text is readable again
Page 81
similar for smaller screens: default website scaling makes our initial design unreadable
Page 82
all hail to media queries: this is a readable and usable layout
Page 83
of course it works on other devices too
Page 84
even this strange tablet
Page 85
320480768
1024
most responsive designers use media queries to change layout at common sizes, but that’s no necessity
Page 86
GREATNESS!
responsive web design is great, don’t you agree?
Page 87
WORKS IN ALL BROWSERS?CSS MEDIA QUERIES...
but does it work in all browsers?
Page 89
not in older versions of internet explorer, but that’s ok, right?
Page 90
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
but we need to dig deeper for better mobile browser stats
Page 92
here’s a more detailed table representing media query support for all common mobile browsers
Page 93
you know, not all of us browse the web using the latest and hippest mobile devices
Page 94
there’s lots of older, popular and less capable devices around that don’t support media queries
Page 95
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
friends who can’t afford a desktop computer or expensive mobile phones will have a bad mobile experience
Page 97
and frankly: there’s lots of them—developing countries get to know the internet through mobile devices
Page 98
Brian Riegermake sure to check out Brian Rieger’s presentation on that matter, it’s on Slideshare
Page 101
here’s the solution!
Page 102
dude even wrote a book about it
Page 103
HUH?what’s mobile first?
Page 104
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
meaning even devices that don’t support media queries will display the mobile version of your website!
Page 107
most desktop browsers understand media queries so they’ll serve the desktop layout
Page 108
but what about older internet explorer versions?
Page 109
NOT GREAT, YET NOT CRAZY BROKEN
the layout will be broken but the content will still be readable
Page 110
unless you use javascript solutions such as respond.js, forcing older ie versions to interpret media queries!
Page 111
meaning as good as all desktop browsers will show your desktop layout! greatness!
Page 112
“Mobile first forces you to focus.”
— LUKE WROBLEWSKIthe book dude
there’s even more advantages to a mobile first approach
Page 113
websites tend to get stuffed with mostly irrelevant information nowadays
Page 114
thinking about mobile first forces you to focus: there’s less screen real estate to abuse, so relevance first
Page 115
the design community picked this up earlier with great results
Page 116
thinking mobile first is an excellent exercise in design, usability and information architecture
Page 117
pretty obvious, right?
Page 118
LESS & CLEANER CSSA MOBILE FIRST APPROACH LEADS TO
another advantage of mobile first, at least in my experience
Page 119
about a year ago I designed sleepstreet.be using a desktop first approach
Page 120
/* 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
a few months ago I worked on madebywolf.com, using a mobile first approach
Page 122
/* 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 IMAGESHOW CAN WE MAKE
one problem solved, but here’s another one
Page 124
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
img { width:100%; }
here’s a 600px wide image scaled down using CSS to a more appropriate mobile size
Page 126
They look great on the desktop version of your website too.
that’s a plus!
Page 127
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
“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
but bandwidth is expensive
Page 130
and connections are slow
Page 131
and if we don’t care, who will?
Page 132
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
there’s many possible solutions yet not one is ideal
Page 134
2if I were you, designing a responsive website, I’d have a look at at least two of them
Page 135
first one is the one Jason Grigsby is going to write about in his upcoming book on responsive web design
Page 136
Jason looked at all solutions & made a choice based on a number of factors, most noteably future friendliness
Page 137
he chooses the sencha.io technique and it’s based on device detection. hmmmm....
Page 138
“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
“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
here’s another interesting technique
Page 141
I’ve used it on sleepstreet.be, it works and I’m more than ok with it
Page 142
it’s also used—in a modified way as I understand—on bostonglobe.com
Page 143
<img src=”small.jpg?full=large.jpg” />
here’s how it works, pretty easy huh?
Page 144
small.jpg large.jpg
using javascript and url rewrites the appropriate image is served to the appropriate device
Page 145
small.jpg large.jpg
an advantage: as the technique requires 2 images, you can create more detailed images for smaller devices
Page 146
small.jpg large.jpg
it’s written mobile first and browsers that don’t support javascript will only download the small image
Page 147
older ie’s (6 & 7) will download both images, but I can live with that
Page 148
SCALABLE VECTOR GRAPHICS
let’s talk svg
Page 149
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
I’ve used svg for the sleepstreet logo
Page 151
here’s the logo, designed by Ward Heirwegh
Page 152
it’s used proportionally on small screen devices
Page 153
but scaling it up proportionally on larger screens would render the logo quite big
Page 154
and it would result in a huge logo on desktop computers (clients would have loved it :)
Page 155
then again I could’ve used it proportionally but I didn’t like the extra whitespace
Page 156
as it’s svg I could use javascript to reposition anchor points based on screen width (thanks @christaanvdp)
Page 157
resulting in the side banners expanding/contracting as the browser window scales
Page 158
an improvement if you ask me
Page 159
So why is not everyone using svg?
if svg is so great, why is not everyone using it all the time?
Page 160
frankly: it’s a pain in the ass to implement in a cross-browser fashion
Page 161
there’s a solution: raphaël is a cross-browser solution I used to implement the svg logo
Page 162
but it required me to redraw the logo using javascript. and that’s not how you want to spend your day.
Page 163
but the future is bright! @joggink is working on a solution called willistrator (no joke!)
Page 164
VIDEO
responsive video will kill the video star
Page 165
I’ve used responsive video on madebywolf.com
Page 166
OK
NOT OK!
.video { width: 100%;}
you can’t use the same css you’d use for scaling images
Page 167
but smart people have written good articles about the matter, such as Thierry Koblentz on a list apart
Page 168
another great article about responsive video, by Chris Coyier of css-tricks.com
Page 169
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
but if you depend on external video hosting services you may need to support different embedding solutions
Page 171
fitvids.js takes care of that: it makes video scale responsively with embed, object, iframe tags...
Page 172
DATA TABLES
we’re almost done... let’s look at data tables
Page 173
spoiler: not easy, if you have a site that depends heavily on data tables, better close your browser window
Page 174
“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
Chris Coyier of css-tricks.com came up with a possible solution
Page 176
Chris takes this table...
Page 177
...and turns it to this on mobile: it’s ok, but not ideal for many reasons...
Page 178
eg. there’s no way to easily compare rows
Page 179
Scott Jehl took this data table...
Page 180
...and made a pie chart of it on mobile! great but works only with numerical data of course
Page 181
DESIGN
I wrapped up my presentation sharing some thoughts about designing responsively
Page 182
basically it came down to this: less than ever we have a fixed canvas to design in
Page 183
there’s no right tools for the job
Page 184
I can’t design in the browser, it’s no design tool whatsoever—still need to find a better workflow
Page 185
fact is: fluid grids grow more and more important
Page 186
web design & typography is moving away from print design more than ever (great poster by Wim Crouwel)
Page 187
THANKS FOR LISTENINGTALK TO ME ON TWITTER: @BYTTE
Page 188
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/