Download as PDF, PPTX
Uploaded byTerry Ryan
The Users are Restless
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.
More Related Content
![[BDD 2025 - Full-Stack Development] PHP in AI Age: The Laravel Way. (Rizqy Hi...](https://cdn.slidesharecdn.com/ss_thumbnails/fs-phpinaiagethelaravelway-251125012602-ef9d330e-thumbnail.jpg?width=640&height=640&fit=bounds)
![Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]](https://cdn.slidesharecdn.com/ss_thumbnails/agenticcommunityseries-day3-cfd-251120170304-ddef8112-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Mobile Development] Mobile Engineer and Software Engineer: Are we...](https://cdn.slidesharecdn.com/ss_thumbnails/md-mobileengineerandsoftwareengineerarewestillrelevantsidiqpermana-251127010650-55224ef1-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Full-Stack Development] Agentic AI Architecture: Redefining Syste...](https://cdn.slidesharecdn.com/ss_thumbnails/fs-agenticaiarchitectureredefiningsystemcommunication-251124030838-e6c70cc2-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Artificial Intelligence] Building AI Systems That Users (and Comp...](https://cdn.slidesharecdn.com/ss_thumbnails/ai-buildingaisystemsthatusersandcompanieslove-251124030845-038f7732-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Artificial Intelligence] AI for the Underdogs: Innovation for Sma...](https://cdn.slidesharecdn.com/ss_thumbnails/ai-aifortheunderdogsinnovationforsmallbusinesses-251124030839-72a599a4-thumbnail.jpg?width=640&height=640&fit=bounds)
The Users are Restless
- 1. The Users areRestless Terry Ryan | Developer Evangelist Twitter: @tpryan
- 2.
- 5. Would you likea movie review?
- 7. How would you likepancakes?
- 11. I would liketo visit my alma mater.
- 13.
- 14. How about on mobile?
- 19. Pop quiz: What areyou packing?
- 20. Demo Text Point your browsers
- 24.
- 25. The users are restless
- 26. And by “restless” Imean “pissed”
- 27. How do we fixthis?
- 28. Build sites that caterto users needs
- 29. Get rid ofstuff you want
- 30. Ensure you have whatusers want
- 31. Responsive Web Design
- 32.
- 33. SEMANTIC HTML A Flexiblestarting place
- 34.
- 35. Definition • HTML wherespecific 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 isa 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 moresemantics <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 Contentthat adapts to user capability
- 58.
- 59.
- 60.
- 61. Everything added makesthe web less responsive
- 62. How do wedo 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 justlayout
- 65.
- 66.
- 67. Demo Alternate HDC site
- 68. CONTENT It’s the content,stupid!
- 69.
- 70. Eliminate the stuff your users don’t want.
- 71. But I havethis thing they have to know about...
- 72. You are notin control of how your users experience your site
- 73. Zite Readibility Flipboard Instapaper Pocket Read it Later Safari Pulse
- 77.
- 78.
- 79. It’s okay, they’re justcontent sites
- 81.
- 82. If you don’tget rid of stuff, users will
- 83.
- 84.
- 85. Mobile Engagement • Paypalmobile 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.
- 87.
- 88.
- 89. We can gobeyond not angering our audience
- 90.
- 91. Make things digestible with Semantic HTML
- 92. Your content should work everywhere with Responsive Web Design
- 93. Give your users whatthey want with Simplified Content
- 94. Follow up? • Presowill be up at: - http://slideshare.net/tpryan • Feel free to contact me - terry.ryan@adobe.com Text - http://terrenceryan.com - Twitter: @tpryan