larlet-fr-david-cache/cache/dc941db5d707f2708939323d9cd93442/index.md

title: Designing with Progressive Enhancement
url: http://sixtwothree.org/posts/designing-with-progressive-enhancement
hash_url: dc941db5d707f2708939323d9cd93442

<p>The following is the text (and links!) from my presentation at the seventh annual <a href="http://csssummit.com/">CSS Summit</a>, delivered Tuesday morning, July 7th, 2015. <a href="https://speakerdeck.com/jgarber/designing-with-progressive-enhancement">Slides from this talk</a> are also available.</p>

<p>I’d like to thank <a href="http://jcarbaugh.com/">Jeremy Carbaugh</a>, <a href="http://veronicaerb.com/">Veronica Erb</a>, <a href="http://www.aaron-gustafson.com/">Aaron Gustafson</a>, and <a href="http://tpitale.com/">Tony Pitale</a> for reviewing early versions of this presentation.</p>

<hr/>

<p>Good morning!</p>

<p>First off, I’d like to thank <a href="http://christopherschmitt.com/">Christopher</a> and <a href="http://www.aristiles.com/">Ari</a> at <a href="http://environmentsforhumans.com/">Environments for Humans</a> for putting together this wonderful event and for inviting me to speak with you all today. It’s a pleasure to be here and I’m excited to share with you some lessons I’ve learned designing and building things on the Web for nearly twenty years.</p>

<p>I’m here today to talk with you about a Web development methodology known as <a href="https://en.wikipedia.org/wiki/Progressive_enhancement">progressive enhancement</a>. Some of you may be familiar with the concept, others not. Don’t worry; there’s plenty here for everyone, independent of your familiarity with the technique.</p>

<p>I’ve organized today’s presentation into three major sections:</p>

<ol>
<li>I’ll give a brief history of progressive enhancement: what the term means, the environment from which it grew, and how it compared to existing development strategies of the time.</li>
<li>I’ll compare those circumstances to the Web as we know it. That is, how does a methodology like progressive enhancement fit into the state of the Web in 2015.</li>
<li>I’ll walk through some examples of progressive enhancement as applied to the Web’s front-end layers: HTML, CSS, and JavaScript.</li>
</ol>

<p>There’s a lot to cover, so let’s dive in.</p>

<h2>A Brief History of Progressive Enhancement</h2>

<p>Before we can talk about progressive enhancement’s relevance in 2015, we must first look to the past. Two thousand and three, to be exact.</p>

<h3>State of the Web: 2003 Edition</h3>

<p>By 2003, the <a href="https://en.wikipedia.org/wiki/Browser_wars">first browser wars</a> were over and Microsoft’s Internet Explorer 6 stood atop a decimated landscape. In January of that year, Steve Jobs announced the release of <a href="https://en.wikipedia.org/wiki/Safari_(web_browser)">Apple’s Safari Web browser</a>, giving us the first version of the <a href="https://en.wikipedia.org/wiki/WebKit">Webkit rendering engine</a>. <a href="https://en.wikipedia.org/wiki/Netscape">Netscape</a> by this point had already open-sourced their browser’s code, spawning the <a href="https://en.wikipedia.org/wiki/Mozilla">Mozilla</a> project and its suite of applications. Mozilla’s Phoenix browser—which we now know as <a href="https://en.wikipedia.org/wiki/Firefox">Firefox</a>—was just beginning to capture savvy Web users' attention and Google, as characterized by then-CEO Eric Schmidt, was “<a href="http://blogs.wsj.com/digits/2009/07/09/sun-valley-schmidt-didnt-want-to-build-chrome-initially-he-says/">a small company</a>.”</p>

<p>While alternatives to Internet Explorer were available, for all intents and purposes, we lived with a de facto browser monoculture.</p>

<h3>The Participatory Web</h3>

<p>The Web at this time was also on the cusp of its second boom cycle—later dubbed <a href="https://en.wikipedia.org/wiki/Web_2.0">Web 2.0</a>—which would blow the Web’s doors wide open, inviting everyone to participate online via easy-to-use blogging services and new social networks. Looking at raw numbers, in 2003, <a href="http://www.internetworldstats.com/emarketing.htm">upwards of 700 million people</a>—roughly 10% of the world’s population—were online. An additional hundred million would come online by the end of the following year.</p>

<h3>Graceful Degradation</h3>

<p>The prevailing development practice at the time—<a href="https://en.wikipedia.org/wiki/Fault_tolerance">graceful degradation</a>—focused on providing an optimal experience to the latest and greatest browsers with little focus on users saddled with older or less-capable browsers. In practical terms, this approach amounted to coding for an ideal set of circumstances—a particular browser or a certain amount of bandwidth—and hoping for the best in all other cases. Web developers made <em>a lot</em> of dangerous assumptions about how their websites were accessed.</p>

<p>While it was common practice throughout the industry, graceful degradation had its critics.</p>

<h3>South by Southwest 2003</h3>

<p>Way back in March of 2003, at a then-tiny conference in Austin, Texas, <a href="http://hesketh.com/">Steve Champeon</a> delivered a presentation titled “<a href="http://hesketh.com/publications/inclusive_web_design_for_the_future/">Inclusive Web Design for the Future</a>.”</p>

<p>In his presentation, Steve threw the gauntlet squarely at the feet of Web designers, declaring:</p>

