Customized Content for the Mobile Web

11c84dff30266b907714802088852677?s=47 Jason VanLue
September 27, 2011

Customized Content for the Mobile Web

Given at the 2011 Windy City Mobile Conference

11c84dff30266b907714802088852677?s=128

Jason VanLue

September 27, 2011
Tweet

Transcript

  1. CUSTOMIZED CONTENT for the ORDER UP MOBILE WEB

  2. CUSTOMIZED CONTENT + RESPONSIVE DESIGN = AWESOME MOBILE EXPERIENCE

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

  4. DESIGN BETTER

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

  6. None
  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?

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

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

  12. Does my content work in a mobile environment? Does my

    audience use mobile? Q. Q.
  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 brand development / profitability USER 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.
  19. None
  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
  22. None
  23. None
  24. None
  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.
  28. None
  29. None
  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?

  37. None
  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/
  41. None
  42. FLEXIBLE not FIXED

  43. None
  44. None
  45. None
  46. DESIGN Flexible Layouts em percentages floats font-size: 1.5em; /* 24px

    / 16px = 1.5em */ width: 65%; 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.
  48. None
  49. img { max-width: 100%; } SOLUTION?

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

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

  52. None
  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. <link rel="stylesheet" type="text/css" href="core.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print.css"

    media="print" /> CSS MEDIA QUERIES
  55. <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" /> CSS MEDIA QUERIES
  56. WHAT? - Clear Floats - Resize Text - Increase /

    Decrease Width & Height - Change Navigation
  57. None
  58. None
  59. <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" /> iPAD?
  60. <link rel="stylesheet" type="text/css" media="only screen and (-webkit-min-device- pixel-ratio:2" href="iphone4.css" />

    iPHONE 4?
  61. None
  62. None
  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
  67. None
  68. None
  69. DESIGN 2. Separate Mobile Sites a) Sometimes RWD isn’t enough.

    b) Feature shrink c) Domain redirect m.olivegarden.com - server side - client side
  70. None
  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

  74. None
  75. None
  76. DESIGN 3. Mobile First a) Luke Wroblewski (www.lukew.com) b) Simplify

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

    c) Focus d) Think like a user
  79. FUTURE OF DESIGN?

  80. None
  81. None
  82. ???

  83. CUSTOMIZED CONTENT + RESPONSIVE DESIGN = AWESOME MOBILE EXPERIENCE

  84. CHEERS! @jasonvanlue