Slides from BarCamp Orlando 2011 - @jasonvanlue on Twitter with any questions / comments. Cheers!

1. CREATING AN
Awesome
MOBILE EXPERIENCE

2. @jasonvanlue

3. CONTENT
+
DESIGN
=
AWESOME MOBILE EXPERIENCE

4. Q. What experience do you want your
users to have?
Q. What emotions do you want them to
feel?
Q. What actions do you want them to
perform?

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

6. DESIGN BETTER

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

9. ‣ 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/

10. SHOULD WE CARE?

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

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

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

15. CONTENT
+
DESIGN
=
AWESOME MOBILE EXPERIENCE

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

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

18. 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

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

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

22. 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

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

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

28. 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.

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

32. CONTENT
+
DESIGN
=
AWESOME MOBILE EXPERIENCE

33. DESIGN
Progressive Enhancement

34. DESIGN
Progressive Dehancement

35. THE MOBILE EXPERIENCE
SHOULD BE A GREAT EXPERIENCE

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

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

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

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

41. 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.

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

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

47. NATIVE APP
or
WEB APP?

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

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

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

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

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

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

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

61. FUTURE OF DESIGN?

64. ???

65. CONTENT
+
DESIGN
=
AWESOME MOBILE EXPERIENCE

66. CHEERS!
@jasonvanlue