{"id":26734,"date":"2016-07-04T23:01:39","date_gmt":"2016-07-04T15:01:39","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=26734"},"modified":"2022-09-02T18:14:56","modified_gmt":"2022-09-02T10:14:56","slug":"progressive-enhancements-web-design-best-practices","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/progressive-enhancements-web-design-best-practices\/","title":{"rendered":"Best Practices for Progressive Enhancement in Web Design"},"content":{"rendered":"<p>The craft of building websites is incredibly complex with many fast-changing parts. The goal of the web design community is to <strong>lessen the complexity<\/strong>, and <strong>reduce the potential for error<\/strong> at each stage of the creation process.<\/p>\n<p><strong>Progressive enhancement<\/strong> is such an idea in web design that aims to <strong>reduce errors<\/strong> and <strong>provide a consistent user experience<\/strong> across the board. The concept has its <a href=\"https:\/\/en.wikipedia.org\/wiki\/Progressive_enhancement\" target=\"_blank\" rel=\"noopener\">own Wikipedia page<\/a> which explains it as a method of <strong>fully-accessible content<\/strong>, rendering enhanced features only when supported by the browser.<\/p>\n<p>It\u2019s easy to understand progressive enhancement but not as easy to apply it directly to your design work. I\u2019d like to cover some <strong>best practices for progressive enhancement in real-world projects<\/strong> to <strong>help designers think more sustainably about their workflow<\/strong>.<\/p>\n<h2>1. Understanding Progressive Enhancement<\/h2>\n<p>The theory of progressive enhancement recommends to <strong>start with a simple website<\/strong> that works in all browsers, making it <strong>accessible for every visitor<\/strong>. Then add features whenever possible.<\/p>\n<p>This is the opposite of <a href=\"https:\/\/www.hongkiat.com\/blog\/css-javascript-fallback-methods\/\" target=\"_blank\" rel=\"noopener\">graceful degradation<\/a> which includes all features by default, then degrades when something doesn\u2019t work.<\/p>\n<p>Progressive enhancement is better for the overall user experience, because at its core it <strong>loads only necessary elements<\/strong>. Every web browser can support text (and usually images). Without any CSS this information will look bland and tasteless, but it\u2019ll be accessible.<\/p>\n<p>This <a href=\"https:\/\/alistapart.com\/article\/understandingprogressiveenhancement\" target=\"_blank\" rel=\"noopener nofollow\"><em>List Apart<\/em> article<\/a> argues that progressive enhancement is <strong>content-first<\/strong> with <strong>styles and dynamic components added later<\/strong>. Content in semantic HTML should be delivered before anything else.<\/p>\n<p>The advanced CSS and JavaScript we use today are widely supported, but if we want to follow the principles of progressive enhancement, they should be considered luxuries.<\/p>\n<p>Here\u2019s a general rundown of the main features of progressive enhancement that you should take into account:<\/p>\n<ul>\n<li><strong>Semantic markup<\/strong> for all content<\/li>\n<li>Users\u2019 <strong>browser preferences<\/strong> needs to be respected<\/li>\n<li>Content and basic functionality should be <strong>available to all users<\/strong><\/li>\n<li>Unobtrusive JavaScript is loaded only <strong>in environments that can support it<\/strong><\/li>\n<\/ul>\n<p>Technological restraints in front-end development are primarily determined by browser compatibility. Progressive enhancement gets you back to the basics, thinking about how the <strong>bare-bone simplest webpage<\/strong> might look like. From there, you can <strong>plan for more advanced features<\/strong>, like CSS3 properties.<\/p>\n<p>But what about browsers that don\u2019t support modern CSS3? This is where sites like <a href=\"https:\/\/caniuse.com\/\" target=\"_blank\" rel=\"noopener\">Can I Use<\/a> come into play. You should decide which features are worth implementing and make judgments based <strong>on the target audience of your website<\/strong>.<\/p>\n<h2>2. Subsistence In Stylesheets<\/h2>\n<p>Most browsers today support all the basic properties you need. But <strong>advanced CSS3 is still a problem for legacy users<\/strong>, and progressive enhancement offers a solution.<\/p>\n<p>Instead of looking for fallback methods to maintain these new features, concern yourself first with <strong>proper layout structures<\/strong>.<\/p>\n<p>Write <a href=\"https:\/\/www.hongkiat.com\/blog\/html-5-semantics\/\">semantic HTML<\/a> and <a href=\"https:\/\/www.hongkiat.com\/blog\/keep-css3-markup-slim\/\">CSS markup<\/a> that works in as many active browsers as possible (support for ancient browsers like IE5 support isn\u2019t necessary).<\/p>\n<figure><a href=\"https:\/\/jsfiddle.net\/a9jbq5bj\/4\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progressive-enhancements-web-design-best-practices\/01-jsfiddle-fluid-third-columns-css.jpg\" alt=\"jsfiddle columns css example\" width=\"700\" height=\"400\"><\/a><\/figure>\n<p>Take for example <a href=\"https:\/\/jsfiddle.net\/a9jbq5bj\/4\/\" target=\"_blank\" rel=\"noopener\">this JSFiddle<\/a> that uses floats with two sidebars (<code>.fixed<\/code>), and a fluid content area (<code>.fluid<\/code>). If you delete all CSS, and rerun the code you\u2019ll notice everything stacks up nicely with the first column, then second, and finally the last.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progressive-enhancements-web-design-best-practices\/02-jsfiddle-no-css-columns.jpg\" alt=\"jsfiddle no css columns\" width=\"700\" height=\"400\"><\/figure>\n<p>Some developers would prefer to have the content column (<code>.fluid<\/code>) appear first in the HTML. This is where progressive enhancement comes into play, and <a href=\"https:\/\/matthewjamestaylor.com\/equal-height-columns\" target=\"_blank\" rel=\"noopener\">alternate CSS solutions<\/a> become viable.<\/p>\n<p>The two primary goals of your HTML are as follows:<\/p>\n<ul>\n<li>Fully <strong>semantic and valid<\/strong> code<\/li>\n<li>A <strong>consistent experience<\/strong> for everyone<\/li>\n<\/ul>\n<p>The most straightforward way to achieve these goals is to <strong>start from nothing<\/strong> and <strong>work up,<\/strong> as most progressive enhancement advocates would recommend it.<\/p>\n<p><strong>If your code looks good with CSS both disabled and enabled, then it offers a reasonable solution for everyone.<\/strong><\/p>\n<p>It\u2019s also worth considering <strong>at what point you drop support for something<\/strong>. Microsoft has already dropped <a href=\"https:\/\/superuser.com\/questions\/127628\/what-is-the-official-end-of-support-date-for-internet-explorer-6-on-windows-xp\" target=\"_blank\" rel=\"noopener\">major support for IE6 <\/a>, so users running that browser may not be worth your time.<\/p>\n<p>But there\u2019s still one big question: if a browser doesn\u2019t support my modern CSS, what should I do?<\/p>\n<p>You simply <strong>write code that works <em>without<\/em> it<\/strong>, and consider the modern CSS as a progressive enhancement. This is the beauty of the progressive enhancement methodology.<\/p>\n<p>You don\u2019t need fallbacks, because you\u2019re <strong>basically assuming that nothing is supported by default<\/strong>.<\/p>\n<p>Progressive enhancement methods are about making the site usable even in cases when something isn\u2019t supported\u2014but if it is supported, all the better.<\/p>\n<p>You need to consider <strong>how content actually flows without CSS<\/strong>. For example, when I disable CSS on <a href=\"https:\/\/panic.com\/transmit\/\" target=\"_blank\" rel=\"noopener\">Transmit\u2019s website<\/a>, the content still flows organically down the page.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progressive-enhancements-web-design-best-practices\/03-transmit-website-css-disabled.jpg\" alt=\"transmit website css disabled\" width=\"700\" height=\"400\"><figcaption class=\"entry-image-caption\">IMAGE: <a href=\"https:\/\/panic.com\/transmit\/\" target=\"_blank\" rel=\"noopener\">Transmit<\/a><\/figcaption><\/figure>\n<p>Yes, it\u2019s ugly, and yes, it feels like we\u2019ve lost twenty years of progress\u2026 <strong>but it works<\/strong>.<\/p>\n<h2>3. Handling JavaScript<\/h2>\n<p>It\u2019s worth mentioning that each JavaScript issue you may bump into during the development process is tricky and unique. When you build a new project with progressive enhancement, you should list all your required JS-based features, and consider how they could <strong>operate without JavaScript<\/strong>.<\/p>\n<p>This will require lots of online research to find valid solutions. Aaron Gustafson wrote a great <a href=\"https:\/\/www.aaron-gustafson.com\/notebook\/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement\/\" target=\"_blank\" rel=\"noopener\">blog post<\/a> with solutions to various problems, like replacing Ajax with a <a href=\"https:\/\/www.w3schools.com\/tags\/att_meta_http_equiv.asp\" target=\"_blank\" rel=\"noopener\">meta refresh<\/a> for content inside an iframe.<\/p>\n<p>Also, when you create JavaScript tabs, it\u2019s a good idea to <strong>use anchor links with real ID values<\/strong>. That way, when JavaScript is disabled, you can still have the tabs visible and accessible by anchor value. Aaron wrote another piece on <a href=\"https:\/\/alistapart.com\/article\/progressiveenhancementwithjavascript\" target=\"_blank\" rel=\"noopener nofollow\">A List Apart<\/a> that covers a more general overview of how you should think about these problems.<\/p>\n<p>Here\u2019s another example. Let\u2019s say you have a link that loads content dynamically. The <code>href<\/code> value is empty, because everything loads via JavaScript with the <a href=\"https:\/\/api.jquery.com\/event.preventdefault\/\" target=\"_blank\" rel=\"noopener\">preventDefault()<\/a> method.<\/p>\n<p>Instead, it would be wise to set the <code>href<\/code> property to <strong>point to a different page<\/strong> where the content could load naturally, but <strong>the visitor only sees that page when JavaScript is disabled<\/strong>.<\/p>\n<p>Progressive enhancement is about <a href=\"https:\/\/christianheilmann.com\/2015\/02\/18\/progressive-enhancement-is-not-about-javascript-availability\/\" target=\"_blank\" rel=\"noopener\">more than JavaScript<\/a>, but with web development advancing further every year, there\u2019s no doubt that JavaScript plays a significant role.<\/p>\n<p>Operate under the assumption that <strong>everything has been disabled<\/strong>, and <strong>scale up from there<\/strong>. This might include problems with embedded widgets that are out of your control, the <code><a href=\"https:\/\/stackoverflow.com\/\/questions\/121203\/how-to-detect-if-javascript-is-disabled\" target=\"_blank\" rel=\"noopener\">&lt;noscript&gt; tag<\/a><\/code> is a viable solution here.<\/p>\n<p>Also think about JavaScript features that <strong>lack comprehensive browser support<\/strong>. This includes the <a href=\"https:\/\/caniuse.com\/fetch\" target=\"_blank\" rel=\"noopener\">fetch API<\/a>, the <a href=\"https:\/\/caniuse.com\/push-api\" target=\"_blank\" rel=\"noopener\">push API<\/a>, the <a href=\"https:\/\/caniuse.com\/arrow-functions\" target=\"_blank\" rel=\"noopener\">arrow function syntax<\/a>, or even browsers without support for modern libraries like <a href=\"https:\/\/jquery.com\/browser-support\/\" target=\"_blank\" rel=\"noopener\">jQuery<\/a>.<\/p>\n<p>Every feature requires <strong>individual testing<\/strong> with an individual solution.<\/p>\n<p>The essence of progressively enhanced JavaScript is to <strong>build content that functions without any scripting<\/strong>. This may lead to a rudimentary user experience, but that\u2019s okay as long as the website is usable, and the content is accessible.<\/p>\n<p>If you want to do live testing, you can typically <strong>disable CSS and JavaScript in every major browser<\/strong> to see how your website performs. It\u2019s also worth considering using extensions like <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/a-tester-wcag-20-web-acce\/mbmcfgbjmddnnpkibfgnofecdemjcdaa?hl=en-GB\" target=\"_blank\" rel=\"noopener\">A-Tester<\/a> for <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/\" target=\"_blank\" rel=\"noopener nofollow\">WCAG<\/a> compliance.<\/p>\n<p>JavaScript with progressive enhancement is a huge topic. Here are some posts to help you dig deeper:<\/p>\n<ul>\n<li><a href=\"https:\/\/molily.de\/interaction-is-key\/\" target=\"_blank\" rel=\"noopener\">Interaction is Key: Progressive Enhancement and JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/cognition.happycog.com\/article\/progressive-enhancement-its-about-the-content\" target=\"_blank\" rel=\"noopener\">Progressive Enhancement: It\u2019s About the Content<\/a><\/li>\n<li><a href=\"https:\/\/www.aaron-gustafson.com\/notebook\/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement\/\" target=\"_blank\" rel=\"noopener\">How to Apply Progressive Enhancement When JavaScript Seems Like a Requirement<\/a><\/li>\n<\/ul>\n<h2>Where Progressive Enhancement Falls Short<\/h2>\n<p>Although progressive enhancement is a brilliant idea for almost every type of modern website, it simply may <strong>not be applicable to projects that aim to push the limits of web technology<\/strong>.<\/p>\n<p>For example, this methodology is not a good solution for web applications that function solely on Ajax calls. Is that a good choice for accessibility? No, of course not. But if that were the case most of <a href=\"https:\/\/tympanus.net\/codrops\/category\/tutorials\/\" target=\"_blank\" rel=\"noopener\">Codrops\u2019 tutorials<\/a> wouldn\u2019t even exist. You have to <strong>remember the target audience<\/strong>.<\/p>\n<p>A business website probably doesn\u2019t have the audience that cares about flashy new CSS3 <a href=\"https:\/\/www.w3schools.com\/cssref\/css3_pr_perspective.asp\" target=\"_blank\" rel=\"noopener\">perspective properties<\/a>, but web developers can be the perfect audience for such advanced features.<\/p>\n<p>Progressive enhancement only falls short for web applications that <strong>simply don\u2019t care about going back in time<\/strong>. I realize these web applications are few and far between, but developers love progress, and in some cases it can be sensible to forge ahead with new tech leaving the stragglers behind.<\/p>\n<p>I am a proponent of progressive enhancement (or even graceful degradation, your choice) for general web projects. But I also realize it\u2019s not the perfect solution for everything. In fact, there is no perfect solution. It all boils down to audience needs and project goals.<\/p>\n<h2>Further Reading<\/h2>\n<p>If you\u2019re constantly building web projects, you should consider applying progressive enhancement to your workflow. It\u2019s much easier than it seems at first glance, and it all starts with the fundamentals. Most topics surrounding progressive enhancement just require practice and testing. Try out the suggestions from this article, and see what works best for your workflow.<\/p>\n<p>If you want to learn more about progressive enhancement, check out these related posts:<\/p>\n<ul>\n<li><a href=\"https:\/\/alistapart.com\/article\/understandingprogressiveenhancement\" target=\"_blank\" rel=\"noopener nofollow\">Understanding Progressive Enhancement<\/a><\/li>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2009\/04\/progressive-enhancement-what-it-is-and-how-to-use-it\/\" target=\"_blank\" rel=\"noopener\">Progressive Enhancement: What It Is, And How To Use It?<\/a><\/li>\n<li><a href=\"https:\/\/www.sitepoint.com\/javascript-dependency-backlash-myth-busting-progressive-enhancement\/\" target=\"_blank\" rel=\"noopener nofollow\">The JavaScript-Dependency Backlash: Myth-Busting Progressive Enhancement<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>The craft of building websites is incredibly complex with many fast-changing parts. The goal of the web design community is to lessen the complexity, and reduce the potential for error at each stage of the creation process. Progressive enhancement is such an idea in web design that aims to reduce errors and provide a consistent&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[352],"tags":[3847,1765,3827],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Best Practices for Progressive Enhancement in Web Design - Hongkiat<\/title>\n<meta name=\"description\" content=\"The craft of building websites is incredibly complex with many fast-changing parts. The goal of the web design community is to lessen the complexity, and\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/progressive-enhancements-web-design-best-practices\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Best Practices for Progressive Enhancement in Web Design\" \/>\n<meta property=\"og:description\" content=\"The craft of building websites is incredibly complex with many fast-changing parts. The goal of the web design community is to lessen the complexity, and\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/progressive-enhancements-web-design-best-practices\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-07-04T15:01:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-02T10:14:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/progressive-enhancements-web-design-best-practices\/01-jsfiddle-fluid-third-columns-css.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progressive-enhancements-web-design-best-practices\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progressive-enhancements-web-design-best-practices\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Best Practices for Progressive Enhancement in Web Design\",\"datePublished\":\"2016-07-04T15:01:39+00:00\",\"dateModified\":\"2022-09-02T10:14:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progressive-enhancements-web-design-best-practices\\\/\"},\"wordCount\":1509,\"commentCount\":18,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progressive-enhancements-web-design-best-practices\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/progressive-enhancements-web-design-best-practices\\\/01-jsfiddle-fluid-third-columns-css.jpg\",\"keywords\":[\"semantics\",\"Typography Design\",\"ui\\\/ux\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progressive-enhancements-web-design-best-practices\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progressive-enhancements-web-design-best-practices\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progressive-enhancements-web-design-best-practices\\\/\",\"name\":\"Best Practices for Progressive Enhancement in Web Design - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progressive-enhancements-web-design-best-practices\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progressive-enhancements-web-design-best-practices\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/progressive-enhancements-web-design-best-practices\\\/01-jsfiddle-fluid-third-columns-css.jpg\",\"datePublished\":\"2016-07-04T15:01:39+00:00\",\"dateModified\":\"2022-09-02T10:14:56+00:00\",\"description\":\"The craft of building websites is incredibly complex with many fast-changing parts. The goal of the web design community is to lessen the complexity, and\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progressive-enhancements-web-design-best-practices\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progressive-enhancements-web-design-best-practices\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progressive-enhancements-web-design-best-practices\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/progressive-enhancements-web-design-best-practices\\\/01-jsfiddle-fluid-third-columns-css.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/progressive-enhancements-web-design-best-practices\\\/01-jsfiddle-fluid-third-columns-css.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progressive-enhancements-web-design-best-practices\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Best Practices for Progressive Enhancement in Web Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Best Practices for Progressive Enhancement in Web Design - Hongkiat","description":"The craft of building websites is incredibly complex with many fast-changing parts. The goal of the web design community is to lessen the complexity, and","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/progressive-enhancements-web-design-best-practices\/","og_locale":"en_US","og_type":"article","og_title":"Best Practices for Progressive Enhancement in Web Design","og_description":"The craft of building websites is incredibly complex with many fast-changing parts. The goal of the web design community is to lessen the complexity, and","og_url":"https:\/\/www.hongkiat.com\/blog\/progressive-enhancements-web-design-best-practices\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-07-04T15:01:39+00:00","article_modified_time":"2022-09-02T10:14:56+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/progressive-enhancements-web-design-best-practices\/01-jsfiddle-fluid-third-columns-css.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/progressive-enhancements-web-design-best-practices\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/progressive-enhancements-web-design-best-practices\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Best Practices for Progressive Enhancement in Web Design","datePublished":"2016-07-04T15:01:39+00:00","dateModified":"2022-09-02T10:14:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/progressive-enhancements-web-design-best-practices\/"},"wordCount":1509,"commentCount":18,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/progressive-enhancements-web-design-best-practices\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/progressive-enhancements-web-design-best-practices\/01-jsfiddle-fluid-third-columns-css.jpg","keywords":["semantics","Typography Design","ui\/ux"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/progressive-enhancements-web-design-best-practices\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/progressive-enhancements-web-design-best-practices\/","url":"https:\/\/www.hongkiat.com\/blog\/progressive-enhancements-web-design-best-practices\/","name":"Best Practices for Progressive Enhancement in Web Design - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/progressive-enhancements-web-design-best-practices\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/progressive-enhancements-web-design-best-practices\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/progressive-enhancements-web-design-best-practices\/01-jsfiddle-fluid-third-columns-css.jpg","datePublished":"2016-07-04T15:01:39+00:00","dateModified":"2022-09-02T10:14:56+00:00","description":"The craft of building websites is incredibly complex with many fast-changing parts. The goal of the web design community is to lessen the complexity, and","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/progressive-enhancements-web-design-best-practices\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/progressive-enhancements-web-design-best-practices\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/progressive-enhancements-web-design-best-practices\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/progressive-enhancements-web-design-best-practices\/01-jsfiddle-fluid-third-columns-css.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/progressive-enhancements-web-design-best-practices\/01-jsfiddle-fluid-third-columns-css.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/progressive-enhancements-web-design-best-practices\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Best Practices for Progressive Enhancement in Web Design"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6Xc","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26734","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=26734"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26734\/revisions"}],"predecessor-version":[{"id":62178,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26734\/revisions\/62178"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=26734"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=26734"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=26734"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=26734"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}