Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Customized Content for the Mobile Web

Jason VanLue
September 27, 2011

Customized Content for the Mobile Web

Given at the 2011 Windy City Mobile Conference

Jason VanLue

September 27, 2011
Tweet

More Decks by Jason VanLue

Other Decks in Design

Transcript

  1. ‣ 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/
  2. WHAT’S ON THE MENU? 1. Content Matters 2. Design for

    Mobile 3. Examples & Practical Application
  3. CONTENT 1. Have a Content Strategy 2. Content is a

    Dish Best Served Personalized 3. Make it Easy on the User
  4. 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
  5. CONTENT 1. Have a Content Strategy a) Know your voice.

    Know your audience. b) Know the most important elements. c) Craft user stories.
  6. CONTENT 2. Content is a Dish Best Served Personalized a)

    We don’t need more information. We need better filters.
  7. 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
  8. CONTENT 3. Make it Easy on the User a) Perform

    user actions for them. b) Get an ID 1024x768 320x480
  9. 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.
  10. CONTENT 1. Have a Content Strategy 2. Content is a

    Dish Best Served Personalized 3. Make it Easy on the User
  11. 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/
  12. 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.
  13. 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
  14. <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
  15. WHAT? - Clear Floats - Resize Text - Increase /

    Decrease Width & Height - Change Navigation
  16. <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?
  17. DESIGN 2. Separate Mobile Sites a) Sometimes RWD isn’t enough.

    b) Feature shrink c) Domain redirect m.olivegarden.com - server side - client side
  18. ???