<blockquote>
<p>Web design must mature and accept the developments of the past several years, abandon the exclusionary attitudes formed in the rough and tumble dotcom era, realize the coming future of a wide variety of devices and platforms, and separate semantic markup from presentation logic and behavior.</p>
</blockquote>

<p>I’ll repeat my favorite line from that because it’s so beautifully forward-thinking:</p>

<blockquote>
<p>The coming future of a wide variety of devices and platforms.</p>
</blockquote>

<p>This was 2003: four years before the release of the first iPhone and what we now consider the launch of the modern, mobile-accessible Web.</p>

<p>He continues:</p>

<blockquote>
<p>The goal of Web design is not merely to dazzle, but to deliver information to the widest audience possible.</p>
</blockquote>

<p>Steve’s approach—progressive enhancement—flipped graceful degradation on its head by focusing on providing <em>everyone</em> with access to a website’s content and layering on technology—HTML, CSS, and JavaScript—in responsible ways that enhance the experience of lower layers in the stack.</p>

<h3>Content-Focused Design</h3>

<p>As <a href="http://www.aaron-gustafson.com/">Aaron Gustafson</a> would later write in “<a href="http://www.amazon.com/dp/098358950X/?tag=sixtwothree-20">Adaptive Web Design</a>,” progressive enhancement is about “crafting experiences that serve your audience by giving them access to content without technological restrictions.” This gets to the heart of progressive enhancement as originally conceived: universal access to a website’s content irrespective of a person’s physical abilities or technological capabilities.</p>

<p>On that point: It’s important to keep in mind that we each experience and interact with the Web in different ways. Those differences may be subtle or pronounced, but they exist and we shouldn’t forget that.</p>

<p>So these are the philosophical origins and underpinnings of progressive enhancement: a content-first, accessible, inclusive, layered approach to building websites.</p>

<h2>Progressive Enhancement in 2015</h2>

<p>Now that we’ve got the history lesson behind us, let’s take a look at how the Web’s changed in the intervening years. Twelve years ago, we wrestled with limited bandwidth, memory-constrained devices, and display, screen size, and resolution limitations.</p>

<p>That… sounds awfully familiar…</p>

<p><em>Today we wrestle with limited bandwidth, memory-constrained devices, and display, screen size, and resolution limitations.</em></p>

<h3>Ch-ch-changes</h3>

<p>But to say nothing has changed in twelve years would, of course, be disingenuous. <em>Everything has changed.</em> It’s 2015! We have iPhones. We have the Samsung Galaxy series of devices. <a href="http://www.mi.com/en/">Xiaomi</a> has tremendous traction in China. We interact with high-resolution displays of all shapes and sizes. There are <a href="https://en.wikipedia.org/wiki/Internet_refrigerator">Web browsers in refrigerators</a>, for crying out loud. We wear <a href="http://www.android.com/wear/">the Web on our wrist</a> and we carry the Web in our pocket.</p>

<p>We have “web apps!” I don’t really know what that means or how a “web app” is different from a website, but still… We have things called “web apps!”</p>

<p>On the Web design front, <a href="http://unstoppablerobotninja.com/">Ethan Marcotte</a> clued us in to <a href="https://en.wikipedia.org/wiki/Responsive_web_design">responsive Web design</a>, native <a href="https://responsiveimages.org/">responsive images</a> are just around the corner, and our ability to tap in to device APIs—<a href="https://developer.mozilla.org/en-US/docs/Web/API/Geolocation">geolocation</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceLightEvent">ambient light detection</a>, and more—expands on a weekly basis.</p>

<p>Most importantly, there are more human beings than ever using more devices than ever connecting to the Web in more diverse—and often <a href="http://trentwalton.com/2014/03/10/device-agnostic/">hostile</a>—conditions than ever before.</p>

<h3>Opportunity vs. Availability</h3>

<p>While we now have more <em>opportunity</em> to connect to the Internet than ever before, the <em>availability</em> and wildly variable <em>quality</em> of that connection is likewise greater than ever before. We’ll talk more about availability in a minute, but you’ve no doubt experienced this opportunity versus availability challenge in your own daily life.</p>

<p>If you regularly take public transportation, particularly the subway or the train, then you know the pains of intermittent cellular data network connections. If you work in cafés, libraries, or other public spaces, then you know the pains of slow WiFi connections. Visit anywhere outside of major metropolitan centers and you’ll quickly feel the excrutiating pain of browsing the Web on <a href="https://en.wikipedia.org/wiki/General_Packet_Radio_Service">GPRS or EDGE networks</a>.</p>

<p>Unfortunately, these challenges—the opportunity to connect versus the availability and quality of the connection—aren’t unique to us Web designers. The users of our products deal with these challenges in their daily lives as well and, as much as we wish the opposite were true, we don’t get to decide how, when, and where our audience interacts with our websites.</p>

<h3>Internet Trends</h3>

<p>Kleiner Perkins' <a href="http://www.slideshare.net/kleinerperkins/internet-trends-v1">2015 Internet Trends Report</a> just came out and, according to their research, there are 2.8 billion people online, accounting for 39% of the world’s population. Contrast that with the <a href="http://www.internetworldstats.com/emarketing.htm">roughly 700 million people online in 2003</a> and you’ll get a sense for how much has changed. Of those 2.8 billion people online in 2014, 70% percent of them live outside of Europe and the United States.</p>

