The Users are Restless

1,073 views
960 views

Published on

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

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,073
On SlideShare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

The Users are Restless

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

×