the users are restless
DESCRIPTION
An argument for simpler pages, Responsive Web Design, and Semantic HTML.TRANSCRIPT
![Page 1: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/1.jpg)
Terry Ryan | Developer EvangelistTwitter: @tpryan
The Users are Restless
![Page 2: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/2.jpg)
Who are you?
![Page 3: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/3.jpg)
![Page 4: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/4.jpg)
![Page 5: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/5.jpg)
Would you like a movie review?
![Page 6: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/6.jpg)
![Page 7: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/7.jpg)
How would you like pancakes?
![Page 8: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/8.jpg)
![Page 9: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/9.jpg)
![Page 10: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/10.jpg)
![Page 11: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/11.jpg)
I would like to visit my alma mater.
![Page 12: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/12.jpg)
![Page 13: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/13.jpg)
Source: http://xkcd.com/773/
![Page 14: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/14.jpg)
How about on mobile?
![Page 15: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/15.jpg)
![Page 16: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/16.jpg)
![Page 17: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/17.jpg)
![Page 18: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/18.jpg)
![Page 19: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/19.jpg)
Pop quiz:What are you
packing?
![Page 20: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/20.jpg)
Demo
Point your browsers
Text
![Page 21: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/21.jpg)
![Page 22: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/22.jpg)
![Page 23: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/23.jpg)
![Page 24: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/24.jpg)
Users have noticed
![Page 25: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/25.jpg)
The users are restless
![Page 26: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/26.jpg)
And by “restless” I mean “pissed”
![Page 27: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/27.jpg)
How do we !x this?
![Page 28: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/28.jpg)
Build sites that cater to users
needs
![Page 29: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/29.jpg)
Get rid of stuff you want
![Page 30: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/30.jpg)
Ensure you have what users want
![Page 31: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/31.jpg)
Responsive Web Design
![Page 32: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/32.jpg)
Semantic HTML
![Page 33: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/33.jpg)
SEMANTIC HTML
A Flexible starting place
![Page 34: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/34.jpg)
OXO
![Page 35: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/35.jpg)
Definition
•HTML where speci!c elements are used
•HTML where elements are not misused
•HTML with no presentation information
![Page 36: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/36.jpg)
Semantic HTML?
<div>Heartland Developers Conference</div>
![Page 37: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/37.jpg)
![Page 38: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/38.jpg)
![Page 39: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/39.jpg)
![Page 40: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/40.jpg)
![Page 41: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/41.jpg)
Semantic HTML
<div>Heartland Developers Conference</div>
![Page 42: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/42.jpg)
![Page 43: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/43.jpg)
On HDC Site
<h1>Heartland Developers Conference</h1>
![Page 44: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/44.jpg)
On My Site
<h2>Events</h2><ul> <li>Heartland Developers Conference</li></ul>
![Page 45: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/45.jpg)
![Page 46: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/46.jpg)
![Page 47: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/47.jpg)
![Page 48: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/48.jpg)
![Page 49: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/49.jpg)
![Page 50: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/50.jpg)
![Page 51: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/51.jpg)
![Page 52: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/52.jpg)
![Page 53: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/53.jpg)
Semantic HTML is a moving target
•Not Boolean
•Not always objective
• A continuumText
![Page 54: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/54.jpg)
TextTextText
<body background="css/bg.png"><font face="Calibri”><center><table width="800" bgcolor="#FFFFFF" border="10" bordercolor="#FFFFFF"><tr><td><table width="100%" bgcolor="#f0f0f0" border="0“>
<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>
Unsemantic
<body><div id="header">
<h1>The Awesome Blog of Awesome</h1><p class="tagline">Awesome is a State of Mind</p>
</div>
Semantic
Example
![Page 55: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/55.jpg)
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>
![Page 56: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/56.jpg)
<header><nav>
<nav><footer>
<article>
<aside>
<section>
![Page 57: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/57.jpg)
RESPONSIVE WEB DESIGN
Content that adapts to user capability
![Page 58: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/58.jpg)
NEW YORK TIMES
![Page 59: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/59.jpg)
HTML is Responsive
![Page 60: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/60.jpg)
Source: http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
![Page 61: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/61.jpg)
Everything added makes the web less responsive
![Page 62: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/62.jpg)
How do we do it
![Page 63: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/63.jpg)
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
![Page 64: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/64.jpg)
It’s not just layout
![Page 65: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/65.jpg)
Responsive Typography
![Page 66: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/66.jpg)
Responsive Images
![Page 67: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/67.jpg)
Demo
Alternate HDC site
![Page 68: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/68.jpg)
CONTENT
It’s the content, stupid!
![Page 69: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/69.jpg)
AVON
![Page 70: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/70.jpg)
Eliminate the stuff your users don’t want.
![Page 71: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/71.jpg)
But I have this thing they have to
know about...
![Page 72: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/72.jpg)
You are not in control of how your users experience
your site
![Page 73: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/73.jpg)
Zite Readibility Flipboard Instapaper
Pocket Read it Later Safari Pulse
![Page 74: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/74.jpg)
![Page 75: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/75.jpg)
![Page 76: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/76.jpg)
![Page 77: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/77.jpg)
They’re all different
![Page 78: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/78.jpg)
But they’re all the same
![Page 79: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/79.jpg)
It’s okay, they’re just content sites
![Page 80: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/80.jpg)
![Page 81: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/81.jpg)
Nope, apps too.
![Page 82: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/82.jpg)
If you don’t get rid of stuff, users will
![Page 83: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/83.jpg)
CONCLUSIONS
![Page 84: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/84.jpg)
Source: http://www.asymco.com/2012/01/17/the-rise-and-fall-of-personal-computing/
![Page 85: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/85.jpg)
Mobile Engagement
• Paypal mobile payments:
• 2009 - $141,000,000
• 2011- $4,000,000,000
• Fab - 2X more likely to buy on mobile
• Financial Times - 2x more likely to subscribe
• Flipboard - 3x more likely to engage
Text
Source: http://www.lukew.com/
![Page 86: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/86.jpg)
Not the future
![Page 87: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/87.jpg)
Not the near future
![Page 88: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/88.jpg)
The present
![Page 89: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/89.jpg)
We can go beyond not angering our
audience
![Page 90: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/90.jpg)
We can delight them
![Page 91: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/91.jpg)
Make things digestible
with Semantic HTML
![Page 92: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/92.jpg)
Your content should work everywhere
with Responsive Web Design
![Page 93: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/93.jpg)
Give your users what they want
with Simpli!ed Content
![Page 94: The Users are Restless](https://reader034.vdocuments.mx/reader034/viewer/2022042607/555c2680d8b42a09438b4cd4/html5/thumbnails/94.jpg)
Follow up?
Text
• Preso will be up at:- http://slideshare.net/tpryan
• Feel free to contact me- [email protected] http://terrenceryan.com- Twitter: @tpryan