<p>The report also found a whopping 5.2 billion people—73% of all living humans on this planet—own mobile phones. Of those mobile phones, 40%—nearly 2.1 billion—are smartphones. Presuming each of those smartphones has <em>at least</em> one proper Web browser and a handful of apps with in-app browsers, we quickly arrive at a practically infinite number of combinations of browsers and devices.</p>

<p><em>The mind reels.</em></p>

<h3>A Different Approach for a Changed Web?</h3>

<p>The question then is: Does this notion of progressive enhancement, as originally conceived in 2003, espousing a content-first, accessible, inclusive, layered approach to building websites, still make sense on today’s Web?</p>

<p>I contend that, yes, this approach makes more sense now than ever before!</p>

<p>How we think and talk about this approach has evolved dramatically, though.</p>

<p>Over the last twelve years, the conversation around progressive enhancement shifted and lost focus as the term itself became too closely associated with a singular technology: JavaScript. Rather than referring to a broader, layered approach to building websites, “progressive enhancement” became tantamount to “dealing with users who have JavaScript turned off.”</p>

<p>The general thinking devolved into fallacious statements like:</p>

<ul>
<li>“We can’t do cool things if we have to do progressive enhancement!”</li>
<li>“Progressive enhancement means we have to waste time and money supporting old versions of Internet Explorer!”</li>
<li>“No one in our target audience turns off JavaScript!”</li>
</ul>

<p>The waters were further muddied when we rekindled our torrid love affair with JavaScript. The quick rise—and often just as quick fall—of libraries and frameworks like <a href="http://prototypejs.org/">Prototype</a>, <a href="http://jquery.com/">jQuery</a>, <a href="http://backbonejs.org/">Backbone</a>, <a href="https://angularjs.org/">Angular</a>, and <a href="https://facebook.github.io/react/">React</a> have brought with them a ton of new ideas and opportunities. What they’ve also brought with them—and I believe unintentionally so—are misconceptions about the nature of the Web and actual users' experiences with the Web.</p>

<p>I mentioned earlier the dangerous assumptions Web designers made using the graceful degradation methodology: coding for a particular browser or expecting a certain amount of bandwidth. While not the fault of any one particular framework, many of these same assumptions are creeping their way back into our work.</p>

<h3>An Evolved Definition</h3>

<p>I’d like for us to reframe the conversation around progressive enhancement; to <em>take it back</em> as it were. The timing of CSS Summit is fortuitous as it closely follows this year’s <a href="https://edgeconf.com/2015-london">Edge Conference</a> in London, held at the end of last month. <a href="http://www.lyza.com/">Lyza Danger Gardner</a> moderated a panel discussion on progressive enhancement and out of that conversation spun a number of blog posts and tweets from folks sharing their perspectives on the subject. It’s been a thought-provoking ten days that’s reshaped how I think about progressive enhancement.</p>

<p>While at its core, progressive enhancement remains a content-first, accessible, inclusive, layered approach to building websites, a newer definition is emerging. Progressive enhancement in 2015 has evolved to mean:</p>

<p><em>Making available to all users a baseline experience with access to core content and functionality by reducing assumption.</em></p>

<p>Let’s dissect that.</p>

<h4>Availability</h4>

<p>Stuart Langridge brought <a href="http://www.kryogenix.org/days/2015/06/28/availability/">availability</a> to the conversation and further demonstrated his point with some <a href="http://www.kryogenix.org/code/browser/why-availability/">smiling diagrams</a>. Stuart writes:</p>

<blockquote>
<p>I’m going to be talking about availability. About reach. About my web apps being for everyone even when the universe tries to get in the way.</p>
</blockquote>

<p>And rest assured, the universe will get in the way. Websites can fail for many reasons: dodgy WiFi, a <a href="https://en.wikipedia.org/wiki/Content_delivery_network">CDN</a> goes down for ten seconds, an asset server crashes. These are real things that happen every day on the Web despite our best efforts. Our awareness of this reality should inform our design and development process.</p>

<p>Pertaining to availability, here are a few questions to keep in mind as you design and build your website:</p>

<ul>
<li>“Is my website’s core content and functionality available in the initial HTML sent from the server to the user’s browser?”</li>
<li>“Would someone be able to accomplish their tasks if one or more of my website’s components—images, CSS, or JavaScript—failed to load?”</li>
<li>“What advanced technologies (e.g. <a href="https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage">localStorage</a>) could I take advantage of to account for unforeseen circumstances?”</li>
</ul>

<h4>Baselines</h4>

<p>Progressive enhancement’s foundation rests on the baseline experience. But what is that baseline experience?</p>

<p>We often couch baseline experiences in terms of browsers and versions: “This site will work in Internet Explorer 8 and above; the latest versions of Chrome, Firefox, and Safari; and on iPhone and iPad.” While this kind of thinking lends itself nicely to QA checklists, it fails to acknowledge the real-world diversity of device and browser combinations.</p>

<p>Instead of thinking in terms of browsers, <a href="https://adactio.com/journal/9206">Jeremy Keith defines a baseline experience</a> as “the minimum required technology to allow a user to accomplish the <em>core</em> task.” He specifically differentiates the <em>core</em> task from nice-to-haves that rely on more sophisticated technology.</p>

<p>There are three technologies required to deliver the absolute bare minimum website: a running Web server, HTTP, and HTML. A server, a protocol, and a text file containing structured content. That’s it!</p>

