Your SlideShare is downloading. ×
CREATING AN   AwesomeMOBILE EXPERIENCE
@jasonvanlue
CONTENT           +         DESIGN           =AWESOME MOBILE EXPERIENCE
Q.   What experience do you want your     users to have?Q.   What emotions do you want them to     feel?Q.   What actions ...
Don’t just build good sites. BUILD AWESOME  EXPERIENCES.
DESIGN BETTER
Q.   How can my mobile site / app     be better?
‣ The mobile web is growing 8 times faster than the      desktop web grew in the AOL heydays‣ Smart phone sales will pass ...
SHOULD WE CARE?
Q.   What is my content?Q.   Who am I trying to reach?
Your Content Defines the DesignYOUR AUDIENCE DEFINES THE MEDIUM
Q.   Does my content work in a mobile     environment?Q.   Does my audience use mobile?
CONTENT           +         DESIGN           =AWESOME MOBILE EXPERIENCE
CONTENT1. Have a Content Strategy2. Content is a Dish Best Served Personalized3. Make it Easy on the User
CONTENT1. Have a Content Strategy  a) Know your voice. Know your audience.
CONTENT1. Have a Content Strategy  a) Know your voice. Know your audience.  b) Know the most important elements.          ...
CONTENT1. Have a Content Strategy  a) Know your voice. Know your audience.  b) Know the most important elements.  c) Craft...
CONTENT2. Content is a Dish Best Served   Personalized  a) We don’t need more information. We need  better filters.
CONTENT2. Content is a Dish Best Served   Personalized  a) We don’t need more information. We need  better filters.  b) How...
CONTENT3. Make it Easy on the User  a) Perform user actions for them.
CONTENT3. Make it Easy on the User  a) Perform user actions for them.  b) Get an ID             1024x768                  ...
CONTENT3. Make it Easy on the User  a) Perform user actions for them.  b) Get an ID  c) Make the content the action point.
CONTENT1. Have a Content Strategy2. Content is a Dish Best Served Personalized3. Make it Easy on the User
CONTENT           +         DESIGN           =AWESOME MOBILE EXPERIENCE
DESIGNProgressive Enhancement
DESIGNProgressive Dehancement
THE MOBILE EXPERIENCESHOULD BE A GREAT EXPERIENCE
DESIGN1. Responsive Web Design2. Separate Mobile Sites3. Mobile First
DESIGN1. Responsive Web Design  a) What is it?
DESIGN1. Responsive Web Design  a) What is it?                   FLEXIBLE DESIGN
DESIGN1. Responsive Web Design  a) What is it?  b) 3 Rules
DESIGNEthan Marcotte’s 3 Rules  1. The site must be built with a flexible grid  foundation.  2. Images that are incorporate...
DESIGN1. Responsive Web Design2. Separate Mobile Sites
DESIGN2. Separate Mobile Sites  a) Sometimes RWD isn’t enough.
NATIVE APP   orWEB APP?
DESIGN2. Separate Mobile Sites  a) Sometimes RWD isn’t enough.  b) Feature shrink
DESIGN2. Separate Mobile Sites  a) Sometimes RWD isn’t enough.  b) Feature shrink  c) Domain redirect     - server side   ...
DESIGN1. Responsive Web Design2. Separate Mobile Sites3. Mobile First
DESIGN3. Mobile First  a) Luke Wroblewski (www.lukew.com)
DESIGN3. Mobile First  a) Luke Wroblewski (www.lukew.com)  b) Simplify
DESIGN3. Mobile First  a) Luke Wroblewski (www.lukew.com)  b) Simplify  c) Focus
DESIGN3. Mobile First  a) Luke Wroblewski (www.lukew.com)  b) Simplify  c) Focus  d) Think like a user
FUTURE OF DESIGN?
???
CONTENT           +         DESIGN           =AWESOME MOBILE EXPERIENCE
CHEERS!@jasonvanlue
Creating An Awesome Mobile Experience
Creating An Awesome Mobile Experience
Creating An Awesome Mobile Experience
Creating An Awesome Mobile Experience
Creating An Awesome Mobile Experience
Creating An Awesome Mobile Experience
Creating An Awesome Mobile Experience
Creating An Awesome Mobile Experience
Creating An Awesome Mobile Experience
Creating An Awesome Mobile Experience
Creating An Awesome Mobile Experience
Creating An Awesome Mobile Experience
Creating An Awesome Mobile Experience
Creating An Awesome Mobile Experience
Creating An Awesome Mobile Experience
Creating An Awesome Mobile Experience
Creating An Awesome Mobile Experience
Creating An Awesome Mobile Experience
Creating An Awesome Mobile Experience
Creating An Awesome Mobile Experience
Upcoming SlideShare
Loading in...5
×

