The Users are Restless

  • 686 views
Uploaded on

An argument for simpler pages, Responsive Web Design, and Semantic HTML.

An argument for simpler pages, Responsive Web Design, and Semantic HTML.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
686
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
8
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. The Users are RestlessTerry Ryan | Developer EvangelistTwitter: @tpryan
  • 2. Who are you?
  • 3. Would you like a movie review?
  • 4. How would youlike pancakes?
  • 5. I would like to visit my alma mater.
  • 6. Source: http://xkcd.com/773/
  • 7. How about on mobile?
  • 8. Pop quiz:What are you packing?
  • 9. Demo Text Point your browsers
  • 10. Users have noticed
  • 11. The users are restless
  • 12. And by “restless”I mean “pissed”
  • 13. How dowe fix this?
  • 14. Build sites thatcater to users needs
  • 15. Get rid of stuff you want
  • 16. Ensure you havewhat users want
  • 17. Responsive Web Design
  • 18. Semantic HTML
  • 19. SEMANTIC HTMLA Flexible starting place
  • 20. OXO
  • 21. Definition• HTML where specific elements are used• HTML where elements are not misused• HTML with no presentation information
  • 22. Semantic HTML?<div>Heartland  Developers  Conference</div>
  • 23. Semantic HTML<div>Heartland  Developers  Conference</div>
  • 24. On HDC Site<h1>Heartland  Developers  Conference</h1>
  • 25. On My Site<h2>Events</h2><ul>        <li>Heartland  Developers  Conference</li></ul>
  • 26. Semantic HTML is a moving target• Not Boolean• Not always objective• A continuum Text
  • 27. ExampleUnsemantic 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> Textborder="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>
  • 28. 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>
  • 29. <header> <nav> <article><aside> <section> <nav> <footer>
  • 30. RESPONSIVE WEB DESIGNContent that adapts to user capability
  • 31. NEW YORK TIMES
  • 32. HTML isResponsive
  • 33. Source: http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
  • 34. Everything added makes the web less responsive
  • 35. How do we do it
  • 36. 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
  • 37. It’s not just layout
  • 38. ResponsiveTypography
  • 39. Responsive Images
  • 40. Demo Alternate HDC site
  • 41. CONTENTIt’s the content, stupid!
  • 42. AVON
  • 43. Eliminate the stuff your users don’t want.
  • 44. But I have thisthing they have to know about...
  • 45. You are not in control ofhow your users experience your site
  • 46. Zite Readibility Flipboard InstapaperPocket Read it Later Safari Pulse
  • 47. They’re all different
  • 48. But they’reall the same
  • 49. It’s okay, they’rejust content sites
  • 50. Nope, apps too.
  • 51. If you don’t get rid of stuff, users will
  • 52. CONCLUSIONS
  • 53. Source: http://www.asymco.com/2012/01/17/the-rise-and-fall-of-personal-computing/
  • 54. 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/
  • 55. Not the future
  • 56. Not thenear future
  • 57. The present
  • 58. We can go beyondnot angering our audience
  • 59. We candelight them
  • 60. Make things digestible with Semantic HTML
  • 61. Your contentshould workeverywhere with Responsive Web Design
  • 62. Give your userswhat they want with Simplified Content
  • 63. 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