Here's the slides for a presentation I gave on responsive web design in November 2011.
Responsive web design is a very powerful idea: it makes your website look great and usable on desktop computers and all mobile devices. In this presentation I talk about why responsive web design is here to stay. But I also highlight problems that come with it, along with possible solutions.
Independent Escorts Goregaon WhatsApp +91-9930687706, Best Service
Responsive web design
1. 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.
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
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
89. not in older versions of internet explorer, but that’s ok, right?
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
91. but we need to dig deeper for better mobile browser stats
92. here’s a more detailed table representing media query support for all common mobile browsers
93. you know, not all of us browse the web using the latest and hippest mobile devices
94. there’s lots of older, popular and less capable devices around that don’t support media queries
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.
96. friends who can’t afford a desktop computer or expensive mobile phones will have a bad mobile experience
97. and frankly: there’s lots of them—developing countries get to know the internet through mobile devices
98. Brian Rieger
make sure to check out Brian Rieger’s presentation on that matter, it’s on Slideshare
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
105. meaning even devices that don’t support media queries will display the mobile version of your website!
118. A MOBILE FIRST APPROACH LEADS TO
LESS & CLEANER CSS
another advantage of mobile first, at least in my experience
119. about a year ago I designed sleepstreet.be using a desktop first approach
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
121. a few months ago I worked on madebywolf.com, using a mobile first approach
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
123. HOW CAN WE MAKE
RESPONSIVE IMAGES
one problem solved, but here’s another one
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
125. img { width:100%; }
here’s a 600px wide image scaled down using CSS to a more appropriate mobile size
126. They look great on the desktop
version of your website too.
that’s a plus!
127. But their filesize looks great on the
mobile version of your website too.
200kb for a
300px wide photo!
that’s a minus!
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
134. 2
if I were you, designing a responsive website, I’d have a look at at least two of them
135. first one is the one Jason Grigsby is going to write about in his upcoming book on responsive web design
136. Jason looked at all solutions & made a choice based on a number of factors, most noteably future friendliness
137. he chooses the sencha.io technique and it’s based on device detection. hmmmm....
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
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
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
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/459020985
http://www.flickr.com/photos/torek/2266105751
http://www.flickr.com/photos/smokingpermitted/2052869864/