The Users are Restless
2 likes1,032 views
The document discusses how users are becoming frustrated with websites that do not cater to their needs. It recommends building sites using semantic HTML, responsive web design, and simplified content to ensure the user experience is positive. Semantic HTML uses appropriate tags to structure content, responsive design adapts layout for different devices, and simplified content focuses on only including essential information for users. The document emphasizes that the user experience should work seamlessly across all devices and content delivery platforms by following these best practices.
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 - [email protected] Text - http://terrenceryan.com - Twitter: @tpryan