<p>You may determine that the baseline for your project requires additional technology, but for many, many, many projects, these three basic, reliable tools will do the job.</p>

<p>The question to keep in mind here is: “What are the <em>most basic</em> technologies required to deliver a functional website?”</p>

<h4>Core Functionality</h4>

<p>We established earlier that progressive enhancement is a content-first approach to design. Given the participatory nature of today’s Web, we must expand that content-first approach to include user actions.</p>

<p>Instead of determining a website’s core content and ensuring its delivered in an accessible way, we must ensure that a website’s core content <em>and</em> functionality are delivered accessibly. This is what Jeremy refers to as the <em>core task</em>. The nature of that core task will vary depending on the purpose of your website:</p>

<ul>
<li>Reading a news article or blog post.</li>
<li>Looking up critical health care information.</li>
<li>Managing finances or applying for a loan.</li>
</ul>

<p>Identify those core tasks and ensure that users can quickly and efficiently complete them with and without enhancements like images, CSS, and JavaScript.</p>

<p>The key question to think about here is an obvious one: “For any given page or flow on my website, what is the core task?”</p>

<h4>Reducing Assumptions</h4>

<p>I’ve mentioned assumptions several times this morning, mostly in a negative context. I want to be clear, though, that not all assumptions are bad or evil or wrong, or that we aren’t allowed to make assumptions in our work. Practicality—particularly in the agency setting—requires us to make assumptions and tradeoffs every day; it’s built into the nature of our work.</p>

<p>We can—and should—work tirelessly to eliminate assumption wherever possible, though. <a href="http://timkadlec.com/">Tim Kadlec</a>, in his recent post “<a href="http://timkadlec.com/2015/06/thriving-in-unpredictability/">Thriving in Unpredictability</a>,” expertly writes:</p>

<blockquote>
<p>Assumptions will naturally be made at some point. But I want to make as few of those assumptions as possible. Because every assumption I make introduces fragility. Every assumption introduces another way that my site can break.</p>
</blockquote>

<p>Every assumption we build into our work introduces fragility and the possibility of something breaking. Tim’s post is a brilliant miniature manifesto in which he divests himself of control over devices, browsers, contexts, the network, and more.</p>

<p>In a lot of ways, “Thriving in Unpredictability” reminds me of John Allsopp’s “<a href="http://alistapart.com/article/dao">A Dao of Web Design</a>,” published fifteen years ago on A List Apart. “Dao” is a must-read piece of Web design literature full of lessons still applicable to our work today. In it, John rightly insists that we relinquish control and “accept the ebb and flow of things.”</p>

<p>By reducing assumption, we accept the unpredictability of the Web; the “ebb and flow of things.” Constantly ask yourself, “What assumptions am I making and what can be done to reduce those assumptions?”</p>

<h3>Ch-ch-changes?</h3>

<p>Progressive enhancement’s twelve years old. “A Dao of Web Design” is <em>fifteen</em> years old. And yet, the lessons we can take from each remain relevant today. So has anything <em>really</em> changed?</p>

<p>Let’s take another look at the modernized definition of progressive enhancement:</p>

<p><em>Making available to all users a baseline experience with access to core content and functionality by reducing assumption.</em></p>

<p>That feels pretty good, right?</p>

<p>Nowhere have we said that, if you build a progressively-enhanced website, you can’t take advantage of the latest-and-greatest browser features. <em>Quite the opposite, in fact.</em> Applying progressive enhancement affords you the opportunity to utilize new, cutting-edge browser features in a way that ensures users without those capabilities aren’t left out in the cold. When you start with an accessible baseline experience, the sky’s the limit!</p>

<p>A colleague of mine recently declared: “In 2015, I don’t think JavaScript is an enhancement—it’s the baseline.”</p>

<p>I reject that notion, though. Based on everything we’ve looked at so far—devices, browsers, networks, contexts—I can’t in good conscience accept a statement like that. Particularly when building progressively-enhanced websites—and yes, even <em>web apps</em>—is perfectly achievable with a little bit of planning, know-how, and elbow grease.</p>

<h2>Applying Progressive Enhancement</h2>

<p>Earlier, I noted how, in conversations about progressive enhancement, the technique is often misrepresented as only being concerned with the behavior layer of the front-end Web stack. While JavaScript is an important part of building progressively-enhanced websites, it’s certainly not the only layer to benefit from the approach.</p>

<p>Let’s take a look at some examples of progressive enhancement applied to HTML, CSS, and JavaScript.</p>

<h3>HTML</h3>

<p>It’s surprisingly easy to apply the principles of progressive enhancement to our markup. The most obvious enhancement? Take advantage of <a href="http://diveintohtml5.info/semantics.html#new-elements">new HTML5 elements</a>!</p>

<h4>New HTML5 Elements</h4>

<p>For example, here we have a very basic structure for a blog post:</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"blog-post"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"blog-post-header"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h1&gt;</span>My Sweet Blog Post<span class="nt">&lt;/h1&gt;</span>
    <span class="nt">&lt;/div&gt;</span>

    <span class="nt">&lt;p&gt;</span>…<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre></div>
