Designing the Conversation [SmashingConf 2016] - PowerPoint PPT Presentation

designing the conversation n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Designing the Conversation [SmashingConf 2016] PowerPoint Presentation
Download Presentation
Designing the Conversation [SmashingConf 2016]

play fullscreen
1 / 104
Designing the Conversation [SmashingConf 2016]
58 Views
Download Presentation
AaronGustafson
Download Presentation

Designing the Conversation [SmashingConf 2016]

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Designing the Conversation Aaron Gustafson
 @AaronGustafson slideshare.net/AaronGustafson

  2. I Powerful Phrases

  3. Emphasis I’m$<em>really</em>$happy$to$see$you.

  4. Strong Importance Please$fill$out$the$form$below$to$contact$us.$ <strong>All$fields$are$required.</strong>

  5. I’m really happy to see you. Please fill out the form below to contact us. All fields are required.

  6. Alternate Voice or Mood It's$a$terrible$movie$and$it$made$$200$million.$ <i>Go$figure!</i>$ She$is$admired$for$her$energy$and$<i$lang="fr">joie$de$ vivre</i>.

  7. Stylistically Offset For$12$years$and$running,$over$100,000$companies$have$adopted$ the$<b>Basecamp</b>$way$of$working.$Not$just$tried,$but$signed$ up,$said$“ahQha!”,$and$never$looked$back.$There’s$nothing$else$ like$<b>Basecamp</b>.

  8. Published Works I$wrote$the$book$<cite>Adaptive$Web$Design</cite>.$If$you$like$ this$talk,$you’ll$find$inQdepth$information$about$semantics$(and$ a$whole$lot$more)$in$there.

  9. Abbreviations & Acronyms A$ramp$embedded$in$staircase$of$Robson$Square$in$Vancouver,$ <abbr$ariaQlabel="British$Columbia">BC</abbr>.

  10. Keyboard & Code Press$<kbd>Tab</kbd>$to$move$from$link$to$link$within$a$ document.$ The$<code>kbd</code>$element$is$used$to$indicate$keyboard$key$ names.

  11. Generic Phrasing There$is$<span>nothing$particularly$interesting</span>$in$this$ sentence.

  12. II Mindful Links

  13. Connecting Content A$ramp$embedded$in$staircase$of$<a$href="https:// en.wikipedia.org/wiki/Robson_Square">Robson$Square</a>$in$ Vancouver,$<abbr$ariaQlabel="British$Columbia">BC</abbr>.

  14. Connecting Content <a$href="…"><b$class="hidden">You$can$</b>finish$reading<b$ class="hidden">$<cite>The$Web$Should$Just$Work$for$Everyone</ cite>$in$less$than$10$minutes</b></a>

  15. Connecting Content To$illustrate$the$concept$of$layering$styles,$perhaps$it’s$best$ to$start$at$the$beginning:$with$no$style$applied.
 <a$href="#figureQ3Q3">Figure$3.3</a>$shows$the$lodging$article$ in$Safari$with$only$the$default$browser$styles$applied.$ …$ <figure$id="figureQ3Q3">$ $$…$ </figure>

  16. Creating Context <a$rel="bookmark"$href="…"><b$class="hidden">You$can$</b>finish$ reading<b$class="hidden">$<cite>The$Web$Should$Just$Work$for$ Everyone</cite>$in$less$than$10$minutes</b></a>

  17. Creating Context <a$href="…"$hreflang="es"><b$class="hidden">Lea$esta$página$en$ $$</b>Español</a>

  18. Creating Context <a$href="giant.mp4"$type="video/mp4">Download$this$movie</a>

  19. Triggering Actions <a$href="giant.mp4"$type="video/mp4"$download>Download$this
 $$movie</a>

  20. Connecting Tools <a$href="mailto:aaron@easyQdesigns.net">Send$me$an$email</a>$ <a$href="tel:18009346489">Call$Comcast$Customer$Service</a>

  21. III Effective Organization

  22. Headings <h1>This$is$the$title$of$the$page</h1>$ …$ <h2>This$titles$a$section</h2>$ …$ <h3>This$titles$a$subsection</h3>$ …$ etc.

  23. Moving Focus <p>This$twist$is$what$<a$href="https://en.wikipedia.org/wiki/ John_Harsanyi">John$Harsanyi</a>—an$early$game$theorist—refers$ to$as$the$<a$href="https://en.wikipedia.org/wiki/ Veil_of_ignorance">“Veil$of$Ignorance”</a>$and$what$Rawls$found,$ time$and$time$again,$was$that$individuals$participating$in$the$ experiment$would$gravitate$toward$creating$the$most$egalitarian$ societies.</p>

  24. Moving Focus <p$tabindex="0">Please$fill$out$the$form$below$completely.$ <strong>All$fields$are$required.</strong></p>

  25. Accessible
 Rich Internet Applications

  26. Navigation Region <div$id="nav"$role="navigation">$ $$<ul>$ $$$$<li>$ $$$$$$<a$href="/about/"><b$class="hidden">A$Bit$</b>About<b$ class="hidden">$Me</b></a>$ $$$$</li>$ $$$…$ $$</ul>$ </div>

  27. ARIA Landmark Roles ๏banner ๏navigation ๏search ๏main ๏complementary ๏contentinfo

  28. <header$class="banner"$role="banner"$id="top">
 $$<h1$class="banner_logo"><a$href="/"$rel="home">
 $$$$24$ways$<span>to$impress$your$friends</span></a></h1>$ </header>

  29. <main$role="main">$ $$…$ </main>

  30. <nav$class="navigation"$role="navigation"$id="menu">
 $$<h1$class="hidden">Browse$24$ways</h1>
 $$<ul$class="nav$navQtopics">$ $$$$<li$class="nav_item"><a$href="/topics/business/"
 $$$$$$dataQicon="&#x2655;">Business</a></li>$ $$$$…$ $$</ul>
 $$…$ </nav>

  31. <footer$class="contentinfo"$role="contentinfo">$ $$<p$class="contentinfo_copyright">$ $$$$<small>&#169;$2005Q2016$24$ways$and$our$authors.
 $$$$<a$href="/about/#colophon">Colophon</a></small>$ $$</p>$ $$<p$class="contentinfo_social">$ $$$$<a$href="http://feeds.feedburner.com/24ways"
 $$$$$$rel="alternate">Grab$our$RSS$feed</a>$ $$$$<a$href="https://twitter.com/24ways"$rel="me">Follow$us
 $$$$$$on$Twitter</a>$ $$$$<a$href="/newsletter">Subscribe$to$our$newsletter</a>$ $$</p>$ </footer>

  32. HTML Landmarks ๏banner - first header element not inside a sectioning element ๏navigation - nav ๏search ๏main - main ๏complementary - aside ๏contentinfo - first footer element not inside a sectioning element

  33. <div>$ $$This$is$simply$a$generic$division$of$content.$ </div>

  34. Alterna-divs ๏p - a paragraph ๏ol - a list of items whose order matters ๏ul - an list of items whose order doesn’t matter ๏li - an item in a list ๏dl - a list of terms and their associated definitions ๏dt - terms to be defined within a definition list ๏dd - descriptions of terms in a definition list ๏figure - referenced content (images, tables, etc.) ๏figcaption - caption for a figure

  35. Alterna-divs ๏article - a piece of content that can stand on its own ๏section - a section of a document or article ๏header - preamble content for a document, article, or section ๏footer - supplementary information for a document, article, or section ๏main - the primary content of a document ๏nav - navigational content ๏aside - complementary content

  36. IV Friendly Forms

  37. How does this photo make you feel? ? Embarrassing ? Upsetting ? Saddening ? Bad Photo ? Other

  38. How does this photo make you feel? ? Embarrassing ? Upsetting ? Saddening ? Bad Photo ? Other

  39. How does this photo make you feel? ? Embarrassing ? Upsetting ? Saddening ? Bad Photo ◉ Other it’s embarrassing

  40. Please describe the photo ? It’s embarrassing ? It’s a bad photo of me ? It makes me sad

  41. Talk to your users like they talk
 to one another

  42. Make it clear users need to respond

  43. “What’s your first name?”

  44. “Without your first name, I won’t
 know how to address you.
 Could you please provide it?”

  45. “Reserve your spot”

  46. What’s$your$first$name?$ <input$name="first_name">