The document discusses how to create an awesome mobile experience through customized content and responsive design. It emphasizes that the mobile web is growing rapidly and will soon surpass desktop usage. It recommends having a content strategy that knows the audience and important elements. Content should be personalized through location, demographics and registration data. Responsive design means building with a flexible grid, flexible images, and using media queries to adapt views. Separate mobile sites may be needed if responsive design is not sufficient due to features or domains. The mobile experience should be designed mobile-first by simplifying, focusing on the user, and thinking like a mobile user.

1. ORDER UP
CUSTOMIZED CONTENT
for the
MOBILE WEB

2. CUSTOMIZED CONTENT
+
RESPONSIVE DESIGN
=
AWESOME MOBILE EXPERIENCE

3. Don’t just build good sites.
BUILD AWESOME
EXPERIENCES.

4. DESIGN BETTER

5. Q. How can my mobile site / app
be better?

7. ‣ The mobile web is growing 8 times faster than the
desktop web grew in the AOL heydays
‣ Smart phone sales will pass PC sales in 2012
‣ AT&T data traffic has increased by almost 5,000% in 3
years, mostly due to the iPhone
‣ Mobile phones will overtake PCs as the most
common web access devices worldwide by 2013.
‣ 600% growth in traffic to mobile websites in 2010.
‣ Facebook and Twitter access via mobile browser
grows by triple digits in 2010.
‣ Average smartphone user visits up to 24 websites per
day.
Source: http://www.lukew.com/resources/articles/MobileFirst_LukeW.pdf / http://www.zeldman.com/2011/03/30/a-day-apart-mobile-web-
design-with-luke-wroblewski/

8. SHOULD WE CARE?

10. Q. What is my content?
Q. Who am I trying to reach?

11. Your Content Defines the Design
YOUR AUDIENCE DEFINES THE MEDIUM

12. Q. Does my content work in a mobile
environment?
Q. Does my audience use mobile?

13. CUSTOMIZED CONTENT
+
RESPONSIVE DESIGN
=
AWESOME MOBILE EXPERIENCE

14. WHAT’S ON THE MENU?
1. Content Matters
2. Design for Mobile
3. Examples & Practical Application

15. CONTENT
1. Have a Content Strategy
2. Content is a Dish Best Served Personalized
3. Make it Easy on the User

16. CONTENT
1. Have a Content Strategy
a) Know your voice. Know your audience.

17. CONTENT
1. Have a Content Strategy
a) Know your voice. Know your audience.
b) Know the most important elements.
YOU USER
brand development / profitability satisfaction / happiness

18. CONTENT
1. Have a Content Strategy
a) Know your voice. Know your audience.
b) Know the most important elements.
c) Craft user stories.

20. CONTENT
2. Content is a Dish Best Served
Personalized
a) We don’t need more information. We need
better filters.

21. CONTENT
2. Content is a Dish Best Served
Personalized
a) We don’t need more information. We need
better filters.
b) How can you personalize your content?
- location
- social demographics
- registration information

25. CONTENT
3. Make it Easy on the User
a) Perform user actions for them.

26. CONTENT
3. Make it Easy on the User
a) Perform user actions for them.
b) Get an ID
1024x768
320x480

27. CONTENT
3. Make it Easy on the User
a) Perform user actions for them.
b) Get an ID
c) Make the content the action point.

30. CONTENT
1. Have a Content Strategy
2. Content is a Dish Best Served Personalized
3. Make it Easy on the User

31. CUSTOMIZED CONTENT
+
RESPONSIVE DESIGN
=
AWESOME MOBILE EXPERIENCE

32. DESIGN
Progressive Enhancement

33. DESIGN
Progressive Dehancement

34. THE MOBILE EXPERIENCE
SHOULD BE A GREAT EXPERIENCE

35. DESIGN
1. Responsive Web Design
2. Separate Mobile Sites
3. Mobile First

36. DESIGN
1. Responsive Web Design
a) What is it?

38. DESIGN
1. Responsive Web Design
a) What is it?
FLEXIBLE DESIGN

39. DESIGN
1. Responsive Web Design
a) What is it?
b) 3 Rules

40. DESIGN
Ethan Marcotte’s 3 Rules
1. The site must be built with a flexible grid
foundation.
http://www.alistapart.com/articles/responsive-web-design/

42. FLEXIBLE
not
FIXED

46. DESIGN
Flexible Layouts
em font-size: 1.5em; /* 24px / 16px = 1.5em */
percentages width: 65%;
floats float: left;

47. DESIGN
Ethan Marcotte’s 3 Rules
1. The site must be built with a flexible grid
foundation.
2. Images that are incorporated into the design
must be flexible themselves.

49. SOLUTION?
img {
max-width: 100%;
}

50. VIDEO
img, object {
max-width: 100%;
}

51. img {max-width: 100%;}
#do-theevent {width:65%}

53. DESIGN
Ethan Marcotte’s 3 Rules
1. The site must be built with a flexible grid
foundation.
2. Images that are incorporated into the design
must be flexible themselves.
3. Different views must be enabled in different
contexts via media queries

54. CSS MEDIA QUERIES
<link rel="stylesheet" type="text/css"
href="core.css" media="screen" />
<link rel="stylesheet" type="text/css"
href="print.css" media="print" />

55. CSS MEDIA QUERIES
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href="iphone.css" />
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 1024px)"
href="ipad.css" />

56. WHAT?
- Clear Floats
- Resize Text
- Increase / Decrease Width & Height
- Change Navigation

59. iPAD?
<link rel="stylesheet" type="text/css"
media="screen and (orientation: portrait)"
href="ipad-portrait.css" />
<link rel="stylesheet" type="text/css"
media="screen and (orientation: landscape)"
href="ipad-landscape.css" />

60. iPHONE 4?
<link rel="stylesheet" type="text/css"
media="only screen and (-webkit-min-device-
pixel-ratio:2" href="iphone4.css" />

63. DESIGN
1. Responsive Web Design
2. Separate Mobile Sites

64. DESIGN
2. Separate Mobile Sites
a) Sometimes RWD isn’t enough.

65. NATIVE APP
or
WEB APP?

66. DESIGN
2. Separate Mobile Sites
a) Sometimes RWD isn’t enough.
b) Feature shrink

69. DESIGN
2. Separate Mobile Sites
a) Sometimes RWD isn’t enough.
b) Feature shrink
c) Domain redirect
- server side
- client side
m.olivegarden.com

71. DESIGN
1. Responsive Web Design
2. Separate Mobile Sites
3. Mobile First

72. DESIGN
3. Mobile First
a) Luke Wroblewski (www.lukew.com)

73. DESIGN
3. Mobile First
a) Luke Wroblewski (www.lukew.com)
b) Simplify

76. DESIGN
3. Mobile First
a) Luke Wroblewski (www.lukew.com)
b) Simplify
c) Focus

78. DESIGN
3. Mobile First
a) Luke Wroblewski (www.lukew.com)
b) Simplify
c) Focus
d) Think like a user

79. FUTURE OF DESIGN?

82. ???

83. CUSTOMIZED CONTENT
+
RESPONSIVE DESIGN
=
AWESOME MOBILE EXPERIENCE

84. CHEERS!
@jasonvanlue