{"version":"https://jsonfeed.org/version/1","title":"Aaron Gustafson: Content tagged conferences","description":"The latest 20 posts and links tagged conferences.","home_page_url":"https://www.aaron-gustafson.com","feed_url":"https://www.aaron-gustafson.com/feeds/conferences.json","author":{"name":"Aaron Gustafson","url":"https://www.aaron-gustafson.com"},"icon":"https://www.aaron-gustafson.com/i/og-logo.png","favicon":"https://www.aaron-gustafson.com/favicon.png","expired":false,"items":[{"id":"https://www.aaron-gustafson.com/notebook/crossing-a-border/","title":"✍🏻 Crossing a Border","summary":"If you travel abroad for work, you may have some concerns based on recent news coverage. I know I do. I’m not a lawyer, but I’ve been researching quite a bit and asking for  opinions and recommendations. Below is a summary of the advice I’ve been given or that I’ve gathered from my own experiences.","content_html":"<p>If you travel abroad for work, you may have some concerns about border crossings, based on <a href=\"https://www.theatlantic.com/technology/archive/2017/02/a-nasa-engineer-is-required-to-unlock-his-phone-at-the-border/516489/\">recent</a> <a href=\"https://www.cnet.com/news/border-patrol-agents-checking-facebook-profiles-trump-immigration-ban/\">news</a> <a href=\"http://www.cnn.com/2017/01/29/politics/donald-trump-immigrant-policy-social-media-contacts/\">coverage</a>. I know I do. <strong>I’m not a lawyer</strong>, but I’ve been researching quite a bit and asking for opinions and recommendations. Below is a summary of the advice I’ve been given. I’m providing it here in case it might be of use to you.</p>\n<p>Full disclosure: I have been held at a border before. I was entering Canada to lead a training for a client and did not have the necessary visa. My passport was taken and I was escorted to a holding area. It was terrifying, but ultimately ended up okay—I paid for the visa and entered Canada without any further incident. I realized, once I had a few minutes to gather myself, that I was moved to the holding area to enable the border officers to expedite processing of the other passengers. It was triage, nothing personal against me. Once I realized that, my nerves calmed down a bit. Still… it’s not something I’d like to repeat. I realize some of you reading this may have had much worse experiences at a border. Being a white male, I know I’m far less likely to be searched, questioned, etc. I’m sharing my story not to diminish any experience you have had, but merely to provide a little background about my experience in relation to this topic.</p>\n<hr>\n<p>The information below outlines the rights of U.S. Customs and Border Protection (CBP) and Immigrations and Customs Enforcement (ICE) under federal law. It applies whether you are a U.S. citizen or not. Other countries may vary, but I suspect most exercise similar rights.</p>\n<ul>\n<li><strong>Officers are permitted to search your belongings, including your electronic devices.</strong> They can also ask you to unlock devices without having <a href=\"https://www.law.cornell.edu/wex/probable_cause\">probable cause</a>. The reasoning, whether you agree with it or not, is that your privacy is less important than protecting the country you are seeking to enter.</li>\n<li><strong>The Officer has the authority to detain your device.</strong> If they do, it’s typically for a few days. They may also gain access without your consent, even if you don’t provide your password. If they detain your device, make sure you politely ask for information about how to get your device returned to you. If it’s a corporate-issued device, be sure to notify your manager and IT organization immediately.</li>\n<li><strong>You do not have to give your passwords.</strong> That said, the entry process may go easier if you do. Remember: Once over the border, <em>you can always change your password.</em> It’s unclear how an Officer may react if you tell them you don’t know the password they want, which you legitimately may not if you use a password manager like 1Password or LastPass. This may be further complicated (and frustrating to the officer) if your device does not have your password manager installed.</li>\n<li><strong>Keep your eyes on the prize.</strong> You booked the trip, paid for the travel, completed the journey, and are almost at your destination. Keep reminding yourself of that. As annoying or unnerving as border crossing may be, in all likelihood, you’re nearly there. It can absolutely be both frightening and frustrating to be held up at a border, even when you’ve got nothing to hide. That can be compounded if the Officer you’re dealing with isn’t the most friendly. But remember that they are paid to be suspicious and skeptical of you. It’s rarely personal. Try not to let aggressive or rude questions rattle you. Take a breath and show them you’re not trying to make their job any harder than it has to be. Remember, they’re human too; they probably don’t relish digging through your personal effects.</li>\n<li><strong>You can ask questions.</strong> If an Officer asks you to do something you are uncomfortable with, you can politely ask them why it’s necessary. You can also ask for further clarification from a supervisor. Similarly, if things aren’t going well with the Officer you’re in front of—perhaps you feel intimidated or can see your personalities clashing to a point that will not work out well for you—<em>you can ask to work with another Officer</em>. You could, for instance, explain that you would feel more comfortable working with an Officer of your gender. Just remember, being polite and professional will go a long way towards easing tensions all around.</li>\n<li><strong>If you do not comply with an Officer’s legal request, you may be detained for questioning.</strong> If you are not a citizen, you may also be denied entry temporarily or banned permanently.</li>\n<li><strong>Tell the Officer if your device contains sensitive information.</strong> If your device contains sensitive or confidential data—for instance, if it belongs to your employer, contains trade secrets or <a href=\"https://en.wikipedia.org/wiki/Personally_identifiable_information\">Personally Identifiable Information</a>, or client information shared under NDA—politely inform the Officer and respectfully request that the sensitive information be handled appropriately. If the Officer accesses this information, report the incident to your employer or client as soon as you are able to do so.</li>\n<li><strong>Travel with as few devices as possible.</strong> This is good for a number of reasons—theft being chief among them. You might even consider having a specific phone, laptop, or tablet that you use only for travel and that has the least amount of sensitive data on it. For instance, I have an older iPad mini I travel with for entertainment purposes only. It contains no email, calendars, or contacts and has no social media apps installed. If searched, the most they’d have access to is my Hulu queue and Netflix history.</li>\n<li><strong>Keep a paper backup of your itinerary and key contacts.</strong> It can be tempting to rely on tools like TripIt to manage your travel, but if your device is confiscated and you are detained or are allowed to cross the border, you will need that information. Make sure the key contacts you printed out include your legal representation (or your company’s), should you need it.</li>\n<li><strong>Carry a small notebook and a crayon in your travel wallet.</strong> If you are detained or your possessions are taken, you will often be able to keep your wallet with you.<sup class=\"footnote-ref\"><a href=\"#fn1\" id=\"fnref1\">1</a></sup> Keep a small notebook and a crayon in there. <a href=\"http://www.moleskine.com/us/collections/model/two-go-notebooks\">Moleskin</a> and <a href=\"https://fieldnotesbrand.com/products/original-ruled\">Field Notes</a> offer some pretty solid options when it comes to slim notebooks. And although a crayon is a crude writing implement, it is also unlikely to be considered a weapon, which means you will likely be able to keep it. You should keep your itinerary and contacts backup in this notebook. Use the notebook to record the details of your detention (with names and times if you know them); if anything goes amiss or poorly (or even well!), you will need those names to escalate your experience (or provide positive feedback). The notebook will also be a welcome doodling companion on the off-chance your detained for several hours and are bored out of your mind.</li>\n</ul>\n<p>Regardless of your thoughts on how the U.S. or other countries handle things at the border, the law is the law. If you are seeking to cross a border (even your own), you’re subject to that law. I am not saying this because I agree with everything we in the U.S. or other nations do, but I sincerely believe <strong>you will do more good advocating for changes to border policy with <a href=\"http://www.house.gov/representatives/find/\">the politicians who write the laws</a> than with the Officer whose lane you happened to find yourself in</strong>.</p>\n<p>One additional note: Most <a href=\"https://help.cbp.gov/app/forms/complaint\">border protection agencies do have comment forms</a> you can use to provide feedback about your experience. Regardless of whether you are permitted entry to the country, you should file a report if you feel you have been mistreated by an Officer. Similarly, if you had a particularly helpful and courteous Officer, consider using the same form to praise their behavior or attitude; that’s probably not the kind of feedback they get often and would likely be much appreciated.</p>\n<h2 id=\"further-reading\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#further-reading\" aria-hidden=\"true\">#</a> Further Reading</h2>\n<ul>\n<li><a href=\"https://www.nytimes.com/2017/02/14/business/border-enforcement-airport-phones.html?_r=0\">“What Are Your Rights if Border Agents Want to Search Your Phone?”</a> by <a href=\"https://www.nytimes.com/by/daniel-victor\">Daniel Victor</a>, <cite>the New York Times</cite>, 14 February 2017</li>\n<li><a href=\"https://www.theatlantic.com/technology/archive/2017/02/give-us-your-passwords/516315/\">“Give Us Your Passwords”</a>, by <a href=\"https://www.theatlantic.com/author/kaveh-waddell/\">Kaveh Waddell</a>, <cite>the Atlantic</cite>, 10 February 2017</li>\n<li><a href=\"http://fortune.com/2017/02/08/social-media-at-the-border-can-agents-ask-for-your-facebook-feed/\">“Social Media at the Border: Can Agents Ask for Your Facebook Feed?”</a> by <a href=\"http://fortune.com/author/jeff-john-roberts/\">Jeff John Roberts</a>, <cite>Fortune</cite>, 08 February 2017</li>\n<li><a href=\"http://www.forbes.com/sites/kalevleetaru/2017/01/29/we-already-screen-cell-phones-at-the-border-will-social-media-be-any-different/\">“We Already Screen Cell Phones At The Border, Will Social Media Be Any Different?”</a> by <a href=\"http://www.forbes.com/sites/kalevleetaru/\">Kalev Leetaru</a>, Forbes, 29 January 2017</li>\n<li><a href=\"https://www.eff.org/deeplinks/2017/01/fear-materialized-border-agents-demand-social-media-data-americans\">“Fear Materialized: Border Agents Demand Social Media Data from Americans”</a> by <a href=\"https://www.eff.org/about/staff/sophia-cope\">Sophia Cope</a>, Electronic Frontier Foundation, 25 January 2017</li>\n<li><a href=\"https://www.swiss.com/th/en/prepare/travel-regulations/immigration-regulations-worldwide.html\">“Immigration regulations worldwide”</a> from Swiss Air</li>\n<li><a href=\"http://www.huffingtonpost.com/smartertravel/skip-the-lines-expedited_b_4059621.html\">“Skip the Lines: Expedited Security and Immigration Programs”</a> by <a href=\"http://www.huffingtonpost.com/author/smartertravel\">SmarterTravel</a> in <cite>the Huffington Post</cite>, 7 October 2013 (updated 23 January 2014)</li>\n<li><a href=\"https://blog.shermanstravel.com/2013/the-10-best-worst-u-s-airports-for-immigration-wait-times/\">“The 10 Best &amp; Worst U.S. Airports for Immigration Wait Times”</a> by <a href=\"https://blog.shermanstravel.com/author/dmurph/\">Darren Murph</a> for Sherman’s Travel, 1 August 2013</li>\n</ul>\n<h2 id=\"thanks!\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#thanks!\" aria-hidden=\"true\">#</a> Thanks!</h2>\n<p>Many thanks to <a href=\"http://rachelnabors.com/\">Rachel Nabors</a>, who <a href=\"https://medium.com/@rachelnabors/wtfuk-73009d5623b4\">had a terrible experience at the UK border a while back</a>, for providing some excellent feedback on this piece. Her insights were invaluable and her tips regarding the travel wallet and notebook &amp; crayon were fantastic!</p>\n<hr class=\"footnotes-sep\">\n<section class=\"footnotes\">\n<h4 class=\"hidden\">Footnotes</h4>\n<ol class=\"footnotes-list\">\n<li id=\"fn1\" class=\"footnote-item\"><p>Make sure your travel wallet doesn’t have a long strap or, if it does, make sure it’s detachable. Some Officers might view the strap as a potential weapon and use it as an excuse to relieve you of your wallet too. <a href=\"#fnref1\" class=\"footnote-backref\">↩︎</a></p>\n</li>\n</ol>\n</section>\n","url":"https://www.aaron-gustafson.com/notebook/crossing-a-border/","tags":["travel","business","conferences"],"date_published":"2017-02-23T16:32:41Z"},{"id":"https://www.aaron-gustafson.com/notebook/the-web-should-just-work-for-everyone/","title":"✍🏻 The Web Should Just Work for Everyone","summary":"I had the great pleasure of delivering the following talk at the Edge Web Summit on April 4th. The talk is largely about accessibility with a push for thinking about the future of the interface and how considering accessibility now will help us prepare for a world of “headless UIs”.","content_html":"<p><em>I had the great pleasure of delivering the following talk at the <a href=\"https://web.archive.org/web/http://lanyrd.com/2016/edgesummit/\">Edge Web Summit</a> on April 4th. The talk is largely about accessibility with a push for thinking about the future of the interface and how considering accessibility now will help us prepare for a world of “headless UIs”.</em></p>\n<hr>\n<p>We, as an industry, tend to have a pretty myopic view of experience. Those of us who work day-to-day in accessibility probably have a broader perspective than most, but I would argue that even we all fall short now and again when it comes to seeing the Web as others do.</p>\n<p>I’m, of course, talking about accessibility. Now if you’re like most audiences, I’m guessing when you hear the word “accessibility” you probably think “screen reader”. That’s ok. Screen readers are certainly one part of the assistive technology spectrum, but my hope is, that by the end of this talk, when someone says “accessibility” you instead think… “opportunity”.</p>\n<figure id=\"fig-2016-04-11-01\" class=\"media-container\">\n<p><img src=\"https://www.aaron-gustafson.com/i/posts/2016-04-11/01.gif\" alt=\"The word “Accessibility” exploding to reveal the word “opportunity”.\"></p>\n</figure>\n<p>Accessibility is concerned with accommodating disabilities, but our understanding of what a disability is has changed over time. In the 1980s, the World Health Organization defined a disability as a personal attribute:</p>\n<blockquote>\n<p>In the context of health experience, a disability is any restriction or lack of ability (resulting from an impairment) to perform an activity in the manner or within the range considered normal for a human being.</p>\n</blockquote>\n<p>They have since <a href=\"http://www.who.int/topics/disabilities/en/\">updated their definition of a disability</a> to be more context-dependent:</p>\n<blockquote>\n<p>Disability is not just a health problem. It is a complex phenomenon, reflecting the interaction between features of a person’s body and features of the society in which he or she lives.</p>\n</blockquote>\n<p>The points of interaction between a person and society are where disability happens. It’s our responsibility to know how our designs affect these interactions.</p>\n<p>If we use our own abilities and biases as a starting point, we end up with products designed for people of a specific age, language ability, tech literacy, and physical ability. Plus those with specific access to money, time, and stable network connections.</p>\n<figure id=\"fig-2016-04-11-02\" class=\"media-container\">\n<p><img src=\"https://www.aaron-gustafson.com/i/posts/2016-04-11/02.png\" alt=\"\"></p>\n<figcaption>A figurative graph charting user ability against population using a bunch of different icons for people. One person is identified as a designer and she is part of a subset of the people that are in grey, signifying that they are “included” when the designer considers things from their own perspective. The vast majority of the people icons are in red, signifying they are “excluded” by this line of thinking.</figcaption>\n</figure>\n<p>When it comes to people, there’s no such thing as “normal”. For example, the interactions we design with technology depend heavily on what we can see, hear, say, and touch. If we’re designing with ourselves as a baseline, we can overlook people with circumstances different from ours.</p>\n<p>I love exercises that create opportunities for revelation. One of my favorites originates from <a href=\"https://en.wikipedia.org/wiki/John_Rawls\">John Rawls</a>. Rawls was a philosopher who used to run a social experiment with students, church groups, and the like. In the experiment, individuals were allowed to create their ideal society. It could follow any philosophy. It could be a monarchy or democracy or anarchy. It could be capitalist or socialist. The people in this experiment had free rein to control absolutely every facet of the society… but then he’d add the twist: They could not control what position they occupied in that society.</p>\n<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>\n<p>It makes sense: what rational, self-interested human being would treat the elderly, the sick, people of a particular gender or race or creed or color, poorly if they could find themselves in that position?</p>\n<p>We’re often told accessibility is only concerned with folks with “special needs.” Well news flash: <em>we all have special needs</em>. Some we’re born with. Some we develop. Some are temporary. Some have nothing to do with us personally, but are situational or purely dependent on the hardware we are using, the interaction methods we have available to us, or even the speed at which we can access the Internet or process data.</p>\n<p>Sometimes disability is a temporary thing. A short-term injury and illness affect the way people interact with the world around them. Looking into bright light can cause brief visual impairment. Being sick with a cough makes it hard to speak. Wearing a cast can severely limit a person’s ability to lift an everyday object.</p>\n<p>On the more technical side of things, small touchscreens can be awkward to interact with is you’re fat-fingered like me. Glossy screens can be difficult to read under glaring light. Low-contrast text can be difficult to read when you turn the screen brightness down to conserve battery life on your mobile device.</p>\n<p>Recognizing that we all have special needs leads us to make better decisions as designers and developers. When we understand that disability is a universal and dynamic way of interacting with the world, it can become something else as well: a new source for creativity. Our impact can also expand, as our inclusive designs reach a greater number of people.</p>\n<p>Designing for people with permanent disabilities can seem like a significant constraint, but the resulting designs can actually benefit a much larger number of people. For example, curb cuts in sidewalks were first created to make it safer and easier for people in wheelchairs to cross the street.</p>\n<figure id=\"fig-2016-04-11-03\" class=\"media-container\">\n<p><img src=\"https://www.aaron-gustafson.com/i/posts/2016-04-11/03.jpg\" alt=\"\"></p>\n<figcaption>A curb cut. <b class=\"media-container__credit\">Photo credit: <a href=\"https://www.flickr.com/photos/12155320@N00/6793281764/\">Dylan Passmore</a></b></figcaption>\n</figure>\n<p>But curb cuts also help people with a wide range of circumstances, from kids riding bicycles, to parents pushing strollers, to workers hauling heavy equipment.</p>\n<figure id=\"fig-2016-04-11-04\" class=\"media-container\">\n<p><img src=\"https://www.aaron-gustafson.com/i/posts/2016-04-11/04.png\" alt=\"Numerous needs that benefit from curb cuts: wheelchairs, strollers, bicycles, and skateboards.\"></p>\n</figure>\n<p>Similarly, high-contrast screen settings were initially made to benefit people with vision impairments. But today, many people benefit from high-contrast settings when they use a device in bright sunlight. The same is true for remote controls, automatic door openers, voice controls, and much more. Designing with constraints in mind is simply designing well.</p>\n<figure id=\"fig-2016-04-11-05\" class=\"media-container\">\n<p><img src=\"https://www.aaron-gustafson.com/i/posts/2016-04-11/05.png\" alt=\"A disability continuum from permanent (a person with one arm) to temporary (a person with an arm injury) to situational (a new parent holding a baby).\"></p>\n</figure>\n<p>By designing for someone with a permanent disability, someone with a situational disability can also benefit. For example, a device designed for a person who has one arm could be used just as effectively by a person with a temporary wrist injury or a new parent holding an infant.</p>\n<figure id=\"fig-2016-04-11-06\" class=\"media-container\">\n<p><img src=\"https://www.aaron-gustafson.com/i/posts/2016-04-11/06.png\" alt=\"Adding up the number of people in the U.S. who deal with disabilities relating to arm usage gets your to 21 million pretty quickly.\"></p>\n</figure>\n<p>Being mindful of the continuum from permanent to situational disabilities helps us rethink how our designs can scale to more people in new ways. In the United States, 26,000 people a year suffer from loss of upper extremities.</p>\n<p>But when we include people with temporary and situational disabilities, the number is greater than 20M.</p>\n<p>As a web design philosophy, progressive enhancement is right in line with the egalitarian inclusive design approach. It calls for equality of opportunity, but doesn’t require equality of outcome. It’s okay for different folks to experience your products in different ways as long as everyone can accomplish the task they set out to do.</p>\n<p>As <a href=\"http://benhoh.com/journal/2012/01/30/from-degradation-to-enhancement\">Ben Hoh eloquently put it</a></p>\n<blockquote>\n<p>[Progressive enhancement] keeps the design open to the possibilities of sexiness in opportune contexts, rather than starting with the ‘whole’ experience that must be compromised.</p>\n</blockquote>\n<p>At its essence, progressive enhancement is about being good designers. The definition of design is “to devise for a specific function or end” Classically, it means “to indicate” and comes from the medieval Latin: <i lang=\"la\">designare</i>, meaning “to mark out”.</p>\n<blockquote>\n<p>I’ve been amazed at how often those outside the discipline of design assume that what designers do is decoration—likely because so much bad design simply is decoration. Good design isn’t. Good design is problem solving.</p>\n</blockquote>\n<p>As Jeff Veen so astutely observed in <a href=\"http://www.inspireux.com/2009/01/19/good-design-isnt-decoration-good-design-is-problem-solving/\">this quote</a>, there is a lot of bad “design” out there that is more concerned with aesthetics than problem solving.</p>\n<p>When we are concerned with the user interface, it can sometimes be at the expense of the user experience.</p>\n<figure id=\"fig-2016-04-11-07\" class=\"media-container\">\n<p><img src=\"https://www.aaron-gustafson.com/i/posts/2016-04-11/07.png\" alt=\"\"></p>\n<figcaption>The <a href=\"http://impossibleobjects.com/coffeepot-for-masochists.html\">Coffeepot for Masochists by Jaques Carelman</a> famously referenced by Donald Norman in <a href=\"http://amzn.to/1RP2vB9\"><cite>Emotional Design</cite></a>.</figcaption>\n</figure>\n<p>It is possible to have something both beautiful and highly functional.</p>\n<figure id=\"fig-2016-04-11-08\" class=\"media-container\">\n<p><img src=\"https://www.aaron-gustafson.com/i/posts/2016-04-11/08.jpg\" alt=\"\"></p>\n<figcaption>A ramp embedded in staircase of <a href=\"https://en.wikipedia.org/wiki/Robson_Square\">Robson Square</a> in Vancouver, <abbr aria-label=\"British Columbia\">BC</abbr>. <b class=\"media-container__credit\">Photo credit: <a href=\"https://www.flickr.com/photos/mag3737/\">Tom Magliery</a></b></figcaption>\n</figure>\n<p><a href=\"https://24ways.org/\">24 Ways</a> is an advent calendar for web professionals. It’s a magazine of sorts, but it is both highly interactive and accessible. The site’s developers employ a handful of features from <a href=\"https://www.w3.org/TR/wai-aria/\">the ARIA spec</a> to increase the accessibility of the site.</p>\n<p>One such feature is <a href=\"https://www.w3.org/WAI/GL/wiki/Using_ARIA_landmarks_to_identify_regions_of_a_page\">ARIA landmarks</a>, which identify key areas of a web page. Such as the primary header or “banner” of a site.</p>\n<pre class=\"language-html\" tabindex=\"0\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>header</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>banner<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">role</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>banner<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>top<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>h1</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>banner_logo<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>/<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">rel</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>home<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>24 ways <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span><span class=\"token punctuation\">></span></span>to impress your friends<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span>\n    <span class=\"token punctuation\">></span></span>ma\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>h1</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>header</span><span class=\"token punctuation\">></span></span></code></pre>\n<p>The main content.</p>\n<pre class=\"language-html\" tabindex=\"0\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>main</span> <span class=\"token attr-name\">role</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>main<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>…<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>main</span><span class=\"token punctuation\">></span></span></code></pre>\n<p>Content concerned with easing navigation of the site.</p>\n<pre class=\"language-html\" tabindex=\"0\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>nav</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>navigation<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">role</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>navigation<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>menu<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>h1</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>hidden<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>Browse 24 ways<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>h1</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>ul</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>nav nav-topics<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>li</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>nav_item<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>/topics/business/<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">data-icon</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span><span class=\"token entity\" title=\"&#x2655;\">&amp;#x2655;</span><span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>Business<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>li</span><span class=\"token punctuation\">></span></span>\n    …\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>ul</span><span class=\"token punctuation\">></span></span>\n  …\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>nav</span><span class=\"token punctuation\">></span></span></code></pre>\n<p>Or even information about the content, such as copyright designations.</p>\n<pre class=\"language-html\" tabindex=\"0\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>footer</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>contentinfo<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">role</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>contentinfo<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>contentinfo_copyright<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>small</span>\n      <span class=\"token punctuation\">></span></span><span class=\"token entity\" title=\"&#169;\">&amp;#169;</span> 2005-2016 24 ways and our authors.\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>/about/#colophon<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>Colophon<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>small</span>\n    <span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>contentinfo_social<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>http://feeds.feedburner.com/24ways<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">rel</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>alternate<span class=\"token punctuation\">\"</span></span>\n      <span class=\"token punctuation\">></span></span>Grab our RSS feed<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span>\n    <span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>https://twitter.com/24ways<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">rel</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>me<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>Follow us on Twitter<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>/newsletter<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>Subscribe to our newsletter<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>footer</span><span class=\"token punctuation\">></span></span></code></pre>\n<p>Users browsing with an ARIA-aware screen reader can use these landmarks to quickly navigate through a document.</p>\n<figure id=\"figure-2016-04-11-09\">\n<audio controls>\n<source src=\"/i/posts/2016-04-11/09.ogg\" type='audio/ogg; codecs=\"vorbis\"'>\n<source src=\"/i/posts/2016-04-11/09.mp3\" type=\"audio/mpeg;\">\n<p>Listen to this <a download href=\"/i/posts/2016-04-11/09.mp3\">as an MP3</a> or <a download href=\"/i/posts/2016-04-11/09.ogg\">as an OGG</a> audio file.</p>\n</audio>\n</figure>\n<p>This example hints at a simple reality: <strong>Every interface is a conversation</strong>. We engage our users directly in an effort to inform them, entertain them, or persuade them to act in a particular way. How this conversation goes directly affects the experience our users have.</p>\n<p>Now this may sound great as a quote to share on Twitter—feel free—but it’s absolutely true. And it’s going to become even more important that we pay attention to this conversation as personal assistants—you know, “assistive technology”, it’s right there in the name—begins to play a larger part in our users’ lives.</p>\n<p>We need to consider the experience when our products are stripped to their essence. When there is no visual design to entice our users to overlook the fundamental flaws in the design of our interfaces. When there is no UI to help them manage the cognitive load of accomplishing a given task.</p>\n<p>Considering this now will put you way ahead of your competition and empower your users to do more with your products. It can seem like a daunting task when we’ve spent so much time fixated on how to enable our users to accomplish key tasks on a screen, especially in a responsive context. But what is responsive design about if not accessibility? Responsive design is concerned with presenting the most appropriate visual experience given the constraints of a screen’s size.</p>\n<p>Similarly, conversational interfaces are concerned with the way we communicate with our users, whether there is a screen or not and whether the user can see it or not. This isn’t new, it’s a challenge we’ve tackled before…</p>\n<p>Let’s take a trip back in time to one of the earliest computer games: Zork. Zork was written between 1977 and 1979. It’s a text-based adventure game that operates a lot like a game of <em>Dungeons &amp; Dragons</em>—with the program serving the role of gamemaster.</p>\n<p>As you move from location to location throughout the game, the program describes the environment and notes objects and people you can interact with. You type what you want to do and the program tells you the results of your actions.</p>\n<blockquote>\n<p>West of House<br> You are standing in an open field west of a white house, with a boarded front door.<br> There is a small mailbox here.<br><br>&gt; <strong>open mailbox</strong></p>\n</blockquote>\n<p>As this was the early days of computer gaming, you might think Zork’s interactions would be simple noun-verb combinations—“kill troll”—but Zork was more sophisticated than that. Its parser was could understand far more complex commands like “hit the troll with the Elvish sword”. This made the experience far more natural, as if you were playing a table top game with friends.</p>\n<p>Whether Zork or a webpage, <strong>every interface is a conversation</strong>. When I create a homepage, I’m talking to visitors as if we’ve just met. I’m explaining what they can do on my site (and, in some cases, why it matters). If I’m designing a product page, the conversation is a little different. I’m explaining to my users what a particular object or service is, what it does, and how it will benefit them. I’ll skip the BS sales pitch and talk honestly about the product’s benefits. If I’m designing a contact form, I want to help my users get a message to me quickly and efficiently. I’m also going to set some expectations around how long it will take me to get back to them (and, of course, I’ll need to abide by that promise). Even the humble status update is a conversation. I’m asking a question and then stepping back and letting my users speak. The floor is theirs. (But I’m probably mining what they say for data so I can market to them later.)</p>\n<p>Conversations consist of words, so it should come as no surprise that we should choose our words carefully. When talking to people, things generally go better when you talk to them like they talk to you. This is a lesson Facebook learned the (somewhat) hard way.</p>\n<p>Over the 2011 holidays, Facebook users were uploading photos like crazy. In the span of a few days, Facebook processed more photo uploads than are contained in the entirety of Flickr. Seriously, that’s a lot of photos.</p>\n<p>One unintended consequence of this deluge of photo uploads was a significant uptick in people asking Facebook to remove specific ones. Facebook received millions of these “photo reports”, but they made no sense: Moms holding babies reported for harassment, pictures of puppies reported for hate speech, and so on. Roughly 97% of these photo reports were dramatically mis-categorized.</p>\n<p>Facebook’s engineers reached out to some of the users who had reported these photos to get a bit more background regarding their submissions.</p>\n<p>At the time Facebook’s photo reporting interface provided a list of reasons users could choose from if they wanted a photo removed, but, as Facebook soon discovered, many of the reports were made because users didn’t want the photo posted for reasons other than those provided.</p>\n<p>In some cases, it was because they didn’t like how they looked in the photo. In others, it was because the photo was of an ex-partner or even a beloved pet they’d shared with an ex-boyfriend or ex-girlfriend. The existing photo reporting tool had not done a good job of accounting for these more personal reasons for wanting a photo removed, so the Facebook engineers went to work. They added a step that asked <em>How does this photo make you feel?</em> The options were simple:</p>\n<ul>\n<li>Embarrassing</li>\n<li>Upsetting</li>\n<li>Saddening</li>\n<li>Bad Photo</li>\n<li>Other</li>\n</ul>\n<p>The “other” option also provided a free-response text field to fill in.</p>\n<p>With this system in place, they found that 50% of reporters who answered the new question chose one of the provided options. That was pretty helpful, but there was still a problem: 34% of the “other” respondents were writing “It’s embarrassing” in the blank rather than choosing the “embarrassing” option already provided.</p>\n<p>What the Facebook team realized was that people were not identifying with the “embarrassing” text (or may have even thought it was referring to them, rather than assuming an implied “It’s”). A subtle shift in language was needed, so they changed the label to <em>Please describe the photo</em> and they updated the options to mirror how people actually talk:</p>\n<ul>\n<li>It’s embarrassing</li>\n<li>It’s a bad photo of me</li>\n<li>It makes me sad</li>\n</ul>\n<p>With this subtle change, they were able to increase the percentage of photo reporters who chose one of the options provided to a whopping 78%.</p>\n<p>Words matter. Even in something as simple and banal as a form, the words we choose set the tone for our users’ experiences and often have an affect on what they do… or fail to do. The words we choose matter even more in the world of headless UIs. Without visual aids to help a user see where they are in a form or to aid them in managing the cognitive load of our interfaces, every bit of label and helper text becomes even more important.</p>\n<p>When Luke Wroblewski coined “mobile first”, he told us to focus on the core purpose each and every page. He was, in essence, telling us to focus on the conversation we are having with our users. This approach pays huge dividends on small screens, but when it comes to voice-based interactions, “the page” doesn’t really exist. Experience is the sum of each individual interaction.</p>\n<p>As part of their Alexa Skills Kit, Amazon offers a ton of recommendations for designing for voice, many of which happen to be equally useful for sighted users.</p>\n<h2 id=\"write-for-people\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#write-for-people\" aria-hidden=\"true\">#</a> Write for People</h2>\n<p>We don’t author content for ourselves. We write for others. If what we write frustrated or alienates our users, we’ve failed at our job. In their profoundly helpful book <a href=\"http://amzn.to/1YpYLq1\"><cite>Nicely Said</cite></a>, Nicole Fenton and Kate Kiefer Lee offer numerous suggestions for how to write with the reader in mind:</p>\n<ul>\n<li>Be clear.</li>\n<li>Be concise.</li>\n<li>Be honest.</li>\n<li>Be considerate.</li>\n<li>Write how you speak.</li>\n</ul>\n<p>They also make the recommendation that you read your work aloud. As we head into the world of voice-based interactions, that’s beta testing!</p>\n<h2 id=\"avoid-technical-and-legal-jargon\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#avoid-technical-and-legal-jargon\" aria-hidden=\"true\">#</a> Avoid Technical and Legal Jargon</h2>\n<p>For example, if you track error codes for issues on your site, send them to <em>your developers</em>, but never present them to a user. Similarly, we should avoid legalese and write in plain language. Medium has done a great job of this with <a href=\"https://medium.com/policy/medium-terms-of-service-9db0094a1e0f#.mgexdk816\">their Terms of Service</a>.</p>\n<h2 id=\"when-requesting-feedback%2C-make-it-clear-that-the-user-needs-to-respond\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#when-requesting-feedback%2C-make-it-clear-that-the-user-needs-to-respond\" aria-hidden=\"true\">#</a> When Requesting Feedback, Make It Clear That the User Needs to Respond</h2>\n<p>In perhaps the most common form example, consider the label “First Name”. It’s not terribly conversational and doesn’t beg for a response.</p>\n<pre class=\"language-html\" tabindex=\"0\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>label</span> <span class=\"token attr-name\">for</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>first_name<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>What’s your first name?<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>label</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>input</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>first_name<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>first_name<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span></code></pre>\n<figure id=\"figure-2016-03-04-05\">\n<audio controls>\n<source src=\"/i/posts/2016-03-04/05.ogg\" type='audio/ogg; codecs=\"vorbis\"'>\n<source src=\"/i/posts/2016-03-04/05.mp3\" type=\"audio/mpeg;\">\n<p>Listen to this <a download href=\"/i/posts/2016-03-04/05.mp3\">as an MP3</a> or <a download href=\"/i/posts/2016-03-04/05.ogg\">as an OGG</a> audio file.</p>\n</audio>\n</figure>\n<p>Similarly, when there’s an error, notify them of the error and, if possible, give them some clues on how to fix it.</p>\n<pre class=\"language-html\" tabindex=\"0\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>label</span> <span class=\"token attr-name\">for</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>first_name<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>What’s your first name?<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>label</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>input</span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>first_name<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>first_name<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">aria-describedby</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>first_name-error<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>em</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>first_name-error<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n  Without your first name, I won’t know how to address you. Could you please\n  provide it?\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>em</span><span class=\"token punctuation\">></span></span></code></pre>\n<figure id=\"figure-2016-03-04-06\">\n<audio controls>\n<source src=\"/i/posts/2016-03-04/06.ogg\" type='audio/ogg; codecs=\"vorbis\"'>\n<source src=\"/i/posts/2016-03-04/06.mp3\" type='audio/mpeg; codecs=\"mp3\"'>\n<p>Listen to this <a download href=\"/i/posts/2016-03-04/06.mp3\">as an MP3</a> or <a download href=\"/i/posts/2016-03-04/06.ogg\">as an OGG</a> audio file.</p>\n</audio>\n</figure>\n<h2 id=\"when-asking-a-user-to-choose%2C-clearly-present-the-options\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#when-asking-a-user-to-choose%2C-clearly-present-the-options\" aria-hidden=\"true\">#</a> When Asking a User to Choose, Clearly Present the Options</h2>\n<p>This comes into play often when dealing with forms. Ensuring radio and checkbox controls are properly associated with their labels is critical.</p>\n<pre class=\"language-html\" tabindex=\"0\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>input</span> <span class=\"token attr-name\">type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>radio<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>agree<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>agree_yes<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">value</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>yes<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>label</span> <span class=\"token attr-name\">for</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>agree_yes<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>Yes<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>label</span><span class=\"token punctuation\">></span></span></code></pre>\n<p>You can also use the <code>fieldset</code> and <code>legend</code> elements to group the related controls, but be sure to make the <code>legend</code> focusable or associate it with the first focusable form control in order to ensure the question is read out.</p>\n<pre class=\"language-html\" tabindex=\"0\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>fieldset</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>legend</span> <span class=\"token attr-name\">tabindex</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>0<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n    Do you agree to the terms of service for this site?\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>legend</span><span class=\"token punctuation\">></span></span>\n\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>input</span> <span class=\"token attr-name\">type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>radio<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>agree<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>agree_yes<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">value</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>yes<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>label</span> <span class=\"token attr-name\">for</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>agree_yes<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>Yes<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>label</span><span class=\"token punctuation\">></span></span>\n\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>input</span> <span class=\"token attr-name\">type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>radio<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>agree<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>agree_no<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">value</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>no<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>label</span> <span class=\"token attr-name\">for</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>agree_no<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>No<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>label</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>fieldset</span><span class=\"token punctuation\">></span></span></code></pre>\n<figure id=\"figure-2016-03-04-07\">\n<audio controls>\n<source src=\"/i/posts/2016-03-04/07.ogg\" type='audio/ogg; codecs=\"vorbis\"'>\n<source src=\"/i/posts/2016-03-04/07.mp3\" type='audio/mpeg; codecs=\"mp3\"'>\n<p>Listen to this <a download href=\"/i/posts/2016-03-04/07.mp3\">as an MP3</a> or <a download href=\"/i/posts/2016-03-04/07.ogg\">as an OGG</a> audio file.</p>\n</audio>\n</figure>\n<p>We should strive for the same sort of clarity when presenting navigation options. The HTML5 <code>nav</code> element enables us to semantically identify an area of the page being used for navigation. It is not, however, always identified as being navigation when encountered naturally in the flow of the document. (It is when using role-based navigation like we saw earlier.) For that reason, it can be useful to provide an textual introduction to the section, even if you choose to visibly hide it. You might even consider expanding the text of your navigation items to provide additional context like I do on my site.</p>\n<pre class=\"language-html\" tabindex=\"0\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>nav</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>nav<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">tabindex</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>0<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">aria-labelledby</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>nav-title<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>h1</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>nav-title<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>hidden<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>Here’s what you can find on this site:<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>h1</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>ul</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>li</span><span class=\"token punctuation\">></span></span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>/about/<span class=\"token punctuation\">\"</span></span>\n        <span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>b</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>hidden<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>A Bit <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>b</span><span class=\"token punctuation\">></span></span>About<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>b</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>hidden<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span> Me<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>b</span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span>\n      <span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>li</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>li</span><span class=\"token punctuation\">></span></span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>/notebook/<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>b</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>hidden<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>Entries in My <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>b</span><span class=\"token punctuation\">></span></span>Notebook<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>li</span><span class=\"token punctuation\">></span></span>\n    …\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>ul</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>nav</span><span class=\"token punctuation\">></span></span></code></pre>\n<figure id=\"figure-2016-03-04-08\">\n<audio controls>\n<source src=\"/i/posts/2016-03-04/08.ogg\" type='audio/ogg; codecs=\"vorbis\"'>\n<source src=\"/i/posts/2016-03-04/08.mp3\" type='audio/mpeg; codecs=\"mp3\"'>\n<p>Listen to this <a download href=\"/i/posts/2016-03-04/08.mp3\">as an MP3</a> or <a download href=\"/i/posts/2016-03-04/08.ogg\">as an OGG</a> audio file.</p>\n</audio>\n</figure>\n<p><a href=\"http://www.npr.org/\">NPR</a> has multiple navigation elements on the page and they use ARIA to label them without adding additional tags. Instead, they use the <code>aria-label</code> attribute to distinguish them.</p>\n<pre class=\"language-html\" tabindex=\"0\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>nav</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>global-navigation<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">role</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>navigation<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">aria-label</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>main navigation<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n  …\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>nav</span><span class=\"token punctuation\">></span></span></code></pre>\n<h2 id=\"prompts-should-be-short%2C-while-still-being-clear\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#prompts-should-be-short%2C-while-still-being-clear\" aria-hidden=\"true\">#</a> Prompts Should be Short, While Still Being Clear</h2>\n<p>In <a href=\"https://www.stmarys-ca.edu/sites/default/files/attachments/files/On_The_Method_of_Theoretical_Physics.pdf\">a 1933 lecture at Oxford</a>, Albert Einstein famously said</p>\n<blockquote>\n<p>It can scarcely be denied that the supreme goal of all theory is to make the irreducible basic elements as simple and as few as possible without having to surrender the adequate representation of a single datum of experience.</p>\n</blockquote>\n<p>Or, as <a href=\"https://books.google.com/books?id=prDfAFjet9cC&amp;lpg=PR7&amp;ots=PA9rRog4cr&amp;dq=How%20a%20%E2%80%98Difficult%E2%80%99%20Composer%20Gets%20That%20Way&amp;pg=PA230#v=onepage&amp;q&amp;f=false\">Roger Sessions paraphrased it</a></p>\n<blockquote>\n<p>Everything should be as simple as it can be but not simpler.</p>\n</blockquote>\n<p>Clear and concise writing is the hallmark of great content. We need to resist the urge to write for writing’s sake. We write in the service our audience, not for ourselves.</p>\n<p>Government websites are some of the worst offenders in this area. Consider this lovely passage:</p>\n<blockquote>\n<p>Heavy rains throughout most of the State have given an optimistic outlook for lessened fire danger for the rest of the season. However, an abundance of lightning maintains a certain amount of hazard in isolated areas that have not received an excessive amount of rain.</p>\n</blockquote>\n<p>It could be written far more clearly as</p>\n<blockquote>\n<p>Heavy rains throughout most of the State have lessened fire danger for the rest of the season. However, lightning threatens isolated dry areas.</p>\n</blockquote>\n<p>In the UK, the Government Digital Service has made great strides overhauling excruciatingly painful content and making it easier to read and understand. One such example is <a href=\"https://gds.blog.gov.uk/2014/07/28/doing-the-hard-work-to-make-things-simple/\">their overhaul of the Accelerated Possession process</a> that allows landlords to evict a tenant.</p>\n<p>The original paper form asked for the address like this</p>\n<blockquote>\n<p>The claimant seeks an order that the defendant(s) give possession of:<br> (If the premises of which you seek possession are part of a building identify the part eg. Flat 3, Rooms 6 and 7)</p>\n</blockquote>\n<p>Before requesting the type of property concerned</p>\n<blockquote>\n<p>(‘the premises’) which is<br> ☐ a dwelling house<br> ☐ part of a dwellinghouse</p>\n</blockquote>\n<figure id=\"figure-2016-03-04-09\">\n<p><img src=\"https://www.aaron-gustafson.com/i/posts/2016-03-04/09.png\" alt=\"\"></p>\n</figure>\n<p>Clear and to the point, right?</p>\n<p>The GDS went to work and streamlined the process in plain language:</p>\n<blockquote>\n<p>What kind of property do you want to take back?<br> ◎ A self-contained house, flat or bedsit<br> ◎ Room or rooms in a property.<br> Tenants may share kitchen or bathroom</p>\n</blockquote>\n<p>Then they allow you to lookup the property or manually enter the address.</p>\n<figure id=\"figure-2016-03-04-10\">\n<p><img src=\"https://www.aaron-gustafson.com/i/posts/2016-03-04/10.png\" alt=\"\"></p>\n</figure>\n<p>While not specifically designed for the future of headless UIs, this form is prepared for their eventuality.</p>\n<h2 id=\"ask-only-necessary-questions\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#ask-only-necessary-questions\" aria-hidden=\"true\">#</a> Ask Only Necessary Questions</h2>\n<p>We show our users respect by respecting their time. Obviously straightforward, brief writing is one way we do that, but another is to reduce the time it takes to complete a task. Many forms are brimming with fields to be filled in. In some cases, the vast majority are purely optional. And while it may be easy to spot the required fields visually, bypassing them in an aural interface can be incredibly difficult.</p>\n<figure id=\"figure-2016-03-04-11\">\n<p><img src=\"https://www.aaron-gustafson.com/i/posts/2016-03-04/11.jpg\" alt=\"\"></p>\n</figure>\n<p>User experience designers have been pushing for simplified forms since… well, as long as I can remember. Users appreciate them, they tend to result in better data, and they also tend to convert better than long forms. And when it comes to voice-based interactions, they will become a necessity. No one is going to want to spend 15 minutes working their way through a 15 question registration form when all that’s required is their email address and for them to choose a password.</p>\n<figure id=\"figure-2016-03-04-12\">\n<p><img src=\"https://www.aaron-gustafson.com/i/posts/2016-03-04/12.jpg\" alt=\"\"></p>\n</figure>\n<p>On a similar note, we should avoid slicing fields into multiple parts if at all possible. For instance, you still see fields like this one, asking for a US phone number, quite often:</p>\n<figure id=\"figure-2016-03-04-13\">\n<p><img src=\"https://www.aaron-gustafson.com/i/posts/2016-03-04/13.png\" alt=\"\"></p>\n</figure>\n<p>When interacting with this construct via voice, a user will be required to supply three separate values. In order to do so, each field would require a label. Most developers only know how to label the first of those three boxes and users would be really confused if you asked them for their exchange code and line number.</p>\n<p>HTML5 introduced a host of new field types that consolidate phone numbers, dates, times, and other complex data types into single fields. Use them! As an added bonus, most enforce content validation and formatting rules for you automatically.</p>\n<h3 id=\"present-information-in-consumable-pieces\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#present-information-in-consumable-pieces\" aria-hidden=\"true\">#</a> Present Information in Consumable Pieces</h3>\n<p>Like computers, we humans have a finite amount of “working memory”. The amount of mental resources required to operate an interface is called its “cognitive load”. When the amount of information we need to process exceeds our capacity to handle it, we can miss important details, have trouble concentrating, and become frustrated.</p>\n<p>We deal with cognitive load in GUI design all the time, but in voice-based interactions, there are no visuals to act as signposts and provide reminders about where we are and what we’re doing. This is why it is critical to break complicated tasks down into simpler ones and eliminate excess noise (like non-required fields). We can also reduce cognitive load by chunking search results and other list-type content into small groups, asking the user if they want more before loading and presenting them.</p>\n<blockquote>\n<p>The top seller in the garden department is Repel Lemon Eucalyptus Natural Insect Repellent, 4-Ounce Pump Spray</p>\n<p>Would you like to hear the rest?</p>\n</blockquote>\n<hr>\n<p>As human beings, we all have special needs, but as designers and developers, it can sometimes be difficult to diagnose potential issues within our products when it comes to accessibility. Especially if we don’t typically experience that need or are unfamiliar with the tools used to address it.</p>\n<p>To that end, my colleagues have been hard at work to make it easier to enhance the accessibility of our products. The first tool I want to discuss is the F12 developer tools in Edge.</p>\n<p>As Andy Sterland mentioned in his talk, in a forthcoming release of F12, the inspector will surface accessibility information about each node in the DOM. Let’s take a look at an example:</p>\n<figure>\n<p><a href=\"https://www.youtube.com/watch?v=Z0PSK4IUAVM\">https://www.youtube.com/watch?v=Z0PSK4IUAVM</a></p>\n</figure>\n<p>Here we have the forthcoming redesign of <a href=\"http://html5accessibility.com/\">HTML5accessibility.com</a> and if I inspect the section containing the test results, I can see information about that section element. On the right hand side, you’ll notice an inspector tab dedicated to accessibility information such as the node’s accessible name, it’s role, whether it’s keyboard focusable, ARIA properties assigned to it (in this case, <code>aria-label</code>), and so on.</p>\n<p>Adding this functionality into F12 lifts the veil from the way Edge exposes the DOM to assistive technology and will go a long way toward helping us fine tune our experiences for <abbr aria-label=\"assistive technology\">AT</abbr>, including screen readers and virtual assistants.</p>\n<p>Another area where we are doing some work is within Narrator itself. When testing with screen readers, it can be quite tempting as a sighted user, to leave your screen on so you can follow along. Sadly, that action directly prohibits you from experiencing a site or application the way folks with visual impairments or in a headless UI scenario do. It can cause you to miss things or assume something makes sense when, in fact, it doesn’t.</p>\n<p>To help address that, Narrator will soon sport a “Developer Mode” that enables you to blank out a single app (such as the Edge browser window) so you can experience it without any visual access to the UI. (You can also use it for installed and hosted apps.)</p>\n<figure>\n<p><a href=\"https://www.youtube.com/watch?v=lJ-4AVxAIsc\">https://www.youtube.com/watch?v=lJ-4AVxAIsc</a></p>\n</figure>\n<p>Here we see the HTML5accessibility site again. If I flip on Developer Mode in Narrator, the Edge browser window goes black and I can see where the focus carat moves (the blue box), but I can’t see the design. For diagnostic purposes, the contents being read by Narrator are also presented as text on the screen in the position of the element (which can help with identifying where the issue was when you come back out of Developer Mode).</p>\n<p>Microsoft is committed to improving the accessibility, not only of its own products, but of the Web as a whole. These two tools are only a few of the many ways we are doing that today.</p>\n<p>Obviously, part of that is continuing to evolve and improve the accessibility of the Web for users browsing in Edge, whether they are using Narrator or other screen readers like Jaws or NVDA.</p>\n<p>But, in addition to that, Microsoft—in partnership with Carnegie Mellon and Stanford, Adobe, AT&amp;T, Dropbox, Facebook, Intuit, LinkedIn, and Yahoo—helped launch <a href=\"http://teachaccess.org/\">TeachAccess</a>. This site is an effort to address the “lack of awareness and understanding of basic accessibility issues, concepts and best practices” in the world of <abbr aria-label=\"computer science\">CS</abbr> and <abbr aria-label=\"human-computer interaction\">HCI</abbr> education. If successful, which I sincerely hope it is, it will help address the dire need we have for a more accessibility-aware workforce building for the Web.</p>\n<p>Similarly, <a href=\"https://www.microsoft.com/design\">Microsoft Design</a> has shared <a href=\"https://www.microsoft.com/design/practice\">their fantastic set of resources for improving the inclusiveness of design</a>. They have created a guide as well as a set of activities you can use to get your team into the <a href=\"http://www.inclusivedesigntoolkit.com/betterdesign2/whatis/whatis.html\">Inclusive Design</a> mindset.</p>\n<p>And in the not too distant future, we’ll be publishing a series of in-depth posts about accessibility on the <a href=\"https://blogs.windows.com/msedgedev/\">Microsoft Edge Dev Blog</a>. These will tackle topics like how we re-architected Edge for better ARIA support and name computation, working with HTML5 accessibility to improve the tests, and how we can enable automated testing in order to discover accessibility regressions before they make it into production.</p>\n<p>We do this because, with accessibility in mind, we can improve the lives of billions of people. Friends, family, neighbors, and complete strangers, all of whom deserve the opportunity to access the products we create regardless of the different ways we experience the world.</p>\n<p>Ultimately “accessibility” is not about disabilities or the technologies we use to address them, <strong>it’s about people</strong>. Sure, we’ll make it easier to look up movie times and purchase tickets to see the latest Transformers debacle, but we’ll also empower the nearly 900 million people globally—over 60% of whom are female—that are illiterate by enabling our sites to be used purely via voice, even translated in real-time into their native language and dialect.</p>\n<p>We will create new opportunities for the poor and disadvantaged to participate in a world that has largely excluded them. You may not be aware, but 80% of Fortune 500 companies—think Target, Walmart—only accept job applications online or via computers.</p>\n<p>We will enable people who have limited computer skills or who struggle with reading to apply for jobs with these companies.</p>\n<p>We will empower immigrants to read lease agreements and postal mail in languages they haven’t fully grasped yet.</p>\n<p>We will enable people with visual disabilities to vote, even on paper ballots, without human assistance.</p>\n<p>We can help bridge the digital divide and the literacy gap. We can create opportunities for people to better their lives and the lives of their families. We have the power to create more equity in this world than most of us have ever dreamed.</p>\n<p>This is an incredibly exciting time, not just for accessibility, not just for user experience, not just the Web, but for the world! I can’t wait to see how awesome you make it!</p>\n<p>Thank you!</p>\n<hr>\n<p><em>You can watch (or listen) to me present this talk (albeit with a bit of technical difficulty) <a href=\"https://channel9.msdn.com/Events/WebPlatformSummit/edgesummit2016/ES1612\">over on the Channel 9 website.</a></em></p>\n","social_text":"Here’s the text of my talk at #EdgeWebSummit: ","url":"https://www.aaron-gustafson.com/notebook/the-web-should-just-work-for-everyone/","tags":["progressive enhancement","accessibility","conferences"],"date_published":"2016-04-11T15:51:52Z"},{"id":"https://www.aaron-gustafson.com/notebook/my-top-takeaways-from-the-edge-web-summit-2016/","title":"✍🏻 My Top Takeaways From the 2016 Edge Web Summit","summary":"Earlier this week, my colleagues on the Microsoft Edge team put on the second of what has now become an annual event: <a href=\"https://web.archive.org/web/http://lanyrd.com/2016/edgesummit/\">the Edge Web Summit</a>. The format was a little different this year, with team members from across the organization delivering quick, punchy 30-minute talks on topics ranging from standard implementations to the user experience of a browser to real-time communications. I live-tweeted quite a few of the talks, but I thought I’d provide a bit of a round-up of what was revealed, discussed, and more so you can read it all in one place.","content_html":"<p>Earlier this week, my colleagues on the Microsoft Edge team put on the second of what has now become an annual event: <a href=\"https://web.archive.org/web/http://lanyrd.com/2016/edgesummit/\">the Edge Web Summit</a>. The format was a little different this year, with team members from across the organization delivering quick, punchy 30-minute talks on topics ranging from standard implementations to the user experience of a browser to real-time communications. I live-tweeted quite a few of the talks, but I thought I’d provide a bit of a round-up of what was revealed, discussed, and more so you can read it all in one place.</p>\n<ul>\n<li>Since launching Edge 8 months ago, the team has pushed 12 update releases, 128 new features, and 6,527 bug fixes!</li>\n<li>The team has launched a new, highly transparent bug tracker for Edge: <a href=\"https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/\">issues.microsoftedge.com</a>.</li>\n<li>The Edge team has done a ton of research into what specs are being used and how they are being used on the open Web. They are starting to share this information on <a href=\"https://developer.microsoft.com/en-us/microsoft-edge/platform/data/\">data.microsoftedge.com</a>. It currently consists of 2 parts: 1) <a href=\"https://developer.microsoft.com/en-us/microsoft-edge/platform/usage/\">usage data</a> from real sites that looks at not only CSS properties in use, but values too; and 2) <a href=\"https://developer.microsoft.com/en-us/microsoft-edge/platform/catalog/\">a catalog of available APIs</a> and a detailed analysis of browser support, down to specific configuration and property values.</li>\n<li>Hot on the tails of <a href=\"https://developer.microsoft.com/en-us/microsoft-edge/tools/remote/\">RemoteIE</a> opening up for Linux users, RemoteEdge is coming soon! Jacob Rossi showed <a href=\"https://twitter.com/aarongustafson/status/717022717652828163\">a screenshot of an Edge instance running on Azure, within Chrome</a>. So cool!</li>\n<li><a href=\"https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html#tts-section\">Text-to-speech</a> directly from within JavaScript!</li>\n<li>The <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API\">Fetch API</a>!</li>\n<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon\">Beacons</a> as an alternative to blocking JavaScript requests for telemetry data: <code>navigator.sendBeacon( uri, data )</code>.</li>\n<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API\">Web notifications</a>!</li>\n<li><a href=\"https://www.w3.org/TR/WOFF2/\">WOFF 2</a> font support for better compression and faster downloads/decompression!</li>\n<li>The team is currently prototyping and investigating <a href=\"https://www.w3.org/TR/service-workers/\">Service Workers</a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Push_API\">Push Notifications</a>, <a href=\"https://www.w3.org/TR/shadow-dom/\">Shadow DOM</a>, <a href=\"https://www.w3.org/TR/custom-elements/\">Custom Elements</a>, <a href=\"https://www.w3.org/Payments/\">Web Payments</a>, <a href=\"https://www.w3.org/community/webassembly/\">Web Assembly</a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import\">ES Modules</a>.</li>\n<li>Cortana in Edge has gotten some major upgrades, such as being able to “Ask Cortana” about an image to get more information (like a recipe for the cookies you saw on Pinterest that did’t include a link).</li>\n<li>Microsoft open-sourced <a href=\"https://github.com/MicrosoftEdge/css-usage\">the CSS crawler powering their data portal</a> so other browser vendors can run it too.</li>\n<li><a href=\"https://en.wikipedia.org/wiki/FIDO_Alliance\">FIDO</a>-based login (like <a href=\"http://windows.microsoft.com/en-us/windows-10/getstarted-what-is-hello\">Windows Hello</a>) is coming to the Web!</li>\n<li><a href=\"http://windows.microsoft.com/en-us/windows/hear-text-read-aloud-narrator\">Microsoft’s Narrator</a> screen reader now supports a “Developer Mode” that blanks out the current app (such as your browser window) in order to enable you to more easily debug accessibility issues.</li>\n<li>The F12 tools in Edge now enable you to view the previously mysterious <a href=\"https://www.paciellogroup.com/blog/2015/01/the-browser-accessibility-tree/\">Accessibility Tree</a> in addition to allowing you to drill more deeply into the various properties of an element that relate to its accessibility.</li>\n</ul>\n<p>I didn’t take a ton of notes in the second half of the day as I was prepping for <a href=\"https://channel9.msdn.com/Events/WebPlatformSummit/edgesummit2016/ES1612\">my own session on accessibility</a>, but other highlights included building &amp; debugging <a href=\"https://blogs.windows.com/msedgedev/2016/03/17/preview-extensions/\">extensions for Edge</a> (tldr; you can easily port Chrome extensions) and cool things you can do using <a href=\"https://www.microsoft.com/en-us/windows/Continuum\">Continuum</a>.</p>\n<p>Overall, the event was incredibly informative and has me really excited about the work the Edge team is doing and where the browser is going. The new stuff that‘s ready for prime time will be out for the public in <a href=\"https://blogs.windows.com/windowsexperience/2016/03/30/windows-10-anniversary-update-brings-new-experiences-and-developer-opportunity/\">the Anniversary Update of Windows 10</a> this Summer, but some of it is has already landed in <a href=\"https://insider.windows.com/\">Windows Insider</a> builds.</p>\n","social_text":"My top takeaways from the 2016 Edge Web Summit: ","url":"https://www.aaron-gustafson.com/notebook/my-top-takeaways-from-the-edge-web-summit-2016/","tags":["browsers","conferences"],"date_published":"2016-04-06T19:18:15Z"},{"id":"https://www.aaron-gustafson.com/notebook/an-event-apart-nashville-2016-day-one/","title":"✍🏻 An Event Apart Nashville 2016, Day One","summary":"Unfortunately, I was unable to spend Tuesday in Nashville for An Event Apart (for reasons that will be revealed in about a month), but I did catch Monday and it was amazing.","content_html":"<p>Unfortunately, I was unable to spend Tuesday in Nashville for An Event Apart (for reasons that will be revealed in about a month), but I did catch Monday and it was amazing.</p>\n<p>The esteemed <a href=\"http://www.zeldman.com/\">Jeffrey Zeldman</a> kicked the day off with a talk entitled <em>Designing with Web Standards in 2016</em>. A theme he touched on repeatedly was that none of the problems we are facing in web design today are new problems. It’s a topic near and dear to my heart, something I wrote about in the closing chapter of <a href=\"http://adaptivewebdesign.info/2nd-edition/\"><cite>Adaptive Web Design’s</cite> Second Edition</a> and <a href=\"/notebook/learn-from-the-past-enhance-for-the-future/\">recently spoke about at EnhanceConf in London</a>. He knocked this one out of the park and my head was nodding so much my neck began to hurt.</p>\n<p>Next up was <a href=\"http://www.webstandards.org/about/members/\">my former WaSP colleague</a> <a href=\"https://rachelandrew.co.uk/\">Rachel Andrew</a> to give us the skinny on CSS Grid Layouts. This is an amazing spec that I’ve always struggled to understand fully (despite the fact that’s i’ve written a Javascript polyfill for it). Rachel made it crystal clear and got me very excited about the future of layout on the Web.</p>\n<p><a href=\"http://jensimmons.com/\">Jen Simmons</a> dropped some serious CSS-related design knowledge bombs that perfectly complimented Rachel’s talk. She discussed Flexbox, CSS Shapes, Multi-column layout, viewport units and more, demonstrating how they can be used right now to progressively enhance the design of your sites.</p>\n<p>After lunch, <a href=\"http://bradfrost.com/\">Brad Frost</a> took to the stage to talk about Style Guides. I only caught the last half—I’ll admit to doing some last-minute rehearsing in the hallway—but the bits I did catch were good. I’ve seen his Atomic Design talk a few times, which this one builds on. In this talk he touches on a lot of the atomic design concepts, but he also talked a lot more about workflow and the role of the front-end developer. No doubt the evolution of this talk has come in large part through writing <a href=\"http://atomicdesign.bradfrost.com/\">a book on Atomic Design</a> and in hosting <a href=\"http://styleguides.io/podcast/\">a podcast with Anna Debenham on website style guides</a>.</p>\n<p>Next, I was given the opportunity to share some thoughts and advice on designing and building. My talk, <em>The Features of Highly Effective Forms</em>, evolved out of several earlier talks on building forms. With this one, I wanted to strike a little more balance between the nuts and bolts of building forms and the hows and whys of building better forms.</p>\n<p>The deck, <a href=\"http://www.slideshare.net/AaronGustafson/the-features-of-highly-effective-forms-an-event-apart-nashville-2016\">which I’ve posted to SlideShare</a>, doesn’t stand on its own quite as well as some of my other forms decks simply because the talk contained a lot of storytelling I chose not to pair with slides—instead opting for an black screen so folks could focus—but I did call out the salient points. I’ve begun writing up some of the recommendations as part of my <a href=\"/notebook/series/forms/\">Modern Web Forms Best Practices series</a> and will continue to do so in the future. And one of the stories I told, which I highly recommend you check out, had to do with <a href=\"/notebook/consider-how-your-forms-read/\">a lesson Facebook learned in managing how users report offensive photos</a>.</p>\n<p><a href=\"https://bigmedium.com/\">Josh Clark</a> wrapped the day up with a discussion of the future of interface as things move from digital back to physical. He talked about a lot of really cool new tech that has me excited about the future, including <a href=\"https://google.github.io/physical-web/\">the Physical Web</a>, which Josh had running as a live demo. I wonder if anyone noticed I had a beacon running too ;-)</p>\n<p>All in all, day one was a blast. As always, Jeffrey, Eric, <a href=\"https://www.linkedin.com/in/toby-malina-6247a028\">Toby</a>, and <a href=\"http://www.escapadeproductions.com/\">Marci</a> do an awesome job programming their events. I’m really bummed I could not stick around to see <a href=\"http://valhead.com/\">Val</a>, <a href=\"https://twitter.com/grigs\">Jason</a>, <a href=\"http://www.kryshiggins.com/\">Krystal</a>, <a href=\"http://meyerweb.com/\">Eric</a>, <a href=\"http://braintraffic.com/\">Kristina</a>, and <a href=\"http://cameronmoll.com/\">Cameron</a> rock it out though. I’m sure it was amazing.</p>\n<p>You can check out attendees thoughts from the event by <a href=\"https://twitter.com/search?q=%23aeansh&amp;src=typd\">searching Twitter using the #aeansh hashtag</a>.</p>\n","url":"https://www.aaron-gustafson.com/notebook/an-event-apart-nashville-2016-day-one/","tags":["conferences","forms","progressive enhancement","the future","user experience","web design"],"date_published":"2016-03-16T14:54:59Z"},{"id":"https://www.aaron-gustafson.com/notebook/planning-adaptive-interfaces-the-workshop/","title":"✍🏻 Planning Adaptive Interfaces: The Workshop","summary":"For the last few years I’ve been running a workshop alternately titled “Planning Adaptive Interfaces” or “Beyond Responsive”, depending on the conference. It’s been one of my favorite workshops to run for a number of reasons, but before I get into that, let me explain what it is and how it works.","content_html":"<p>For the last few years I’ve been running a workshop alternately titled “Planning Adaptive Interfaces” or “Beyond Responsive”, depending on the conference. It’s been one of my favorite workshops to run for a number of reasons, but before I get into that, let me explain what it is and how it works.</p>\n<p>I think we all recognize how much Ethan’s seminal article <a href=\"http://alistapart.com/article/responsive-web-design\">“Responsive Web Design”</a> (and <a href=\"https://abookapart.com/products/responsive-web-design\">his follow-up book</a>) shook up our industry. It changed the way we look at visual design and kindled (or in some cases re-kindled) an interest in catering an experience to mobile devices. But simply incorporating responsive design’s three core strategies—fluid grids, flexible media, media queries—is not the goal; meeting our user’s needs is. Responsive design is not an end in itself… it’s just the beginning.</p>\n<p>We need to embrace the heterogenous nature of the Web—myriad connected devices with vastly different screen sizes (if they even have screens), network connectivity, and capabilities in use by countless individuals, each with their own special needs—and craft experiences that will work anywhere at any time. We need to build robust systems that adapt in ways far beyond aesthetics. I designed this workshop to explore the rich variety of use cases that often get overlooked in the course of building web projects and to show how we can begin considering them as early as possible.</p>\n<p>When I was starting out, I gave “workshops” that basically amounted to a half-day or (worse) a full day for folks to listen to me blather on about one topic or another. People liked them, but I wouldn’t call them fun. And, in hindsight, I question how much value people got from an extended survey of what’s possible without the opportunity to put that knowledge to use. Workshops should encourage attendees to get their hand dirty.</p>\n<p>I kick this workshop off with a relatively brief discussion of the considerations that we should be aware of—beyond screen size and pixel density. I also provide examples of how to adapt interfaces so they rise to meet our customers’ needs. Then I throw out a list of common interface patterns—modals, tabs, etc.—and turn the floor over to the attendees, asking them to build small teams that each examine a single pattern in detail with these considerations in mind. They then spend the rest of the workshop planning out how that interface would adapt to consider factors like accessibility, screen dimensions, device capabilities, JavaScript availability, and so on. All the while, I circulate among the groups, asking and answering questions, pressing them to go a little further with each iteration. Some teams sketch, some prototype, and all spend a lot of time debating, which is awesome!</p>\n<p>I leave the last hour or so for a group discussion of what each team’s accomplished. It gives them a chance to talk through their approach, what they learned, what their pain points were, and how they overcame them. Not does it celebrate their work, but it helps the other attendees discover novel ways to approach these common UI constructs.</p>\n<p>It’s been a blast and I have learned so much from the teams I’ve coached. Each workshop is completely different because each group of attendees is completely different. I’ve run it with groups ranging from 12 to 120, for internal teams at large companies to mixed audiences from all over the world. Everyone who has attended one of these workshops has brought a unique perspective and helped us all get better at our jobs. That’s been one of the best parts of this experience for me.</p>\n<p>If a workshop like this sounds up your alley, I’ll be giving it a few more times in 2016. Your next opportunity will be at <a href=\"http://enhanceconf.com/workshop.html\">EnhanceConf in London in early March</a>. Later in the year, I’ll be giving it as part of <a href=\"https://buildright.io/maker-series/2016/aaron-gustafson\">Sparkbox’s Build Right: Maker Series</a>. I’d love the opportunity to work with you if you can make it!</p>\n","url":"https://www.aaron-gustafson.com/notebook/planning-adaptive-interfaces-the-workshop/","tags":["conferences","progressive enhancement","responsive web design","pattern libraries","empathy","Adaptive Web Design"],"date_published":"2016-02-21T23:56:05Z"},{"id":"https://www.aaron-gustafson.com/notebook/progressive-enhancement-gets-a-conference/","title":"✍🏻 Progressive Enhancement Gets a Conference","summary":"I interviewed EnhanceConf’s organizer, Simon McMcanus.","content_html":"<p>On March 4th, I’ll be in London to give the closing talk at <a href=\"http://enhanceconf.com/\">EnhanceConf</a>, the first conference dedicated progressive enhancement. Over the last few months, I’ve been talking to the conference’s organizer, <a href=\"https://twitter.com/simonmcmanus\">Simon McManus</a>, quite a lot. He’s put a lot of thought into the conference and I thought it might be interesting to interview him so he could share his motivations and hopes for the event.</p>\n<p><b class=\"interview__attribution\">Me:</b> As a philosophy, progressive enhancement has been around for more than a dozen years. Why do you think it needs a conference now?</p>\n<p><b class=\"interview__attribution\">Simon:</b> I first started thinking about EnhanceConf in 2014. At the time, Tom Dale had declared progressive enhancement dead and I had just heard Henrik Joreteg telling his Single Page Story.I was hearing lots of talk about progressive enhancement being hard and expensive when my experience showed quite the opposite.</p>\n<p>It’s been fascinating to watch how views have changed since, Tom Dale now loves progressive enhancement and Henrik likes to do as much of his rendering at build time as possible.</p>\n<p>As the web continues to grow in weird and wonderful ways techniques like progressive enhancement just keep giving more and more value.</p>\n<p><b class=\"interview__attribution\">Me:</b> What does progressive enhancement mean to you?</p>\n<p><b class=\"interview__attribution\">Simon:</b> I try to build applications that provide the best possible experience to the end user. Regardless of who they are, where they are or what device they are using. For me, that means using progressive enhancement in every part of the stack.</p>\n<p>Progressive enhancement is about so much more than whether an app work with JavaScript turned off, realising we don’t have control over the runtime environment and building applications in the most robust way possible is far more important.</p>\n<p><b class=\"interview__attribution\">Me:</b> Do you think it’s an approach that everyone should use on every web project?</p>\n<p><b class=\"interview__attribution\">Simon:</b> I guess that depends on what you mean by a web project. In my mind to work on the web, you have to give up that illusion of control. You need to assume as little as possible about the device or user and for me that fits very well with progressive enhancement.</p>\n<p>Web technologies transcend the capabilities of any one device with their reach alone, it seems strange to me when people use them but don’t take full advantage.</p>\n<p><b class=\"interview__attribution\">Me:</b> If a web designer or developer is only passingly familiar with progressive enhancement and is considering coming to the event, what should they expect to get out of it?</p>\n<p><b class=\"interview__attribution\">Simon:</b> These are probably the people with the most to benefit from EnhanceConf.</p>\n<p>We are going to start the day looking at why progressive enhancement is still important on the modern web, so that should provide a nice intro for anyone who is not already familiar with progressive enhancement.</p>\n<p><b class=\"interview__attribution\">Me:</b> What about a seasoned practitioner who already applies this philosophy to their work?</p>\n<p><b class=\"interview__attribution\">Simon:</b> Originally, EnhanceConf was a very selfish idea. I wanted to learn more about the tools and techniques being in use in industry: Over the last few years contracting I’ve seen many in use in that just weren’t surfacing at conferences.</p>\n<p>EnhanceConf is about the state of the art in progressive enhancement, I’d like to think EnhanceConf will be the perfect event for such people to come together and learn from one another.</p>\n<p><b class=\"interview__attribution\">Me:</b> What if the person thinks progressive enhancement is a waste of time?</p>\n<p><b class=\"interview__attribution\">Simon:</b> I’d really like to encourage these people to come along to the event, I think it’s important their voice is a part of this discussion so that we can learn from each other and move forward together.</p>\n<p>With an open mind I think they should have a really good time, they might hear some viewpoints they disagree with, but there will be lots of opportunities for Q&amp;A to discuss those topics in detail.</p>\n<p><b class=\"interview__attribution\">Me:</b> As a hyper-focused event, there’s a risk of it being a bit of an echo chamber. Have you taken steps to mitigate that possibility?</p>\n<p><b class=\"interview__attribution\">Simon:</b> I hope by being a hyper-focused event we can move beyond the bikeshedding that so often surrounds such discussions.</p>\n<p>But yes. I have taken a couple of steps to mitigate an echo chamber:</p>\n<ol>\n<li>\n<p><strong>Duplicate content</strong>\nIf you take all the talks about progressive enhancement and put them all on the same day you would end up with a fair amount of similar content. There will be no generic talks about progressive enhancement at EnhanceConf. Each talk will dig into real examples to provide unique tales from the trenches.</p>\n</li>\n<li>\n<p><strong>Preaching to the choir</strong>\nI’ve been reaching out to lots of different communities around London to bring as many voices into the discussions as possible. The other day I was at the Meteor London meetup talking about EnhanceConf. Tableflip (the organisers) even bought tickets for their whole company!</p>\n</li>\n</ol>\n<p>The event is also being recorded so anyone not at the event will be able to watch all the talks and Q&amp;A.</p>\n<p><b class=\"interview__attribution\">Me:</b> You’re modeling the format of the event—four acts, each comprising three twenty-minute talks and a group Q&amp;A session—on Responsive Day Out. What was the draw of that approach?</p>\n<p><b class=\"interview__attribution\">Simon:</b> Yes, we get to hear lots of different viewpoints and then bring the speakers together for a Q&amp;A. This should allow new viewpoints to emerge from discussions and join related threads. It also means we get to spend each section focusing on a particular area.</p>\n<p><b class=\"interview__attribution\">Me:</b> Can you talk a bit about your speaker selection process?</p>\n<p><b class=\"interview__attribution\">Simon:</b> I had lots of people in mind to talk at EnhanceConf. To ensure we heard a wide range of viewpoints we also opened a call for proposals to which we received some superb submissions.</p>\n<p>I was fortunate to have some trusted advisors who helped me out throughout the process. I’m really pleased with how the line-up turned out.</p>\n<p><b class=\"interview__attribution\">Me:</b> When the event is done and dusted, what are you hoping will happen?</p>\n<p><b class=\"interview__attribution\">Simon:</b> I’d quite like a holiday! :D</p>\n<p>But seriously, I hope we can demonstrate how to maximise the benefits and minimise any costs associated with progressive enhancement.</p>\n<p>If at the end of EnhanceConf we had a reasoned and nurturing community able to take discussions forward that would be a fine outcome. :)</p>\n<p><b class=\"interview__attribution\">Me:</b> Do you think there will be another EnhanceConf?</p>\n<p><b class=\"interview__attribution\">Simon:</b> EnhanceConf is the first conference I’ve organised. It’s been an unfathomable amount of work and financial risk to get this far and it’s mostly been done in my evenings and weekends. That said, it has been quite fun.</p>\n<p>I’d like to do some traveling this year, maybe 2018?</p>\n<hr>\n<p>EnhanceConf will take place March 4th at the <a href=\"http://www.thersa.org/\">RSA House</a> in London. <a href=\"http://enhanceconf.com/tickets.html\">Tickets are available on the conference website</a>. I will also be giving <a href=\"http://enhanceconf.com/workshop.html\">a one-day workshop entitled Planning Adaptive Interfaces</a> on March 3rd as part of the conference. Seating is limited.</p>\n<p>EnhanceConf is offering a small number of educational scholarships. For more information on the scholarships and how to apply, check out <a href=\"https://simonmcmanus.wordpress.com/2016/02/14/enhanceconf-scholarship/\">Simon’s post about the program</a>.</p>\n","url":"https://www.aaron-gustafson.com/notebook/progressive-enhancement-gets-a-conference/","tags":["progressive enhancement","conferences"],"date_published":"2016-02-15T15:00:51Z"},{"id":"https://www.aaron-gustafson.com/notebook/beyond-responsive-workshops-this-may/","title":"✍🏻 Beyond Responsive Workshops this May","summary":"A lot fo my work lately has been consulting and working with teams to help them to establish or improve upon their responsive strategies.","content_html":"<p>\n\tA lot fo my work lately has been consulting and working with teams to help them to establish or improve upon their responsive strategies.</p>\n<p>\n\tI love this sort of work and I live for helping teams and individuals tackle the thorny issues (in code or processes) that make responsive projects a challenge. For a lot of small companies, it can be a challenge to pull ogether enough budget to fly me in for a few days of private working sessions, which is why I am such a huge fan of running public workshops… especially über-affordable ones like I am leading this May.</p>\n<p>\n\tThe first will be on my home turf in Chattanooga, Tennessee on May 2nd and I will be co-leadiing the workshop with my esteemed colleague <a href=\"http://bradfrostweb.com\">Brad Frost</a>. It’s the first workshop from our successful <a href=\"http://codeandcreativity.com\">Code & Creativity</a> event series and should be a heck of a lot of fun. There are a few tickets left for <a href=\"http://www.eventbrite.com/e/responsive-design-and-beyond-registration-11005454611\">$399 each on Eventbrite</a>.</p>\n<p>\n\tThe second workshop will be in Düsseldorf, Germany on May 21st. There are a handful of <a href=\"https://ti.to/beyondtellerrand/2014/\">tickets still available for €349 (VAT included)</a> and a ticket also gets you into the incredible <a href=\"http://2014.beyondtellerrand.com/\">Beyond Tellerrand</a> conference which runs on the 19th & 20th. I’ve spoken at this conference twice before and it is one of only a handful of events in the world I enthusiatically recommend attending.</p>\n<p>\n\tHere’s a rough idea of what I’ll be covering in the two workshops:</p>\n<blockquote>\n<p>\n\t\tResponsive web design has taken our industry by storm and with good reason: it helps us improve our reach with less effort. But incorporating responsive design is not the goal, meeting our user’s needs is. Responsive design is not an end in itself… it’s just the beginning.</p>\n<p>\n\t\tWe need to embrace the heterogenous nature of the web—myriad web-enabled devices with vastly different dimensions, screen sizes, networks, and capabilities in use by countless individuals, each with their own special needs—and craft experiences that will work anywhere at any time. We need to build robust systems that adapt in ways far beyond aesthetics.</p>\n<p>\n\t\tEach workshop with a discussion of a number of considerations that we should be aware of, beyond screen size and pixel density, and provide examples of how to adapt our interfaces so they rise to meet our customers’ needs. Then he’ll turn it over to you to propose gnarly design and/or interface challenges you are struggling with. Once everyone’s challenges are collected, attendees will be given the opportunity to form small groups around each and you will spend a portion of the day working on solutions while Aaron mentors each group and pushes you to think more about accessibility, alternate interaction methods, slow networks, and other considerations.</p>\n<p>\n\t\tThe workshop will wrap up with brief presentations from each group followed by a an open question and answer session.</p>\n</blockquote>\n<p>\n\tI hope you’ll join me in Chattanooga or Düsseldorf next month. Bring your questions and your challenges and let’s dig in.</p>\n","url":"https://www.aaron-gustafson.com/notebook/beyond-responsive-workshops-this-may/","tags":["responsive web design","conferences","presentations"],"date_published":"2014-04-15T14:39:00Z"},{"id":"https://www.aaron-gustafson.com/notebook/paper-dolls/","title":"✍🏻 Paper Dolls","summary":"Jon Hicks came to SXSW in 2005 and made quite an impression on many of us. It’s no surprise, he’s an incredibly nice chap.","content_html":"<p>\n<a href=\"http://hicksdesign.co.uk\">Jon Hicks</a> came to SXSW in 2005 and made quite an impression on many of us. It’s no surprise, he’s an incredibly nice chap.</p>\n<p>\n\tWell, when Jon could not make it to the festival in 2006, <a href=\"http://glendathegood.com\">Glenda Sims</a> filled the void with a paper doll named <a href=\"http://www.hicksdesign.co.uk/journal/the-adventures-of-flat-hicks\">Flathicks</a>. The idea was that, through Flathicks, Jon would be able to be photographed at parties, talks, and the like, so it’d be like he was there.</p>\n<figure>\n<img alt=\"\" src=\"http://farm1.staticflickr.com/152/422373546_3c76924ab8.jpg\"/> <figcaption>\n<p>\n\t\tShaun Inman, Flathicks and Jason Santa Maria.<br/>\n<em>Photo credit: <a href=\"http://www.flickr.com/photos/vistamonster/\">Brian Warren</a></em></p>\n</figcaption></figure>\n<p>\n\tFlathicks quickly took on a life of his own and his adventures went far beyond SXSW. We handed him off, from person to person, as we traveled around the world, back to our homes, to other conferences, etc. In fact, he joined Kelly & me in Sydney, Australia in late 2007 at Web Directions South and then flew back with us to San Francisco to attend An Event Apart. You can <a href=\"http://www.flickr.com/photos/tags/flathicks\">follow his adventures on Flickr</a> or even check out <a href=\"http://www.flickr.com/photos/flathicks\">his personal Flickr account</a>.</p>\n<hr/>\n<p>\n\tKelly has had a bit of bad luck when it comes to SXSW.</p>\n<p>\n\tThe first year she went, 2006, she got food poisoning just as we boarded the plane to go to the festival. She ended up spending the majority of her time in our hotel room, recovering, and missed most of the festivities. She did manage to muster enough strength to attend the conference for a bit to see <a href=\"http://adactio.com\">Jeremy Keith</a> & me deliver “<a href=\"http://domscripting.com/presentations/sxsw2006/slides/\">How to Bluff Your Way in DOM Scripting</a>”, attend <a href=\"http://www.flickr.com/photos/72043907@N00/112505959/in/photolist-aWC6V\">the first Web Standards Project meeting</a>, and then attend a party or two, so the trip was not a complete bust for her. But it wasn’t nearly as enjoyable as it should have been.</p>\n<p>\n\tKelly planned to return with me in 2007, but caught the flu about a week before and had to cancel. SXSW is a well-renown incubator of illness (“Southby Scurvy” as we affectionately call it) and Kelly did not want to be patient zero that year, so she bowed out.</p>\n<p>\n\tCoincidentally, Jeremy’s wife Jessica was unable to make it in 2007 either. So Glenda, being the incredibly sweet woman that she is, made us paper dolls of Kelly and Jessica. She dubbed them “Kellydoll” and “Jessidoll” as she didn’t feel “flat” was appropriate as part of a woman’s nickname.</p>\n<figure>\n<img alt=\"\" src=\"http://farm1.staticflickr.com/129/420681341_3064a271bb.jpg\"/> <figcaption>\n<p>\n\t\tKellydoll and Jessidoll attending the appropriately-named “Flatstock” (a poster festival).</p>\n</figcaption></figure>\n<p>\n\tAs with Flathicks, Kellydoll & Jessidoll had amazing adventures at the festival and <a href=\"http://www.flickr.com/search/?w=86537625@N00&amp;q=kellydoll\">had their photo taken with everyone who missed them</a>.</p>\n<p>\n\tI carried Kellydoll with me everywhere, her head poking out of my backpack. This turned out to be a bad idea however as it facilitated her escape. I must have been boring her.</p>\n<figure>\n<img alt=\"\" src=\"http://farm1.staticflickr.com/129/420683446_071bcfd67b.jpg\"/> <figcaption>\n<p>\n\t\tKellydoll enjoying a rib plate at Ironworks.</p>\n</figcaption></figure>\n<p>\n\tI realized Kellydoll was missing on the last night of SXSW, on the way back from dinner at Ironworks, where she had been the subject of a few photos. It was raining, so I had been rushing back to my hotel room when I saw another potential opportunity to photograph her. When I reached back to get her, I realized she was gone.</p>\n<p>\n\tI spent the next hour and a half combing Ironworks, Red River Road, First Street and a few of the other lanes around the Convention Center, retracing my steps, looking for any sign of Kellydoll. I came up empty-handed & sulked back to the hotel, depressed that I’d lost my little paper wife.</p>\n<p>\n\tI never did find Kellydoll, so she and the real Kelly never got to meet. Maybe she’s still out there having adventures. Or maybe she ran off with Flathicks when my back was turned.</p>\n<p>\n\tI never trusted that guy.</p>\n<hr/>\n<p>\n<em>It’s hard to believe that <span class=\"caps\">SXSW</span> Interactive is 20 years old. Reading through the remarks and stories in <a href=\"http://www.fastcompany.com/3026402/oral-history-sex-drugs-apps-and-sxswi\">this awesome piece from Fast Company</a>, I felt inspired to share some of my <span class=\"caps\">SXSW</span> stories. This is the third.</em></p>\n","url":"https://www.aaron-gustafson.com/notebook/paper-dolls/","tags":["conferences","personal"],"date_published":"2014-03-02T10:15:00Z"},{"id":"https://www.aaron-gustafson.com/notebook/the-hampton/","title":"✍🏻 The Hampton","summary":"For a few years in the late aughts, the place to stay during SXSW Interactive was the Hampton Inn at San Jacinto and 2nd. There were 3 main reasons for this: 1) proximity to the Convention Center, 2) free breakfast, and 3) happy hour…","content_html":"<p>\n\tFor a few years in the late aughts, <em>the</em> place to stay during SXSW Interactive was the Hampton Inn at San Jacinto and 2nd. There were 3 main reasons for this: 1) proximity to the Convention Center, 2) free breakfast, and 3) happy hour and a spacious veranda on which to enjoy it.</p>\n<p>\n\tI’m sure a handful of the other nearby hotels offered similar amenities (though perhaps not the veranda), but for whatever reason we all seemed to gravitate to the Hampton.</p>\n<p>\n\tOver the years, I had a the pleasure of meeting and enjoying both company and conversation with dozens of the web’s brightest minds, but my favorite memories from that particular hotel revolved around food.</p>\n<p>\n\tBreakfast was always a big draw and quickly began to take on an almost tailgating-esque significance. We’d meet in the breakfast area, load up on breakfast meats, eggs, and pastries and then compare notes and plan out our day. And if nothing interesting was on deck for a bit, we’d pull out our DSes and engage in some pretty epic races in Mario Kart. <a href=\"http://shauninman.com\">Shaun Inman</a> usually won, but <a href=\"http://simplebits.com\">Dan Cederholm</a>, <a href=\"http://jasonsantamaria.com\">Jason Santa Maria</a>, and <a href=\"http://robweychert.com\">Rob Weychert</a> were pretty good too. I rarely placed.</p>\n<p>\n\tWe didn’t compete for anything but bragging rights. And occasionally bacon.</p>\n<figure>\n<img alt=\"\" src=\"http://farm1.staticflickr.com/56/110503016_6ffba12458.jpg\"/> <figcaption>\n<p>\n\t\tMolly Holzschlag, Faruk Ateş, Jeremy Keith, and Jessica Spengler preparing to take on the day.<br/>\n<em>Photo credit: <a href=\"http://www.flickr.com/photos/msjen/111134496/\">Jenifer Hanen</a>.</em></p>\n</figcaption></figure>\n<hr/>\n<p>\n\tOn particularly awesome Hampton institution was wine & cheese. But before I get into what it was and its significance, let me first talk about its lovely host.</p>\n<p>\n\tWhen I attended SXSW 2005, I didn’t know anyone. Sure, I followed a bunch of people’s blogs and articles, but I didn’t really <em>know</em> any of them. I went to SXSW hoping to change that and was successful beyond my wildest dreams. One of the most amazing people I met at SXSW has never been a household name even though she was wildly ahead of her time: <a href=\"http://blackphoebe.com/\">Jenifer Hanen</a> (or Ms. Jen as she’s affectionately known).</p>\n<p>\n\tWhen I first saw Me. Jen, I stopped dead in my tracks. The woman who stood before me looked remarkably familiar, but I could not for the life of me figure out why. She looked back at me with what I can only imagine was a perfect mirror of the perplexed expression I was wearing.</p>\n<p>\n<span class=\"initial quote\">“</span>I know you. But why?” we asked in near unison.</p>\n<p>\n\tAfter rooting around in our past lives a bit, we realized that we had met at SXSW nearly a decade earlier when we were both journalists covering the music festival. Not only that, but we had met through a mutual friend… <a href=\"http://reybee.com\">Rey Roldan</a> (a pivotal figure in <a href=\"/notebook/filemaker/\">my first story</a>).</p>\n<p>\n\tMystery solved, we filled each other in on what we’d been up to since we’d last met and how it was we both had come to work on the web. Ms. Jen was incredibly interested in the future of mobile photography. In 2005, she was running around snapping photos on her <a href=\"http://www.gsmarena.com/nokia_7610-703.php\">Nokia 7610</a>. She was always ahead of the curve, realizing the latent potential of mobile while most of us were still grumbling about IE6.</p>\n<p>\n\tMs. Jen had been coming to SXSW for quite some time and got to know the staff at the Hampton, who routinely hooked her up with one of the suites meaning she had a couch, a coffee table, and a ’fridge… three important facilities if you plan on hosting a wine & cheese party. Which is exactly what she and some friends decided to do in 2006.</p>\n<figure>\n<img alt=\"\" src=\"http://farm1.staticflickr.com/36/111134496_f30274bf27.jpg\"/> <figcaption>\n<p>\n\t\tJon Hicks, Veerle Pieters, and Kenneth Himschoot at the inaugural wine & cheese party.<br/>\n<em>Photo credit: <a href=\"http://www.flickr.com/photos/msjen/111134496/\">Jenifer Hanen</a>.</em></p>\n</figcaption></figure>\n<p>\n\tWhen I arrived at the party, I was greeted by Ms. Jen playing the attentive hostess. I was given a glass of wine and plopped myself down on the floor and introduced myself to the little group Jen had gathered. It was a small group, but the conversations were fantastic and I met a number of amazing individuals whose friendships I value tremendously: <a href=\"https://twitter.com/khimscho\">Kenneth Himschoot</a>, <a href=\"http://theadnostic.com/\">Lauren Isaacson</a>, <a href=\"https://twitter.com/chrisdavidmills\">Chris Mills</a>, <a href=\"http://veerle.duoh.com/\">Veerle Pieters</a>, <a href=\"http://wordridden.com/\">Jessica Spengler</a>, and <a href=\"http://stephanietroeth.com/\">Steph Troeth</a>.</p>\n<p>\n\tMs. Jen’s wine & cheese parties quickly became a staple of our annual pilgrimage to SXSW Interactive. Each year, more people came until the crowd got so large you literally could not fit another human being in the room. Standing room only… including on top of the bed and some of the other pieces of furniture. The room would be filled with incredible people you wanted to see and interact with, but was also overcrowded and uncomfortable.</p>\n<p>\n\tIn a lot of ways, Ms. Jen’s wine & cheese parties were mirroring what was happening with the festival as a whole. But that’s another story for another day.</p>\n<hr/>\n<p>\n<em>It’s hard to believe that <span class=\"caps\">SXSW</span> Interactive is 20 years old. Reading through the remarks and stories in <a href=\"http://www.fastcompany.com/3026402/oral-history-sex-drugs-apps-and-sxswi\">this awesome piece from Fast Company</a>, I felt inspired to share some of my <span class=\"caps\">SXSW</span> stories. This is the third.</em></p>\n","url":"https://www.aaron-gustafson.com/notebook/the-hampton/","tags":["conferences","personal"],"date_published":"2014-02-28T10:19:00Z"},{"id":"https://www.aaron-gustafson.com/notebook/hallways/","title":"✍🏻 Hallways","summary":"I stopped attending SXSW as a journalist in 2000. I’d gotten pretty burned out running the magazine, so I decided to take a break and focus on my web work. Little did I know, 5 years later I’d be back because a site I built was a…","content_html":"<p>\n\tI stopped attending SXSW as a journalist in 2000. I’d gotten pretty burned out running the magazine, so I decided to take a break and focus on my web work. Little did I know, 5 years later I’d be back because a site I built was a finalist in the Interactive Awards.</p>\n<p>\n\tAt the time, the panels for Interactive occupied roughly 3-4 rooms upstairs, in the far corner of the Convention Center. We were the AV club to Music & Film’s jocks and cool kids in the high school cafeteria. But, to me, walking into that corner was like swimming up to a coral reef teeming with schools of incredible fish. I recognized so many of our industry’s luminaries as I floated through: <a href=\"http://meyerweb.com\">Eric Meyer</a> … <a href=\"http://zeldman.com\">Jeffrey Zeldman</a> … <a href=\"https://signalvnoise.com/writers/jf\">Jason Fried</a> … <a href=\"http://tantek.com\">Tantek Çelik</a> … These were people whose blog posts and articles had helped me solve issues I was having, people that helped me hone my craft, people that were indirectly responsible for me being there as a finalist in the awards. And unlike the reef fish, they didn’t spook when I saddled up to them and said hello.</p>\n<figure>\n<img alt=\"\" src=\"/i/posts/2014-02-27/hallways.jpg\"/> <figcaption>\n<p>\n\t\tYounger versions of ourselves: Ian Lloyd, Ethan Marcotte, Andy Clarke, Andy Budd, Glenda Sims, Jeffrey Zeldman, Richard Rutter, Shaun Inman, Rob Weychert, Faruk Ateş, Jon Hicks, and more sprawled on the floor.<br/>\n<em>Photo credit: <a href=\"http://www.flickr.com/photos/jflint/6460626/\">Jeremy Flint</a>.</em></p>\n</figcaption></figure>\n<p>\n\tEveryone was incredibly friendly and I was amazed when they invited me to join them as they sat on the floor and leaned against the walls between and during some of the sessions. The hallway became our meeting place and I began to meet more amazing people, many of whom were just starting to make a splash in our then-young industry: <a href=\"http://adactio.com\">Jeremy Keith</a>, <a href=\"http://andybudd.com\">Andy Budd</a>, <a href=\"http://clagnut.com\">Richard Rutter</a>, <a href=\"http://ma.tt\">Matt Mullenweg</a>, <a href=\"http://jasonsantamaria.com\">Jason Santa Maria</a>, <a href=\"http://hicksdesign.co.uk\">Jon Hicks</a>, <a href=\"http://robweychert.com\">Rob Weychert</a>, <a href=\"http://unstoppablerobotninja.com\">Ethan Marcotte</a>, <a href=\"http://lloydi.com/\">Ian Lloyd</a>, <a href=\"http://cindyli.com/\">Cindy Li</a>, and <a href=\"http://farukat.es/\">Faruk Ateş</a> to name but a few. Together we bonded on those dirty, industrially-carpetted conventions center floors and those relationships became friendships and grew into new businesses and ventures.</p>\n<p>\n\tI am incredibly thankful for the opportunity I had to go to SXSW that year. I’m thankful for the carpet and the hallways. And I am ever so thankful for the friends I made there, friends that I still hold dear nearly 10 years later.</p>\n<hr/>\n<p>\n<em>It’s hard to believe that SXSW Interactive is 20 years old. Reading through the remarks and stories in <a href=\"http://www.fastcompany.com/3026402/oral-history-sex-drugs-apps-and-sxswi\">this awesome piece from Fast Company</a>, I felt inspired to share some of my SXSW stories. This is the second.</em></p>\n","url":"https://www.aaron-gustafson.com/notebook/hallways/","tags":["conferences","personal"],"date_published":"2014-02-27T22:09:00Z"},{"id":"https://www.aaron-gustafson.com/notebook/filemaker/","title":"✍🏻 Filemaker","summary":"I started attending SXSW in 1997 as a music journalist. I ran a small indie music &amp; entertainment rag in Florida at the time and was invited by one of my publicist friends (I’m looking at you, Rey ) to crash in his room and check out…","content_html":"<p>\n\tI started attending SXSW in 1997 as a music journalist. I ran a small indie music & entertainment rag in Florida at the time and was invited by one of my publicist friends (I’m looking at you, <a href=\"http://www.reybee.com/\">Rey</a>) to crash in his room and check out the festival/conference. I scored a press badge and saw some amazing shows, but Interactive wasn’t really on my radar.</p>\n<p>\n\tTwo years later, my little publication became a media sponsor of SXSW and I got a Platinum badge, granting me access to everything SXSW had to offer. I didn’t attend any of the Interactive panels—I was far more interested in seeing Tom Waits’ first live performance in 10 years, meeting Richard Linklater and Robert Rodriguez, and interviewing Janeane Garofalo—but I did check out the trade show.</p>\n<p>\n\tAt the time, the trade show was mixed: music, film & interactive all lumped in together. (The conferences overlapped more at the time as well.) It was an interesting time because many labels were experimenting with interactive CDs and such, but MP3s and digital downloads were still pretty uncommon. Napster had just launched that year and only one major-label band at the time—They Might Be Giants—had the foresight to issue a digital-only album: <a href=\"http://en.wikipedia.org/wiki/Long_Tall_Weekend\"><cite>Long Tall Weekend</cite></a>.</p>\n<p>\n\tAmid all of the music and film-related hubub, I made my way over to the one corner devoted to Interactive’s vendors. While perusing the wares and looking for cool swag (of which there was none), I discovered a guy hocking something called a “Content Management System”. It sounded marvelous. I had been doing static (framed, of course) HTML versions of my magazine for about two years at that point and the idea of being able to enter and maintain the content in a more dynamic and flexible format was mind-blowing. I have no idea what the software was called, but the back-end was Filemaker. I bought it, of course. It wasn’t until I got back to my hotel rom that I realized Filemaker was Mac-only. I was on Windows. Cue the sad trombone.</p>\n<p>\n\tI never once ended up installing or using that early CMS, but it sowed a seed in my mind of the possibilities for a website and I began to take my practice of web design more seriously. I taught myself PHP and MySQL and just kept going. And I owe it all to that guy and his Filemaker CMS.</p>\n<hr/>\n<p>\n<em>It’s hard to believe that SXSW Interactive is 20 years old. Reading through the remarks and stories in <a href=\"http://www.fastcompany.com/3026402/oral-history-sex-drugs-apps-and-sxswi\">this awesome piece from Fast Company</a>, I felt inspired to share some of my SXSW stories. This is the first.</em></p>\n","url":"https://www.aaron-gustafson.com/notebook/filemaker/","tags":["conferences","personal"],"date_published":"2014-02-26T20:44:00Z"},{"id":"https://www.aaron-gustafson.com/notebook/designing-with-empathy-at-btconf/","title":"✍🏻 Designing with Empathy at #btconf","summary":"A little over a month ago I had the pleasure of speaking at Beyond Tellerrand in Düsseldorf, Germany. It was my second time speaking (and attending) the conference and I can honestly say it’s easily one of my favorites. Marc Thiele does…","content_html":"<p>\n\tA little over a month ago I had the pleasure of speaking at <a href=\"http://2013.beyondtellerrand.com/\">Beyond Tellerrand</a> in Düsseldorf, Germany. It was my second time speaking (and attending) the conference and I can honestly say it’s easily one of my favorites. <a href=\"http://marcthiele.com/\">Marc Thiele</a> does an amazing job organizing the event and <a href=\"http://2013.beyondtellerrand.com/speakers\">the speaker roster was nothing short of amazing</a>.</p>\n<p>\n\tIn an effort to continue spreading my wings beyond talking about code, I delivered a talk about empathy. Empathy is something I’ve written about here before <a href=\"https://blog.easy-designs.net/archives/egalitarianism-and-progressive-enhancement/\">both explicitly</a> and as an underlying motivation for progressive enhancement and overall usability. Empathy is something I feel we need deperately in our lives and especially in our work—empathy for both our users <em>and</em> our co-workers.</p>\n<p>\n\tAnyway, Marc was kind enough to <a href=\"http://vimeo.com/70018634\">record the talk</a>. <a href=\"index.html#comments\">Let me know what you think</a>.</p>\n<figure id=\"btconf-2013-video\">\n  <lite-youtube videoid=\"9hS0Us3YhlU\" style=\"background-image: url('https://i.ytimg.com/vi/9hS0Us3YhlU/hqdefault.jpg');\" params=\"\">\n    <a href=\"https://www.youtube.com/watch?v=9hS0Us3YhlU\" class=\"lty-playbtn\" title=\"Play Video\">\n      <span class=\"lyt-visually-hidden\">Play Video</span>\n    </a>\n  </lite-youtube>\n<figcaption>Video of my talk “Designing with Empathy” from Beyond Tellerrand</figcaption></figure>\n<figure id=\"btconf-2013-slides\">\n<figure class=\"video-embed video-embed--16x9\"><iframe class=\"video-embed__video\" src=\"http://www.slideshare.net/slideshow/embed_code/22079990?rel=0\" frameborder=\"0\"></iframe></figure>\n<figcaption>Slides from “Designing with Empathy” as delivered at Beyond Tellerrand</figcaption></figure>\n","url":"https://www.aaron-gustafson.com/notebook/designing-with-empathy-at-btconf/","tags":["empathy","presentations","conferences"],"date_published":"2013-07-15T06:11:00Z"},{"id":"https://www.aaron-gustafson.com/notebook/orlando-in-a-whirlwind/","title":"✍🏻 Orlando in a Whirlwind","summary":"Last week was a bit of a whirlwind: Kelly and I flew to Orlando, co-hosted a vegan chili cook-off with the Filament Group and lost the coveted trophy Kelly so lovingly created, launched a refresh of the website for the Registrar’s…","content_html":"<p>\n\tLast week was a bit of a whirlwind: Kelly and I flew to Orlando, co-hosted <a href=\"http://veganchilicookoff2013.com/\">a vegan chili cook-off with the Filament Group</a> and lost <a href=\"http://instagram.com/p/X0tOE_B3FF/\">the coveted trophy</a> Kelly so lovingly created, launched a refresh of the website for the <a href=\"http://registrar.sewanee.edu\">Registrar’s Office at Sewanee University</a>, and I delivered a new talk and workshop at <a href=\"http://bdconf.com/2013/orlando\">Breaking Development</a>.</p>\n<p>\n\tTo be honest, I was a little nervous about my talk, <a href=\"http://bdconf.com/2013/orlando/schedule#aarongustafson\">Designing with Empathy</a>. I am a developer. I live and breathe code and this was my first attempt at delivering a completely code-free talk. And one on a fairly touchy-feely subject to boot. To my amazement, the talk seemed to resonate with the audience. I received lots of excellent questions and had a handful of in-depth conversations with attendees after stepping off the dais. I could not be more pleased with the talk’s reception and am looking forward to delivering it a few more times this year at <a href=\"http://beyondtellerrand.com/\">Beyond Tellerrand in Düsseldorf, Germany next month</a> and <a href=\"http://reasons.to/\">Reasons to Be Creative in Brighton, UK in September</a>. You can check out <a href=\"http://www.slideshare.net/AaronGustafson/designing-with-empathy-breaking-development-orlando-2013-18497481\">my deck on Slideshare</a> (or thumb through it below). Luke W also took <a href=\"http://www.lukew.com/ff/entry.asp?1715\">some excellent notes during my session</a>. The video is forthcoming.</p>\n<figure class=\"video-embed video-embed--16x9\"><iframe class=\"video-embed__video\" src=\"http://www.slideshare.net/slideshow/embed_code/18497481?rel=0\" frameborder=\"0\"></iframe></figure>\n<p>\n\tI also debuted a new workshop in Orlando: <a href=\"http://bdconf.com/2013/orlando/workshops#aarongustafson\">Planning Adaptive Interfaces</a>. The idea was borne out of the corporate training work I’ve been doing and <a href=\"http://retreats4geeks.com\">Retreats 4 Geeks</a>’ mentoring sessions: A brief introduction to progressive enhancement and adaptive considerations followed by actual hands-on group activities where teams plan and sketch out different ways to experience common website conventions, taking into account screen real estate, browser capabilities, assistive technology and more. The response to the workshop was excellent as well and I appreciated the opportunity to get into the trenches with the teams and help them tackle complex cross-device problems. I’ll be taking this workshop on the road to <a href=\"https://www.ux-lx.com/speaker.html?n=aarongustafson#workshop\">UXLx in Lisbon, Portugal</a> and <a href=\"http://bynd.it/btconf2013wsaaron\">Beyond Tellerrand in Düsseldorf, Germany</a> next month and a few other as-yet-unannounced conferences in Europe this Fall.</p>\n<figure>\n<img alt=\"\" src=\"http://farm9.staticflickr.com/8105/8655160799_fca2b1f9c2.jpg\"/><figcaption>Small groups planning adaptive interfaces</figcaption></figure>\n","url":"https://www.aaron-gustafson.com/notebook/orlando-in-a-whirlwind/","tags":["presentations","conferences","empathy"],"date_published":"2013-04-16T15:51:00Z"},{"id":"https://www.aaron-gustafson.com/notebook/funkas-tillgaenglighetsdagar-2012/","title":"✍🏻 Funkas Tillgänglighetsdagar 2012","summary":"A few weeks back, I flew to Sweden to deliver a talk on progressive enhancement for mobile devices at Funkas Tillgänglighetsdagar , an accessibility conference whose name I will probably always butcher. I really enjoyed getting to know…","content_html":"<p>\n\tA few weeks back, I flew to Sweden to deliver a talk on progressive enhancement for mobile devices at <a href=\"http://www.funkanu.se/Tillganglighetsdagar\">Funkas Tillgänglighetsdagar</a>, an accessibility conference whose name I will probably always butcher. I really enjoyed getting to know the Funka Nu team, meeting new people, and seeing how countries like Sweden, Norway, and Germany are addressing issues of accessibility in both public and private spheres. It was also nice to see validation for some of the thinking and work we’ve done around issues of accessibility.</p>\n<p>\n\tAnyway, I thought I’d share my slide deck from the talk in case you’re interested. It was picked up yesterday and today as “Top Presentation of the Day” on <a href=\"http://slideshare.net\">SlideShare</a>, so it’s either really useful or a slow time for uploads. Regardless, enjoy!</p>\n<figure class=\"video-embed video-embed--16x9\"><iframe class=\"video-embed__video\" src=\"http://www.slideshare.net/slideshow/embed_code/12595251\" frameborder=\"0\"></iframe></figure>\n","url":"https://www.aaron-gustafson.com/notebook/funkas-tillgaenglighetsdagar-2012/","tags":["accessibility","presentations","conferences"],"date_published":"2012-05-02T22:17:00Z"},{"id":"https://www.aaron-gustafson.com/notebook/crafting-rich-experiences-with-progressive-enhancement-at-beyond-telle/","title":"✍🏻 Crafting Rich Experiences with Progressive Enhancement at Beyond Tellerrand","summary":"After a whirlwind trip to 4 countries (5 if you count Florida), I am back to a rock-solid internet connection and got a moment to take a breath and post my slides from the first stop on the trip: Beyond Tellerrand in Düsseldorf, Germany.","content_html":"<p>\n\tAfter a whirlwind trip to 4 countries (5 if you count Florida), I am back to a rock-solid internet connection and got a moment to take a breath and post my slides from the first stop on the trip: <a href=\"http://2011.beyondtellerrand.com\">Beyond Tellerrand</a> in Düsseldorf, Germany.</p>\n<p>\n\tThis talk is an update of the short session I gave at WebVisions in Portland earlier this year. It covers all the topics I address in <a href=\"http://adaptivewebdesign.info\">my book</a> and more:</p>\n<figure class=\"video-embed video-embed--16x9\"><iframe class=\"video-embed__video\" src=\"http://www.slideshare.net/slideshow/embed_code/10260712\" frameborder=\"0\"></iframe></figure>\n<p>\n\tIt was an awesome trip and I met a bunch of great people there as well as at my <a href=\"http://www.flickr.com/photos/aarongustafson/6440772971/in/photostream\">Adaptive Web Design workshops in Amsterdam and Reykjavik</a>. I took a ton of photos (many of which are slowly finding their way onto <a href=\"http://instagr.am/p/YkLQx/?ref=nf\">Instagram</a> and <a href=\"http://www.flickr.com/photos/aarongustafson/6400185227/in/photostream\">Flickr</a>) and also enjoyed spending three weeks on the road with <a href=\"http://www.flickr.com/photos/aarongustafson/6359601615/in/photostream\">my loving wife and partner, Kelly</a>. It was the perfect way to spend our 10-year anniversary. Now it’s back to the grindstone so we can bang out a few more projects before the new year. W00t!</p>\n","url":"https://www.aaron-gustafson.com/notebook/crafting-rich-experiences-with-progressive-enhancement-at-beyond-telle/","tags":["progressive enhancement","presentations","conferences"],"date_published":"2011-12-12T21:05:00Z"},{"id":"https://www.aaron-gustafson.com/notebook/retreat-remembered/","title":"✍🏻 Retreat, remembered","summary":"First off, this post has been way too long in the making. I should have written it a couple months ago, but that’s the thing about running things, you don’t always have time to come up for air. Anyway, without further ado…","content_html":"<p>\n\tFirst off, this post has been way too long in the making. I <em>should</em> have written it a couple months ago, but that’s the thing about running things, you don’t always have time to come up for air. Anyway, without further ado…</p>\n<figure>\n<img alt=\"\" src=\"/i/posts/2011-07-14/retreat-1-group.jpg\"/></figure>\n<p>\n\tAs many of you know, we officially launched our new training series, <a href=\"http://retreats4geeks.com\">Retreats 4 Geeks</a>, with a HTML5 & CSS3 retreat co-led by Eric Meyer and yours truly. The event was held in an amazing cabin on the side of a mountain in Gatlinburg, TN and, as you can probably guess, it was downright magical.</p>\n<p>\n\tI know, it’s my event series, so of course I’m gonna gush, but it really was so much better than even I could have imagined, and here’s why:</p>\n<h2>\n\tThe location</h2>\n<p>\n\tYeah, some people laughed when they heard we were going to run a tech event in Gatlinburg, but it really was a fantastic location. Sure, it’s a tiny little town tucked in the middle of the mountains, but that “isolation” (though we had crystal clear cell reception and wifi with decent bandwidth) really helped us get the daily stress out of our heads so we could focus on learning and collaborating. Plus, where else can you go for a tasting of moonshine, try a deep-fried Oreo and then walk down the road for a game of “Hillbilly Golf”?</p>\n<h2>\n\tThe venue</h2>\n<p>\n\tKelly outdid herself when she found our lodge. It was just the right size, offered gorgeous views, and had plenty of amenities to keep us all relaxed and happy for the duration of the retreat. As an added bonus, there was even a family of bears in the neighborhood that paid us a visit to everyone’s disbelief and delight! (Yes, <a href=\"http://www.flickr.com/photos/7525476@N05/5613726758/in/pool-1694282@N22\">the bears are now on Flickr</a>.)</p>\n<h2>\n\tMy co-lead</h2>\n<p>\n\tEric Meyer is an amazing guy. Not only is he one of the smartest people working on the web today, but he’s also an incredibly nice fellow and a helluvalot of fun to hang out with. His sessions were awesome, often mind-blowing (for me too), and very practical. He was also an excellent mentor (as though I expected any less of him) and was really the perfect co-lead for our inaugural retreat. Plus I had a great time working on <a href=\"http://meyerweb.com/eric/tools/matrix/\">our silly little CSS transforms tool</a>.</p>\n<h2>\n\tLast, but by no means least, the people</h2>\n<p>\n\tI am by no means blowing smoke when I say that we had an incredible group of attendees. Everyone got along really well and they were just damn fun to be around, whether we were in the classroom, sitting around the dinner table, or trying to guide our very tall van through the gauntlet of a low-roofed parking garage. I was so sad to bid them farewell on the final day (and I know they were too). If it’s any testament as to how awesome they are, I’m actually getting misty thinking about them.</p>\n<p>\n\tAll told, we felt the retreat was a huge success and are looking forward to organizing next year’s events (to be announced soon!). I’d like to personally extend a huge thank you to Kelly and Jessica for organizing the whole thing and keeping everything running smoothly, to Eric for being an incredible co-trainer, and to all of the attendees for taking a chance on a new idea and making it an incredible experience for all involved.</p>\n<p>\n\tOh, and one last thing, for the hands-on project on the third day of the event, our attendees built <a href=\"http://r4g.co/events/2011/html5-css3/project/\">a pretty stellar tribute to Johnny Cash</a> using all of the HTML5 & CSS3 knowledge they gained over the previous two days. I was really happy with the fruits of their labor, especially considering they organized themselves and managed to build it all in less than a day. Great job yet again guys!</p>\n","url":"https://www.aaron-gustafson.com/notebook/retreat-remembered/","tags":["conferences","mentoring","HTML","CSS"],"date_published":"2011-07-14T10:51:00Z"},{"id":"https://www.aaron-gustafson.com/notebook/webvisions-wrapped/","title":"✍🏻 WebVisions wrapped","summary":"I just wrapped my presentation at WebVisions and have posted the slides for my talk, titled “Learning to Love Forms,” up on SlideShare . I have also embedded them below (though the formatting is a bit off on some of the longer sidebars).","content_html":"<p>I just wrapped my presentation at WebVisions and have posted the slides for my talk, titled “Learning to Love Forms,” up on <a href=\"http://www.slideshare.net\">SlideShare</a>. I have also embedded them below (though the formatting is a bit off on some of the longer sidebars).</p>\n<p>I’d like to thank everyone who attended and especially those who asked the challenging questions. Hopefully this was a good start to my campaign for getting people to embrace forms instead of running from them.</p>\n<p>For those of you who couldn’t attend, enjoy the slides. I will post the audio for the session as soon as it’s available.</p>\n<p>\n<object data=\"https://s3.amazonaws.com:443/slideshare/ssplayer.swf?id=45589&amp;doc=learning-to-love-forms-webvisions-07-21033\" height=\"348\" type=\"application/x-shockwave-flash\" width=\"425\">\n<param name=\"src\" value=\"https://s3.amazonaws.com:443/slideshare/ssplayer.swf?id=45589&amp;doc=learning-to-love-forms-webvisions-07-21033\"/>\n</object>\n</p>\n","url":"https://www.aaron-gustafson.com/notebook/webvisions-wrapped/","tags":["web forms","conferences"],"date_published":"2007-05-04T16:58:21Z"},{"id":"https://www.aaron-gustafson.com/notebook/and-now-the-fun-begins/","title":"✍🏻 And now the fun begins","summary":"Today marked the last day of my “work” here at SXSW and now it’s play time. It’s only been two days of the conference, but it seems like I’ve already done a week’s worth of stuff. My two sessions both went extremely well from my…","content_html":"<p>Today marked the last day of my “work” here at SXSW and now it’s play time. It’s only been two days of the conference, but it seems like I’ve already done a week’s worth of stuff. My two sessions both went extremely well from my perspective and the feedback I’ve received has also been very good so far.</p>\n<p><a href=\"http://www.flickr.com/photos/kazuhito/417221254/\"><img alt=\" \" class=\"feature\" src=\"http://farm1.static.flickr.com/187/417221254_a680683936_m.jpg\" title=\"Aaron and Sarah by Kazuhito\"/></a></p>\n<p><span class=\"initial quote\">“</span>Ruining the User Experience” was yesterday and I think <a href=\"http://www.adaptivepath.com/aboutus/sarah.php\">Sarah</a> and I worked really well together. It flowed well and felt really tight, so I was extremely happy. And being that we were speaking in the “rock and roll room” to a much larger audience than I would have expected, I’m very pleased it went so well. I think we managed to pack a lot of good information into the 25 minutes and nailed the time pretty well dead-on. I do kind of wish the session had been a bit longer as I would have liked to guide the attendees through a few more examples, but I still think we managed to open a lot of eyes (and minds), so I am happy about that. And we left them wanting more, which is never a bad thing either.</p>\n<p>I’m not sure exactly how helpful they will be for people (at least not until the audio is posted), but <a href=\"http://www.slideshare.net/AaronGustafson/ruining-the-user-experience-sxsw-07\">I have uploaded the slides for the session</a>. For those who saw me give a session by the same name at The <abbr title=\"Asynchronus JavaScript and XML\">AJAX</abbr> Experience in October, this is a real departure from what you saw. I tore the old one to shreds and built this new one from scratch. Attendees at AjaxWorld in New York next week will be treated to a solo 45-minute version of this session with a few added examples.</p>\n<p>My second session, “The Future of JavaScript” was another 25-minute “power session” and I think it went equally well. It was much more geeky than most of my other sessions have been, with tons of code samples demonstrating some of the really cool stuff in JavaScript 1.6 and 1.7. As <a href=\"http://ejohn.org\">John Resig</a> mentioned to us at bowling tonight, <a href=\"http://andrewdupont.net\">Andrew</a> and I were going through the features of the two language upgrades “pretty rapid-fire,” but I think it worked well as a power session because we came in fast and hit the packed room with a lot of new information. I think extending it to 45 or 60 minutes would have been way too overwhelming. As promised, I have posted <a href=\"http://www.slideshare.net/AaronGustafson/the-future-of-javascript-sxsw-07\">the slides from that session</a> as well, so folks can copy the examples we used and play around with them on their own.</p>\n<p>I plan to relax a bit now that the important stuff is over. It was a little too rainy to hit the parties tonight after the bowling shindig, but I hope to engage in a bit more after-hours socialization tomorrow and Tuesday.</p>\n","url":"https://www.aaron-gustafson.com/notebook/and-now-the-fun-begins/","tags":["conferences","presentations","JavaScript","user experience"],"date_published":"2007-03-26T05:24:03Z"},{"id":"https://www.aaron-gustafson.com/notebook/heading-south/","title":"✍🏻 Heading South","summary":"Tomorrow morning I’ll be making my annual pilgrimage to SXSW (a.k.a. geek camp). In between catching up with friends, drinking, and checking out some of the excellent panels, I will be co-presenting two 25-minute “power sessions,” a new…","content_html":"<p>Tomorrow morning I’ll be making my annual pilgrimage to <a href=\"http://2007.sxsw.com/interactive/\">SXSW</a> (a.k.a. geek camp). In between catching up with friends, drinking, and checking out some of the excellent panels, I will be co-presenting two 25-minute “power sessions,” a new format for the conference.</p>\n<p>On Saturday afternoon, <a href=\"http://www.adaptivepath.com/aboutus/sarah.php\">Sarah Nelson</a> of Adaptive Path will join me to present the latest iteration of “<a href=\"http://2007.sxsw.com/interactive/programming/panels/?action=show&amp;id=IAP060214\">Ruining the User Experience</a>,” which I debuted at The <abbr title=\"Asynchronus JavaScript and XML\">AJAX</abbr> Experience in Boston last October. The session has been completely revamped and I am hopeful it will inspire more developers to work in tandem with user experience folks and vice versa.</p>\n<p>The following afternoon, <a href=\"http://andrewdupont.net\">Andrew Dupont</a> and I will be talking about “<a href=\"http://2007.sxsw.com/interactive/programming/panels/?action=show&amp;id=IAP060230\">The Future of JavaScript</a>.” We’ll be talking at length about the advancements in JavaScript 1.7 and other assorted geekery.</p>\n<p>Apart from those sessions, which I obviously need to attend, I haven’t really made up my mind as to what I want to see. There’s just <a href=\"http://2007.sxsw.com/interactive/programming/panels/\">so many good sessions</a>. I guess I’ll figure it out when I get there. I am <a href=\"http://web.archive.org/web/20071021034347/bowling.avalonstar.com/\">looking forward to bowling</a> though.</p>\n","url":"https://www.aaron-gustafson.com/notebook/heading-south/","tags":["conferences","presentations","travel"],"date_published":"2007-03-08T01:46:32Z"},{"id":"https://www.aaron-gustafson.com/notebook/an-event-apart-nyc-post-mortem/","title":"✍🏻 Belated post mortem: An Event Apart NYC","summary":"I know, I know, I haven’t posted anything in the aftermath of AEA - NYC . Things have been a little busy on the homefront (new roof, kitchen remodelling and the firing of a lazy, lying contractor) and since moving into the new offi ce…","content_html":"<p><img alt=\" \" class=\"feature\" src=\"http://static.flickr.com/56/136066759_17497fe37c_o.png\"/></p>\n<p>I know, I know, I haven’t posted anything in the aftermath of AEA-<abbr title=\"New York City\">NYC</abbr>. Things have been a little busy on the homefront (new roof, kitchen remodelling and the firing of a lazy, lying contractor) and since moving into the new offi\n<script src=\"https://blog.easy-designs.net/scripts/tinymce/jscripts/tiny_mce/themes/advanced/langs/en.js\" type=\"text/javascript\"></script>\nce, I haven’t really felt much like bringing my laptop up to blog in the evening (instead choosing to enjoy spending my time with Kelly). Sorry.</p>\n<p>To create a nice triumvirate of excuses, I’ll toss in this one too: I’ve been spending a considerable amount of time off-line, working on a chapter for an as-yet unannounced web standards  book (more on that soon) in addition to plying my technical editing skills to the latest edition (3rd, I believe) of Jen’s <cite><a href=\"http://www.amazon.com/gp/product/0596004842?link_code=as2&amp;camp=1789&amp;tag=easydesign-20&amp;creative=9325\">Learning Web Design</a></cite> (note: the link still goes to the 2nd edition) and Andy’s <cite><a href=\"http://www.amazon.com/gp/product/0321410971?&amp;link_code=as2&amp;camp=1789&amp;tag=easydesign-20&amp;creative=9325\">Transcending CSS: The Fine Art of Web Design</a></cite>.</p>\n<p>Anyway, so, An Event Apart…<br/> I had such a great time at this conference. Not only was it a pleasure to speak at, but I met some awesome folks and got to spend more time with <a href=\"http://zeldman.com\">Jeffrey</a>, <a href=\"http://meyerweb.com\">Eric</a>, <a href=\"http://jasonsantamaria.com\">Jason</a>, <a href=\"http://subtraction.com\">Khoi</a>, <a href=\"http://tantek.com\">Tantek</a>, and <a href=\"http://robweychert.com\">Rob</a>. It was also great to spend more time with <a href=\"http://meyerweb.com/eric/thoughts/2006/07/01/culmination/\">(Dr.) Kat</a> and Carolyn (Eric’s family) and to finally meet <a href=\"http://roguelibrarian.com\">Carrie</a> and Ava (Jeffrey’s family) and Liz (Jason’s bride). I also got to hang out a bit more with <a href=\"http://www.danielmall.com/\">Dan</a> & <a href=\"http://www.polymermusic.com/\">Jon</a> (both formerly of Pixelworthy). They are two truly fantastic gents and they played their roles as the AEA go-fers/whipping boys with gusto. Seriously, these guys rock. From purely a social aspect, AEA was fantastic; like an intimate SXSW.</p>\n<p>As for the sessions, I thought they were incredible. I thoroughly enjoyed all of Jeffrey’s talks. He is such a great speaker, capable of moving an audience with even the simplest turn of phrase. It was nice to finally see Eric giving a CSS talk too. I’ve only seen him talk microformats (at SXSWi 2005) and general web standards stuff relating to search (on one of my panels at SXSWi 2006). I was delighted to find that he and I tackle layout problems very much the same way… making my methods not seem quite so mad. “Stan” was also a fantastic solo act (I’ve only seen him on panels) and he walked us through how the <cite>ALA</cite> redesign came to be. Being that <a href=\"/notebook/adding-more-to-my-plate/\">I came on board</a> just after the relaunch, it was nice to get some of the backstory.</p>\n<p>The guest speakers were also a lot of fun to listen to. <a href=\"http://zefrank.com\">ze frank</a> had me in tears I was laughing so hard and I had no idea just how much work Khoi puts into blogging and other non-<cite>NYT</cite>-related activities. It’s amazing he gets any sleep at all. <a href=\"http://tantek.com/presentations/2006/07/what-are-microformats/\">Tantek’s microformats talk</a> was also good because it helped amalgamate a lot of the disperate (and not always clear) information available on microformats into something usable, allowing me to take it beyond the simple hcard and hcal stuff I’ve been using for the last couple months.</p>\n<p>I also thought the design and code critiques were excellent. The design one could have been a little more hmm, how to put this… <em>aggressive?</em> But design is such a subjective area, it’s hard to critique without some semblance of a creative brief or at least an understanding of the audience. Eric, Tantek and I were a little less forgiving in the code critique, but I think we brought up some really important points and kept it educational for everyone. Tantek’s got <a href=\"http://tantek.com/log/2006/07.html#d27t1218\">a nice write-up of the proceedings</a> over at his site.</p>\n<p>In all, I had a great time at An Event Apart. You may be thinking <em>sure, but you were a speaker</em>, but I am positive I would have enjoyed it equally as much as an attendee. There were great people, great talks and the food was fantastic.</p>\n<p>If you feel so inclined, you can check out <a href=\"http://www.flickr.com/photos/aarongustafson/sets/72157594194839742/\">my photostream from the event</a> as well as the <a href=\"http://www.flickr.com/groups/aeanyc2006/\">AEA-<abbr title=\"New York City\">NYC</abbr> group photos</a> over at Flickr.</p>\n","url":"https://www.aaron-gustafson.com/notebook/an-event-apart-nyc-post-mortem/","tags":["conferences","presentations","web standards"],"date_published":"2006-08-11T00:17:50Z"}]}