The Users are Restless
Upcoming SlideShare
Loading in...5

The Users are Restless



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

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



Total Views
Views on SlideShare
Embed Views



2 Embeds 11 10 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

The Users are Restless The Users are Restless Presentation Transcript

  • 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:
  • 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 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 continuum Text
  • 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>
  • 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> <article><aside> <section> <nav> <footer>
  • RESPONSIVE WEB DESIGNContent that adapts to user capability
  • HTML isResponsive
  • Source:
  • 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
  • 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
  • Source:
  • 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:
  • 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: -• Feel free to contact me - Text - - Twitter: @tpryan