Customized Content for the Mobile Web

1,608 views

Published on

Slides from my presentation at the 2011 @windycitygo conference

  • Be the first to comment

Customized Content for the Mobile Web

  1. 1. ORDER UPCUSTOMIZED CONTENT for the MOBILE WEB
  2. 2. CUSTOMIZED CONTENT + RESPONSIVE DESIGN =AWESOME MOBILE EXPERIENCE
  3. 3. Don’t just build good sites. BUILD AWESOME EXPERIENCES.
  4. 4. DESIGN BETTER
  5. 5. Q. How can my mobile site / app be better?
  6. 6. ‣ 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/
  7. 7. SHOULD WE CARE?
  8. 8. Q. What is my content?Q. Who am I trying to reach?
  9. 9. Your Content Defines the DesignYOUR AUDIENCE DEFINES THE MEDIUM
  10. 10. Q. Does my content work in a mobile environment?Q. Does my audience use mobile?
  11. 11. CUSTOMIZED CONTENT + RESPONSIVE DESIGN =AWESOME MOBILE EXPERIENCE
  12. 12. WHAT’S ON THE MENU?1. Content Matters2. Design for Mobile3. Examples & Practical Application
  13. 13. CONTENT1. Have a Content Strategy2. Content is a Dish Best Served Personalized3. Make it Easy on the User
  14. 14. CONTENT1. Have a Content Strategy a) Know your voice. Know your audience.
  15. 15. CONTENT1. Have a Content Strategy a) Know your voice. Know your audience. b) Know the most important elements. YOU USERbrand development / profitability satisfaction / happiness
  16. 16. CONTENT1. Have a Content Strategy a) Know your voice. Know your audience. b) Know the most important elements. c) Craft user stories.
  17. 17. CONTENT2. Content is a Dish Best Served Personalized a) We don’t need more information. We need better filters.
  18. 18. 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
  19. 19. CONTENT3. Make it Easy on the User a) Perform user actions for them.
  20. 20. CONTENT3. Make it Easy on the User a) Perform user actions for them. b) Get an ID 1024x768 320x480
  21. 21. CONTENT3. Make it Easy on the User a) Perform user actions for them. b) Get an ID c) Make the content the action point.
  22. 22. CONTENT1. Have a Content Strategy2. Content is a Dish Best Served Personalized3. Make it Easy on the User
  23. 23. CUSTOMIZED CONTENT + RESPONSIVE DESIGN =AWESOME MOBILE EXPERIENCE
  24. 24. DESIGNProgressive Enhancement
  25. 25. DESIGNProgressive Dehancement
  26. 26. THE MOBILE EXPERIENCESHOULD BE A GREAT EXPERIENCE
  27. 27. DESIGN1. Responsive Web Design2. Separate Mobile Sites3. Mobile First
  28. 28. DESIGN1. Responsive Web Design a) What is it?
  29. 29. DESIGN1. Responsive Web Design a) What is it? FLEXIBLE DESIGN
  30. 30. DESIGN1. Responsive Web Design a) What is it? b) 3 Rules
  31. 31. DESIGNEthan Marcotte’s 3 Rules 1. The site must be built with a flexible grid foundation. http://www.alistapart.com/articles/responsive-web-design/
  32. 32. FLEXIBLE not FIXED
  33. 33. DESIGNFlexible Layouts em font-size: 1.5em; /* 24px / 16px = 1.5em */ percentages width: 65%; floats float: left;
  34. 34. 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.
  35. 35. SOLUTION?img { max-width: 100%;}
  36. 36. VIDEOimg, object { max-width: 100%;}
  37. 37. img {max-width: 100%;}#do-theevent {width:65%}
  38. 38. 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
  39. 39. 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" />
  40. 40. 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" />
  41. 41. WHAT?- Clear Floats- Resize Text- Increase / Decrease Width & Height- Change Navigation
  42. 42. 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" />
  43. 43. iPHONE 4?<link rel="stylesheet" type="text/css"media="only screen and (-webkit-min-device-pixel-ratio:2" href="iphone4.css" />
  44. 44. DESIGN1. Responsive Web Design2. Separate Mobile Sites
  45. 45. DESIGN2. Separate Mobile Sites a) Sometimes RWD isn’t enough.
  46. 46. NATIVE APP orWEB APP?
  47. 47. DESIGN2. Separate Mobile Sites a) Sometimes RWD isn’t enough. b) Feature shrink
  48. 48. DESIGN2. Separate Mobile Sites a) Sometimes RWD isn’t enough. b) Feature shrink c) Domain redirect - server side - client side m.olivegarden.com
  49. 49. DESIGN1. Responsive Web Design2. Separate Mobile Sites3. Mobile First
  50. 50. DESIGN3. Mobile First a) Luke Wroblewski (www.lukew.com)
  51. 51. DESIGN3. Mobile First a) Luke Wroblewski (www.lukew.com) b) Simplify
  52. 52. DESIGN3. Mobile First a) Luke Wroblewski (www.lukew.com) b) Simplify c) Focus
  53. 53. DESIGN3. Mobile First a) Luke Wroblewski (www.lukew.com) b) Simplify c) Focus d) Think like a user
  54. 54. FUTURE OF DESIGN?
  55. 55. ???
  56. 56. CUSTOMIZED CONTENT + RESPONSIVE DESIGN =AWESOME MOBILE EXPERIENCE
  57. 57. CHEERS!@jasonvanlue

×