<p>With some small changes, we can provide additional semantics to newer browsers and assistive technologies using HTML5’s <a href="http://html5doctor.com/the-article-element/"><code>&lt;article&gt;</code></a> and <a href="http://html5doctor.com/the-header-element/"><code>&lt;header&gt;</code></a> elements.</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"blog-post"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">"blog-post-header"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h1&gt;</span>My Sweet Blog Post<span class="nt">&lt;/h1&gt;</span>
    <span class="nt">&lt;/header&gt;</span>

    <span class="nt">&lt;p&gt;</span>…<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/article&gt;</span>
</code></pre></div>
<p>Nice and easy, right?</p>

<h4>ARIA Roles</h4>

<p>I’ve mentioned accessibility throughout this presentation so far and, as you might’ve guess by now, progressive enhancement and accessibility go hand-in-hand. In our markup, we can improve our website’s accessibility by adding <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA">ARIA</a> landmark roles to particular components with the <code>role</code> attribute.</p>

<p>There are only a handful of <a href="http://www.w3.org/TR/wai-aria/roles#landmark_roles">ARIA landmark roles</a> and they’re easily applied to our markup. Let’s take a look at a basic page structure:</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;header&gt;</span>
    <span class="nt">&lt;h1&gt;</span>My Website’s Header<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/header&gt;</span>

<span class="nt">&lt;main&gt;</span>
    <span class="nt">&lt;p&gt;</span>My website’s content!<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/main&gt;</span>

<span class="nt">&lt;footer&gt;</span>
    <span class="nt">&lt;p&gt;</span>Send me a tweet, I’m @jgarber!<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/footer&gt;</span>
</code></pre></div>
<p>In this example, we have a document with a header, main content area, and a footer. As you’ve noticed, I’m using new HTML5 sectioning elements. Adding landmark roles would look like:</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;header</span> <span class="na">role=</span><span class="s">"banner"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;h1&gt;</span>My Website’s Header<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/header&gt;</span>

<span class="nt">&lt;main</span> <span class="na">role=</span><span class="s">"main"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;p&gt;</span>My website’s content!<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/main&gt;</span>

<span class="nt">&lt;footer</span> <span class="na">role=</span><span class="s">"contentinfo"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;p&gt;</span>Send me a tweet, I’m @jgarber!<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/footer&gt;</span>
</code></pre></div>
<p>I’ve added three roles: <a href="http://www.w3.org/TR/wai-aria/roles#banner"><code>banner</code></a>, <a href="http://www.w3.org/TR/wai-aria/roles#main"><code>main</code></a>, and <a href="http://www.w3.org/TR/wai-aria/roles#contentinfo"><code>contentinfo</code></a>. The <code>banner</code> role defines a region of site-specific content, <code>main</code> denotes the primary content of a document, and <code>contentinfo</code>, as its name implies, surrounds a block of content containing information about the document.</p>

<p>Notice the duplication on the main content container:</p>

<p><a href="http://html5doctor.com/on-html-belts-and-aria-braces/">There are some rules</a> around when you should and shouldn’t use ARIA roles alongside HTML elements. For the time being, though, I <em>think</em> it’s worth using both HTML5’s structural elements <em>and</em> relevant ARIA roles as not all browsers and assistive technologies recognize newer semantics.</p>

<p>ARIA roles are just the tip of the accessibility iceberg, though. How we can better build accessibility into our markup is a much, much larger discussion and one deserving of more time than I have allotted here today.</p>

<h4>microformats</h4>

<p>This is the last markup-centric enhancement I’ll cover this morning and it’s a personal favorite. <a href="http://microformats.org/">microformats</a> are community-developed patterns for marking up a variety of common data structures: <a href="http://microformats.org/wiki/h-card">people</a>, <a href="http://microformats.org/wiki/h-adr">locations</a>, <a href="http://microformats.org/wiki/h-event">events</a>, <a href="http://microformats.org/wiki/h-entry">blog posts</a>, and <a href="http://microformats.org/wiki/microformats2">much more</a>.</p>

<p>They’re an excellent way to quickly add enhanced semantics to your website’s markup, exposing additional structured content to browsers by way of <a href="http://microformats.org/wiki/browsers">browser extensions, plugins, and bookmarklets</a>.</p>

<p>Implementing microformats is a cinch, too. Let’s use the blog post markup example from earlier:</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"blog-post"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">"blog-post-header"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h1&gt;</span>My Sweet Blog Post<span class="nt">&lt;/h1&gt;</span>
    <span class="nt">&lt;/header&gt;</span>

    <span class="nt">&lt;p&gt;</span>…<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/article&gt;</span>
</code></pre></div>
<p>There’s an established microformat for marking up blog posts known as <a href="http://microformats.org/wiki/h-entry">h-entry</a>, so we can update our markup accordingly:</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;article</span> <span class="na">class=</span><span class="s">"blog-post h-entry"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">"blog-post-header"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"p-name"</span><span class="nt">&gt;</span>My Sweet Blog Post<span class="nt">&lt;/h1&gt;</span>
    <span class="nt">&lt;/header&gt;</span>

    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"e-content"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;p&gt;</span>…<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/article&gt;</span>
</code></pre></div>
<p>In this example, we’ve added the root class value <code>h-entry</code> to the <code>&lt;article&gt;</code> element, indicating that the content contained within is a discrete, syndicatable piece of content. The <code>p-name</code> class value on the heading identifies the entry’s title and an <code>e-content</code> class value wraps the post’s full content.</p>

