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