Mobile is all the rage these days — and it should be. Many website owners believe creating a separate mobile website is the solution, with browser sniffing to redirect all "mobile" traffic to a separate m.example.com domain. But it turns out that most of the time this is a terrible solution. Come hear Jen Simmons talk about how there's only one web — not a mobile web separate from the desktop web. And learn how you can use HTML5 and responsive web design to create one unified website or web app for your project and Just Have It Work™ on a wide range of devices.

1. There’s Just One Web

2. Jen Simmons

3. 5by5.tv/webahead

4. Mobile Web

5. really hot

6. Horace Deidu Philip Elmer-Dewitt
asymco.com/2011/11/01/the- tech.fortune.cnn.com/2011/11/01/net-applications-
mobile-phone-landscape/ ios-web-share-hit-record-61-6-in-oct/

7. what to do?

8. A) do nothing

11. B) add a mobile
theme to your
current site

19. C) create a mobile
site, and redirect
all mobile traffic
over there

24. D) create a mobile app,
and redirect all mobile
traffic over there

28. what is “mobile”
anyway?

36. • 640 x 480
• 14.4k modem
• keyboard & mouse

37. • 800 x 600
• 56.6k modem
• keyboard & mouse

38. • 1024 x 768
• 768 kb/sec on dsl
• keyboard & mouse

39. • 1200 x ???
• 1.5mb/sec+
• keyboard & mouse

40. “Desktop” “Mobile”
• 1200 x ??? • 320 x 480
• 1.5mb/sec • 3g
• keyboard & • touch
mouse

43. quirksmode.org/mobile/
mobilemarket.html

44. browser detection /
device detection /
OS detection
is a
bad idea

48. • screen widths: 320, 480, 600, 768, 800, 1024, 1200,
1330, 1440, 1900…
• speeds: edge, 3g, 3g in NYC/San Fran, 4g, dialup,
satellite, dsl, cable, fiber
• walking, sitting, laying down, driving
• keyboard, mouse, touch, siri / voice control, car
controls, other devices
• reading, looking, listening, voiceover, jaws, large
print, whatever

49. a) do nothing
b) mobile theme
c) mobile site
d) mobile app
e) ???

50. make a website

53. How can one website
work for all devices?

54. Easy:
Responsive
Web Design
&
Progressive
Enhancement

61. Now sometimes a separate
site is a good idea.
But not just for
a different device.

62. Progressive
Enhancement

65. modernizr.com

66. Responsive Web
Design

67. alistapart.com/articles/responsive-web-design

74. mediaqueri.es

75. So how?

76. CSS Media Query

83. stuffandnonsense.co.uk/projects/320andup

84. github.com/scottjehl/Respond

85. Responsive images

86. img {
max-width : 100%;
}

87. filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing

89. fitvidsjs.com

90. But what about
everything else?

91. flickr.com/photos/merlin/sets/72157622077100537/with/2731723031

93. How do you do
this for mobile?
Don’t.

97. Mobile First

99. Content First

100. Biggest change >
process

101. Old web design
process

105. Emerging New Process
• Discovery
• Paper sketches
• Mood boards
• Style tiles
• Prototype bits of content in HTML & CSS
• Build up to full prototypes of page layouts
• Iterate

107. sketches by Thibaut Sailly — bureau.tsailly.net/2010/09/champagne.html

108. webdesignerdepot.com/
2008/12/why-mood-boards-
matter/

109. badassideas.com/style-tiles-as-a-web-design-process-tool chicago2011.drupal.org/sessions/avoiding-frankenstein-website-
design-collaborating-clients
Samantha Warren
Style Tiles @samanthatoy

110. The style tile is not a literal
translation of what the website
is going to be, but a starting
point for the designer and the
client to have a conversation
and establish a common visual
language. When a client says
“clean,” does she mean
Apple.com clean or
NYTimes.com clean?

112. 5by5.tv/webahead/3-jeremy-keith

113. foundation.zurb.com/docs/layout.php

116. Wa la

117. upstatement.com/portfolio/boston-globe

119. flickr.com/photos/splorp/6141222275

121. Learn more

122. mediaqueri.es

123. netmagazine.com/features/
ethan-marcottes-20-favourite-responsive-sites

124. by ETHAN MARCOTTE
abookapart.com/products/responsive-web-design

125. by LUKE WROBLEWSKI
abookapart.com/products/mobile-first

126. lukew.com/ff/entry.asp?1436

128. easy-readers.net

129. 5by5.tv/webahead

130. aneventapart.com

131. futurefriend.ly

132. futurefriend.ly

133. adactio.com

135. Jen Simmons
@jensimmons
jensimmons.com
5by5.tv/webahead