The Users are RestlessTerry Ryan | Developer EvangelistTwitter: @tpryan
Who are you?
Would you like a movie review?
How would youlike pancakes?
I would like to visit  my alma mater.
Source: http://xkcd.com/773/
How about on  mobile?
Pop quiz:What are you packing?
Demo   Text       Point your browsers
Users have noticed
The users are  restless
And by “restless”I mean “pissed”
How dowe fix this?
Build sites thatcater to users     needs
Get rid of stuff  you want
Ensure you havewhat users want
Responsive Web    Design
Semantic HTML
SEMANTIC HTMLA Flexible starting place
OXO
Definition• HTML where specific elements are used• HTML where elements are not misused• HTML with no presentation informat...
Semantic HTML?<div>Heartland	  Developers	  Conference</div>
Semantic HTML<div>Heartland	  Developers	  Conference</div>
On HDC Site<h1>Heartland	  Developers	  Conference</h1>
On My Site<h2>Events</h2><ul>	  	  	  	  <li>Heartland	  Developers	  Conference</li></ul>
Semantic HTML is a moving target• Not Boolean• Not always objective• A continuum        Text
ExampleUnsemantic                                                    Semantic<body	  background="css/bg.png">             ...
HTML5 adds more semantics            <body>	  	  	  	  <header>	  	  	  	  	  	  	  	  	  	  	  	  <h1>The	  Awesome	  Blo...
<header>        <nav>      <article><aside>      <section>       <nav>      <footer>
RESPONSIVE WEB DESIGNContent that adapts to user capability
NEW YORK TIMES
HTML isResponsive
Source: http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
Everything added makes the web less responsive
How do we do it
Responsive Web Design• Develop like your browser is just one big linear  display• Tweak for mobile• Enhance for wider scre...
It’s not just layout
ResponsiveTypography
Responsive Images
Demo       Alternate HDC site
CONTENTIt’s the content, stupid!
AVON
Eliminate the stuff    your users    don’t want.
But I have thisthing they have to  know about...
You are not in control ofhow your users experience        your site
Zite    Readibility     Flipboard   InstapaperPocket   Read it Later    Safari       Pulse
They’re all different
But they’reall the same
It’s okay, they’rejust content sites
Nope, apps too.
If you don’t get   rid of stuff,    users will
CONCLUSIONS
Source: http://www.asymco.com/2012/01/17/the-rise-and-fall-of-personal-computing/
Mobile Engagement• Paypal mobile payments: • 2009 - $141,000,000 • 2011- $4,000,000,000                      Text• Fab - 2...
Not the future
Not thenear future
The present
We can go beyondnot angering our    audience
We candelight them
Make things digestible  with Semantic HTML
Your contentshould workeverywhere  with Responsive Web Design
Give your userswhat they want    with Simplified Content
Follow up?• Preso will be up at:  - http://slideshare.net/tpryan• Feel free to contact me  - terry.ryan@adobe.com Text  - ...
The Users are Restless
The Users are Restless
The Users are Restless
The Users are Restless
The Users are Restless
The Users are Restless
The Users are Restless
The Users are Restless
The Users are Restless
The Users are Restless
The Users are Restless
The Users are Restless
The Users are Restless
The Users are Restless
The Users are Restless
The Users are Restless
The Users are Restless
The Users are Restless
The Users are Restless
The Users are Restless
The Users are Restless
The Users are Restless
The Users are Restless
The Users are Restless
The Users are Restless
The Users are Restless
The Users are Restless
The Users are Restless
The Users are Restless
The Users are Restless
The Users are Restless
Upcoming SlideShare
Loading in...5
×

The Users are Restless

792

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
792
On Slideshare
0
From Embeds
0
Number of Embeds
1
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×