<p>By <a href="http://microformats.org/wiki/principles">design</a>, microformats utilize the <code>class</code> attribute to declare properties. This <code>class</code>-based implementation—reusing existing building blocks from established standards—sets microformats apart from other, more complicated, Semantic Web technologies like <a href="https://en.wikipedia.org/wiki/Microdata_(HTML)">Microdata</a> and <a href="https://en.wikipedia.org/wiki/RDFa">RDFa</a>.</p>

<p>There’s plenty more to the <a href="http://microformats.org/wiki/h-entry">h-entry spec</a> than what I’ve shown here—structures for adding authors, tags, and publication date—so I encourage you to give the documentation a look.</p>

<h3>CSS</h3>

<p>As we move up the front-end stack to the presentation layer, we’re met with ample opportunity to apply progressive enhancement. And, like our HTML examples, these are generally easier than you’d think.</p>

<h4>Progressively-Enhanced Aesthetics</h4>

<p>Starting with an obvious example, we can use newer CSS features in ways that enhance our interfaces without adversely impacting users. For instance, when applying <a href="https://css-tricks.com/css3-gradients/">CSS gradients</a> to elements, make sure to include a generic background color:</p>
<div class="highlight"><pre><code class="language-css" data-lang="css"><span class="nc">.fancy-button</span> <span class="p">{</span>
    <span class="k">background-color</span><span class="o">:</span> <span class="m">#c00</span><span class="p">;</span>
    <span class="k">background-image</span><span class="o">:</span> <span class="n">linear</span><span class="o">-</span><span class="n">gradient</span><span class="p">(</span><span class="m">#f00</span><span class="o">,</span> <span class="m">#a00</span><span class="p">);</span>
    <span class="k">color</span><span class="o">:</span> <span class="m">#fff</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
<p>By first setting a background color and <em>then</em> declaring a gradient as a background image, we’re providing modern browsers with an aesthetically-pleasing gradient while also supplying a solid background color to browsers lacking support for CSS-generated gradients. We’ve also made our design more resilient by ensuring that the button’s white text will never accidentally appear on a white background, rendering the button inaccessible.</p>

<p>Progressive enhancement and accessibility: <em>two great tastes that taste great together</em>. The <a href="https://en.wikipedia.org/wiki/Reese%27s_Peanut_Butter_Cups">Reese’s Peanut Butter Cups</a> of the Web.</p>

<p>You can apply this same technique to your use of other aesthetic properties: <code>border-radius</code>, <a href="https://css-tricks.com/rgba-browser-support/">RGBA colors with fallbacks</a>, and <a href="http://www.css3.info/preview/multiple-backgrounds/">multiple background images</a>.</p>

<h4>Media Queries</h4>

<p>I’ve mentioned already this notion of starting small: setting a baseline and enhancing upward from there. <a href="https://bryanrieger.com/">Bryan Rieger</a>, in his presentation “<a href="http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu">Rethinking the Mobile Web</a>,” noted that:</p>

<blockquote>
<p>The absence of support for @media queries is in fact the first @media query.</p>
</blockquote>

<p>If we take that thinking, combine it with a <a href="http://abookapart.com/products/mobile-first">mobile first</a> structuring of our CSS, we can apply progressive enhancement by using <code>min-width</code>-based media queries. Each <code>min-width</code>-based media query would be, in effect, an enhancement of the layout based on increasing viewport real estate.</p>

<p>It’s important to note here that this <em>only</em> has to do with layout and not browser or device capabilities. While width- and height-based media queries are the easiest to work with, there are <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries">a number of features</a> that we can progressively hook in to: <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#color">color</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#aspect-ratio">aspect ratio</a>, and <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#orientation">orientation</a>, for instance. As with everything progressive enhancement-related, if you start from a solid foundation, you’re free to enhance upward as much as possible.</p>

<h4>Advanced Layout with Flexbox</h4>

<p>I’ll get this out of the way: <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes">Flexbox</a> is awesome and terrifying. <a href="http://www.lemondesign.co/">Chris</a> has a presentation on the subject later today, so I’ll keep this example pretty high-level and introductory.</p>

<p>While browser support for flexbox is <a href="http://caniuse.com/#search=flexbox">surprisingly good</a>, you may consider treating its use as an enhancement. I’ve created <a href="http://codepen.io/jgarber/pen/pJpdYx">a basic example</a> showing how you can easily reorder content using but a tiny fraction of flexbox’s power.</p>

<p>As you can see if you pull up <a href="http://codepen.io/jgarber/pen/pJpdYx">the demo on Codepen</a>, there’s an advertisement for <a href="http://www.amazon.com/dp/1430238763/?tag=sixtwothree-20">a <em>fantastic</em> book about HTML and CSS</a>—one which I encourage you all to rush out and purchase—at the bottom of the page. At viewports wider than 900 pixels, the advertisement is moved to the top of the page using a smattering of flexbox-related properties:</p>
<div class="highlight"><pre><code class="language-css" data-lang="css"><span class="k">@media</span> <span class="o">(</span><span class="nt">min-width</span><span class="o">:</span> <span class="nt">50em</span><span class="o">)</span> <span class="p">{</span>
    <span class="nc">.main</span> <span class="p">{</span>
        <span class="k">display</span><span class="o">:</span> <span class="n">flex</span><span class="p">;</span>
        <span class="n">flex</span><span class="o">-</span><span class="k">direction</span><span class="o">:</span> <span class="n">column</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="nc">.intro</span><span class="o">,</span>
    <span class="nc">.social</span> <span class="p">{</span>
        <span class="n">order</span><span class="o">:</span> <span class="m">1</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="nc">.advert</span> <span class="p">{</span>
        <span class="n">order</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
    <span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<p>It’s a silly example and a non-critical layout change, but it succinctly demonstrates how a small application of a tool like flexbox can enhance an existing layout.</p>

<h3>JavaScript</h3>

<p>Here it is, the elephant in the room: <em>JavaScript</em>. The final layer in the front-end Web technology stack.</p>

<p>I want you to know that I love JavaScript. I don’t always love the things we do with it, and while it’s a hot mess of a language, it’s <em>our</em> hot mess of a language.</p>

<p>There are so many great progressively-enhanced JavaScript examples out there. I thought a lot about what to show you here today and narrowed it down to a couple of techniques and a pretty cool example. Let’s start with the techniques.</p>

<h4>Object Detection</h4>

<p>Given the utter insanity of <a href="http://useragentstring.com/pages/All/">the browser user agent string</a> and the futility of attempting to match against it, you should lean heavily on <a href="http://www.quirksmode.org/js/support.html">object detection</a> to determine a browser’s support for JavaScript features. While testing for features varies, at a basic level you’ll wrap your code in a conditional like so:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="k">if</span> <span class="p">(</span><span class="s1">'addEventListener'</span> <span class="k">in</span> <span class="nb">window</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// Your code using addEventListener goes here…</span>
<span class="p">}</span>
</code></pre></div>
<p>The code within this conditional <em>only</em> executes in browsers that respond affirmatively to the question: “Does your <code>window</code> object include a method named <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener"><code>addEventListener</code></a>?” This particular object detection is often used to keep versions of Internet Explorer prior to 9 from executing the JavaScript within.</p>

<h4>Cutting the Mustard</h4>

<p>The BBC, as part of their <a href="http://responsivenews.co.uk/">responsive news redesign project</a>, took object detection a step further, combining several key feature detections to put into action their browser support matrix. They dubbed their technique “<a href="http://responsivenews.co.uk/post/18948466399/cutting-the-mustard">Cutting the Mustard</a>.”</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="k">if</span> <span class="p">(</span><span class="s1">'querySelector'</span> <span class="k">in</span> <span class="nb">document</span>
    <span class="o">&amp;&amp;</span> <span class="s1">'localStorage'</span> <span class="k">in</span> <span class="nb">window</span>
    <span class="o">&amp;&amp;</span> <span class="s1">'addEventListener'</span> <span class="k">in</span> <span class="nb">window</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// Bootstrap the JavaScript application…</span>
<span class="p">}</span>
</code></pre></div>
<p>The team at the BBC grouped browsers into “HTML4 browsers” and “HTML5 browsers” and used these object detections to filter browsers based on their capabilities rather than how browsers identify themselves. “HTML4 browsers” receive a perfectly usable website while “HTML5 browsers” run the full-featured, progressively-enhanced <em>experience</em>.</p>

<h4>Working with <code>&lt;datalist&gt;</code></h4>

<p>I’ve borrowed this final example from a <a href="https://adactio.com/journal/4272">2011 blog post by Jeremy Keith</a> and more recently shared by <a href="http://www.aaron-gustafson.com/">Aaron Gustafson</a> in his presentation “<a href="http://www.slideshare.net/AaronGustafson/falling-in-love-with-forms-microsoft-edge-web-summit-2015">Falling in Love with Forms</a>.” I’ve made a couple of enhancements and posted <a href="http://codepen.io/jgarber/pen/OVzzJz">a demo on Codepen</a>.</p>

<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist"><code>&lt;datalist&gt;</code> element</a> behaves similarly to the familiar <code>&lt;select&gt;</code> form control, accepting as children a series of <code>&lt;option&gt;</code> elements:</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"state"</span> <span class="na">id=</span><span class="s">"state-label"</span><span class="nt">&gt;</span>State<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;datalist</span> <span class="na">id=</span><span class="s">"states"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"Alabama"</span><span class="nt">&gt;</span>Alabama<span class="nt">&lt;/option&gt;</span>
    <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"Alaska"</span><span class="nt">&gt;</span>Alaska<span class="nt">&lt;/option&gt;</span>
    <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"Arizona"</span><span class="nt">&gt;</span>Arizona<span class="nt">&lt;/option&gt;</span>
    <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"Arkansas"</span><span class="nt">&gt;</span>Arkansas<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;/datalist&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">id=</span><span class="s">"state"</span> <span class="na">name=</span><span class="s">"state"</span> <span class="na">list=</span><span class="s">"states"</span><span class="nt">&gt;</span>
</code></pre></div>
<p>When associated with another <code>&lt;input&gt;</code> element (via the <code>list</code> attribute), <code>&lt;datalist&gt;</code> acts as a browser-native auto-complete field. No JavaScript required!</p>

<p>Jeremy took his demo a step further, wrapping those <code>&lt;option&gt;</code> elements in a <code>&lt;select&gt;</code>:</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"state"</span> <span class="na">id=</span><span class="s">"state-label"</span><span class="nt">&gt;</span>State<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;datalist</span> <span class="na">id=</span><span class="s">"states"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;select&gt;</span>
        <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"Alabama"</span><span class="nt">&gt;</span>Alabama<span class="nt">&lt;/option&gt;</span>
        <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"Alaska"</span><span class="nt">&gt;</span>Alaska<span class="nt">&lt;/option&gt;</span>
        <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"Arizona"</span><span class="nt">&gt;</span>Arizona<span class="nt">&lt;/option&gt;</span>
        <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"Arkansas"</span><span class="nt">&gt;</span>Arkansas<span class="nt">&lt;/option&gt;</span>
    <span class="nt">&lt;/select&gt;</span>
<span class="nt">&lt;/datalist&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">id=</span><span class="s">"state"</span> <span class="na">name=</span><span class="s">"state"</span> <span class="na">list=</span><span class="s">"states"</span><span class="nt">&gt;</span>
</code></pre></div>
<p>Browsers that are <code>&lt;datalist&gt;</code>-aware ignore any content <em>other than</em> <code>&lt;option&gt;</code> elements. Browsers lacking support for <code>&lt;datalist&gt;</code> ignore the containing element and render a standard <code>&lt;select&gt;</code> input.</p>

<p>This works thanks to the manner in which browsers parse HTML documents. Rather than grinding to a halt and stopping page rendering, Web browsers simply ignore elements they don’t recognize and carry on rendering. The essence of progressive enhancement is baked into the design of HTML!</p>

<p>Jumping ahead, the completed example’s markup looks like:</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;form&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"state"</span> <span class="na">id=</span><span class="s">"state-label"</span><span class="nt">&gt;</span>State<span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;datalist</span> <span class="na">id=</span><span class="s">"states"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;select</span> <span class="na">name=</span><span class="s">"state"</span> <span class="na">id=</span><span class="s">"state-select"</span> <span class="na">aria-labelledby=</span><span class="s">"state-label"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"Alabama"</span><span class="nt">&gt;</span>Alabama<span class="nt">&lt;/option&gt;</span>
            <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"Alaska"</span><span class="nt">&gt;</span>Alaska<span class="nt">&lt;/option&gt;</span>
            <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"Arizona"</span><span class="nt">&gt;</span>Arizona<span class="nt">&lt;/option&gt;</span>
            <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"Arkansas"</span><span class="nt">&gt;</span>Arkansas<span class="nt">&lt;/option&gt;</span>
        <span class="nt">&lt;/select&gt;</span>

        <span class="nt">&lt;p</span> <span class="na">id=</span><span class="s">"other-label"</span><span class="nt">&gt;</span>If other, please specify:<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;/datalist&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">id=</span><span class="s">"state"</span> <span class="na">name=</span><span class="s">"state"</span> <span class="na">list=</span><span class="s">"states"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/form&gt;</span>
</code></pre></div>
<p>In addition to the aforementioned <code>&lt;select&gt;</code> element, we’ve nested an explanatory paragraph within the <code>&lt;datalist&gt;</code>. Like the <code>&lt;select&gt;</code>, this element will <em>only</em> show in browsers lacking native <code>&lt;datalist&gt;</code> support.</p>

<p>This is a pretty solid pattern, but it irked me that, in browsers lacking support for <code>&lt;datalist&gt;</code>, the <code>&lt;label&gt;</code> wasn’t associated with the <code>&lt;select&gt;</code> and a paragraph acted as the text input’s label.</p>

<p>A little bit of JavaScript solved the problem:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="p">(</span><span class="s1">'list'</span> <span class="k">in</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'input'</span><span class="p">)))</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">stateLabel</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'state-label'</span><span class="p">),</span>
        <span class="nx">otherLabel</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'other-label'</span><span class="p">);</span>

    <span class="nx">stateLabel</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">'for'</span><span class="p">,</span> <span class="s1">'state-select'</span><span class="p">);</span>
    <span class="nx">otherLabel</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s1">'&lt;label for="state"&gt;'</span> <span class="o">+</span> <span class="nx">otherLabel</span><span class="p">.</span><span class="nx">innerText</span> <span class="o">+</span> <span class="s1">'&lt;/label&gt;'</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
<p>With this code, we’ve associated the “State” label with the <code>&lt;select&gt;</code> element and swapped out the explanatory paragraph with a properly-associated <code>&lt;label&gt;</code> element. All it took was a bit of object detection and some simple DOM manipulation.</p>

<h2>In Conclusion…</h2>

<p>We’ve covered a lot of ground this morning. We’ve looked back at the history of progressive enhancement, evaluated its relevance in our modern design process, and walked through useful applications of the technique in all layers of the front-end Web stack.</p>

<p>I’ll leave you with a final thought: Much like the Web, progressive enhancement exists on a <a href="https://adactio.com/journal/6692">continuum</a>. It’s not a binary decision: “You either build with progressive enhancement or you don’t.” It’s entirely possible to introduce progressive enhancement into your design process in small ways at first. Remember: <em>define a baseline and enhance from there</em>.</p>

<p>Christopher and Ari have put together a tremendous lineup here at CSS Summit and it’s been an honor kicking things off with you this morning. Over the next three days, as you learn about some awesome new design and development tools and techniques—SVG, Sass, and Angular—think about how you can best apply those tools and techniques in a <a href="https://medium.com/@jjaybrown98/it-s-time-to-progress-702e0779df3a">progressive</a>, <a href="https://twitter.com/scottjehl/status/615580565404839936">resilient</a>, <a href="http://futurefriendlyweb.com/">future-friendly</a> fashion.</p>

<p>Thank you!</p>