Creating An Awesome Mobile Experience

1,258

Published on

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

Published in: Design

Transcript of "Creating An Awesome Mobile Experience"

  1. 1. CREATING AN AwesomeMOBILE EXPERIENCE
  2. 2. @jasonvanlue
  3. 3. CONTENT + DESIGN =AWESOME MOBILE EXPERIENCE
  4. 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. 5. Don’t just build good sites. BUILD AWESOME EXPERIENCES.
  6. 6. DESIGN BETTER
  7. 7. Q. How can my mobile site / app be better?
  8. 8. ‣ 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/
  9. 9. SHOULD WE CARE?
  10. 10. Q. What is my content?Q. Who am I trying to reach?
  11. 11. Your Content Defines the DesignYOUR AUDIENCE DEFINES THE MEDIUM
  12. 12. Q. Does my content work in a mobile environment?Q. Does my audience use mobile?
  13. 13. CONTENT + DESIGN =AWESOME MOBILE EXPERIENCE
  14. 14. CONTENT1. Have a Content Strategy2. Content is a Dish Best Served Personalized3. Make it Easy on the User
  15. 15. CONTENT1. Have a Content Strategy a) Know your voice. Know your audience.
  16. 16. CONTENT1. Have a Content Strategy a) Know your voice. Know your audience. b) Know the most important elements. YOU USERbrand development / profitability satisfaction / happiness
  17. 17. CONTENT1. Have a Content Strategy a) Know your voice. Know your audience. b) Know the most important elements. c) Craft user stories.
  18. 18. CONTENT2. Content is a Dish Best Served Personalized a) We don’t need more information. We need better filters.
  19. 19. CONTENT2. 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
  20. 20. CONTENT3. Make it Easy on the User a) Perform user actions for them.
  21. 21. CONTENT3. Make it Easy on the User a) Perform user actions for them. b) Get an ID 1024x768 320x480
  22. 22. CONTENT3. Make it Easy on the User a) Perform user actions for them. b) Get an ID c) Make the content the action point.
  23. 23. CONTENT1. Have a Content Strategy2. Content is a Dish Best Served Personalized3. Make it Easy on the User
  24. 24. CONTENT + DESIGN =AWESOME MOBILE EXPERIENCE
  25. 25. DESIGNProgressive Enhancement
  26. 26. DESIGNProgressive Dehancement
  27. 27. THE MOBILE EXPERIENCESHOULD BE A GREAT EXPERIENCE
  28. 28. DESIGN1. Responsive Web Design2. Separate Mobile Sites3. Mobile First
  29. 29. DESIGN1. Responsive Web Design a) What is it?
  30. 30. DESIGN1. Responsive Web Design a) What is it? FLEXIBLE DESIGN
  31. 31. DESIGN1. Responsive Web Design a) What is it? b) 3 Rules
  32. 32. DESIGNEthan 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.
  33. 33. DESIGN1. Responsive Web Design2. Separate Mobile Sites
  34. 34. DESIGN2. Separate Mobile Sites a) Sometimes RWD isn’t enough.
  35. 35. NATIVE APP orWEB APP?
  36. 36. DESIGN2. Separate Mobile Sites a) Sometimes RWD isn’t enough. b) Feature shrink
  37. 37. DESIGN2. Separate Mobile Sites a) Sometimes RWD isn’t enough. b) Feature shrink c) Domain redirect - server side - client side m.olivegarden.com
  38. 38. DESIGN1. Responsive Web Design2. Separate Mobile Sites3. Mobile First
  39. 39. DESIGN3. Mobile First a) Luke Wroblewski (www.lukew.com)
  40. 40. DESIGN3. Mobile First a) Luke Wroblewski (www.lukew.com) b) Simplify
  41. 41. DESIGN3. Mobile First a) Luke Wroblewski (www.lukew.com) b) Simplify c) Focus
  42. 42. DESIGN3. Mobile First a) Luke Wroblewski (www.lukew.com) b) Simplify c) Focus d) Think like a user
  43. 43. FUTURE OF DESIGN?
  44. 44. ???
  45. 45. CONTENT + DESIGN =AWESOME MOBILE EXPERIENCE
  46. 46. CHEERS!@jasonvanlue

×