The Users are Restless
•
2 j'aime•1,021 vues
An argument for simpler pages, Responsive Web Design, and Semantic HTML.
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (8)
Similaire à The Users are Restless
Similaire à The Users are Restless (20)
Plus de Terry Ryan
Plus de Terry Ryan (18)
Dernier
Dernier (20)
The Users are Restless
- 1. The Users are Restless Terry Ryan | Developer Evangelist Twitter: @tpryan
- 2. Who are you?
- 5. Would you like a movie review?
- 7. How would you like pancakes?
- 11. I would like to visit my alma mater.
- 14. How about on mobile?
- 19. Pop quiz: What are you packing?
- 20. Demo Text Point your browsers
- 25. The users are restless
- 26. And by “restless” I mean “pissed”
- 27. How do we fix this?
- 28. Build sites that cater to users needs
- 29. Get rid of stuff you want
- 30. Ensure you have what users want
- 31. Responsive Web Design
- 32. Semantic HTML
- 33. SEMANTIC HTML A Flexible starting place
- 34. OXO
- 35. Definition • HTML where specific elements are used • HTML where elements are not misused • HTML with no presentation information
- 36. Semantic HTML? <div>Heartland Developers Conference</div>
- 41. Semantic HTML <div>Heartland Developers Conference</div>
- 43. On HDC Site <h1>Heartland Developers Conference</h1>
- 44. On My Site <h2>Events</h2> <ul> <li>Heartland Developers Conference</li> </ul>
- 53. Semantic HTML is a moving target • Not Boolean • Not always objective • A continuum Text
- 54. Example Unsemantic Semantic <body background="css/bg.png"> <body> <font face="Calibri”><center> <div id="header"> <table width="800" bgcolor="#FFFFFF" <h1>The Awesome Blog of Awesome</h1> Text border="10" bordercolor="#FFFFFF"> <p class="tagline"> <tr><td> <table width="100%" bgcolor="#f0f0f0" Text Text Awesome is a State of Mind </p> border="0“> </div> <tr> <td><h1> <font face="Palatino Linotype">The Awesome Blog of Awesome</font> </h1></td> </tr> <tr> <td align="right"><p> <i>Awesome is a State of Mind</i> </p></td> </tr> </table>
- 55. HTML5 adds more semantics <body> <header> <h1>The Awesome Blog of Awesome</h1> <p>Awesome is a State of Mind</p> </header> <nav> <ul> <li><a href="">Home</a></li> <li><a href="">Blog</a></li> <li><a href="">About</a></li> <li><a href="">Contact</a></li> </ul> </nav>
- 56. <header> <nav> <article> <aside> <section> <nav> <footer>
- 57. RESPONSIVE WEB DESIGN Content that adapts to user capability
- 58. NEW YORK TIMES
- 61. Everything added makes the web less responsive
- 62. How do we do it
- 63. Responsive Web Design • Develop like your browser is just one big linear display • Tweak for mobile • Enhance for wider screens • Test it on targets • Iterate until it works right
- 64. It’s not just layout
- 67. Demo Alternate HDC site
- 68. CONTENT It’s the content, stupid!
- 69. AVON
- 70. Eliminate the stuff your users don’t want.
- 71. But I have this thing they have to know about...
- 72. You are not in control of how your users experience your site
- 73. Zite Readibility Flipboard Instapaper Pocket Read it Later Safari Pulse
- 78. But they’re all the same
- 79. It’s okay, they’re just content sites
- 81. Nope, apps too.
- 82. If you don’t get rid of stuff, users will
- 83. CONCLUSIONS
- 85. Mobile Engagement • Paypal mobile payments: • 2009 - $141,000,000 • 2011- $4,000,000,000 Text • Fab - 2X more likely to buy on mobile • Financial Times - 2x more likely to subscribe • Flipboard - 3x more likely to engage Source: http://www.lukew.com/
- 86. Not the future
- 88. The present
- 89. We can go beyond not angering our audience
- 91. Make things digestible with Semantic HTML
- 92. Your content should work everywhere with Responsive Web Design
- 93. Give your users what they want with Simplified Content
- 94. Follow up? • Preso will be up at: - http://slideshare.net/tpryan • Feel free to contact me - terry.ryan@adobe.com Text - http://terrenceryan.com - Twitter: @tpryan