Responsive Web Design, as laid out by Ethan Marcotte, is about a whole lot more than just media queries. I look at the three elements of responsive web design, statistics about mobile web browsing, and offer tips on how to best design sites for responsiveness. N.B.: Several slides are lifted wholesale from Bryan Rieger's excellent "Rethinking the Mobile Web" presentation, be sure to check it out!

1. Beyond Responsive Web Design
“...let a hundred devices bloom...”

2. Responsive web design?

3. Responsive Web Design
One HTML file
+ multiple devices and displays
______________________________
a range of custom experiences

4. Responsive Web Design
In keeping with the fundamental ideas of the Web:
Access by anyone, on any device
Separation of content and presentation
Progressive enhancement /
Graceful degradation

5. ETHAN MARCOTTE (@BEEP), “ON BEING RESPONSIVE”
“A responsive design is
composed of three
distinct parts:”

6. 1. A flexible grid.

7. Flexible / fluid grids
Break up the site’s layout into modules
that can be moved and resized as
needed
Size modules proportionately using ems
or percentages (or both)
target ÷ context = result

8. 1. A flexible grid.
2. Flexible images. Or more specifically,
images that work in a flexible context.

9. Flexible / fluid images
overflow: hidden
max-width: 100%
JS solutions to load an appropriately-
sized image

10. 1. A flexible grid.
2. Flexible images. Or more specifically,
images that work in a flexible context.
3. Media queries.

11. Media queries
Ever make a print stylesheet before?
<link rel=”stylesheet”
href=”#” media=”screen” />
<link rel=”stylesheet”
href=”#” media=”print” />

12. Media queries
More in-depth rules for when styles apply
<link rel=”stylesheet” href=”#”
media=”screen and (min-device-width: 640px)” />
Can be used within a stylesheet too
@media screen and (orientation:landscape) {
#content { ... }
}

13. Media queries
height aspect-ratio resolution
width device-aspect-ratio scan
device-height color grid
device-width color-index
orientation monochrome

14. “Responsive” redesigns

15. COLLY.COM
DESKTOP > NARROW > MOBILE

16. INFORMATIONARCHITECTS.JP
WIDE DESKTOP > DESKTOP > MOBILE

17. “Switchy” designs

18. “Switchy” designs
Not responsive designs

19. FLUID GRID
FLUID IMAGES
MEDIA QUERIES
COLLY.COM
DESKTOP > NARROW > MOBILE

20. FLUID GRID
FLUID IMAGES?
MEDIA QUERIES
INFORMATIONARCHITECTS.JP
WIDE DESKTOP > DESKTOP > MOBILE

21. Media queries are not enough

22. Why not?

23. “Pinch-to-zoom
makes any site usable
on iPhone/Android”
“Viewport browsing
still works on
Blackberry”
“Only people with
smartphones use the
mobile web anyways”

24. Really?

25. A bit of perspective...

26. IPHONE SOLVES ALL PROBLEMS?
IPHONE IS JUST A DROP IN THE MOBILE OCEAN

27. WEBKIT SOLVES ALL PROBLEMS?
WEBKIT != FULL SUPPORT FOR MEDIA QUERIES

28. PHONE-NATIVE BROWSERS SOLVE ALL PROBLEMS?
PROXY BROWSERS CAN ACT LIKE DESKTOP BROWSERS

29. TABLETS SOLVE ALL PROBLEMS?
INSANELY TINY TEXT WHEN MEDIA QUERIES FAIL

30. Cold, hard facts

31. World population, 2010: 6.9 billion
1.96 billion global Internet
connections (28.7% of the world:
42% Asia, 24% Europe, 13% NA)
5.1 billion mobile subscriptions
(over 4 billion use 2G GSM)
SOURCES: INTERNETWORLDSTATS.COM, BUDDE.COM.AU

32. 1.3 billion mobile Internet users
Almost 1/3 of Internet users
access only via mobile (including
almost 25% of U.S. users)
Only 21% of mobile users have 3G
access

33. 1.96 billion Internet connections...
minus 1.3 billion mobile users...
equals about 500 million
broadband Internet connections
worldwide

34. WORLDWIDE MOBILE DEVICE SALES
APPLE? 3%. RIM? 3%. MOTOROLA? 3%. HTC? 2%.

35. The Jakarta effect

36. The Jakarta effect
Capital of Indonesia, ~9.6 million
people
$100/month ADSL vs.
~$17/month unlimited mobile data
Proximity to China = cheap Shanzhai
(“bandit”) phones

37. The Jakarta effect
~2 million BlackBerry users
Largest Twitter user base worldwide
#2 Opera Mini user base worldwide
#3 Facebook user base worldwide

38. So what do we do?

39. - BRYAN RIEGER, “RETHINKING THE MOBILE WEB”

40. Desktop before mobile is backward!
Mobile devices are less powerful than
desktops
Mobile bandwidth is more expensive
So why are we sending more (and
more complicated) code for mobile
than desktop?

41. Mobile First
Mobile site + media queries =
desktop site
Progressive enhancement

42. No support for media queries
is the first media query
Media queries don’t work on most
mobile devices
Most desktop browsers support media
queries (and are powerful enough to
use them without slowing down)
Old desktop browser = less
complicated site!

43. Avoid unnecessary data transfer
NYTimes.com mobile:
~970KB

44. Avoid unnecessary data transfer
Guardian.co.uk mobile:
~80KB

45. Avoid unnecessary data transfer
display: none still uses bandwidth
Load images as progressive
enhancement instead through media-
queried stylesheets

46. Use JS for progressive enhancement only
Mobile devices are less powerful
Animation takes a lot of processing
Frameworks are big downloads

47. Use JS for progressive enhancement only
So, avoid JavaScript for mobile
whenever possible
Use CSS3 animation instead
Amazon, FB, and Google all launched
with no JS in their original designs

48. Testing!

49. OPERA MINI
UC WEB

50. Device-specific emulators
Nokia Symbian
RIM Blackberry
Palm webOS
Windows Mobile
iPhone SDK
Android SDK

51. Who gets it right?

52. HICKSDESIGN.CO.UK
SUPER-WIDE > WIDE > TABLET > MOBILE (ALL FLUID)

53. STPAULSSCHOOL.ORG.UK
THREE COLUMN > TWO COLUMN > ONE COLUMN (ALL FLUID, WITH ANIMATION)

54. YIIBU.COM
WIDE > NARROW (FLUID GRIDS + IMAGES GO A LONG WAY)

55. HUFFDUFFER.COM
TWO LAYOUTS (THREE VARIATIONS)

56. Limitations

57. Conditional HTML
Image size overhead
Conditional JS behavior
Capabilities detection

58. “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”

59. Resources
Volkside Wirify
filamentgroup’s “responsive-images”
plugin
Sencha Animator
iAd Producer

60. Websites
Yiibu (and SlideShare page)
A List Apart
Unstoppable Robot Ninja
Mobiforge

61. Thanks!
Kevin Zurawel
@kzurawel
arborwebsolutions.com