My presentation from WordCamp Miami 2011, Beyond "Responsive Web Design". This is a totally re-worked version of my previous presentation, with a focus on how to actually implement responsive design.
18. 2010: 38% of US cell
phone users access the
Internet on their phones
(about 89 million)
53% of cell phone
Internet users access
websites at least once
per day
In 2009, only 17% of US
cell phone users owned
smartphones
http://goo.gl/YMtgf
25. Back to the basics:
1. A flexible grid.
2. Flexible images.
3. Media queries.
26. Flexible / Fluid Grids
• Size everything in ems
or percentages
• Flexible: Ems for
everything
• Fluid: Percentages for
width, ems for height
• The Golden Formula:
target ÷ context = result
31. Responsive Images
• Uses .htaccess to look
for “responsive” image
requests, and feeds
them a 1px
transparent .gif
• Then, uses JS to
detect browser width
and load the
appropriate-size image
accordingly
http://goo.gl/Eu3zA
33. Media Queries
• Ever make a print stylesheet before?
• <link rel=”stylesheet” href=”#”
media=”screen” />
• <link rel=”stylesheet” href=”#”
media=”print” />
34. Media Queries
In your HTML:
<link rel=”stylesheet” href=”#”
media=”screen and (min-device-width: 640px)” />
In a stylesheet:
@media screen and (orientation:landscape) {
#content { ... }
}
36. Remember: Mobile First!
• No support for media queries
is the first media query
• Mobile stylesheet
+ media queries
= desktop site
37. Mobile Viewports
• Newer smartphones
pretend to be much
larger than they actually
are (980px for iPhone)...
• ...meaning they get your
desktop stylesheet.
41. CSS3 Transitions
-transition: property duration easing
• all • ease
• opacity • ease-in
• font-size • ease-out
• text-shadow • ease-in-out
• color • linear
• height • cubic-bezier
• width
• left
• top...
42. CSS3 Transitions
nav li a {
color: rgb(0,0,0);
-webkit-transition: all 1s ease-out;
}
nav li a:hover {
color: rgb(200,0,0);
-webkit-transition: all 1s ease-in;
}
43. CSS3 Animation
• Define keyframes in CSS
• Set duration, number of iterations,
animation direction, timing function
• only works in webkit
48. “The choice is not between
using media queries and creating
a dedicated mobile site; the
choice is between using media
queries and doing nothing at all.”
- Jeremy Keith,
“A responsive mind”