Designing the Conversation [SmashingConf 2016]

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

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

24. 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>

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

26. Accessible
 Rich Internet Applications

27. 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>

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

30. <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>

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

32. <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>

33. <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>

34. 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

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

36. 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

37. 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

38. IV Friendly Forms

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

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

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

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

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

46. Make it clear users need to respond

47. “What’s your first name?”

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

49. “Reserve your spot”

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