Post on 20-May-2015
description
transcript
Terry Ryan | Developer EvangelistTwitter: @tpryan
The Users are Restless
Who are you?
Would you like a movie review?
How would you like 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
Point your browsers
Text
Users have noticed
The users are restless
And by “restless” I mean “pissed”
How do we !x this?
Build sites that cater to users
needs
Get rid of stuff you want
Ensure you have what users want
Responsive Web Design
Semantic HTML
SEMANTIC HTML
A Flexible starting place
OXO
Definition
•HTML where speci!c elements are used
•HTML where elements are not misused
•HTML with no presentation information
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 continuumText
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
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>
<header><nav>
<nav><footer>
<article>
<aside>
<section>
RESPONSIVE WEB DESIGN
Content that adapts to user capability
NEW YORK TIMES
HTML is Responsive
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 screens
• Test it on targets
• Iterate until it works right
It’s not just layout
Responsive Typography
Responsive Images
Demo
Alternate HDC site
CONTENT
It’s the content, stupid!
AVON
Eliminate the stuff your users don’t want.
But I have this thing they have to
know about...
You are not in control of how your users experience
your site
Zite Readibility Flipboard Instapaper
Pocket Read it Later Safari Pulse
They’re all different
But they’re all the same
It’s okay, they’re just 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
• 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/
Not the future
Not the near future
The present
We can go beyond not angering our
audience
We can delight them
Make things digestible
with Semantic HTML
Your content should work everywhere
with Responsive Web Design
Give your users what they want
with Simpli!ed Content
Follow up?
Text
• Preso will be up at:- http://slideshare.net/tpryan
• Feel free to contact me- terry.ryan@adobe.com- http://terrenceryan.com- Twitter: @tpryan