5. 3 million new iPads sold on launch weekend
iPhone 4 has sold 75 million units
190 million Android activations
1.6 billion mobile devices sold to end users in
2010
85% of handsets shipped globally in 2011 will
include a web browser
6. Mobile web will be bigger than desktop Internet use by 2015.
--Morgan Stanley
7. How do you design a
web site that works well
on all devices?
8. 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
9.
10. 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/
11.
12.
13. It’s what some of us were going for
with “liquid” web design back in the
1990s, only it doesn’t suck.
–Jeffrey Zeldman
22. img {
max-width: 100%;
}
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, video, object {
max-width: 100%;
}
23. Used to change the layout of the page based
on the size of the display.
@media screen and (max-width: 1100px) {
/* any screen size 1100px and less will have the following CSS
applied */
}
@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 */
}
24. Ethan Marcotte’s article that coined the term
http://www.alistapart.com/articles/responsive-web-design/
Responsive Web Design, the book
http://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 Marcotte
http://www.alistapart.com/articles/fluidgrids/
Responsive Web Design, another article by Ethan Marcotte
http://www.netmagazine.com/features/responsive-web-design
CSS3 Media Queries
http://webdesignerwall.com/tutorials/css3-media-queries
Mediaqueries.es, a list of sites using Responsive Web Design techniques
http://mediaqueri.es/
This presentation
http://www.slideshare.net/erikkross/responsive-web-design-12143547