CINXE.COM

<!doctype html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="https://gmpg.org/xfn/11"> <title>A List Apart – For people who make websites</title> <meta name='robots' content='max-image-preview:large' /> <style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style> <link rel='dns-prefetch' href='//secure.gravatar.com' /> <link rel='dns-prefetch' href='//stats.wp.com' /> <link rel='dns-prefetch' href='//widgets.wp.com' /> <link rel='dns-prefetch' href='//s0.wp.com' /> <link rel='dns-prefetch' href='//0.gravatar.com' /> <link rel='dns-prefetch' href='//1.gravatar.com' /> <link rel='dns-prefetch' href='//2.gravatar.com' /> <link rel='preconnect' href='//i0.wp.com' /> <link rel="alternate" type="application/rss+xml" title="A List Apart » Feed" href="https://alistapart.com/main/feed/" /> <script type="text/javascript"> /* <![CDATA[ */ window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/15.0.3\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/15.0.3\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/alistapart.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=6.7.1"}}; /*! This file is auto-generated */ !function(i,n){var o,s,e;function c(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function p(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data),r=(e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0),new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data));return t.every(function(e,t){return e===r[t]})}function u(e,t,n){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\uddfa\ud83c\uddf3","\ud83c\uddfa\u200b\ud83c\uddf3")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!n(e,"\ud83d\udc26\u200d\u2b1b","\ud83d\udc26\u200b\u2b1b")}return!1}function f(e,t,n){var r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):i.createElement("canvas"),a=r.getContext("2d",{willReadFrequently:!0}),o=(a.textBaseline="top",a.font="600 32px Arial",{});return e.forEach(function(e){o[e]=t(a,e,n)}),o}function t(e){var t=i.createElement("script");t.src=e,t.defer=!0,i.head.appendChild(t)}"undefined"!=typeof Promise&&(o="wpEmojiSettingsSupports",s=["flag","emoji"],n.supports={everything:!0,everythingExceptFlag:!0},e=new Promise(function(e){i.addEventListener("DOMContentLoaded",e,{once:!0})}),new Promise(function(t){var n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),p.toString()].join(",")+"));",r=new Blob([e],{type:"text/javascript"}),a=new Worker(URL.createObjectURL(r),{name:"wpTestEmojiSupports"});return void(a.onmessage=function(e){c(n=e.data),a.terminate(),t(n)})}catch(e){}c(n=f(s,u,p))}t(n)}).then(function(e){for(var t in e)n.supports[t]=e[t],n.supports.everything=n.supports.everything&&n.supports[t],"flag"!==t&&(n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&n.supports[t]);n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&!n.supports.flag,n.DOMReady=!1,n.readyCallback=function(){n.DOMReady=!0}}).then(function(){return e}).then(function(){var e;n.supports.everything||(n.readyCallback(),(e=n.source||{}).concatemoji?t(e.concatemoji):e.wpemoji&&e.twemoji&&(t(e.twemoji),t(e.wpemoji)))}))}((window,document),window._wpemojiSettings); /* ]]> */ </script> <style id='wp-emoji-styles-inline-css' type='text/css'> img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 0.07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } </style> <link rel='stylesheet' id='wp-block-library-css' href='https://149572954.v2.pressablecdn.com/wp-includes/css/dist/block-library/style.min.css?ver=6.7.1' type='text/css' media='all' /> <style id='co-authors-plus-coauthors-style-inline-css' type='text/css'> .wp-block-co-authors-plus-coauthors.is-layout-flow [class*=wp-block-co-authors-plus]{display:inline} </style> <style id='co-authors-plus-avatar-style-inline-css' type='text/css'> .wp-block-co-authors-plus-avatar :where(img){height:auto;max-width:100%;vertical-align:bottom}.wp-block-co-authors-plus-coauthors.is-layout-flow .wp-block-co-authors-plus-avatar :where(img){vertical-align:middle}.wp-block-co-authors-plus-avatar:is(.alignleft,.alignright){display:table}.wp-block-co-authors-plus-avatar.aligncenter{display:table;margin-inline:auto} </style> <style id='co-authors-plus-image-style-inline-css' type='text/css'> .wp-block-co-authors-plus-image{margin-bottom:0}.wp-block-co-authors-plus-image :where(img){height:auto;max-width:100%;vertical-align:bottom}.wp-block-co-authors-plus-coauthors.is-layout-flow .wp-block-co-authors-plus-image :where(img){vertical-align:middle}.wp-block-co-authors-plus-image:is(.alignfull,.alignwide) :where(img){width:100%}.wp-block-co-authors-plus-image:is(.alignleft,.alignright){display:table}.wp-block-co-authors-plus-image.aligncenter{display:table;margin-inline:auto} </style> <style id='safe-svg-svg-icon-style-inline-css' type='text/css'> .safe-svg-cover{text-align:center}.safe-svg-cover .safe-svg-inside{display:inline-block;max-width:100%}.safe-svg-cover svg{height:100%;max-height:100%;max-width:100%;width:100%} </style> <link rel='stylesheet' id='mediaelement-css' href='https://149572954.v2.pressablecdn.com/wp-includes/js/mediaelement/mediaelementplayer-legacy.min.css?ver=4.2.17' type='text/css' media='all' /> <link rel='stylesheet' id='wp-mediaelement-css' href='https://149572954.v2.pressablecdn.com/wp-includes/js/mediaelement/wp-mediaelement.min.css?ver=6.7.1' type='text/css' media='all' /> <style id='jetpack-sharing-buttons-style-inline-css' type='text/css'> .jetpack-sharing-buttons__services-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:0;list-style-type:none;margin:5px;padding:0}.jetpack-sharing-buttons__services-list.has-small-icon-size{font-size:12px}.jetpack-sharing-buttons__services-list.has-normal-icon-size{font-size:16px}.jetpack-sharing-buttons__services-list.has-large-icon-size{font-size:24px}.jetpack-sharing-buttons__services-list.has-huge-icon-size{font-size:36px}@media print{.jetpack-sharing-buttons__services-list{display:none!important}}.editor-styles-wrapper .wp-block-jetpack-sharing-buttons{gap:0;padding-inline-start:0}ul.jetpack-sharing-buttons__services-list.has-background{padding:1.25em 2.375em} </style> <link rel='stylesheet' id='coil-blocks-css' href='https://149572954.v2.pressablecdn.com/wp-content/plugins/coil-web-monetization/dist/blocks.style.build.min.css?ver=2.0.2' type='text/css' media='all' /> <style id='classic-theme-styles-inline-css' type='text/css'> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <style id='global-styles-inline-css' type='text/css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} </style> <link rel='stylesheet' id='coil-monetize-css-css' href='https://149572954.v2.pressablecdn.com/wp-content/plugins/coil-web-monetization/assets/css/frontend/coil.min.css?ver=2.0.2' type='text/css' media='all' /> <link rel='stylesheet' id='coil-messaging-css' href='https://149572954.v2.pressablecdn.com/wp-content/plugins/coil-web-monetization/assets/css/messages/coil.min.css?ver=2.0.2' type='text/css' media='all' /> <link rel='stylesheet' id='ala-style-css' href='https://149572954.v2.pressablecdn.com/wp-content/themes/ala/style.css?ver=1671008582' type='text/css' media='all' /> <link rel='stylesheet' id='ala-prism-style-css' href='https://149572954.v2.pressablecdn.com/wp-content/themes/ala/js/prism/prism.css?ver=1.0' type='text/css' media='all' /> <link rel='stylesheet' id='jetpack_likes-css' href='https://149572954.v2.pressablecdn.com/wp-content/plugins/jetpack/modules/likes/style.css?ver=14.2-beta' type='text/css' media='all' /> <script type="text/javascript" src="https://149572954.v2.pressablecdn.com/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script> <script type="text/javascript" src="https://149572954.v2.pressablecdn.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" id="jquery-migrate-js"></script> <link rel="https://api.w.org/" href="https://alistapart.com/wp-json/" /><link rel="alternate" title="JSON" type="application/json" href="https://alistapart.com/wp-json/wp/v2/pages/6000475" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://alistapart.com/xmlrpc.php?rsd" /> <link rel="canonical" href="https://alistapart.com/" /> <link rel='shortlink' href='https://wp.me/PaHlEW-paZR' /> <link rel="alternate" title="oEmbed (JSON)" type="application/json+oembed" href="https://alistapart.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Falistapart.com%2F" /> <link rel="alternate" title="oEmbed (XML)" type="text/xml+oembed" href="https://alistapart.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Falistapart.com%2F&format=xml" /> <style>img#wpstats{display:none}</style> <meta name="monetization" content="$ilp.uphold.com/Kh7NgDU9kqp3" /> <link rel="monetization" href="https://ilp.uphold.com/Kh7NgDU9kqp3" /> <meta name="description" content="For people who make websites" /> <style type="text/css"> .site-title, .site-description { position: absolute; clip: rect(1px, 1px, 1px, 1px); } </style>  <meta property="og:type" content="website" /> <meta property="og:title" content="A List Apart" /> <meta property="og:description" content="For people who make websites" /> <meta property="og:url" content="https://alistapart.com/" /> <meta property="og:site_name" content="A List Apart" /> <meta property="og:image" content="https://i0.wp.com/alistapart.com/wp-content/uploads/2019/03/cropped-icon_navigation-laurel-512.jpg?fit=512%2C512&ssl=1" /> <meta property="og:image:width" content="512" /> <meta property="og:image:height" content="512" /> <meta property="og:image:alt" content="" /> <meta property="og:locale" content="en_US" /> <meta name="twitter:site" content="@alistapart" /> <meta name="twitter:text:title" content="Homepage" /> <meta name="twitter:image" content="https://i0.wp.com/alistapart.com/wp-content/uploads/2019/03/cropped-icon_navigation-laurel-512.jpg?fit=240%2C240&ssl=1" /> <meta name="twitter:card" content="summary" />  <link rel="icon" href="https://i0.wp.com/alistapart.com/wp-content/uploads/2019/03/cropped-icon_navigation-laurel-512.jpg?fit=32%2C32&ssl=1" sizes="32x32" /> <link rel="icon" href="https://i0.wp.com/alistapart.com/wp-content/uploads/2019/03/cropped-icon_navigation-laurel-512.jpg?fit=192%2C192&ssl=1" sizes="192x192" /> <link rel="apple-touch-icon" href="https://i0.wp.com/alistapart.com/wp-content/uploads/2019/03/cropped-icon_navigation-laurel-512.jpg?fit=180%2C180&ssl=1" /> <meta name="msapplication-TileImage" content="https://i0.wp.com/alistapart.com/wp-content/uploads/2019/03/cropped-icon_navigation-laurel-512.jpg?fit=270%2C270&ssl=1" /> <style type="text/css" id="wp-custom-css"> .ala-editors-note a { text-decoration: underline; } i, em, cite { font-weight: inherit; } code, kbd, tt, var { font-size: .9375em; text-transform: none; } .ala-opening-quote figure.quote blockquote p { display: inline; } .ala-opening-quote figure.quote blockquote::before, .ala-opening-quote figure.quote blockquote::after { content: ""; } .ala-opening-quote figure.quote blockquote > p:first-child::before { content: "“"; } .ala-opening-quote figure.quote blockquote > p:first-child::after { content: "”"; } @media only screen and (max-width: 47.9375em) { /* ---------------------- RESPONSIVE TABLES ---------------------- */ figure:not(.not-rwd) table { display: block; width: 100%; border-bottom: 1px solid #bfbfbf; } figure:not(.not-rwd) table caption { display: block; } figure:not(.not-rwd) table thead { display: none; visibility: hidden; } figure:not(.not-rwd) table tbody, figure:not(.not-rwd) table tr, figure:not(.not-rwd) table th, figure:not(.not-rwd) table td { border: 0; display: block; padding: 0; text-align: left; white-space: normal; } figure:not(.not-rwd) table tr { margin: 1em 0; } figure:not(.not-rwd) .gist table { display: table; } figure:not(.not-rwd) .gist table tr { display: table-row; margin-bottom: 0; } figure:not(.not-rwd) .gist table td { display: table-cell; } table th[data-title]:before, table td[data-title]:before { content: attr(data-title) ": "; font-weight: bold; font-family: "Franklin ITC", sans-serif; } table th:not([data-title]) { font-weight: bold; font-family: "Franklin ITC", sans-serif; } table td:empty { display: none; } .main-content > figure:not(.not-rwd) table tbody tr:nth-child(odd) td { background: none; } .col-1 tr :nth-child(1):not(code), .col-2 tr :nth-child(2):not(code), .col-3 tr :nth-child(3):not(code):not(span), .col-4 tr :nth-child(4):not(code) { border: none; } caption { border: none; border-bottom: 1px solid #bfbfbf; } .main-content > figure table th, .main-content > figure table td { padding-top: 8px; padding-bottom: 8px; } figure.not-rwd { overflow: auto; } .entry-content>figure table tbody tr:nth-child(2n+1) td, .entry-content>table tbody tr:nth-child(2n+1) td { background: transparent; } } </style>  <script async src='https://www.googletagmanager.com/gtag/js?id=G-F1JXXVHTDV'></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push( arguments ); } gtag( 'js', new Date() ); gtag( 'config', "G-F1JXXVHTDV" ); </script>  </head> <body class="home page-template-default page page-id-6000475 wp-custom-logo monetization-not-initialized coil-monetized coil-public show-streaming-widget page-homepage" itemscope itemtype="http://schema.org/WebPage"> <div id="page" class="site"> <a class="skip-link screen-reader-text" href="#content">Skip to content</a> <header id="masthead" class="site-header"> <div class="site-branding"> <a href="https://alistapart.com/" class="custom-logo-link" rel="home" aria-current="page"><img width="960" height="98" src="https://i0.wp.com/alistapart.com/wp-content/uploads/2019/03/ala-logo-big.png?fit=960%2C98&ssl=1" class="custom-logo" alt="A List Apart" decoding="async" srcset="https://i0.wp.com/alistapart.com/wp-content/uploads/2019/03/ala-logo-big.png?w=960&ssl=1 960w, https://i0.wp.com/alistapart.com/wp-content/uploads/2019/03/ala-logo-big.png?resize=300%2C31&ssl=1 300w, https://i0.wp.com/alistapart.com/wp-content/uploads/2019/03/ala-logo-big.png?resize=768%2C78&ssl=1 768w" sizes="(max-width: 960px) 100vw, 960px" /></a> <p class="site-title"><a href="https://alistapart.com/" rel="home" itemscope itemtype="http://schema.org/ImageObject">A List Apart</a></p> <p class="site-description">For people who make websites</p> </div> <nav id="site-navigation" class="main-navigation" itemscope="" itemtype="http://schema.org/SiteNavigationElement"> <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><span class="screen-reader-text">Primary Menu</span></button> <div class="menu-site-header-container"><ul id="primary-menu" class="menu"><li id="menu-item-6000493" class="ala-home-url menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-6000493"><a href="https://alistapart.com" aria-current="page" itemprop="url"><span itemprop="name">Home</span></a></li> <li id="menu-item-6000494" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6000494"><a href="https://alistapart.com/articles/" itemprop="url"><span itemprop="name">Articles</span></a></li> <li id="menu-item-6000495" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6000495"><a href="https://alistapart.com/events/" itemprop="url"><span itemprop="name">Events</span></a></li> <li id="menu-item-6000496" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6000496"><a href="https://alistapart.com/topics/" itemprop="url"><span itemprop="name">Topics</span></a></li> <li id="menu-item-6000497" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6000497"><a href="https://alistapart.com/about/contribute/" itemprop="url"><span itemprop="name">Write for Us</span></a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children"><a href="#" class="mlp-language-nav"><span itemprop="name">Language (English) <i class="arrow-down"></i></span></a><ul class="sub-menu mlp-languages"><li class="site-id-"2" mlp-language-nav-item menu-item menu-item-type-mlp_language menu-item-object-mlp_language"><a rel="alternate" href="https://alistapart.com/it" itemprop="url"><span itemprop="name">Italian</span></a></li></ul></li></ul></div> <form role="search" method="get" class="search-form" action="https://alistapart.com/"> <label> <span class="screen-reader-text">Search for:</span> <input type="search" class="search-field" placeholder="Search …" value="" name="s" /> </label> <input type="submit" class="search-submit" value="Search" /> </form> </nav> </header> <div id="content" class="site-content"> <div id="primary" class="content-area"> <main id="main" class="site-main"> <section class="featured-wrap clear"> <article id="post-7174424" class="featured-content featured-main post-7174424 article type-article status-publish has-post-thumbnail hentry category-user-experience category-user-research"> <figure class="hero-wide"> <div class="post-thumbnail"> <img width="1920" height="969" src="https://149572954.v2.pressablecdn.com/wp-content/uploads/2024/05/Conductor-Leading-An-Orchestra.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Illustration of a person conducting an orchestra. Perspective is centered behind the person, who is standing on a small stool." itemprop="image" decoding="async" srcset="https://i0.wp.com/alistapart.com/wp-content/uploads/2024/05/Conductor-Leading-An-Orchestra.png?w=1920&ssl=1 1920w, https://i0.wp.com/alistapart.com/wp-content/uploads/2024/05/Conductor-Leading-An-Orchestra.png?resize=300%2C151&ssl=1 300w, https://i0.wp.com/alistapart.com/wp-content/uploads/2024/05/Conductor-Leading-An-Orchestra.png?resize=1024%2C517&ssl=1 1024w, https://i0.wp.com/alistapart.com/wp-content/uploads/2024/05/Conductor-Leading-An-Orchestra.png?resize=768%2C388&ssl=1 768w, https://i0.wp.com/alistapart.com/wp-content/uploads/2024/05/Conductor-Leading-An-Orchestra.png?resize=1536%2C775&ssl=1 1536w" sizes="(max-width: 1920px) 100vw, 1920px" /> </div> </figure> <header class="entry-header"> <div class="header-post-meta"> <span class="new-home-post"> New! </span> <span class="posted-on"><time class="entry-date published" datetime="2024-05-30T14:04:43-04:00">May 30, 2024</time><time class="updated" datetime="2024-06-27T07:39:24-04:00">June 27, 2024</time></span> </div> <h2 class="entry-title"><a href="https://alistapart.com/article/user-research-is-storytelling/" rel="bookmark">User Research Is Storytelling</a></h2> <div class="entry-meta"> <span class="byline"> by <span class="author vcard" itemprop="author" itemscope itemtype="http://schema.org/Person"><a class="url fn n" href="https://alistapart.com/author/gerry-duffy/" itemprop="url"> <span itemprop="name">Gerry Duffy</span></a></span></span> · <span class="comments-link"><a href="https://alistapart.com/article/user-research-is-storytelling/#comments">63 Comments<span class="screen-reader-text"> on User Research Is Storytelling</span></a></span> </div> </header> <div class="entry-content"> <p>How can user experience researchers make sure their voices are heard and their work is valued? By telling a good story. Gerry Duffy guides us through the thickets of research as storytelling by showing us how to recast an oft-maligned discipline as an opportunity to craft a convincing and exciting narrative.</p> </div> </article> <article id="post-7174340" class="featured-content featured-main post-7174340 article type-article status-publish has-post-thumbnail hentry category-content-strategy category-information-architecture category-user-experience"> <figure class="hero-wide"> </figure> <header class="entry-header"> <div class="header-post-meta"> <span class="new-home-post"> New! </span> <span class="posted-on"><time class="entry-date published" datetime="2024-04-16T15:51:34-04:00">April 16, 2024</time><time class="updated" datetime="2024-04-17T09:34:32-04:00">April 17, 2024</time></span> </div> <h2 class="entry-title"><a href="https://alistapart.com/article/prepersonalization-workshop/" rel="bookmark">To Ignite a Personalization Practice, Run this Prepersonalization Workshop</a></h2> <div class="entry-meta"> <span class="byline"> by <span class="author vcard" itemprop="author" itemscope itemtype="http://schema.org/Person"><a class="url fn n" href="https://alistapart.com/author/colineagan/" itemprop="url"> <span itemprop="name">Colin Eagan</span></a></span>, <span class="author vcard" itemprop="author" itemscope itemtype="http://schema.org/Person"><a class="url fn n" href="https://alistapart.com/author/jeffmacintyre/" itemprop="url"> <span itemprop="name">Jeffrey MacIntyre</span></a></span></span> · <span class="comments-link"><a href="https://alistapart.com/article/prepersonalization-workshop/#comments">52 Comments<span class="screen-reader-text"> on To Ignite a Personalization Practice, Run this Prepersonalization Workshop</span></a></span> </div> </header> <div class="entry-content"> <p>Looking to tailor your product to individual users’ needs? In this article, Colin Eagan and Jeffrey MacIntyre walk you through their approach to aligning different stakeholders toward the common goal of personalized user experiences.</p> </div> </article> </section> <section class="home-posts-wrap two-column-home-post"> <h2 class="section-title">More from A List Apart</h2> <div class="home-posts clear column-content ala-posts"> <article id="post-7174282" class="home-post-content post-7174282 article type-article status-publish has-post-thumbnail hentry category-state-of-the-web category-web-strategy"> <header class="entry-header"> <h4 class="home-post-title"><a href="https://alistapart.com/article/the-wax-and-the-wane-of-the-web/" rel="bookmark">The Wax and the Wane of the Web</a></h4> <div class="entry-meta"> <span class="byline"> by <span class="author vcard" itemprop="author" itemscope itemtype="http://schema.org/Person"><a class="url fn n" href="https://alistapart.com/author/stegrainer/" itemprop="url"> <span itemprop="name">Ste Grainer</span></a></span></span> </div> </header> <div class="entry-content"> Ste Grainer takes a brief look at the history of the web, where we are now, and how we can shape its future. </div> <footer class="footer-meta entry-meta"> <span class="cat-links"><a href="https://alistapart.com/blog/topic/state-of-the-web/" rel="category tag">State of the Web</a></span><span class="posted-on"><time class="entry-date published" datetime="2024-02-29T09:45:00-05:00">February 29, 2024</time><time class="updated" datetime="2024-02-29T10:02:54-05:00">February 29, 2024</time></span> </footer> </article> <article id="post-7174245" class="home-post-content post-7174245 article type-article status-publish has-post-thumbnail hentry category-accessibility category-code category-content category-workflow-tools"> <header class="entry-header"> <h4 class="home-post-title"><a href="https://alistapart.com/article/opportunities-for-ai-in-accessibility/" rel="bookmark">Opportunities for AI in Accessibility</a></h4> <div class="entry-meta"> <span class="byline"> by <span class="author vcard" itemprop="author" itemscope itemtype="http://schema.org/Person"><a class="url fn n" href="https://alistapart.com/author/agustafson/" itemprop="url"> <span itemprop="name">Aaron Gustafson</span></a></span></span> </div> </header> <div class="entry-content"> In this article, Aaron Gustafson muses on some of the many ways we can—and should—harness the capabilities of AI to create a more accessible world. </div> <footer class="footer-meta entry-meta"> <span class="cat-links"><a href="https://alistapart.com/blog/topic/accessibility/" rel="category tag">Accessibility</a></span><span class="posted-on"><time class="entry-date published" datetime="2024-02-07T09:00:00-05:00">February 07, 2024</time><time class="updated" datetime="2024-02-10T10:43:50-05:00">February 10, 2024</time></span> </footer> </article> <article id="post-7174236" class="home-post-content post-7174236 article type-article status-publish has-post-thumbnail hentry category-career category-content category-creativity category-design category-industry-business category-process category-writing tag-creative tag-creativity tag-process tag-work tag-working"> <header class="entry-header"> <h4 class="home-post-title"><a href="https://alistapart.com/article/i-am-a-creative/" rel="bookmark">I am a creative.</a></h4> <div class="entry-meta"> <span class="byline"> by <span class="author vcard" itemprop="author" itemscope itemtype="http://schema.org/Person"><a class="url fn n" href="https://alistapart.com/author/zeldman/" itemprop="url"> <span itemprop="name">Jeffrey Zeldman</span></a></span></span> </div> </header> <div class="entry-content"> A List Apart founder and web design OG Zeldman ponders the moments of inspiration, the hours of plodding, and the ultimate mystery at the heart of a creative career. </div> <footer class="footer-meta entry-meta"> <span class="cat-links"><a href="https://alistapart.com/blog/topic/career/" rel="category tag">Career</a></span><span class="posted-on"><time class="entry-date published" datetime="2024-01-29T10:53:09-05:00">January 29, 2024</time><time class="updated" datetime="2024-02-01T10:21:02-05:00">February 01, 2024</time></span> </footer> </article> <article id="post-7173966" class="home-post-content post-7173966 article type-article status-publish has-post-thumbnail hentry category-design"> <header class="entry-header"> <h4 class="home-post-title"><a href="https://alistapart.com/article/humility-an-essential-value/" rel="bookmark">Humility: An Essential Value</a></h4> <div class="entry-meta"> <span class="byline"> by <span class="author vcard" itemprop="author" itemscope itemtype="http://schema.org/Person"><a class="url fn n" href="https://alistapart.com/author/justindauer/" itemprop="url"> <span itemprop="name">Justin Dauer</span></a></span></span> </div> </header> <div class="entry-content"> In this excerpt from In Fulfillment: The Designer’s Journey, Justin Dauer ruminates on the past and the importance of keeping an open mind. </div> <footer class="footer-meta entry-meta"> <span class="cat-links"><a href="https://alistapart.com/blog/topic/design/" rel="category tag">Design</a></span><span class="posted-on"><time class="entry-date published" datetime="2023-06-22T09:00:00-04:00">June 22, 2023</time><time class="updated" datetime="2023-06-21T17:51:35-04:00">June 21, 2023</time></span> </footer> </article> <article id="post-7173664" class="home-post-content post-7173664 article type-article status-publish hentry category-content category-interaction-design"> <header class="entry-header"> <h4 class="home-post-title"><a href="https://alistapart.com/article/personalization-pyramid/" rel="bookmark">Personalization Pyramid: A Framework for Designing with User Data</a></h4> <div class="entry-meta"> <span class="byline"> by <span class="author vcard" itemprop="author" itemscope itemtype="http://schema.org/Person"><a class="url fn n" href="https://alistapart.com/author/colineagan/" itemprop="url"> <span itemprop="name">Colin Eagan</span></a></span>, <span class="author vcard" itemprop="author" itemscope itemtype="http://schema.org/Person"><a class="url fn n" href="https://alistapart.com/author/jeffmacintyre/" itemprop="url"> <span itemprop="name">Jeffrey MacIntyre</span></a></span></span> </div> </header> <div class="entry-content"> Colin Eagan and Jeffrey MacIntyre offer a “ground-up” approach to implementing personalized digital experiences that are intentional, ethical, and technologically sound. </div> <footer class="footer-meta entry-meta"> <span class="cat-links"><a href="https://alistapart.com/blog/topic/content/" rel="category tag">Content</a></span><span class="posted-on"><time class="entry-date published" datetime="2022-12-08T10:00:00-05:00">December 08, 2022</time><time class="updated" datetime="2022-12-07T23:37:19-05:00">December 07, 2022</time></span> </footer> </article> <article id="post-7173456" class="home-post-content post-7173456 article type-article status-publish has-post-thumbnail hentry category-code category-css"> <header class="entry-header"> <h4 class="home-post-title"><a href="https://alistapart.com/article/mobile-first-css-is-it-time-for-a-rethink/" rel="bookmark">Mobile-First CSS: Is It Time for a Rethink?</a></h4> <div class="entry-meta"> <span class="byline"> by <span class="author vcard" itemprop="author" itemscope itemtype="http://schema.org/Person"><a class="url fn n" href="https://alistapart.com/author/patrick-clancey/" itemprop="url"> <span itemprop="name">Patrick Clancey</span></a></span></span> </div> </header> <div class="entry-content"> Is mobile-first CSS always the best option? Patrick Clancey explores the pros and cons and lays out an alternative. </div> <footer class="footer-meta entry-meta"> <span class="cat-links"><a href="https://alistapart.com/blog/topic/code/" rel="category tag">Code</a></span><span class="posted-on"><time class="entry-date published" datetime="2022-06-08T22:13:10-04:00">June 08, 2022</time><time class="updated" datetime="2022-06-15T11:45:15-04:00">June 15, 2022</time></span> </footer> </article> <article id="post-7173400" class="home-post-content post-7173400 article type-article status-publish has-post-thumbnail hentry category-industry category-user-experience category-workflow-tools"> <header class="entry-header"> <h4 class="home-post-title"><a href="https://alistapart.com/article/redefine-success-first/" rel="bookmark">Designers, (Re)define Success First</a></h4> <div class="entry-meta"> <span class="byline"> by <span class="author vcard" itemprop="author" itemscope itemtype="http://schema.org/Person"><a class="url fn n" href="https://alistapart.com/author/lennartoverkamp/" itemprop="url"> <span itemprop="name">Lennart Overkamp</span></a></span></span> </div> </header> <div class="entry-content"> Learn how to engage stakeholders, focus on impactful objectives, and measure the results in this template for ethical design. </div> <footer class="footer-meta entry-meta"> <span class="cat-links"><a href="https://alistapart.com/blog/topic/industry/" rel="category tag">Industry</a></span><span class="posted-on"><time class="entry-date published" datetime="2022-05-12T10:00:00-04:00">May 12, 2022</time><time class="updated" datetime="2022-05-12T07:26:43-04:00">May 12, 2022</time></span> </footer> </article> <article id="post-7173224" class="home-post-content post-7173224 article type-article status-publish has-post-thumbnail hentry category-code category-css"> <header class="entry-header"> <h4 class="home-post-title"><a href="https://alistapart.com/article/breaking-out-of-the-box/" rel="bookmark">Breaking Out of the Box</a></h4> <div class="entry-meta"> <span class="byline"> by <span class="author vcard" itemprop="author" itemscope itemtype="http://schema.org/Person"><a class="url fn n" href="https://alistapart.com/author/patrick-brosset/" itemprop="url"> <span itemprop="name">Patrick Brosset</span></a></span></span> </div> </header> <div class="entry-content"> What can we do with thirty pixels? Windows Controls Overlay frees us from 40 years of history telling us how apps should look. </div> <footer class="footer-meta entry-meta"> <span class="cat-links"><a href="https://alistapart.com/blog/topic/code/" rel="category tag">Code</a></span><span class="posted-on"><time class="entry-date published" datetime="2021-12-09T10:00:00-05:00">December 09, 2021</time><time class="updated" datetime="2021-12-09T07:23:48-05:00">December 09, 2021</time></span> </footer> </article> <article id="post-7173136" class="home-post-content post-7173136 article type-article status-publish has-post-thumbnail hentry category-user-experience category-user-research"> <header class="entry-header"> <h4 class="home-post-title"><a href="https://alistapart.com/article/how-to-sell-ux-research/" rel="bookmark">How to Sell UX Research with Two Simple Questions</a></h4> <div class="entry-meta"> <span class="byline"> by <span class="author vcard" itemprop="author" itemscope itemtype="http://schema.org/Person"><a class="url fn n" href="https://alistapart.com/author/sophiavoychehovski/" itemprop="url"> <span itemprop="name">Sophia V. Prater</span></a></span></span> </div> </header> <div class="entry-content"> Seriously, do not ever design screens again without first answering these questions: what are the objects and how do they relate? </div> <footer class="footer-meta entry-meta"> <span class="cat-links"><a href="https://alistapart.com/blog/topic/user-experience/" rel="category tag">User Experience</a></span><span class="posted-on"><time class="entry-date published" datetime="2021-10-21T10:00:00-04:00">October 21, 2021</time><time class="updated" datetime="2021-10-21T07:17:11-04:00">October 21, 2021</time></span> </footer> </article> <article id="post-7173122" class="home-post-content post-7173122 article type-article status-publish has-post-thumbnail hentry category-content category-content-strategy"> <header class="entry-header"> <h4 class="home-post-title"><a href="https://alistapart.com/article/a-content-model-is-not-a-design-system/" rel="bookmark">A Content Model Is Not a Design System</a></h4> <div class="entry-meta"> <span class="byline"> by <span class="author vcard" itemprop="author" itemscope itemtype="http://schema.org/Person"><a class="url fn n" href="https://alistapart.com/author/mike-wills/" itemprop="url"> <span itemprop="name">Mike Wills</span></a></span></span> </div> </header> <div class="entry-content"> Why do so many content models still look more like design systems rather than reflecting structured data? Mike Wills takes us on a personal journey as he examines his own past experiences and invites us to conceive content models that articulate meaning and group related content together for use on any channel. </div> <footer class="footer-meta entry-meta"> <span class="cat-links"><a href="https://alistapart.com/blog/topic/content/" rel="category tag">Content</a></span><span class="posted-on"><time class="entry-date published" datetime="2021-09-23T10:00:00-04:00">September 23, 2021</time><time class="updated" datetime="2021-09-23T09:21:30-04:00">September 23, 2021</time></span> </footer> </article> <article id="post-7173095" class="home-post-content post-7173095 article type-article status-publish has-post-thumbnail hentry category-process category-usability category-user-experience category-user-research"> <header class="entry-header"> <h4 class="home-post-title"><a href="https://alistapart.com/article/design-for-safety-excerpt/" rel="bookmark">Design for Safety, An Excerpt</a></h4> <div class="entry-meta"> <span class="byline"> by <span class="author vcard" itemprop="author" itemscope itemtype="http://schema.org/Person"><a class="url fn n" href="https://alistapart.com/author/eva-penzeymoog/" itemprop="url"> <span itemprop="name">Eva PenzeyMoog</span></a></span></span> </div> </header> <div class="entry-content"> In this excerpt from Design for Safety, Eva PenzeyMoog discusses concrete ways you can incorporate safety awareness into your design processes. </div> <footer class="footer-meta entry-meta"> <span class="cat-links"><a href="https://alistapart.com/blog/topic/process/" rel="category tag">Process</a></span><span class="posted-on"><time class="entry-date published" datetime="2021-08-26T11:01:43-04:00">August 26, 2021</time><time class="updated" datetime="2021-08-26T11:01:44-04:00">August 26, 2021</time></span> </footer> </article> <article id="post-7173076" class="home-post-content post-7173076 article type-article status-publish has-post-thumbnail hentry category-design category-web-strategy"> <header class="entry-header"> <h4 class="home-post-title"><a href="https://alistapart.com/article/sustainable-web-design-excerpt/" rel="bookmark">Sustainable Web Design, An Excerpt</a></h4> <div class="entry-meta"> <span class="byline"> by <span class="author vcard" itemprop="author" itemscope itemtype="http://schema.org/Person"><a class="url fn n" href="https://alistapart.com/author/tom-greenwood/" itemprop="url"> <span itemprop="name">Tom Greenwood</span></a></span></span> </div> </header> <div class="entry-content"> In this excerpt from Sustainable Web Design, Tom Greenwood provides clear guidance on how to track and address the carbon footprint of our websites. </div> <footer class="footer-meta entry-meta"> <span class="cat-links"><a href="https://alistapart.com/blog/topic/design/" rel="category tag">Design</a></span><span class="posted-on"><time class="entry-date published" datetime="2021-08-05T10:00:00-04:00">August 05, 2021</time><time class="updated" datetime="2021-08-04T17:23:57-04:00">August 04, 2021</time></span> </footer> </article> </div> <aside id="secondary" class="widget-area column-sidebar"> <section id="block-2" class="widget widget_block"><div class="banner"> <a href="https://toddle.dev?utm_source=ala"> <img decoding="async" class="banner-logo" src="https://149572954.v2.pressablecdn.com/wp-content/uploads/2024/09/A-List-Apart-toddle.png" alt="Toddle.dev Logo" /> <p>The open-source editor for front-end dev teams. Ditch the text editor and get real-time output and cross-team collaboration.</p> </a> </div> <div class="banner ala-banner"> <a href="https://abookapart.com/"> <img decoding="async" src="https://149572954.v2.pressablecdn.com/wp-content/uploads/2019/03/logo_a-book-apart-color.png" alt="A Book Apart Logo" class="banner-logo" /> <p>A Book Apart:<br> Brief books for people who make websites.</p> </a> </div></section></aside> </section> </main> </div> <aside class="widget-area pre-footer-widget-area"> <section id="custom_html-3" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><div class="homepage-pre-footer-message"> A List Apart explores the design, development, and meaning of web content, with a special focus on web standards and best practices. Explore our <a href="https://alistapart.com/articles">articles</a> or find out more <a href="https://alistapart.com/about">about us</a>.</div></div></section></aside> </div> <div class="widget-area header-widget"> <section id="block-3" class="widget widget_block"><div class="banner"> <a href="https://toddle.dev?utm_source=ala"> <img decoding="async" class="banner-logo" src="https://149572954.v2.pressablecdn.com/wp-content/uploads/2024/09/A-List-Apart-toddle.png" alt="Toddle.dev Logo" /> <p>The open-source editor for front-end dev teams. Ditch the text editor and get real-time output and cross-team collaboration.</p> </a> </div></section> </div> <footer id="colophon" class="site-footer" itemscope itemtype="https://schema.org/WebPage"> <nav class="footer-navigation footer navigation-top" itemscope itemtype="http://schema.org/SiteNavigationElement"> <div class="menu-footer-pages-container"><ul id="footer-top-left-menu" class="footer-top-left-menu"><li id="menu-item-6000544" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6000544"><a href="https://alistapart.com/about/" itemprop="url">About</a></li> <li id="menu-item-6000545" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6000545"><a href="https://alistapart.com/authors/" itemprop="url">Authors</a></li> <li id="menu-item-6000546" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6000546"><a href="https://alistapart.com/about/masthead/" itemprop="url">Masthead</a></li> <li id="menu-item-6000547" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6000547"><a href="https://alistapart.com/about/style-guide/" itemprop="url">Style Guide</a></li> <li id="menu-item-6000548" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6000548"><a href="https://alistapart.com/contact/" itemprop="url">Contact</a></li> <li id="menu-item-6000549" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6000549"><a href="https://alistapart.com/about/sponsor/" itemprop="url">Sponsorships</a></li> </ul></div><div class="menu-footer-social-container"><ul id="footer-top-right-menu" class="footer-top-right-menu"><li id="menu-item-6000550" class="footer-menu-title menu-item menu-item-type-custom menu-item-object-custom menu-item-6000550"><a itemprop="url">Follow us:</a></li> <li id="menu-item-7171602" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7171602"><a href="https://alistapart.com/about/rss-feed/" itemprop="url">RSS</a></li> <li id="menu-item-6000552" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6000552"><a href="https://alistapart.com/email-signup/" itemprop="url">Email</a></li> <li id="menu-item-6000553" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6000553"><a href="https://www.facebook.com/alistapart" itemprop="url">Facebook</a></li> <li id="menu-item-6000554" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6000554"><a href="https://www.twitter.com/alistapart" itemprop="url">Twitter</a></li> </ul></div> </nav> <div class="widget-area footer-widget-area-wrap"> <div class="widget-area footer-widget-area"> <section id="custom_html-7" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><div class="footer-promo"> <a href="https://abookapart.com"> <img data-recalc-dims="1" src="https://i0.wp.com/alistapart.com/wp-content/uploads/2019/04/promo_aba_2.jpg?w=960&ssl=1" alt="A Book Apart. Brief books for people who design, write, and code."> <div class="footer-promo-copy"> <p class="promo-title">A Book Apart</p> <p>Brief books for people who design, write, and code.</p> <p>Bundle books and save!</p> <p class="arrow">Shop now</p> </div> </a> </div> </div></section> </div> </div> <div class="site-info-wrap"> <div class="site-info"> <p> ISSN 1534-0295 · Copyright © <span itemprop="copyrightYear"> 1998–2025</span> <span itemprop="copyrightHolder"> A List Apart & Our Authors</span> </p> <p> <a href="https://wordpress.com/wp/?partner_domain=alistapart.com&utm_source=Automattic&utm_medium=colophon&utm_campaign=Concierge%20Referral&utm_term=alistapart.com" class="imprint" target="_blank" rel="nofollow">Proudly powered by WordPress.</a> <a href="https://pressable.com/?utm_source=Automattic&utm_medium=rpc&utm_campaign=Concierge%20Referral&utm_term=concierge" class="imprint" target="_blank" rel="nofollow">Hosted by Pressable.</a> </p> </div> </div> <nav class="footer-navigation footer navigation-bottom"> <ul id="footer-bottom-left-menu" class="footer-bottom-left-menu"><li id="menu-item-6000555" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6000555"><a href="https://alistapart.com/about/copyright/" itemprop="url">Permissions & Copyright</a></li> <li id="menu-item-6000556" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy menu-item-6000556"><a rel="privacy-policy" href="https://alistapart.com/about/privacy-policy/" itemprop="url">Privacy Policy</a></li> <li id="menu-item-6000558" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6000558"><a href="https://webtype.com/" itemprop="url">Fonts by Webtype</a></li> </ul><ul id="footer-bottom-right-menu" class="footer-bottom-right-menu"><li id="menu-item-6000559" class="aea menu-item menu-item-type-custom menu-item-object-custom menu-item-6000559"><a href="http://aneventapart.com/" itemprop="url"><span class="screen-reader-text">An Event Apart</span></a></li> <li id="menu-item-6000560" class="aba menu-item menu-item-type-custom menu-item-object-custom menu-item-6000560"><a href="http://abookapart.com/" itemprop="url"><span class="screen-reader-text">A Book Apart</span></a></li> </ul> </nav> </footer> </div> <script type="text/template" id="tmpl-subscriber-only-message"> <div class="coil-message-inner"> <div class="coil-message-header"> <# if ( data.headerLogo ) { #> {{{data.headerLogo}}} <# } #> <# if ( data.title ) { #> <p class="coil-message-title">{{data.title}}</p> <# } #> <# if ( data.content ) { #> <p class="coil-message-content">{{data.content}}</p> <# } #> <# if ( data.button.href ) { #> <a target="_blank" href="{{data.button.href}}" class="coil-message-button">{{data.button.text}}</a> <# } #> </div> </div> </script> <script type="text/template" id="tmpl-streaming-widget-message"> <div class="streaming-widget"> <# if ( data.widget.href ) { #> <a target="_blank" href="{{data.widget.href}}"> <# if ( data.headerLogo ) { #> <img src="{{data.headerLogo}}"> <# } #> <# if ( data.widget.text ) { #> <div> {{data.widget.text}} </div> <# } #> </a> <# } #> <span class="streaming-widget-dismiss" id="js-streaming-widget-dismiss">×</span> </div> </script>  <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');   ga('create', 'UA-11757054-1', 'auto');  ga('send', 'pageview');   </script>  <script type="text/javascript" src="https://149572954.v2.pressablecdn.com/wp-includes/js/underscore.min.js?ver=1.13.7" id="underscore-js"></script> <script type="text/javascript" id="wp-util-js-extra"> /* <![CDATA[ */ var _wpUtilSettings = {"ajax":{"url":"\/wp-admin\/admin-ajax.php"}}; /* ]]> */ </script> <script type="text/javascript" src="https://149572954.v2.pressablecdn.com/wp-includes/js/wp-util.min.js?ver=6.7.1" id="wp-util-js"></script> <script type="text/javascript" id="coil-monetization-js-js-extra"> /* <![CDATA[ */ var coilParams = {"content_container":".content-area .entry-content","paywall_title":"Keep Reading with Coil","loading_content":"Verifying Web Monetization status. Please wait...","paywall_message":"We partnered with Coil to offer exclusive content. Access this and other great content with a Coil membership.","streaming_widget_unpaid_message":"Support us with Coil","streaming_widget_paid_message":"Thanks for your support!","show_streaming_widget_to_members":"1","streaming_widget_link":"https:\/\/coil.com\/","paywall_button_text":"Become a Coil Member","paywall_button_link":"https:\/\/coil.com\/","post_excerpt":"","has_coil_divider":"","coil_message_branding":"coil_logo","streaming_widget_theme":"dark","streaming_widget_size":"large","streaming_widget_position":"bottom-right","streaming_widget_margin_top":"32","streaming_widget_margin_right":"32","streaming_widget_margin_bottom":"32","streaming_widget_margin_left":"32","streaming_widget_enabled":"1","site_logo":"https:\/\/i0.wp.com\/alistapart.com\/wp-content\/uploads\/2019\/03\/ala-logo-big.png?fit=960%2C98&ssl=1","coil_logo":"https:\/\/alistapart.com\/wp-content\/plugins\/coil-web-monetization\/assets\/images\/coil-icn-black.svg","coil_logo_streaming":"https:\/\/alistapart.com\/wp-content\/plugins\/coil-web-monetization\/assets\/images\/coil-icn-black-streaming.svg","coil_logo_white":"https:\/\/alistapart.com\/wp-content\/plugins\/coil-web-monetization\/assets\/images\/coil-icn-white.svg","coil_logo_white_streaming":"https:\/\/alistapart.com\/wp-content\/plugins\/coil-web-monetization\/assets\/images\/coil-icn-white-streaming.svg","exclusive_message_theme":"light","font_selection":"","admin_missing_id_notice":"This post is monetized but you have not set your payment pointer ID in the <a href=\"https:\/\/alistapart.com\/wp-admin\/admin.php?page=coil\">Coil settings page<\/a>. Only content set to show for all visitors will show."}; /* ]]> */ </script> <script type="text/javascript" src="https://149572954.v2.pressablecdn.com/wp-content/plugins/coil-web-monetization/assets/js/initialize-monetization.min.js?ver=2.0.2" id="coil-monetization-js-js"></script> <script type="text/javascript" src="https://149572954.v2.pressablecdn.com/wp-content/themes/ala/js/navigation.js?ver=20151215" id="ala-navigation-js"></script> <script type="text/javascript" src="https://149572954.v2.pressablecdn.com/wp-content/themes/ala/js/prism/prism.js?ver=1.0" id="ala-prism-js"></script> <script type="text/javascript" src="https://149572954.v2.pressablecdn.com/wp-content/themes/ala/js/skip-link-focus-fix.js?ver=20151215" id="ala-skip-link-focus-fix-js"></script> <script type="text/javascript" src="https://149572954.v2.pressablecdn.com/wp-content/themes/ala/js/adchecka.js?ver=1.0" id="ala-adchecka-js"></script> <script type="text/javascript" src="https://149572954.v2.pressablecdn.com/wp-content/themes/ala/js/loadadchecka.js?ver=1.0" id="ala-loadadchecka-js"></script> <script type="text/javascript" src="https://stats.wp.com/e-202502.js" id="jetpack-stats-js" data-wp-strategy="defer"></script> <script type="text/javascript" id="jetpack-stats-js-after"> /* <![CDATA[ */ _stq = window._stq || []; _stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"158094726\",\"post\":\"6000475\",\"tz\":\"-5\",\"srv\":\"alistapart.com\",\"hp\":\"atomic\",\"ac\":\"3\",\"amp\":\"0\",\"j\":\"1:14.2-beta\"}") ]); _stq.push([ "clickTrackerInit", "158094726", "6000475" ]); /* ]]> */ </script> <script type="text/javascript"> (function() { var t = document.createElement( 'script' ); t.type = 'text/javascript'; t.async = true; t.id = 'gauges-tracker'; t.setAttribute( 'data-site-id', '606492000b21314ec4b22148' ); t.src = '//secure.gaug.es/track.js'; var s = document.getElementsByTagName( 'script' )[0]; s.parentNode.insertBefore( t, s ); })(); </script> </body> </html>