Customized Content for the Mobile Web

Given at the 2011 Windy City Mobile Conference

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.
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. 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.
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 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.
49. img { max-width: 100%; } SOLUTION?
50. img, object { max-width: 100%; } VIDEO
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. <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
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?
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 m.olivegarden.com - server side - client side
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