What is Responsive Web Design? The Responsive Web Design Revolution Infographic
Responsive web design
24
-
Upload
erikkross -
Category
Technology
-
view
1.176 -
download
0
Transcript of Responsive web design
Back in my day…
Back in my day…
Today
Flickr: Roberrific, sucelloleiloes, minitechnet, IQ computer services
Mobile Web Stats
3 million new iPads sold on launch weekend
iPhone 4 has sold 75 million units190 million Android activations1.6 billion mobile devices sold to
end users in 201085% of handsets shipped globally in
2011 will include a web browser
Mobile Web Stats
Mobile web will be bigger than desktop Internet use by 2015. --Morgan Stanley
The Problem
How do you design a web site that works well on all devices?
Beyond the desktop
The long and short of it is that we’re designing for more devices, more input types, more resolutions than ever before. The web has moved beyond the desktop, and it’s not turning back.
– Ethan Marcotte
Current approach
Current approach
Multiple web sites for different devices
http://site.com/mobile/ http://mobile.site.com http://site.com/ipad/ http://site.com/iphone/ http://site.com/android http://site.com/ridiculous/
Responsive Web Design
One site to rule them all
Responsive Web Design
It’s what some of us were going for with “liquid” web design back in the 1990s, only it doesn’t suck.
–Jeffrey Zeldman
One site, multiple devices
One site, multiple devices
One site, multiple devices
Example Sites
The Book
Responsive Web Design by Ethan Marcotte
157 pages $9 for the e-book www.abookapart.com Go buy it now, I’ll
wait
The Ingredients
A flexible, grid-based layoutFlexible images and mediaMedia queries, a module from the
CSS3 specification.
Flexible Grid
No more fixed sizes Do not use px…ever. Seriously.
What about widths? %
What about font sizes? em
target / context = result
target / context = result Left Column:
204 / 637 = .32025117 Right column:
420 /637 = .659340659
#blog .main { float: right; width: 420px; } #blog .aside { float: left; width: 204px; }
#blog .main { float: right; width: 65.9340659%; /* 429 / 637 */ } #blog .aside { float: left; width: 32.025117%; /* 204 / 637 */ }
Flexible Grid
target / context = result
Buy this book
Flexible Images
The image will now resize and reflow itself proportionally
It will never be larger than its container. Will grow or shrink based on container size Can be applied to other HTML tags too:
img { max-width: 100%;}
img, video, object { max-width: 100%;}
Media Queries
Used to change the layout of the page based on the size of the display.
@media screen and (max-width: 660px) { /* any screen size 660px and less will have the following CSS applied */ }
@media screen and (max-width: 340px) { /* any screen size 340px and less will have the following CSS applied */ }
@media screen and (max-width: 1100px) { /* any screen size 1100px and less will have the following CSS applied */ }
Resources
Ethan Marcotte’s article that coined the termhttp://www.alistapart.com/articles/responsive-web-design/
Responsive Web Design, the bookhttp://www.abookapart.com/products/responsive-web-design
Fluid Images, by Ethan Marcotte (Chapter 3 of the book)http://www.alistapart.com/articles/fluid-images/
Fluid Grids, by Ethan Marcottehttp://www.alistapart.com/articles/fluidgrids/
Responsive Web Design, another article by Ethan Marcottehttp://www.netmagazine.com/features/responsive-web-design
CSS3 Media Querieshttp://webdesignerwall.com/tutorials/css3-media-queries
Mediaqueries.es, a list of sites using Responsive Web Design techniqueshttp://mediaqueri.es/
This presentationhttp://www.slideshare.net/erikkross/responsive-web-design-12143547
