How to Apply Progressive Enhancement When JavaScript Seems Like a Requirement
On Stack Overflow last week, JamHam asked how to apply progressive enhancement in interfaces that seem to require JavaScript. Unfortunately he deleted the question before I could post my response, so I thought I would post it all here for posterity.
I’ve been trying to make my site (a content publishing “web app”) work fully without JavaScript, however, I’ve found myself in situations where I can’t honestly think how I would do some features without it.
For instance:
- I have a form submission page where you change certain settings, and the form changes accordingly.This is alright, I can apply query strings in the url and have some logic in my layout so that certain fields are shown/hidden according to the query string. The thing is, I also need to update a “price” dynamically, according to what fields are filled in, how they are filled in, and some other factors, and I don’t honestly see how I could do that without JavaScript.
- I have a messaging section where I’m using WebSockets (with the help of Socket.io). The UI of the messaging (and of course, the WebSockets) stuff pretty much depends on JavaScript, with ‘messages’ being created as they arrive and appended into DOM and also a form that allows you to quickly look up an user via AJAX so you can send a message easily, among many other things.
I mean, I could probably come up with very complicated solutions for each situation, and obviously the functionality wouldn’t be the same. I’m thinking I might as well just require JavaScript for the whole thing
But it kinda sucks, since I’ve been making everything work without JavaScript, up until this point. And I would like some consistency across the whole site. In these kind of situations, is it acceptable to not support non-js clients? What would you suggest in this case?
My response (which I was drafting when he deleted the question):
First off, I applaud your interest in using progressive enhancement. It will ensure the most users possible have access to your content and will also result in a more robust application overall. As a general guiding principle, look to the past. How did we solve these issues before widespread JavaScript availability? Those “Web 1.0” solutions will still work and can be overtaken by supplanted by your JavaScript solution whenever it is possible to do so.
Every situation is different, but it is even possible to reuse a lot of code in both scenarios.
Now to address your interfaces…
Your Submission Page - I could be wrong, but this sounds like a shopping cart to me (at least in essence). You are on the right track with query parameters, but you could also store info about the cart (and the user’s capabilities) in a session or cookie.
In terms of updating the “cart”, a simple “update” submit button that posts the form and triggers a redirection back to this page with the updated info would be sufficient. And if you need to show or hide fields based on choices made, you simply apply that logic on the server side. You could even have the server generate that same markup into the page, but hidden for situations where JavaScript is available.
Your Messaging App - This can seem like a daunting challenge, but before we had web sockets and even Ajax, we relied on a small form which posts messages to the back end and a running feed of messages being sent from the back-end. One of the most common way to handle this involved frames and a “meta refresh” like this one:
<meta http-equiv="refresh" content="30">That simple
metatag will make any browser refresh the page every 30 seconds. Now if you put that in aniframeto keep it from causing a refresh of the entire interface, any new messages would be picked up and displayed automatically at that interval (which you should tune to be appropriate for your app).Once that is in place the page itself could even post to that frame by using the non-standard but well-supported
_targetattribute on theform.Obviously with JavaScript enabled, you’d probably throw away that
iframe, but the rest of the setup (including the templates for displaying the messages) could certainly be reused with WebSockets.
I hope this helps. Progressive enhancement may seem like a huge challenge, but when you take a few moments to think about how we handled these challenges in the past, the way forward becomes clear.
[{"type":"entry","author":{"type":"card","name":"Ahmad Shadeed","photo":"https://webmention.io/avatar/twitter.com/0e8acb4b6db66035033ef27c1d8d18a7065f49cc4553c32e58d79fcdaa4dea2e.jpeg","url":"http://www.ishadeed.com"},"url":"https://twitter.com/shadeed9/status/707324845634138112","published":"2016-03-08T21:59:19+00:00","wm-received":"2016-03-08T22:04:03Z","wm-id":313245,"wm-source":"https://brid-gy.appspot.com/post/twitter/AaronGustafson/707324845634138112","wm-target":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","content":{"content-type":"text/html","value":"How to Apply Progressive Enhancement When JavaScript Seems Like a Requirement <a href=\"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/\">aaron-gustafson.com/notebook/how-t…</a> by <a href=\"https://twitter.com/AaronGustafson\">@AaronGustafson</a>","html":"How to Apply Progressive Enhancement When JavaScript Seems Like a Requirement <a href=\"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/\">aaron-gustafson.com/notebook/how-t…</a> by <a href=\"https://twitter.com/AaronGustafson\">@AaronGustafson</a>","text":"How to Apply Progressive Enhancement When JavaScript Seems Like a Requirement aaron-gustafson.com/notebook/how-t… by @AaronGustafson"},"mention-of":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","wm-property":"mention-of","wm-private":false},{"type":"entry","author":{"type":"card","name":"","photo":"","url":""},"url":"http://www.hongkiat.com/blog/progressive-enhancements-web-design-best-practices/","published":null,"wm-received":"2016-07-04T15:02:03Z","wm-id":355049,"wm-source":"http://www.hongkiat.com/blog/progressive-enhancements-web-design-best-practices/","wm-target":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","name":"Best Practices for Progressive Enhancement in Web Design","content":{"content-type":"text/html","value":"<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\">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’s easy to understand progressive enhancement, but not as easy to apply it directly to your design work. I’d 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<h4>1. Understanding Progressive Enhancement</h4>\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=\"http://www.hongkiat.com/blog/css-javascript-fallback-methods/\">graceful degradation</a> which includes all features by default, then degrades when something doesn’t 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’ll be accessible.</p>\n<p>This <a href=\"http://alistapart.com/article/understandingprogressiveenhancement\"><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’s a general rundown of the main features of progressive enhancement, that you should take into account:</p>\n<ul><li><strong>Semantic markup</strong> for all content</li>\n<li>Users’ <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><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’t support modern CSS3? This is where sites like <a href=\"http://caniuse.com/\">Can I Use</a> come into play. You should decide which features are worth implementing, and make judgements based <strong>on the target audience of your website</strong>.</p>\n<h4>2. Subsistence In Stylesheets</h4>\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=\"http://www.hongkiat.com/blog/html-5-semantics/\">semantic HTML</a> and <a href=\"http://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’t necessary).</p>\n<a href=\"http://jsfiddle.net/a9jbq5bj/4/\"><img alt=\"jsfiddle columns css example\" height=\"400\" src=\"http://media02.hongkiat.com/progressive-enhancements-web-design-best-practices/01-jsfiddle-fluid-third-columns-css.jpg\" width=\"700\" />\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t</a><a href=\"http://jsfiddle.net/a9jbq5bj/4/\">\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t</a><p>Take for example <a href=\"http://jsfiddle.net/a9jbq5bj/4/\">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’ll notice everything stacks up nicely with the first column, then second, and finally the last.</p>\n<img alt=\"jsfiddle no css columns\" height=\"400\" src=\"http://media02.hongkiat.com/progressive-enhancements-web-design-best-practices/02-jsfiddle-no-css-columns.jpg\" width=\"700\" />\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t<ul><li>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t</li><li>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t</li><li>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t</li><li>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t</li></ul>\r\n\t\t\t<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=\"http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks\">alternate CSS solutions</a> become viable.</p>\n<p>The two primary goals of your HTML are as follows:</p>\n<ul><li>Fully <strong>semantic and valid</strong> code</li>\n<li>A <strong>consistent experience</strong> for everyone</li>\n</ul><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’s also worth considering <strong>at what point you drop support for something</strong>. Microsoft has already dropped <a href=\"http://superuser.com/questions/127628/what-is-the-official-end-of-support-date-for-internet-explorer-6-on-windows-xp\">major support for IE6 </a>, so users running that browser may not be worth your time.</p>\n<p>But there’s still one big question: if a browser doesn’t 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’t need fallbacks, because you’re <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’t supported—but 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/\">Transmit’s website</a>, the content still flows organically down the page.</p>\n<img alt=\"transmit website css disabled\" height=\"400\" src=\"http://media02.hongkiat.com/progressive-enhancements-web-design-best-practices/03-transmit-website-css-disabled.jpg\" width=\"700\" />\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t<ul><li>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t</li><li>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t</li><li>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t</li><li>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t</li></ul>\r\n\t\t\t\nIMAGE: <a href=\"https://panic.com/transmit/\">Transmit</a><p>Yes, it’s ugly, and yes, it feels like we’ve lost twenty years of progress… <strong>but it works</strong>.</p>\n<h4>3. Handling JavaScript</h4>\n<p>It’s 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/\">blog post</a> with solutions to various problems, like replacing Ajax with a <a href=\"http://www.w3schools.com/tags/att_meta_http_equiv.asp\">meta refresh</a> for content inside an iframe.</p>\n<p>Also, when you create JavaScript tabs, it’s 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=\"http://alistapart.com/article/progressiveenhancementwithjavascript\">A List Apart</a> that covers a more general overview of how you should think about these problems.</p>\n<p>Here’s another example. Let’s 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/\">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://www.christianheilmann.com/2015/02/18/progressive-enhancement-is-not-about-javascript-availability/\">more than JavaScript</a>, but with web development advancing further every year, there’s 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=\"http://stackoverflow.com/questions/121203/how-to-detect-if-javascript-is-disabled\"><noscript> 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=\"http://caniuse.com/#feat=fetch\">fetch API</a>, the <a href=\"http://caniuse.com/#feat=push-api\">push API</a>, the <a href=\"http://caniuse.com/#feat=arrow-functions\">arrow function syntax</a>, or even browsers without support for modern libraries like <a href=\"https://jquery.com/browser-support/\">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’s 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’s also worth considering using extensions like <a href=\"https://chrome.google.com/webstore/detail/a-tester-wcag-20-web-acce/mbmcfgbjmddnnpkibfgnofecdemjcdaa?hl=en-GB\">A-Tester</a> for <a href=\"https://www.w3.org/TR/WCAG20/\">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><li><a href=\"http://www.stucox.com/blog/progressive-enhancement-no-javascript/\">Progressive Enhancement != “No JavaScript”</a></li>\n<li><a href=\"http://molily.de/interaction-is-key/\">Interaction is Key: Progressive Enhancement and JavaScript</a></li>\n<li><a href=\"http://cognition.happycog.com/article/progressive-enhancement-its-about-the-content\">Progressive Enhancement: It’s 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/\">How to Apply Progressive Enhancement When JavaScript Seems Like a Requirement</a></li>\n</ul><h4>Where Progressive Enhancement Falls Short</h4>\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=\"http://tympanus.net/codrops/category/tutorials/\">Codrops’ tutorials</a> wouldn’t even exist. You have to <strong>remember the target audience</strong>.</p>\n<p>A business website probably doesn’t have the audience that cares about flashy new CSS3 <a href=\"http://www.w3schools.com/cssref/css3_pr_perspective.asp\">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’t 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’s 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<h4>Further Reading</h4>\n<p>If you’re constantly building web projects, you should consider applying progressive enhancement to your workflow. It’s 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><li><a href=\"http://alistapart.com/article/understandingprogressiveenhancement\">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/\">Progressive Enhancement: What It Is, And How To Use It?</a></li>\n<li><a href=\"http://www.sitepoint.com/javascript-dependency-backlash-myth-busting-progressive-enhancement/\">The JavaScript-Dependency Backlash: Myth-Busting Progressive Enhancement</a></li>\n</ul>","html":"<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\">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’s easy to understand progressive enhancement, but not as easy to apply it directly to your design work. I’d 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<h4>1. Understanding Progressive Enhancement</h4>\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=\"http://www.hongkiat.com/blog/css-javascript-fallback-methods/\">graceful degradation</a> which includes all features by default, then degrades when something doesn’t 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’ll be accessible.</p>\n<p>This <a href=\"http://alistapart.com/article/understandingprogressiveenhancement\"><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’s a general rundown of the main features of progressive enhancement, that you should take into account:</p>\n<ul><li><strong>Semantic markup</strong> for all content</li>\n<li>Users’ <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><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’t support modern CSS3? This is where sites like <a href=\"http://caniuse.com/\">Can I Use</a> come into play. You should decide which features are worth implementing, and make judgements based <strong>on the target audience of your website</strong>.</p>\n<h4>2. Subsistence In Stylesheets</h4>\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=\"http://www.hongkiat.com/blog/html-5-semantics/\">semantic HTML</a> and <a href=\"http://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’t necessary).</p>\n<a href=\"http://jsfiddle.net/a9jbq5bj/4/\"><img alt=\"jsfiddle columns css example\" height=\"400\" src=\"http://media02.hongkiat.com/progressive-enhancements-web-design-best-practices/01-jsfiddle-fluid-third-columns-css.jpg\" width=\"700\" />\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t</a><a href=\"http://jsfiddle.net/a9jbq5bj/4/\">\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t</a><p>Take for example <a href=\"http://jsfiddle.net/a9jbq5bj/4/\">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’ll notice everything stacks up nicely with the first column, then second, and finally the last.</p>\n<img alt=\"jsfiddle no css columns\" height=\"400\" src=\"http://media02.hongkiat.com/progressive-enhancements-web-design-best-practices/02-jsfiddle-no-css-columns.jpg\" width=\"700\" />\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t<ul><li>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t</li><li>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t</li><li>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t</li><li>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t</li></ul>\r\n\t\t\t<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=\"http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks\">alternate CSS solutions</a> become viable.</p>\n<p>The two primary goals of your HTML are as follows:</p>\n<ul><li>Fully <strong>semantic and valid</strong> code</li>\n<li>A <strong>consistent experience</strong> for everyone</li>\n</ul><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’s also worth considering <strong>at what point you drop support for something</strong>. Microsoft has already dropped <a href=\"http://superuser.com/questions/127628/what-is-the-official-end-of-support-date-for-internet-explorer-6-on-windows-xp\">major support for IE6 </a>, so users running that browser may not be worth your time.</p>\n<p>But there’s still one big question: if a browser doesn’t 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’t need fallbacks, because you’re <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’t supported—but 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/\">Transmit’s website</a>, the content still flows organically down the page.</p>\n<img alt=\"transmit website css disabled\" height=\"400\" src=\"http://media02.hongkiat.com/progressive-enhancements-web-design-best-practices/03-transmit-website-css-disabled.jpg\" width=\"700\" />\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t<ul><li>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t</li><li>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t</li><li>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t</li><li>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t</li></ul>\r\n\t\t\t\nIMAGE: <a href=\"https://panic.com/transmit/\">Transmit</a><p>Yes, it’s ugly, and yes, it feels like we’ve lost twenty years of progress… <strong>but it works</strong>.</p>\n<h4>3. Handling JavaScript</h4>\n<p>It’s 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/\">blog post</a> with solutions to various problems, like replacing Ajax with a <a href=\"http://www.w3schools.com/tags/att_meta_http_equiv.asp\">meta refresh</a> for content inside an iframe.</p>\n<p>Also, when you create JavaScript tabs, it’s 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=\"http://alistapart.com/article/progressiveenhancementwithjavascript\">A List Apart</a> that covers a more general overview of how you should think about these problems.</p>\n<p>Here’s another example. Let’s 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/\">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://www.christianheilmann.com/2015/02/18/progressive-enhancement-is-not-about-javascript-availability/\">more than JavaScript</a>, but with web development advancing further every year, there’s 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=\"http://stackoverflow.com/questions/121203/how-to-detect-if-javascript-is-disabled\"><noscript> 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=\"http://caniuse.com/#feat=fetch\">fetch API</a>, the <a href=\"http://caniuse.com/#feat=push-api\">push API</a>, the <a href=\"http://caniuse.com/#feat=arrow-functions\">arrow function syntax</a>, or even browsers without support for modern libraries like <a href=\"https://jquery.com/browser-support/\">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’s 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’s also worth considering using extensions like <a href=\"https://chrome.google.com/webstore/detail/a-tester-wcag-20-web-acce/mbmcfgbjmddnnpkibfgnofecdemjcdaa?hl=en-GB\">A-Tester</a> for <a href=\"https://www.w3.org/TR/WCAG20/\">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><li><a href=\"http://www.stucox.com/blog/progressive-enhancement-no-javascript/\">Progressive Enhancement != “No JavaScript”</a></li>\n<li><a href=\"http://molily.de/interaction-is-key/\">Interaction is Key: Progressive Enhancement and JavaScript</a></li>\n<li><a href=\"http://cognition.happycog.com/article/progressive-enhancement-its-about-the-content\">Progressive Enhancement: It’s 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/\">How to Apply Progressive Enhancement When JavaScript Seems Like a Requirement</a></li>\n</ul><h4>Where Progressive Enhancement Falls Short</h4>\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=\"http://tympanus.net/codrops/category/tutorials/\">Codrops’ tutorials</a> wouldn’t even exist. You have to <strong>remember the target audience</strong>.</p>\n<p>A business website probably doesn’t have the audience that cares about flashy new CSS3 <a href=\"http://www.w3schools.com/cssref/css3_pr_perspective.asp\">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’t 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’s 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<h4>Further Reading</h4>\n<p>If you’re constantly building web projects, you should consider applying progressive enhancement to your workflow. It’s 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><li><a href=\"http://alistapart.com/article/understandingprogressiveenhancement\">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/\">Progressive Enhancement: What It Is, And How To Use It?</a></li>\n<li><a href=\"http://www.sitepoint.com/javascript-dependency-backlash-myth-busting-progressive-enhancement/\">The JavaScript-Dependency Backlash: Myth-Busting Progressive Enhancement</a></li>\n</ul>","text":"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. \nProgressive enhancement is such an idea in web design that aims to reduce errors and provide a consistent user experience across the board. The concept has its own Wikipedia page which explains it as a method of fully-accessible content, rendering enhanced features only when supported by the browser. \nIt’s easy to understand progressive enhancement, but not as easy to apply it directly to your design work. I’d like to cover some best practices for progressive enhancement in real-world projects to help designers think more sustainably about their workflow. \n1. Understanding Progressive Enhancement \nThe theory of progressive enhancement recommends to start with a simple website that works in all browsers, making it accessible for every visitor. Then add features whenever possible. \nThis is the opposite of graceful degradation which includes all features by default, then degrades when something doesn’t work. \nProgressive enhancement is better for the overall user experience, because at its core it loads only necessary elements. Every web browser can support text (and usually images). Without any CSS this information will look bland and tasteless, but it’ll be accessible. \nThis List Apart article argues that progressive enhancement is content-first with styles and dynamic components added later. Content in semantic HTML should be delivered before anything else. \nThe 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. \nHere’s a general rundown of the main features of progressive enhancement, that you should take into account: \nSemantic markup for all content \nUsers’ browser preferences needs to be respected \nContent and basic functionality should be available to all users \nUnobtrusive JavaScript is loaded only in environments that can support it \n Technological restraints in front-end development are primarily determined by browser compatibility. Progressive enhancement gets you back to the basics thinking about how the bare-bone simplest webpage might look like. From there, you can plan for more advanced features, like CSS3 properties. \nBut what about browsers that don’t support modern CSS3? This is where sites like Can I Use come into play. You should decide which features are worth implementing, and make judgements based on the target audience of your website. \n2. Subsistence In Stylesheets \nMost browsers today support all the basic properties you need. But advanced CSS3 is still a problem for legacy users, and progressive enhancement offers a solution. \nInstead of looking for fallback methods to maintain these new features, concern yourself first with proper layout structures. \nWrite semantic HTML and CSS markup that works in as many active browsers as possible (support for ancient browsers like IE5 support isn’t necessary). \njsfiddle columns css example\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t \r\n\t\t\t Take for example this JSFiddle that uses floats with two sidebars (.fixed), and a fluid content area (.fluid). If you delete all CSS, and rerun the code you’ll notice everything stacks up nicely with the first column, then second, and finally the last. \njsfiddle no css columns\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t \r\n\t\t\t Some developers would prefer to have the content column (.fluid) appear first in the HTML. This is where progressive enhancement comes into play, and alternate CSS solutions become viable. \nThe two primary goals of your HTML are as follows: \nFully semantic and valid code \nA consistent experience for everyone \n The most straightforward way to achieve these goals is to start from nothing and work up, as most progressive enhancement advocates would recommend it. \nIf your code looks good with CSS both disabled and enabled, then it offers a reasonable solution for everyone. \nIt’s also worth considering at what point you drop support for something. Microsoft has already dropped major support for IE6 , so users running that browser may not be worth your time. \nBut there’s still one big question: if a browser doesn’t support my modern CSS, what should I do? \nYou simply write code that works without it, and consider the modern CSS as a progressive enhancement. This is the beauty of the progressive enhancement methodology. \nYou don’t need fallbacks, because you’re basically assuming that nothing is supported by default. \nProgressive enhancement methods are about making the site usable even in cases when something isn’t supported—but if it is supported, all the better. \nYou need to consider how content actually flows without CSS. For example, when I disable CSS on Transmit’s website, the content still flows organically down the page. \ntransmit website css disabled\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t \r\n\t\t\t \nIMAGE: Transmit Yes, it’s ugly, and yes, it feels like we’ve lost twenty years of progress… but it works. \n3. Handling JavaScript \nIt’s 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 operate without JavaScript. \nThis will require lots of online research to find valid solutions. Aaron Gustafson wrote a great blog post with solutions to various problems, like replacing Ajax with a meta refresh for content inside an iframe. \nAlso, when you create JavaScript tabs, it’s a good idea to use anchor links with real ID values. That way, when JavaScript is disabled, you can still have the tabs visible and accessible by anchor value. Aaron wrote another piece on A List Apart that covers a more general overview of how you should think about these problems. \nHere’s another example. Let’s say you have a link that loads content dynamically. The href value is empty, because everything loads via JavaScript with the preventDefault() method. \nInstead, it would be wise to set the href property to point to a different page where the content could load naturally, but the visitor only sees that page when JavaScript is disabled. \nProgressive enhancement is about more than JavaScript, but with web development advancing further every year, there’s no doubt that JavaScript plays a significant role. \nOperate under the assumption that everything has been disabled, and scale up from there. This might include problems with embedded widgets that are out of your control, the <noscript> tag is a viable solution here. \nAlso think about JavaScript features that lack comprehensive browser support. This includes the fetch API, the push API, the arrow function syntax, or even browsers without support for modern libraries like jQuery. \nEvery feature requires individual testing with an individual solution. \nThe essence of progressively enhanced JavaScript is to build content that functions without any scripting. This may lead to a rudimentary user experience, but that’s okay as long as the website is usable, and the content is accessible. \nIf you want to do live testing, you can typically disable CSS and JavaScript in every major browser to see how your website performs. It’s also worth considering using extensions like A-Tester for WCAG compliance. \nJavaScript with progressive enhancement is a huge topic. Here are some posts to help you dig deeper: \nProgressive Enhancement != “No JavaScript” \nInteraction is Key: Progressive Enhancement and JavaScript \nProgressive Enhancement: It’s About the Content \nHow to Apply Progressive Enhancement When JavaScript Seems Like a Requirement \n Where Progressive Enhancement Falls Short \nAlthough progressive enhancement is a brilliant idea for almost every type of modern website, it simply may not be applicable to projects that aim to push the limits of web technology. \nFor 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 Codrops’ tutorials wouldn’t even exist. You have to remember the target audience. \nA business website probably doesn’t have the audience that cares about flashy new CSS3 perspective properties, but web developers can be the perfect audience for such advanced features. \nProgressive enhancement only falls short for web applications that simply don’t care about going back in time. 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. \nI am a proponent of progressive enhancement (or even graceful degradation, your choice) for general web projects. But I also realize it’s not the perfect solution for everything. In fact, there is no perfect solution. It all boils down to audience needs and project goals. \nFurther Reading \nIf you’re constantly building web projects, you should consider applying progressive enhancement to your workflow. It’s 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. \nIf you want to learn more about progressive enhancement, check out these related posts: \nUnderstanding Progressive Enhancement \nProgressive Enhancement: What It Is, And How To Use It? \nThe JavaScript-Dependency Backlash: Myth-Busting Progressive Enhancement"},"mention-of":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","wm-property":"mention-of","wm-private":false},{"type":"entry","author":{"type":"card","name":"","photo":"","url":""},"url":"http://reader.motionbump.com/best-practices-for-progressive-enhancement-in-web-design/","published":null,"wm-received":"2016-07-05T14:23:24Z","wm-id":355373,"wm-source":"http://reader.motionbump.com/best-practices-for-progressive-enhancement-in-web-design/","wm-target":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","mention-of":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","wm-property":"mention-of","wm-private":false},{"type":"entry","author":{"type":"card","name":"JohnPaul","photo":"","url":""},"url":"http://www.opencodegroup.com/web-design/best-practices-for-progressive-enhancement-in-web-design/","published":null,"wm-received":"2016-07-05T14:44:17Z","wm-id":355376,"wm-source":"http://www.opencodegroup.com/web-design/best-practices-for-progressive-enhancement-in-web-design/","wm-target":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","name":"Best Practices for Progressive Enhancement in Web Design","mention-of":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","wm-property":"mention-of","wm-private":false},{"type":"entry","author":{"type":"card","name":"JohnPaul","photo":"","url":""},"url":"http://www.opencodegroup.com/web-design/best-practices-for-progressive-enhancement-in-web-design-2/","published":null,"wm-received":"2016-07-05T14:44:34Z","wm-id":355377,"wm-source":"http://www.opencodegroup.com/web-design/best-practices-for-progressive-enhancement-in-web-design-2/","wm-target":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","name":"Best Practices for Progressive Enhancement in Web Design","mention-of":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","wm-property":"mention-of","wm-private":false},{"type":"entry","author":{"type":"card","name":"","photo":"","url":""},"url":"http://digitalmofo.com/best-practices-for-progressive-enhancement-in-web-design/","published":null,"wm-received":"2016-07-05T16:29:56Z","wm-id":355414,"wm-source":"http://digitalmofo.com/best-practices-for-progressive-enhancement-in-web-design/","wm-target":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","name":"Best Practices for Progressive Enhancement in Web Design \n\t \n\t\tThe 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. \nProgressive enhancement is such an idea in web design that aims to reduce errors and provide a consistent user experience across the board. The concept has its own Wikipedia page which explains it as a method of fully-accessible content, rendering enhanced features only when supported by the browser. \nIt’s easy to understand progressive enhancement, but not as easy to apply it directly to your design work. I’d like to cover some best practices for progressive enhancement in real-world projects to help designers think more sustainably about their workflow. \n1. Understanding Progressive Enhancement \nThe theory of progressive enhancement recommends to start with a simple website that works in all browsers, making it accessible for every visitor. Then add features whenever possible. \nThis is the opposite of graceful degradation which includes all features by default, then degrades when something doesn’t work. \nProgressive enhancement is better for the overall user experience, because at its core it loads only necessary elements. Every web browser can support text (and usually images). Without any CSS this information will look bland and tasteless, but it’ll be accessible. \nThis List Apart article argues that progressive enhancement is content-first with styles and dynamic components added later. Content in semantic HTML should be delivered before anything else. \nThe 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. \nHere’s a general rundown of the main features of progressive enhancement, that you should take into account: \nSemantic markup for all content \nUsers’ browser preferences needs to be respected \nContent and basic functionality should be available to all users \nUnobtrusive JavaScript is loaded only in environments that can support it \n Technological restraints in front-end development are primarily determined by browser compatibility. Progressive enhancement gets you back to the basics thinking about how the bare-bone simplest webpage might look like. From there, you can plan for more advanced features, like CSS3 properties. \nBut what about browsers that don’t support modern CSS3? This is where sites like Can I Use come into play. You should decide which features are worth implementing, and make judgements based on the target audience of your website. \n2. Subsistence In Stylesheets \nMost browsers today support all the basic properties you need. But advanced CSS3 is still a problem for legacy users, and progressive enhancement offers a solution. \nInstead of looking for fallback methods to maintain these new features, concern yourself first with proper layout structures. \nWrite semantic HTML and CSS markup that works in as many active browsers as possible (support for ancient browsers like IE5 support isn’t necessary). \njsfiddle columns css example Take for example this JSFiddle that uses floats with two sidebars (.fixed), and a fluid content area (.fluid). If you delete all CSS, and rerun the code you’ll notice everything stacks up nicely with the first column, then second, and finally the last. \njsfiddle no css columns Some developers would prefer to have the content column (.fluid) appear first in the HTML. This is where progressive enhancement comes into play, and alternate CSS solutions become viable. \nThe two primary goals of your HTML are as follows: \nFully semantic and valid code \nA consistent experience for everyone \n The most straightforward way to achieve these goals is to start from nothing and work up, as most progressive enhancement advocates would recommend it. \nIf your code looks good with CSS both disabled and enabled, then it offers a reasonable solution for everyone. \nIt’s also worth considering at what point you drop support for something. Microsoft has already dropped major support for IE6 , so users running that browser may not be worth your time. \nBut there’s still one big question: if a browser doesn’t support my modern CSS, what should I do? \nYou simply write code that works without it, and consider the modern CSS as a progressive enhancement. This is the beauty of the progressive enhancement methodology. \nYou don’t need fallbacks, because you’re basically assuming that nothing is supported by default. \nProgressive enhancement methods are about making the site usable even in cases when something isn’t supported—but if it is supported, all the better. \nYou need to consider how content actually flows without CSS. For example, when I disable CSS on Transmit’s website, the content still flows organically down the page. \ntransmit website css disabledIMAGE: Transmit Yes, it’s ugly, and yes, it feels like we’ve lost twenty years of progress… but it works. \n3. Handling JavaScript \nIt’s 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 operate without JavaScript. \nThis will require lots of online research to find valid solutions. Aaron Gustafson wrote a great blog post with solutions to various problems, like replacing Ajax with a meta refresh for content inside an iframe. \nAlso, when you create JavaScript tabs, it’s a good idea to use anchor links with real ID values. That way, when JavaScript is disabled, you can still have the tabs visible and accessible by anchor value. Aaron wrote another piece on A List Apart that covers a more general overview of how you should think about these problems. \nHere’s another example. Let’s say you have a link that loads content dynamically. The href value is empty, because everything loads via JavaScript with the preventDefault() method. \nInstead, it would be wise to set the href property to point to a different page where the content could load naturally, but the visitor only sees that page when JavaScript is disabled. \nProgressive enhancement is about more than JavaScript, but with web development advancing further every year, there’s no doubt that JavaScript plays a significant role. \nOperate under the assumption that everything has been disabled, and scale up from there. This might include problems with embedded widgets that are out of your control, the noscript tag is a viable solution here. \nAlso think about JavaScript features that lack comprehensive browser support. This includes the fetch API, the push API, the arrow function syntax, or even browsers without support for modern libraries like jQuery. \nEvery feature requires individual testing with an individual solution. \nThe essence of progressively enhanced JavaScript is to build content that functions without any scripting. This may lead to a rudimentary user experience, but that’s okay as long as the website is usable, and the content is accessible. \nIf you want to do live testing, you can typically disable CSS and JavaScript in every major browser to see how your website performs. It’s also worth considering using extensions like A-Tester for WCAG compliance. \nJavaScript with progressive enhancement is a huge topic. Here are some posts to help you dig deeper: \nProgressive Enhancement != “No JavaScript” \nInteraction is Key: Progressive Enhancement and JavaScript \nProgressive Enhancement: It’s About the Content \nHow to Apply Progressive Enhancement When JavaScript Seems Like a Requirement \n Where Progressive Enhancement Falls Short \nAlthough progressive enhancement is a brilliant idea for almost every type of modern website, it simply may not be applicable to projects that aim to push the limits of web technology. \nFor 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 Codrops’ tutorials wouldn’t even exist. You have to remember the target audience. \nA business website probably doesn’t have the audience that cares about flashy new CSS3 perspective properties, but web developers can be the perfect audience for such advanced features. \nProgressive enhancement only falls short for web applications that simply don’t care about going back in time. 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. \nI am a proponent of progressive enhancement (or even graceful degradation, your choice) for general web projects. But I also realize it’s not the perfect solution for everything. In fact, there is no perfect solution. It all boils down to audience needs and project goals. \nFurther Reading \nIf you’re constantly building web projects, you should consider applying progressive enhancement to your workflow. It’s 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. \nIf you want to learn more about progressive enhancement, check out these related posts: \nUnderstanding Progressive Enhancement \nProgressive Enhancement: What It Is, And How To Use It? \nThe JavaScript-Dependency Backlash: Myth-Busting Progressive Enhancement \n Article source: http://www.hongkiat.com/blog/progressive-enhancements-web-design-best-practices/ \t\t\t \n\tJuly 5, 2016 \n\t\t\t\t\t\t\t\n\t\t\t\tComment\t\t\t \n\t\t\t\t\n\t\t\tCategories: Various\t\t \n\t\t\n\t\t\t\t\t\tTags: design, how-to, programming, tools, web | \n\t\t\t\t\t \n\t\t\t\t\t\tPermlink","mention-of":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","wm-property":"mention-of","wm-private":false},{"type":"entry","author":{"type":"card","name":"mycreative-admin","photo":"","url":""},"url":"http://mycreativegateway.com/blog/2016/07/04/best-practices-for-progressive-enhancement-in-web-design/","published":null,"wm-received":"2016-07-05T23:16:08Z","wm-id":355511,"wm-source":"http://mycreativegateway.com/blog/2016/07/04/best-practices-for-progressive-enhancement-in-web-design/","wm-target":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","name":"Best Practices for Progressive Enhancement in Web Design","mention-of":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","wm-property":"mention-of","wm-private":false},{"type":"entry","author":{"type":"card","name":"bittabi","photo":"","url":""},"url":"http://bittabi.com/best-practices-for-progressive-enhancement-in-web-design/","published":null,"wm-received":"2016-07-06T00:09:17Z","wm-id":355526,"wm-source":"http://bittabi.com/best-practices-for-progressive-enhancement-in-web-design/","wm-target":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","name":"Best Practices for Progressive Enhancement in Web Design","mention-of":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","wm-property":"mention-of","wm-private":false},{"type":"entry","author":{"type":"card","name":"MadoxWeb","photo":"","url":""},"url":"http://madoxweb.com/best-practices-for-progressive-enhancement-in-web-design/","published":null,"wm-received":"2016-07-06T00:37:34Z","wm-id":355531,"wm-source":"http://madoxweb.com/best-practices-for-progressive-enhancement-in-web-design/","wm-target":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","name":"Best Practices for Progressive Enhancement in Web Design","content":{"content-type":"text/html","value":"<ul><li>\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=http://madoxweb.com/best-practices-for-progressive-enhancement-in-web-design/\">\n <i></i>\n Facebook\n </a>\n </li>\n \n <li>\n <a href=\"http://plus.google.com/share?url=http%3A%2F%2Fmadoxweb.com%2Fbest-practices-for-progressive-enhancement-in-web-design%2F\">\n <i></i>\n </a>\n </li>\n \n <li>\n <a href=\"http://twitter.com/home?status=Best%20Practices%20for%20Progressive%20Enhancement%20in%20Web%20Design%20http://madoxweb.com/best-practices-for-progressive-enhancement-in-web-design/%20via%20@\">\n <i></i>\n </a>\n </li>\n \n <li>\n <a href=\"http://www.reddit.com/submit?url=http://madoxweb.com/best-practices-for-progressive-enhancement-in-web-design/\">\n <i></i>\n </a>\n </li>\n \n <li>\n <a href=\"http://pinterest.com/pin/create/button/?url=http://madoxweb.com/best-practices-for-progressive-enhancement-in-web-design/&media=http://madoxweb.com/wp-content/uploads/2016/07/0ee3f_01-jsfiddle-fluid-third-columns-css.jpg&description=Best%20Practices%20for%20Progressive%20Enhancement%20in%20Web%20Design\">\n <i></i>\n </a>\n </li>\n \n <li>\n <a href=\"https://www.stumbleupon.com/submit?url=http://madoxweb.com/best-practices-for-progressive-enhancement-in-web-design/\">\n <i></i>\n </a>\n </li>\n \n <li>\n <a href=\"mailto:?subject=Best%20Practices%20for%20Progressive%20Enhancement%20in%20Web%20Design&body=http://madoxweb.com/best-practices-for-progressive-enhancement-in-web-design/\">\n <i></i>\n </a>\n </li>\n </ul>\n \t\t\n \t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"http://madoxweb.com/10-tools-to-build-your-own-chatbots/\"><i></i> Prev Article</a>\t\t\t\t\t\t\t\t\t\t\t<a href=\"http://madoxweb.com/how-to-share-tweets-privately/\">Next Article <i></i></a>\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>The qualification of building websites is impossibly formidable with many fast-changing parts. The thought of a web pattern village is to <strong>lessen a complexity</strong>, and <strong>reduce a intensity for error</strong> during any theatre of a origination process.</p>\n<p><strong>Progressive enhancement</strong> is such an thought in web pattern that aims to <strong>reduce errors</strong> and <strong>provide a unchanging user experience</strong> conflicting a board. The judgment has a <a href=\"https://en.wikipedia.org/wiki/Progressive_enhancement\">own Wikipedia page</a> that explains it as a routine of <strong>fully-accessible content</strong>, digest extended facilities customarily when upheld by a browser.</p>\n<p>It’s easy to know on-going enhancement, though not as easy to request it directly to your pattern work. I’d like to cover some <strong>best practices for on-going encouragement in real-world projects</strong> to <strong>help designers cruise some-more sustainably about their workflow</strong>.</p>\n<h4>1. Understanding Progressive Enhancement</h4>\n<p>The speculation of on-going encouragement recommends to <strong>start with a elementary website</strong> that works in all browsers, creation it <strong>accessible for any visitor</strong>. Then supplement facilities whenever possible.</p>\n<p>This is a conflicting of <a href=\"http://www.hongkiat.com/blog/css-javascript-fallback-methods/\">graceful degradation</a> that includes all facilities by default, afterwards degrades when something doesn’t work.</p>\n<p>Progressive encouragement is improved for a altogether user experience, since during a core it <strong>loads customarily compulsory elements</strong>. Every web browser can support calm (and customarily images). Without any CSS this information will demeanour uninspired and tasteless, though it’ll be accessible.</p>\n<p>This <a href=\"http://alistapart.com/article/understandingprogressiveenhancement\"><em>List Apart</em> article</a> argues that on-going encouragement is <strong>content-first</strong> with <strong>styles and energetic components combined later</strong>. Content in semantic HTML should be delivered before anything else.</p>\n<p>The modernized CSS and JavaScript we use currently are widely supported, though if we wish to follow a beliefs of on-going enhancement, they should be deliberate luxuries.</p>\n<p>Here’s a ubiquitous outline of a categorical facilities of on-going enhancement, that we should take into account:</p>\n<ul><li><strong>Semantic markup</strong> for all content</li>\n<li>Users’ <strong>browser preferences</strong> needs to be respected</li>\n<li>Content and simple functionality should be <strong>available to all users</strong></li>\n<li>Unobtrusive JavaScript is installed customarily <strong>in environments that can support it</strong></li>\n</ul><p>Technological restraints in front-end growth are essentially dynamic by browser compatibility. Progressive encouragement gets we behind to a basis meditative about how a <strong>bare-bone simplest webpage</strong> competence demeanour like. From there, we can <strong>plan for some-more modernized features</strong>, like CSS3 properties.</p>\n<p>But what about browsers that don’t support complicated CSS3? This is where sites like <a href=\"http://caniuse.com/\">Can we Use</a> come into play. You should confirm that facilities are value implementing, and make judgements formed <strong>on a aim assembly of your website</strong>.</p>\n<h4>2. Subsistence In Stylesheets</h4>\n<p>Most browsers currently support all a simple properties we need. But <strong>advanced CSS3 is still a problem for bequest users</strong>, and on-going encouragement offers a solution.</p>\n<p>Instead of looking for fallback methods to contend these new features, regard yourself initial with <strong>proper blueprint structures</strong>.</p>\n<p>Write <a href=\"http://www.hongkiat.com/blog/html-5-semantics/\">semantic HTML</a> and <a href=\"http://www.hongkiat.com/blog/keep-css3-markup-slim/\">CSS markup</a> that works in as many active browsers as probable (support for ancient browsers like IE5 support isn’t necessary).</p>\n<a href=\"http://jsfiddle.net/a9jbq5bj/4/\"><img alt=\"jsfiddle columns css example\" height=\"400\" src=\"http://madoxweb.com/wp-content/plugins/RSSPoster_PRO/cache/0ee3f_01-jsfiddle-fluid-third-columns-css.jpg\" width=\"700\" /></a><p>Take for instance <a href=\"http://jsfiddle.net/a9jbq5bj/4/\">this JSFiddle</a> that uses floats with dual sidebars (<code>.fixed</code>), and a liquid calm area (<code>.fluid</code>). If we undo all CSS, and rerun a formula you’ll notice all stacks adult easily with a initial column, afterwards second, and finally a last.</p>\n<img alt=\"jsfiddle no css columns\" height=\"400\" src=\"http://madoxweb.com/wp-content/plugins/RSSPoster_PRO/cache/0ee3f_02-jsfiddle-no-css-columns.jpg\" width=\"700\" /><p>Some developers would cite to have a calm mainstay (<code>.fluid</code>) seem initial in a HTML. This is where on-going encouragement comes into play, and <a href=\"http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks\">alternate CSS solutions</a> turn viable.</p>\n<p>The dual primary goals of your HTML are as follows:</p>\n<ul><li>Fully <strong>semantic and valid</strong> code</li>\n<li>A <strong>consistent experience</strong> for everyone</li>\n</ul><p>The many candid approach to grasp these goals is to <strong>start from nothing</strong> and <strong>work up,</strong> as many on-going encouragement advocates would suggest it. </p>\n<p><strong>If your formula looks good with CSS both infirm and enabled, afterwards it offers a reasonable resolution for everyone.</strong></p>\n<p>It’s also value deliberation <strong>at what indicate we dump support for something</strong>. Microsoft has already forsaken <a href=\"http://superuser.com/questions/127628/what-is-the-official-end-of-support-date-for-internet-explorer-6-on-windows-xp\">major support for IE6 </a>, so users regulating that browser competence not be value your time.</p>\n<p>But there’s still one large question: if a browser doesn’t support my complicated CSS, what should we do?</p>\n<p>You simply <strong>write formula that works <em>without</em> it</strong>, and cruise a complicated CSS as a on-going enhancement. This is a beauty of a on-going encouragement methodology.</p>\n<p>You don’t need fallbacks, since you’re <strong>basically presumption that zero is upheld by default</strong>.</p>\n<p>Progressive encouragement methods are about creation a site serviceable even in cases when something isn’t supported—but if it is supported, all a better.</p>\n<p>You need to cruise <strong>how calm indeed flows though CSS</strong>. For example, when we invalidate CSS on <a href=\"https://panic.com/transmit/\">Transmit’s website</a>, a calm still flows organically down a page.</p>\n<img alt=\"transmit website css disabled\" height=\"400\" src=\"http://madoxweb.com/wp-content/plugins/RSSPoster_PRO/cache/0ee3f_03-transmit-website-css-disabled.jpg\" width=\"700\" />IMAGE: <a href=\"https://panic.com/transmit/\">Transmit</a><p>Yes, it’s ugly, and yes, it feels like we’ve mislaid twenty years of progress… <strong>but it works</strong>.</p>\n<h4>3. Handling JavaScript</h4>\n<p>It’s value mentioning that any JavaScript emanate we competence strike into during a growth routine is wily and unique. When we build a new plan with on-going enhancement, we should list all your compulsory JS-based features, and cruise how they could <strong>operate though JavaScript</strong>.</p>\n<p>This will need lots of online investigate to find current solutions. Aaron Gustafson wrote a good <a href=\"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/\">blog post</a> with solutions to several problems, like replacing Ajax with a <a href=\"http://www.w3schools.com/tags/att_meta_http_equiv.asp\">meta refresh</a> for calm inside an iframe.</p>\n<p>Also, when we emanate JavaScript tabs, it’s a good thought to <strong>use anchor links with genuine ID values</strong>. That way, when JavaScript is disabled, we can still have a tabs manifest and permitted by anchor value. Aaron wrote another square on <a href=\"http://alistapart.com/article/progressiveenhancementwithjavascript\">A List Apart</a> that covers a some-more ubiquitous overview of how we should cruise about these problems.</p>\n<p>Here’s another example. Let’s contend we have a couple that loads calm dynamically. The <code>href</code> value is empty, since all loads around JavaScript with a <a href=\"https://api.jquery.com/event.preventdefault/\">preventDefault()</a> method.</p>\n<p>Instead, it would be correct to set a <code>href</code> skill to <strong>point to a opposite page</strong> where a calm could bucket naturally, though <strong>the caller customarily sees that page when JavaScript is disabled</strong>.</p>\n<p>Progressive encouragement is about <a href=\"https://www.christianheilmann.com/2015/02/18/progressive-enhancement-is-not-about-javascript-availability/\">more than JavaScript</a>, though with web growth advancing serve any year, there’s no doubt that JavaScript plays a poignant role. </p>\n<p>Operate underneath a arrogance that <strong>everything has been disabled</strong>, and <strong>scale adult from there</strong>. This competence embody problems with embedded widgets that are out of your control, a <code><a href=\"http://stackoverflow.com/questions/121203/how-to-detect-if-javascript-is-disabled\">noscript tag</a></code> is a viable resolution here.</p>\n<p>Also cruise about JavaScript facilities that <strong>lack extensive browser support</strong>. This includes a <a href=\"http://caniuse.com/#feat=fetch\">fetch API</a>, a <a href=\"http://caniuse.com/#feat=push-api\">push API</a>, a <a href=\"http://caniuse.com/#feat=arrow-functions\">arrow duty syntax</a>, or even browsers though support for complicated libraries like <a href=\"https://jquery.com/browser-support/\">jQuery</a>.</p>\n<p>Every underline requires <strong>individual testing</strong> with an particular solution.</p>\n<p>The hint of gradually extended JavaScript is to <strong>build calm that functions though any scripting</strong>. This competence lead to a easy user experience, though that’s fine as prolonged as a website is usable, and a calm is accessible.</p>\n<p>If we wish to do live testing, we can typically <strong>disable CSS and JavaScript in any vital browser</strong> to see how your website performs. It’s also value deliberation regulating extensions like <a href=\"https://chrome.google.com/webstore/detail/a-tester-wcag-20-web-acce/mbmcfgbjmddnnpkibfgnofecdemjcdaa?hl=en-GB\">A-Tester</a> for <a href=\"https://www.w3.org/TR/WCAG20/\">WCAG</a> compliance.</p>\n<p>JavaScript with on-going encouragement is a outrageous topic. Here are some posts to assistance we puncture deeper:</p>\n<ul><li><a href=\"http://www.stucox.com/blog/progressive-enhancement-no-javascript/\">Progressive Enhancement != “No JavaScript”</a></li>\n<li><a href=\"http://molily.de/interaction-is-key/\">Interaction is Key: Progressive Enhancement and JavaScript</a></li>\n<li><a href=\"http://cognition.happycog.com/article/progressive-enhancement-its-about-the-content\">Progressive Enhancement: It’s About a Content</a></li>\n<li><a href=\"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/\">How to Apply Progressive Enhancement When JavaScript Seems Like a Requirement</a></li>\n</ul><h4>Where Progressive Enhancement Falls Short</h4>\n<p>Although on-going encouragement is a shining thought for roughly any form of complicated website, it simply competence <strong>not be germane to projects that aim to pull a boundary of web technology</strong>.</p>\n<p>For example, this methodology is not a good resolution for web applications that duty usually on Ajax calls. Is that a good choice for accessibility? No, of march not. But if that were a box many of <a href=\"http://tympanus.net/codrops/category/tutorials/\">Codrops’ tutorials</a> wouldn’t even exist. You have to <strong>remember a aim audience</strong>.</p>\n<p>A business website substantially doesn’t have a assembly that cares about adorned new CSS3 <a href=\"http://www.w3schools.com/cssref/css3_pr_perspective.asp\">perspective properties</a>, though web developers can be a ideal assembly for such modernized features.</p>\n<p>Progressive encouragement customarily falls brief for web applications that <strong>simply don’t caring about going behind in time</strong>. we comprehend these web applications are few and distant between, though developers adore progress, and in some cases it can be essential to forge forward with new tech withdrawal a stragglers behind.</p>\n<p>I am a proponent of on-going encouragement (or even seemly degradation, your choice) for ubiquitous web projects. But we also comprehend it’s not a ideal resolution for everything. In fact, there is no ideal solution. It all boils down to assembly needs and plan goals.</p>\n<h4>Further Reading</h4>\n<p>If you’re constantly building web projects, we should cruise requesting on-going encouragement to your workflow. It’s most easier than it seems during initial glance, and it all starts with a fundamentals. Most topics surrounding on-going encouragement only need use and testing. Try out a suggestions from this article, and see what works best for your workflow.</p>\n<p>If we wish to learn some-more about on-going enhancement, check out these associated posts:</p>\n<ul><li><a href=\"http://alistapart.com/article/understandingprogressiveenhancement\">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/\">Progressive Enhancement: What It Is, And How To Use It?</a></li>\n<li><a href=\"http://www.sitepoint.com/javascript-dependency-backlash-myth-busting-progressive-enhancement/\">The JavaScript-Dependency Backlash: Myth-Busting Progressive Enhancement</a></li>\n</ul>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t\t \t\t\n \t\t\n <ul><li>\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=http://madoxweb.com/best-practices-for-progressive-enhancement-in-web-design/\">\n <i></i>\n Facebook\n </a>\n </li>\n \n <li>\n <a href=\"http://plus.google.com/share?url=http%3A%2F%2Fmadoxweb.com%2Fbest-practices-for-progressive-enhancement-in-web-design%2F\">\n <i></i>\n </a>\n </li>\n \n <li>\n <a href=\"http://twitter.com/home?status=Best%20Practices%20for%20Progressive%20Enhancement%20in%20Web%20Design%20http://madoxweb.com/best-practices-for-progressive-enhancement-in-web-design/%20via%20@\">\n <i></i>\n </a>\n </li>\n \n <li>\n <a href=\"http://www.reddit.com/submit?url=http://madoxweb.com/best-practices-for-progressive-enhancement-in-web-design/\">\n <i></i>\n </a>\n </li>\n \n <li>\n <a href=\"http://pinterest.com/pin/create/button/?url=http://madoxweb.com/best-practices-for-progressive-enhancement-in-web-design/&media=http://madoxweb.com/wp-content/uploads/2016/07/0ee3f_01-jsfiddle-fluid-third-columns-css.jpg&description=Best%20Practices%20for%20Progressive%20Enhancement%20in%20Web%20Design\">\n <i></i>\n </a>\n </li>\n \n <li>\n <a href=\"https://www.stumbleupon.com/submit?url=http://madoxweb.com/best-practices-for-progressive-enhancement-in-web-design/\">\n <i></i>\n </a>\n </li>\n \n <li>\n <a href=\"mailto:?subject=Best%20Practices%20for%20Progressive%20Enhancement%20in%20Web%20Design&body=http://madoxweb.com/best-practices-for-progressive-enhancement-in-web-design/\">\n <i></i>\n </a>\n </li>\n </ul>\n \t\t\n \t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"http://madoxweb.com/10-tools-to-build-your-own-chatbots/\"><i></i> Prev Article</a>\t\t\t\t\t\t\t\t\t\t\t<a href=\"http://madoxweb.com/how-to-share-tweets-privately/\">Next Article <i></i></a>","html":"<ul><li>\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=http://madoxweb.com/best-practices-for-progressive-enhancement-in-web-design/\">\n <i></i>\n Facebook\n </a>\n </li>\n \n <li>\n <a href=\"http://plus.google.com/share?url=http%3A%2F%2Fmadoxweb.com%2Fbest-practices-for-progressive-enhancement-in-web-design%2F\">\n <i></i>\n </a>\n </li>\n \n <li>\n <a href=\"http://twitter.com/home?status=Best%20Practices%20for%20Progressive%20Enhancement%20in%20Web%20Design%20http://madoxweb.com/best-practices-for-progressive-enhancement-in-web-design/%20via%20@\">\n <i></i>\n </a>\n </li>\n \n <li>\n <a href=\"http://www.reddit.com/submit?url=http://madoxweb.com/best-practices-for-progressive-enhancement-in-web-design/\">\n <i></i>\n </a>\n </li>\n \n <li>\n <a href=\"http://pinterest.com/pin/create/button/?url=http://madoxweb.com/best-practices-for-progressive-enhancement-in-web-design/&media=http://madoxweb.com/wp-content/uploads/2016/07/0ee3f_01-jsfiddle-fluid-third-columns-css.jpg&description=Best%20Practices%20for%20Progressive%20Enhancement%20in%20Web%20Design\">\n <i></i>\n </a>\n </li>\n \n <li>\n <a href=\"https://www.stumbleupon.com/submit?url=http://madoxweb.com/best-practices-for-progressive-enhancement-in-web-design/\">\n <i></i>\n </a>\n </li>\n \n <li>\n <a href=\"mailto:?subject=Best%20Practices%20for%20Progressive%20Enhancement%20in%20Web%20Design&body=http://madoxweb.com/best-practices-for-progressive-enhancement-in-web-design/\">\n <i></i>\n </a>\n </li>\n </ul>\n \t\t\n \t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"http://madoxweb.com/10-tools-to-build-your-own-chatbots/\"><i></i> Prev Article</a>\t\t\t\t\t\t\t\t\t\t\t<a href=\"http://madoxweb.com/how-to-share-tweets-privately/\">Next Article <i></i></a>\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>The qualification of building websites is impossibly formidable with many fast-changing parts. The thought of a web pattern village is to <strong>lessen a complexity</strong>, and <strong>reduce a intensity for error</strong> during any theatre of a origination process.</p>\n<p><strong>Progressive enhancement</strong> is such an thought in web pattern that aims to <strong>reduce errors</strong> and <strong>provide a unchanging user experience</strong> conflicting a board. The judgment has a <a href=\"https://en.wikipedia.org/wiki/Progressive_enhancement\">own Wikipedia page</a> that explains it as a routine of <strong>fully-accessible content</strong>, digest extended facilities customarily when upheld by a browser.</p>\n<p>It’s easy to know on-going enhancement, though not as easy to request it directly to your pattern work. I’d like to cover some <strong>best practices for on-going encouragement in real-world projects</strong> to <strong>help designers cruise some-more sustainably about their workflow</strong>.</p>\n<h4>1. Understanding Progressive Enhancement</h4>\n<p>The speculation of on-going encouragement recommends to <strong>start with a elementary website</strong> that works in all browsers, creation it <strong>accessible for any visitor</strong>. Then supplement facilities whenever possible.</p>\n<p>This is a conflicting of <a href=\"http://www.hongkiat.com/blog/css-javascript-fallback-methods/\">graceful degradation</a> that includes all facilities by default, afterwards degrades when something doesn’t work.</p>\n<p>Progressive encouragement is improved for a altogether user experience, since during a core it <strong>loads customarily compulsory elements</strong>. Every web browser can support calm (and customarily images). Without any CSS this information will demeanour uninspired and tasteless, though it’ll be accessible.</p>\n<p>This <a href=\"http://alistapart.com/article/understandingprogressiveenhancement\"><em>List Apart</em> article</a> argues that on-going encouragement is <strong>content-first</strong> with <strong>styles and energetic components combined later</strong>. Content in semantic HTML should be delivered before anything else.</p>\n<p>The modernized CSS and JavaScript we use currently are widely supported, though if we wish to follow a beliefs of on-going enhancement, they should be deliberate luxuries.</p>\n<p>Here’s a ubiquitous outline of a categorical facilities of on-going enhancement, that we should take into account:</p>\n<ul><li><strong>Semantic markup</strong> for all content</li>\n<li>Users’ <strong>browser preferences</strong> needs to be respected</li>\n<li>Content and simple functionality should be <strong>available to all users</strong></li>\n<li>Unobtrusive JavaScript is installed customarily <strong>in environments that can support it</strong></li>\n</ul><p>Technological restraints in front-end growth are essentially dynamic by browser compatibility. Progressive encouragement gets we behind to a basis meditative about how a <strong>bare-bone simplest webpage</strong> competence demeanour like. From there, we can <strong>plan for some-more modernized features</strong>, like CSS3 properties.</p>\n<p>But what about browsers that don’t support complicated CSS3? This is where sites like <a href=\"http://caniuse.com/\">Can we Use</a> come into play. You should confirm that facilities are value implementing, and make judgements formed <strong>on a aim assembly of your website</strong>.</p>\n<h4>2. Subsistence In Stylesheets</h4>\n<p>Most browsers currently support all a simple properties we need. But <strong>advanced CSS3 is still a problem for bequest users</strong>, and on-going encouragement offers a solution.</p>\n<p>Instead of looking for fallback methods to contend these new features, regard yourself initial with <strong>proper blueprint structures</strong>.</p>\n<p>Write <a href=\"http://www.hongkiat.com/blog/html-5-semantics/\">semantic HTML</a> and <a href=\"http://www.hongkiat.com/blog/keep-css3-markup-slim/\">CSS markup</a> that works in as many active browsers as probable (support for ancient browsers like IE5 support isn’t necessary).</p>\n<a href=\"http://jsfiddle.net/a9jbq5bj/4/\"><img alt=\"jsfiddle columns css example\" height=\"400\" src=\"http://madoxweb.com/wp-content/plugins/RSSPoster_PRO/cache/0ee3f_01-jsfiddle-fluid-third-columns-css.jpg\" width=\"700\" /></a><p>Take for instance <a href=\"http://jsfiddle.net/a9jbq5bj/4/\">this JSFiddle</a> that uses floats with dual sidebars (<code>.fixed</code>), and a liquid calm area (<code>.fluid</code>). If we undo all CSS, and rerun a formula you’ll notice all stacks adult easily with a initial column, afterwards second, and finally a last.</p>\n<img alt=\"jsfiddle no css columns\" height=\"400\" src=\"http://madoxweb.com/wp-content/plugins/RSSPoster_PRO/cache/0ee3f_02-jsfiddle-no-css-columns.jpg\" width=\"700\" /><p>Some developers would cite to have a calm mainstay (<code>.fluid</code>) seem initial in a HTML. This is where on-going encouragement comes into play, and <a href=\"http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks\">alternate CSS solutions</a> turn viable.</p>\n<p>The dual primary goals of your HTML are as follows:</p>\n<ul><li>Fully <strong>semantic and valid</strong> code</li>\n<li>A <strong>consistent experience</strong> for everyone</li>\n</ul><p>The many candid approach to grasp these goals is to <strong>start from nothing</strong> and <strong>work up,</strong> as many on-going encouragement advocates would suggest it. </p>\n<p><strong>If your formula looks good with CSS both infirm and enabled, afterwards it offers a reasonable resolution for everyone.</strong></p>\n<p>It’s also value deliberation <strong>at what indicate we dump support for something</strong>. Microsoft has already forsaken <a href=\"http://superuser.com/questions/127628/what-is-the-official-end-of-support-date-for-internet-explorer-6-on-windows-xp\">major support for IE6 </a>, so users regulating that browser competence not be value your time.</p>\n<p>But there’s still one large question: if a browser doesn’t support my complicated CSS, what should we do?</p>\n<p>You simply <strong>write formula that works <em>without</em> it</strong>, and cruise a complicated CSS as a on-going enhancement. This is a beauty of a on-going encouragement methodology.</p>\n<p>You don’t need fallbacks, since you’re <strong>basically presumption that zero is upheld by default</strong>.</p>\n<p>Progressive encouragement methods are about creation a site serviceable even in cases when something isn’t supported—but if it is supported, all a better.</p>\n<p>You need to cruise <strong>how calm indeed flows though CSS</strong>. For example, when we invalidate CSS on <a href=\"https://panic.com/transmit/\">Transmit’s website</a>, a calm still flows organically down a page.</p>\n<img alt=\"transmit website css disabled\" height=\"400\" src=\"http://madoxweb.com/wp-content/plugins/RSSPoster_PRO/cache/0ee3f_03-transmit-website-css-disabled.jpg\" width=\"700\" />IMAGE: <a href=\"https://panic.com/transmit/\">Transmit</a><p>Yes, it’s ugly, and yes, it feels like we’ve mislaid twenty years of progress… <strong>but it works</strong>.</p>\n<h4>3. Handling JavaScript</h4>\n<p>It’s value mentioning that any JavaScript emanate we competence strike into during a growth routine is wily and unique. When we build a new plan with on-going enhancement, we should list all your compulsory JS-based features, and cruise how they could <strong>operate though JavaScript</strong>.</p>\n<p>This will need lots of online investigate to find current solutions. Aaron Gustafson wrote a good <a href=\"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/\">blog post</a> with solutions to several problems, like replacing Ajax with a <a href=\"http://www.w3schools.com/tags/att_meta_http_equiv.asp\">meta refresh</a> for calm inside an iframe.</p>\n<p>Also, when we emanate JavaScript tabs, it’s a good thought to <strong>use anchor links with genuine ID values</strong>. That way, when JavaScript is disabled, we can still have a tabs manifest and permitted by anchor value. Aaron wrote another square on <a href=\"http://alistapart.com/article/progressiveenhancementwithjavascript\">A List Apart</a> that covers a some-more ubiquitous overview of how we should cruise about these problems.</p>\n<p>Here’s another example. Let’s contend we have a couple that loads calm dynamically. The <code>href</code> value is empty, since all loads around JavaScript with a <a href=\"https://api.jquery.com/event.preventdefault/\">preventDefault()</a> method.</p>\n<p>Instead, it would be correct to set a <code>href</code> skill to <strong>point to a opposite page</strong> where a calm could bucket naturally, though <strong>the caller customarily sees that page when JavaScript is disabled</strong>.</p>\n<p>Progressive encouragement is about <a href=\"https://www.christianheilmann.com/2015/02/18/progressive-enhancement-is-not-about-javascript-availability/\">more than JavaScript</a>, though with web growth advancing serve any year, there’s no doubt that JavaScript plays a poignant role. </p>\n<p>Operate underneath a arrogance that <strong>everything has been disabled</strong>, and <strong>scale adult from there</strong>. This competence embody problems with embedded widgets that are out of your control, a <code><a href=\"http://stackoverflow.com/questions/121203/how-to-detect-if-javascript-is-disabled\">noscript tag</a></code> is a viable resolution here.</p>\n<p>Also cruise about JavaScript facilities that <strong>lack extensive browser support</strong>. This includes a <a href=\"http://caniuse.com/#feat=fetch\">fetch API</a>, a <a href=\"http://caniuse.com/#feat=push-api\">push API</a>, a <a href=\"http://caniuse.com/#feat=arrow-functions\">arrow duty syntax</a>, or even browsers though support for complicated libraries like <a href=\"https://jquery.com/browser-support/\">jQuery</a>.</p>\n<p>Every underline requires <strong>individual testing</strong> with an particular solution.</p>\n<p>The hint of gradually extended JavaScript is to <strong>build calm that functions though any scripting</strong>. This competence lead to a easy user experience, though that’s fine as prolonged as a website is usable, and a calm is accessible.</p>\n<p>If we wish to do live testing, we can typically <strong>disable CSS and JavaScript in any vital browser</strong> to see how your website performs. It’s also value deliberation regulating extensions like <a href=\"https://chrome.google.com/webstore/detail/a-tester-wcag-20-web-acce/mbmcfgbjmddnnpkibfgnofecdemjcdaa?hl=en-GB\">A-Tester</a> for <a href=\"https://www.w3.org/TR/WCAG20/\">WCAG</a> compliance.</p>\n<p>JavaScript with on-going encouragement is a outrageous topic. Here are some posts to assistance we puncture deeper:</p>\n<ul><li><a href=\"http://www.stucox.com/blog/progressive-enhancement-no-javascript/\">Progressive Enhancement != “No JavaScript”</a></li>\n<li><a href=\"http://molily.de/interaction-is-key/\">Interaction is Key: Progressive Enhancement and JavaScript</a></li>\n<li><a href=\"http://cognition.happycog.com/article/progressive-enhancement-its-about-the-content\">Progressive Enhancement: It’s About a Content</a></li>\n<li><a href=\"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/\">How to Apply Progressive Enhancement When JavaScript Seems Like a Requirement</a></li>\n</ul><h4>Where Progressive Enhancement Falls Short</h4>\n<p>Although on-going encouragement is a shining thought for roughly any form of complicated website, it simply competence <strong>not be germane to projects that aim to pull a boundary of web technology</strong>.</p>\n<p>For example, this methodology is not a good resolution for web applications that duty usually on Ajax calls. Is that a good choice for accessibility? No, of march not. But if that were a box many of <a href=\"http://tympanus.net/codrops/category/tutorials/\">Codrops’ tutorials</a> wouldn’t even exist. You have to <strong>remember a aim audience</strong>.</p>\n<p>A business website substantially doesn’t have a assembly that cares about adorned new CSS3 <a href=\"http://www.w3schools.com/cssref/css3_pr_perspective.asp\">perspective properties</a>, though web developers can be a ideal assembly for such modernized features.</p>\n<p>Progressive encouragement customarily falls brief for web applications that <strong>simply don’t caring about going behind in time</strong>. we comprehend these web applications are few and distant between, though developers adore progress, and in some cases it can be essential to forge forward with new tech withdrawal a stragglers behind.</p>\n<p>I am a proponent of on-going encouragement (or even seemly degradation, your choice) for ubiquitous web projects. But we also comprehend it’s not a ideal resolution for everything. In fact, there is no ideal solution. It all boils down to assembly needs and plan goals.</p>\n<h4>Further Reading</h4>\n<p>If you’re constantly building web projects, we should cruise requesting on-going encouragement to your workflow. It’s most easier than it seems during initial glance, and it all starts with a fundamentals. Most topics surrounding on-going encouragement only need use and testing. Try out a suggestions from this article, and see what works best for your workflow.</p>\n<p>If we wish to learn some-more about on-going enhancement, check out these associated posts:</p>\n<ul><li><a href=\"http://alistapart.com/article/understandingprogressiveenhancement\">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/\">Progressive Enhancement: What It Is, And How To Use It?</a></li>\n<li><a href=\"http://www.sitepoint.com/javascript-dependency-backlash-myth-busting-progressive-enhancement/\">The JavaScript-Dependency Backlash: Myth-Busting Progressive Enhancement</a></li>\n</ul>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t\t \t\t\n \t\t\n <ul><li>\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=http://madoxweb.com/best-practices-for-progressive-enhancement-in-web-design/\">\n <i></i>\n Facebook\n </a>\n </li>\n \n <li>\n <a href=\"http://plus.google.com/share?url=http%3A%2F%2Fmadoxweb.com%2Fbest-practices-for-progressive-enhancement-in-web-design%2F\">\n <i></i>\n </a>\n </li>\n \n <li>\n <a href=\"http://twitter.com/home?status=Best%20Practices%20for%20Progressive%20Enhancement%20in%20Web%20Design%20http://madoxweb.com/best-practices-for-progressive-enhancement-in-web-design/%20via%20@\">\n <i></i>\n </a>\n </li>\n \n <li>\n <a href=\"http://www.reddit.com/submit?url=http://madoxweb.com/best-practices-for-progressive-enhancement-in-web-design/\">\n <i></i>\n </a>\n </li>\n \n <li>\n <a href=\"http://pinterest.com/pin/create/button/?url=http://madoxweb.com/best-practices-for-progressive-enhancement-in-web-design/&media=http://madoxweb.com/wp-content/uploads/2016/07/0ee3f_01-jsfiddle-fluid-third-columns-css.jpg&description=Best%20Practices%20for%20Progressive%20Enhancement%20in%20Web%20Design\">\n <i></i>\n </a>\n </li>\n \n <li>\n <a href=\"https://www.stumbleupon.com/submit?url=http://madoxweb.com/best-practices-for-progressive-enhancement-in-web-design/\">\n <i></i>\n </a>\n </li>\n \n <li>\n <a href=\"mailto:?subject=Best%20Practices%20for%20Progressive%20Enhancement%20in%20Web%20Design&body=http://madoxweb.com/best-practices-for-progressive-enhancement-in-web-design/\">\n <i></i>\n </a>\n </li>\n </ul>\n \t\t\n \t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"http://madoxweb.com/10-tools-to-build-your-own-chatbots/\"><i></i> Prev Article</a>\t\t\t\t\t\t\t\t\t\t\t<a href=\"http://madoxweb.com/how-to-share-tweets-privately/\">Next Article <i></i></a>","text":"Facebook\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \t\t\n \t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t Prev Article\t\t\t\t\t\t\t\t\t\t\tNext Article \t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tThe qualification of building websites is impossibly formidable with many fast-changing parts. The thought of a web pattern village is to lessen a complexity, and reduce a intensity for error during any theatre of a origination process. \nProgressive enhancement is such an thought in web pattern that aims to reduce errors and provide a unchanging user experience conflicting a board. The judgment has a own Wikipedia page that explains it as a routine of fully-accessible content, digest extended facilities customarily when upheld by a browser. \nIt’s easy to know on-going enhancement, though not as easy to request it directly to your pattern work. I’d like to cover some best practices for on-going encouragement in real-world projects to help designers cruise some-more sustainably about their workflow. \n1. Understanding Progressive Enhancement \nThe speculation of on-going encouragement recommends to start with a elementary website that works in all browsers, creation it accessible for any visitor. Then supplement facilities whenever possible. \nThis is a conflicting of graceful degradation that includes all facilities by default, afterwards degrades when something doesn’t work. \nProgressive encouragement is improved for a altogether user experience, since during a core it loads customarily compulsory elements. Every web browser can support calm (and customarily images). Without any CSS this information will demeanour uninspired and tasteless, though it’ll be accessible. \nThis List Apart article argues that on-going encouragement is content-first with styles and energetic components combined later. Content in semantic HTML should be delivered before anything else. \nThe modernized CSS and JavaScript we use currently are widely supported, though if we wish to follow a beliefs of on-going enhancement, they should be deliberate luxuries. \nHere’s a ubiquitous outline of a categorical facilities of on-going enhancement, that we should take into account: \nSemantic markup for all content \nUsers’ browser preferences needs to be respected \nContent and simple functionality should be available to all users \nUnobtrusive JavaScript is installed customarily in environments that can support it \n Technological restraints in front-end growth are essentially dynamic by browser compatibility. Progressive encouragement gets we behind to a basis meditative about how a bare-bone simplest webpage competence demeanour like. From there, we can plan for some-more modernized features, like CSS3 properties. \nBut what about browsers that don’t support complicated CSS3? This is where sites like Can we Use come into play. You should confirm that facilities are value implementing, and make judgements formed on a aim assembly of your website. \n2. Subsistence In Stylesheets \nMost browsers currently support all a simple properties we need. But advanced CSS3 is still a problem for bequest users, and on-going encouragement offers a solution. \nInstead of looking for fallback methods to contend these new features, regard yourself initial with proper blueprint structures. \nWrite semantic HTML and CSS markup that works in as many active browsers as probable (support for ancient browsers like IE5 support isn’t necessary). \njsfiddle columns css example Take for instance this JSFiddle that uses floats with dual sidebars (.fixed), and a liquid calm area (.fluid). If we undo all CSS, and rerun a formula you’ll notice all stacks adult easily with a initial column, afterwards second, and finally a last. \njsfiddle no css columns Some developers would cite to have a calm mainstay (.fluid) seem initial in a HTML. This is where on-going encouragement comes into play, and alternate CSS solutions turn viable. \nThe dual primary goals of your HTML are as follows: \nFully semantic and valid code \nA consistent experience for everyone \n The many candid approach to grasp these goals is to start from nothing and work up, as many on-going encouragement advocates would suggest it. \nIf your formula looks good with CSS both infirm and enabled, afterwards it offers a reasonable resolution for everyone. \nIt’s also value deliberation at what indicate we dump support for something. Microsoft has already forsaken major support for IE6 , so users regulating that browser competence not be value your time. \nBut there’s still one large question: if a browser doesn’t support my complicated CSS, what should we do? \nYou simply write formula that works without it, and cruise a complicated CSS as a on-going enhancement. This is a beauty of a on-going encouragement methodology. \nYou don’t need fallbacks, since you’re basically presumption that zero is upheld by default. \nProgressive encouragement methods are about creation a site serviceable even in cases when something isn’t supported—but if it is supported, all a better. \nYou need to cruise how calm indeed flows though CSS. For example, when we invalidate CSS on Transmit’s website, a calm still flows organically down a page. \ntransmit website css disabledIMAGE: Transmit Yes, it’s ugly, and yes, it feels like we’ve mislaid twenty years of progress… but it works. \n3. Handling JavaScript \nIt’s value mentioning that any JavaScript emanate we competence strike into during a growth routine is wily and unique. When we build a new plan with on-going enhancement, we should list all your compulsory JS-based features, and cruise how they could operate though JavaScript. \nThis will need lots of online investigate to find current solutions. Aaron Gustafson wrote a good blog post with solutions to several problems, like replacing Ajax with a meta refresh for calm inside an iframe. \nAlso, when we emanate JavaScript tabs, it’s a good thought to use anchor links with genuine ID values. That way, when JavaScript is disabled, we can still have a tabs manifest and permitted by anchor value. Aaron wrote another square on A List Apart that covers a some-more ubiquitous overview of how we should cruise about these problems. \nHere’s another example. Let’s contend we have a couple that loads calm dynamically. The href value is empty, since all loads around JavaScript with a preventDefault() method. \nInstead, it would be correct to set a href skill to point to a opposite page where a calm could bucket naturally, though the caller customarily sees that page when JavaScript is disabled. \nProgressive encouragement is about more than JavaScript, though with web growth advancing serve any year, there’s no doubt that JavaScript plays a poignant role. \nOperate underneath a arrogance that everything has been disabled, and scale adult from there. This competence embody problems with embedded widgets that are out of your control, a noscript tag is a viable resolution here. \nAlso cruise about JavaScript facilities that lack extensive browser support. This includes a fetch API, a push API, a arrow duty syntax, or even browsers though support for complicated libraries like jQuery. \nEvery underline requires individual testing with an particular solution. \nThe hint of gradually extended JavaScript is to build calm that functions though any scripting. This competence lead to a easy user experience, though that’s fine as prolonged as a website is usable, and a calm is accessible. \nIf we wish to do live testing, we can typically disable CSS and JavaScript in any vital browser to see how your website performs. It’s also value deliberation regulating extensions like A-Tester for WCAG compliance. \nJavaScript with on-going encouragement is a outrageous topic. Here are some posts to assistance we puncture deeper: \nProgressive Enhancement != “No JavaScript” \nInteraction is Key: Progressive Enhancement and JavaScript \nProgressive Enhancement: It’s About a Content \nHow to Apply Progressive Enhancement When JavaScript Seems Like a Requirement \n Where Progressive Enhancement Falls Short \nAlthough on-going encouragement is a shining thought for roughly any form of complicated website, it simply competence not be germane to projects that aim to pull a boundary of web technology. \nFor example, this methodology is not a good resolution for web applications that duty usually on Ajax calls. Is that a good choice for accessibility? No, of march not. But if that were a box many of Codrops’ tutorials wouldn’t even exist. You have to remember a aim audience. \nA business website substantially doesn’t have a assembly that cares about adorned new CSS3 perspective properties, though web developers can be a ideal assembly for such modernized features. \nProgressive encouragement customarily falls brief for web applications that simply don’t caring about going behind in time. we comprehend these web applications are few and distant between, though developers adore progress, and in some cases it can be essential to forge forward with new tech withdrawal a stragglers behind. \nI am a proponent of on-going encouragement (or even seemly degradation, your choice) for ubiquitous web projects. But we also comprehend it’s not a ideal resolution for everything. In fact, there is no ideal solution. It all boils down to assembly needs and plan goals. \nFurther Reading \nIf you’re constantly building web projects, we should cruise requesting on-going encouragement to your workflow. It’s most easier than it seems during initial glance, and it all starts with a fundamentals. Most topics surrounding on-going encouragement only need use and testing. Try out a suggestions from this article, and see what works best for your workflow. \nIf we wish to learn some-more about on-going enhancement, check out these associated posts: \nUnderstanding Progressive Enhancement \nProgressive Enhancement: What It Is, And How To Use It? \nThe JavaScript-Dependency Backlash: Myth-Busting Progressive Enhancement \n \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t\t \t\t\n \t\t\n \n \n \n Facebook\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \t\t\n \t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t Prev Article\t\t\t\t\t\t\t\t\t\t\tNext Article"},"mention-of":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","wm-property":"mention-of","wm-private":false},{"type":"entry","author":{"type":"card","name":"admin","photo":"","url":""},"url":"http://technologytodayworld.com/best-practices-for-progressive-enhancement-in-web-design/","published":null,"wm-received":"2016-07-06T01:33:30Z","wm-id":355540,"wm-source":"http://technologytodayworld.com/best-practices-for-progressive-enhancement-in-web-design/","wm-target":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","name":"Best Practices for Progressive Enhancement in Web Design","mention-of":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","wm-property":"mention-of","wm-private":false},{"type":"entry","author":{"type":"card","name":"","photo":"","url":""},"url":"http://www.wp-dd.com/best-practices-for-progressive-enhancement-in-web-design/","published":null,"wm-received":"2016-07-06T02:27:42Z","wm-id":355547,"wm-source":"http://www.wp-dd.com/best-practices-for-progressive-enhancement-in-web-design/","wm-target":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","name":"01-jsfiddle-fluid-third-columns-css.jpg\n 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. \nProgressive enhancement is such an idea in web design that aims to reduce errors and provide a consistent user experience across the board. The concept has its own Wikipedia page which explains it as a method of fully-accessible content, rendering enhanced features only when supported by the browser. \nIt’s easy to understand progressive enhancement, but not as easy to apply it directly to your design work. I’d like to cover some best practices for progressive enhancement in real-world projects to help designers think more sustainably about their workflow. \n1. Understanding Progressive Enhancement \nThe theory of progressive enhancement recommends to start with a simple website that works in all browsers, making it accessible for every visitor. Then add features whenever possible. \nThis is the opposite of graceful degradation which includes all features by default, then degrades when something doesn’t work. \nProgressive enhancement is better for the overall user experience, because at its core it loads only necessary elements. Every web browser can support text (and usually images). Without any CSS this information will look bland and tasteless, but it’ll be accessible. \nThis List Apart article argues that progressive enhancement is content-first with styles and dynamic components added later. Content in semantic HTML should be delivered before anything else. \nThe 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. \nHere’s a general rundown of the main features of progressive enhancement, that you should take into account: \nSemantic markup for all content \nUsers’ browser preferences needs to be respected \nContent and basic functionality should be available to all users \nUnobtrusive JavaScript is loaded only in environments that can support it \n Technological restraints in front-end development are primarily determined by browser compatibility. Progressive enhancement gets you back to the basics thinking about how the bare-bone simplest webpage might look like. From there, you can plan for more advanced features, like CSS3 properties. \nBut what about browsers that don’t support modern CSS3? This is where sites like Can I Use come into play. You should decide which features are worth implementing, and make judgements based on the target audience of your website. \n2. Subsistence In Stylesheets \nMost browsers today support all the basic properties you need. But advanced CSS3 is still a problem for legacy users, and progressive enhancement offers a solution. \nInstead of looking for fallback methods to maintain these new features, concern yourself first with proper layout structures. \nWrite semantic HTML and CSS markup that works in as many active browsers as possible (support for ancient browsers like IE5 support isn’t necessary). \njsfiddle columns css example Take for example this JSFiddle that uses floats with two sidebars (.fixed), and a fluid content area (.fluid). If you delete all CSS, and rerun the code you’ll notice everything stacks up nicely with the first column, then second, and finally the last. \njsfiddle no css columns Some developers would prefer to have the content column (.fluid) appear first in the HTML. This is where progressive enhancement comes into play, and alternate CSS solutions become viable. \nThe two primary goals of your HTML are as follows: \nFully semantic and valid code \nA consistent experience for everyone \n The most straightforward way to achieve these goals is to start from nothing and work up, as most progressive enhancement advocates would recommend it. \nIf your code looks good with CSS both disabled and enabled, then it offers a reasonable solution for everyone. \nIt’s also worth considering at what point you drop support for something. Microsoft has already dropped major support for IE6 , so users running that browser may not be worth your time. \nBut there’s still one big question: if a browser doesn’t support my modern CSS, what should I do? \nYou simply write code that works without it, and consider the modern CSS as a progressive enhancement. This is the beauty of the progressive enhancement methodology. \nYou don’t need fallbacks, because you’re basically assuming that nothing is supported by default. \nProgressive enhancement methods are about making the site usable even in cases when something isn’t supported—but if it is supported, all the better. \nYou need to consider how content actually flows without CSS. For example, when I disable CSS on Transmit’s website, the content still flows organically down the page. \ntransmit website css disabledIMAGE: Transmit Yes, it’s ugly, and yes, it feels like we’ve lost twenty years of progress… but it works. \n3. Handling JavaScript \nIt’s 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 operate without JavaScript. \nThis will require lots of online research to find valid solutions. Aaron Gustafson wrote a great blog post with solutions to various problems, like replacing Ajax with a meta refresh for content inside an iframe. \nAlso, when you create JavaScript tabs, it’s a good idea to use anchor links with real ID values. That way, when JavaScript is disabled, you can still have the tabs visible and accessible by anchor value. Aaron wrote another piece on A List Apart that covers a more general overview of how you should think about these problems. \nHere’s another example. Let’s say you have a link that loads content dynamically. The href value is empty, because everything loads via JavaScript with the preventDefault() method. \nInstead, it would be wise to set the href property to point to a different page where the content could load naturally, but the visitor only sees that page when JavaScript is disabled. \nProgressive enhancement is about more than JavaScript, but with web development advancing further every year, there’s no doubt that JavaScript plays a significant role. \nOperate under the assumption that everything has been disabled, and scale up from there. This might include problems with embedded widgets that are out of your control, the <noscript> tag is a viable solution here. \nAlso think about JavaScript features that lack comprehensive browser support. This includes the fetch API, the push API, the arrow function syntax, or even browsers without support for modern libraries like jQuery. \nEvery feature requires individual testing with an individual solution. \nThe essence of progressively enhanced JavaScript is to build content that functions without any scripting. This may lead to a rudimentary user experience, but that’s okay as long as the website is usable, and the content is accessible. \nIf you want to do live testing, you can typically disable CSS and JavaScript in every major browser to see how your website performs. It’s also worth considering using extensions like A-Tester for WCAG compliance. \nJavaScript with progressive enhancement is a huge topic. Here are some posts to help you dig deeper: \nProgressive Enhancement != “No JavaScript” \nInteraction is Key: Progressive Enhancement and JavaScript \nProgressive Enhancement: It’s About the Content \nHow to Apply Progressive Enhancement When JavaScript Seems Like a Requirement \n Where Progressive Enhancement Falls Short \nAlthough progressive enhancement is a brilliant idea for almost every type of modern website, it simply may not be applicable to projects that aim to push the limits of web technology. \nFor 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 Codrops’ tutorials wouldn’t even exist. You have to remember the target audience. \nA business website probably doesn’t have the audience that cares about flashy new CSS3 perspective properties, but web developers can be the perfect audience for such advanced features. \nProgressive enhancement only falls short for web applications that simply don’t care about going back in time. 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. \nI am a proponent of progressive enhancement (or even graceful degradation, your choice) for general web projects. But I also realize it’s not the perfect solution for everything. In fact, there is no perfect solution. It all boils down to audience needs and project goals. \nFurther Reading \nIf you’re constantly building web projects, you should consider applying progressive enhancement to your workflow. It’s 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. \nIf you want to learn more about progressive enhancement, check out these related posts: \nUnderstanding Progressive Enhancement \nProgressive Enhancement: What It Is, And How To Use It? \nThe JavaScript-Dependency Backlash: Myth-Busting Progressive Enhancement \n This article was originally published on Hongkiat \nContinue Reading","mention-of":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","wm-property":"mention-of","wm-private":false},{"type":"entry","author":{"type":"card","name":"admin","photo":"","url":"http://www.socialblog.top/author/admin/"},"url":"http://www.socialblog.top/best-practices-for-progressive-enhancement-in-web-design/","published":null,"wm-received":"2016-07-06T06:57:33Z","wm-id":355606,"wm-source":"http://www.socialblog.top/best-practices-for-progressive-enhancement-in-web-design/","wm-target":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","name":"Best Practices for Progressive Enhancement in Web Design","content":{"content-type":"text/html","value":"<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\">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’s easy to understand progressive enhancement, but not as easy to apply it directly to your design work. I’d 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<h4>1. Understanding Progressive Enhancement</h4>\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=\"http://www.hongkiat.com/blog/css-javascript-fallback-methods/\">graceful degradation</a> which includes all features by default, then degrades when something doesn’t 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’ll be accessible.</p>\n<p>This <a href=\"http://alistapart.com/article/understandingprogressiveenhancement\"><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’s a general rundown of the main features of progressive enhancement, that you should take into account:</p>\n<ul><li><strong>Semantic markup</strong> for all content</li>\n<li>Users’ <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><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’t support modern CSS3? This is where sites like <a href=\"http://caniuse.com/\">Can I Use</a> come into play. You should decide which features are worth implementing, and make judgements based <strong>on the target audience of your website</strong>.</p>\n<h4>2. Subsistence In Stylesheets</h4>\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=\"http://www.hongkiat.com/blog/html-5-semantics/\">semantic HTML</a> and <a href=\"http://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’t necessary).</p>\n<a href=\"http://jsfiddle.net/a9jbq5bj/4/\"><img alt=\"jsfiddle columns css example\" height=\"400\" src=\"http://www.socialblog.top/wp-content/plugins/RSSPoster_PRO/cache/a9874_01-jsfiddle-fluid-third-columns-css.jpg\" width=\"700\" /></a><p>Take for example <a href=\"http://jsfiddle.net/a9jbq5bj/4/\">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’ll notice everything stacks up nicely with the first column, then second, and finally the last.</p>\n<img alt=\"jsfiddle no css columns\" height=\"400\" src=\"http://www.socialblog.top/wp-content/plugins/RSSPoster_PRO/cache/a9874_02-jsfiddle-no-css-columns.jpg\" width=\"700\" /><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=\"http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks\">alternate CSS solutions</a> become viable.</p>\n<p>The two primary goals of your HTML are as follows:</p>\n<ul><li>Fully <strong>semantic and valid</strong> code</li>\n<li>A <strong>consistent experience</strong> for everyone</li>\n</ul><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’s also worth considering <strong>at what point you drop support for something</strong>. Microsoft has already dropped <a href=\"http://superuser.com/questions/127628/what-is-the-official-end-of-support-date-for-internet-explorer-6-on-windows-xp\">major support for IE6 </a>, so users running that browser may not be worth your time.</p>\n<p>But there’s still one big question: if a browser doesn’t 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’t need fallbacks, because you’re <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’t supported—but 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/\">Transmit’s website</a>, the content still flows organically down the page.</p>\n<img alt=\"transmit website css disabled\" height=\"400\" src=\"http://www.socialblog.top/wp-content/plugins/RSSPoster_PRO/cache/a9874_03-transmit-website-css-disabled.jpg\" width=\"700\" />IMAGE: <a href=\"https://panic.com/transmit/\">Transmit</a><p>Yes, it’s ugly, and yes, it feels like we’ve lost twenty years of progress… <strong>but it works</strong>.</p>\n<h4>3. Handling JavaScript</h4>\n<p>It’s 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/\">blog post</a> with solutions to various problems, like replacing Ajax with a <a href=\"http://www.w3schools.com/tags/att_meta_http_equiv.asp\">meta refresh</a> for content inside an iframe.</p>\n<p>Also, when you create JavaScript tabs, it’s 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=\"http://alistapart.com/article/progressiveenhancementwithjavascript\">A List Apart</a> that covers a more general overview of how you should think about these problems.</p>\n<p>Here’s another example. Let’s 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/\">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://www.christianheilmann.com/2015/02/18/progressive-enhancement-is-not-about-javascript-availability/\">more than JavaScript</a>, but with web development advancing further every year, there’s 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=\"http://stackoverflow.com/questions/121203/how-to-detect-if-javascript-is-disabled\">noscript 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=\"http://caniuse.com/#feat=fetch\">fetch API</a>, the <a href=\"http://caniuse.com/#feat=push-api\">push API</a>, the <a href=\"http://caniuse.com/#feat=arrow-functions\">arrow function syntax</a>, or even browsers without support for modern libraries like <a href=\"https://jquery.com/browser-support/\">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’s 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’s also worth considering using extensions like <a href=\"https://chrome.google.com/webstore/detail/a-tester-wcag-20-web-acce/mbmcfgbjmddnnpkibfgnofecdemjcdaa?hl=en-GB\">A-Tester</a> for <a href=\"https://www.w3.org/TR/WCAG20/\">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><li><a href=\"http://www.stucox.com/blog/progressive-enhancement-no-javascript/\">Progressive Enhancement != “No JavaScript”</a></li>\n<li><a href=\"http://molily.de/interaction-is-key/\">Interaction is Key: Progressive Enhancement and JavaScript</a></li>\n<li><a href=\"http://cognition.happycog.com/article/progressive-enhancement-its-about-the-content\">Progressive Enhancement: It’s 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/\">How to Apply Progressive Enhancement When JavaScript Seems Like a Requirement</a></li>\n</ul><h4>Where Progressive Enhancement Falls Short</h4>\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=\"http://tympanus.net/codrops/category/tutorials/\">Codrops’ tutorials</a> wouldn’t even exist. You have to <strong>remember the target audience</strong>.</p>\n<p>A business website probably doesn’t have the audience that cares about flashy new CSS3 <a href=\"http://www.w3schools.com/cssref/css3_pr_perspective.asp\">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’t 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’s 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<h4>Further Reading</h4>\n<p>If you’re constantly building web projects, you should consider applying progressive enhancement to your workflow. It’s 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><li><a href=\"http://alistapart.com/article/understandingprogressiveenhancement\">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/\">Progressive Enhancement: What It Is, And How To Use It?</a></li>\n<li><a href=\"http://www.sitepoint.com/javascript-dependency-backlash-myth-busting-progressive-enhancement/\">The JavaScript-Dependency Backlash: Myth-Busting Progressive Enhancement</a></li>\n</ul>","html":"<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\">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’s easy to understand progressive enhancement, but not as easy to apply it directly to your design work. I’d 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<h4>1. Understanding Progressive Enhancement</h4>\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=\"http://www.hongkiat.com/blog/css-javascript-fallback-methods/\">graceful degradation</a> which includes all features by default, then degrades when something doesn’t 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’ll be accessible.</p>\n<p>This <a href=\"http://alistapart.com/article/understandingprogressiveenhancement\"><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’s a general rundown of the main features of progressive enhancement, that you should take into account:</p>\n<ul><li><strong>Semantic markup</strong> for all content</li>\n<li>Users’ <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><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’t support modern CSS3? This is where sites like <a href=\"http://caniuse.com/\">Can I Use</a> come into play. You should decide which features are worth implementing, and make judgements based <strong>on the target audience of your website</strong>.</p>\n<h4>2. Subsistence In Stylesheets</h4>\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=\"http://www.hongkiat.com/blog/html-5-semantics/\">semantic HTML</a> and <a href=\"http://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’t necessary).</p>\n<a href=\"http://jsfiddle.net/a9jbq5bj/4/\"><img alt=\"jsfiddle columns css example\" height=\"400\" src=\"http://www.socialblog.top/wp-content/plugins/RSSPoster_PRO/cache/a9874_01-jsfiddle-fluid-third-columns-css.jpg\" width=\"700\" /></a><p>Take for example <a href=\"http://jsfiddle.net/a9jbq5bj/4/\">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’ll notice everything stacks up nicely with the first column, then second, and finally the last.</p>\n<img alt=\"jsfiddle no css columns\" height=\"400\" src=\"http://www.socialblog.top/wp-content/plugins/RSSPoster_PRO/cache/a9874_02-jsfiddle-no-css-columns.jpg\" width=\"700\" /><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=\"http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks\">alternate CSS solutions</a> become viable.</p>\n<p>The two primary goals of your HTML are as follows:</p>\n<ul><li>Fully <strong>semantic and valid</strong> code</li>\n<li>A <strong>consistent experience</strong> for everyone</li>\n</ul><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’s also worth considering <strong>at what point you drop support for something</strong>. Microsoft has already dropped <a href=\"http://superuser.com/questions/127628/what-is-the-official-end-of-support-date-for-internet-explorer-6-on-windows-xp\">major support for IE6 </a>, so users running that browser may not be worth your time.</p>\n<p>But there’s still one big question: if a browser doesn’t 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’t need fallbacks, because you’re <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’t supported—but 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/\">Transmit’s website</a>, the content still flows organically down the page.</p>\n<img alt=\"transmit website css disabled\" height=\"400\" src=\"http://www.socialblog.top/wp-content/plugins/RSSPoster_PRO/cache/a9874_03-transmit-website-css-disabled.jpg\" width=\"700\" />IMAGE: <a href=\"https://panic.com/transmit/\">Transmit</a><p>Yes, it’s ugly, and yes, it feels like we’ve lost twenty years of progress… <strong>but it works</strong>.</p>\n<h4>3. Handling JavaScript</h4>\n<p>It’s 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/\">blog post</a> with solutions to various problems, like replacing Ajax with a <a href=\"http://www.w3schools.com/tags/att_meta_http_equiv.asp\">meta refresh</a> for content inside an iframe.</p>\n<p>Also, when you create JavaScript tabs, it’s 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=\"http://alistapart.com/article/progressiveenhancementwithjavascript\">A List Apart</a> that covers a more general overview of how you should think about these problems.</p>\n<p>Here’s another example. Let’s 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/\">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://www.christianheilmann.com/2015/02/18/progressive-enhancement-is-not-about-javascript-availability/\">more than JavaScript</a>, but with web development advancing further every year, there’s 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=\"http://stackoverflow.com/questions/121203/how-to-detect-if-javascript-is-disabled\">noscript 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=\"http://caniuse.com/#feat=fetch\">fetch API</a>, the <a href=\"http://caniuse.com/#feat=push-api\">push API</a>, the <a href=\"http://caniuse.com/#feat=arrow-functions\">arrow function syntax</a>, or even browsers without support for modern libraries like <a href=\"https://jquery.com/browser-support/\">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’s 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’s also worth considering using extensions like <a href=\"https://chrome.google.com/webstore/detail/a-tester-wcag-20-web-acce/mbmcfgbjmddnnpkibfgnofecdemjcdaa?hl=en-GB\">A-Tester</a> for <a href=\"https://www.w3.org/TR/WCAG20/\">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><li><a href=\"http://www.stucox.com/blog/progressive-enhancement-no-javascript/\">Progressive Enhancement != “No JavaScript”</a></li>\n<li><a href=\"http://molily.de/interaction-is-key/\">Interaction is Key: Progressive Enhancement and JavaScript</a></li>\n<li><a href=\"http://cognition.happycog.com/article/progressive-enhancement-its-about-the-content\">Progressive Enhancement: It’s 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/\">How to Apply Progressive Enhancement When JavaScript Seems Like a Requirement</a></li>\n</ul><h4>Where Progressive Enhancement Falls Short</h4>\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=\"http://tympanus.net/codrops/category/tutorials/\">Codrops’ tutorials</a> wouldn’t even exist. You have to <strong>remember the target audience</strong>.</p>\n<p>A business website probably doesn’t have the audience that cares about flashy new CSS3 <a href=\"http://www.w3schools.com/cssref/css3_pr_perspective.asp\">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’t 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’s 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<h4>Further Reading</h4>\n<p>If you’re constantly building web projects, you should consider applying progressive enhancement to your workflow. It’s 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><li><a href=\"http://alistapart.com/article/understandingprogressiveenhancement\">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/\">Progressive Enhancement: What It Is, And How To Use It?</a></li>\n<li><a href=\"http://www.sitepoint.com/javascript-dependency-backlash-myth-busting-progressive-enhancement/\">The JavaScript-Dependency Backlash: Myth-Busting Progressive Enhancement</a></li>\n</ul>","text":"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. \nProgressive enhancement is such an idea in web design that aims to reduce errors and provide a consistent user experience across the board. The concept has its own Wikipedia page which explains it as a method of fully-accessible content, rendering enhanced features only when supported by the browser. \nIt’s easy to understand progressive enhancement, but not as easy to apply it directly to your design work. I’d like to cover some best practices for progressive enhancement in real-world projects to help designers think more sustainably about their workflow. \n1. Understanding Progressive Enhancement \nThe theory of progressive enhancement recommends to start with a simple website that works in all browsers, making it accessible for every visitor. Then add features whenever possible. \nThis is the opposite of graceful degradation which includes all features by default, then degrades when something doesn’t work. \nProgressive enhancement is better for the overall user experience, because at its core it loads only necessary elements. Every web browser can support text (and usually images). Without any CSS this information will look bland and tasteless, but it’ll be accessible. \nThis List Apart article argues that progressive enhancement is content-first with styles and dynamic components added later. Content in semantic HTML should be delivered before anything else. \nThe 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. \nHere’s a general rundown of the main features of progressive enhancement, that you should take into account: \nSemantic markup for all content \nUsers’ browser preferences needs to be respected \nContent and basic functionality should be available to all users \nUnobtrusive JavaScript is loaded only in environments that can support it \n Technological restraints in front-end development are primarily determined by browser compatibility. Progressive enhancement gets you back to the basics thinking about how the bare-bone simplest webpage might look like. From there, you can plan for more advanced features, like CSS3 properties. \nBut what about browsers that don’t support modern CSS3? This is where sites like Can I Use come into play. You should decide which features are worth implementing, and make judgements based on the target audience of your website. \n2. Subsistence In Stylesheets \nMost browsers today support all the basic properties you need. But advanced CSS3 is still a problem for legacy users, and progressive enhancement offers a solution. \nInstead of looking for fallback methods to maintain these new features, concern yourself first with proper layout structures. \nWrite semantic HTML and CSS markup that works in as many active browsers as possible (support for ancient browsers like IE5 support isn’t necessary). \njsfiddle columns css example Take for example this JSFiddle that uses floats with two sidebars (.fixed), and a fluid content area (.fluid). If you delete all CSS, and rerun the code you’ll notice everything stacks up nicely with the first column, then second, and finally the last. \njsfiddle no css columns Some developers would prefer to have the content column (.fluid) appear first in the HTML. This is where progressive enhancement comes into play, and alternate CSS solutions become viable. \nThe two primary goals of your HTML are as follows: \nFully semantic and valid code \nA consistent experience for everyone \n The most straightforward way to achieve these goals is to start from nothing and work up, as most progressive enhancement advocates would recommend it. \nIf your code looks good with CSS both disabled and enabled, then it offers a reasonable solution for everyone. \nIt’s also worth considering at what point you drop support for something. Microsoft has already dropped major support for IE6 , so users running that browser may not be worth your time. \nBut there’s still one big question: if a browser doesn’t support my modern CSS, what should I do? \nYou simply write code that works without it, and consider the modern CSS as a progressive enhancement. This is the beauty of the progressive enhancement methodology. \nYou don’t need fallbacks, because you’re basically assuming that nothing is supported by default. \nProgressive enhancement methods are about making the site usable even in cases when something isn’t supported—but if it is supported, all the better. \nYou need to consider how content actually flows without CSS. For example, when I disable CSS on Transmit’s website, the content still flows organically down the page. \ntransmit website css disabledIMAGE: Transmit Yes, it’s ugly, and yes, it feels like we’ve lost twenty years of progress… but it works. \n3. Handling JavaScript \nIt’s 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 operate without JavaScript. \nThis will require lots of online research to find valid solutions. Aaron Gustafson wrote a great blog post with solutions to various problems, like replacing Ajax with a meta refresh for content inside an iframe. \nAlso, when you create JavaScript tabs, it’s a good idea to use anchor links with real ID values. That way, when JavaScript is disabled, you can still have the tabs visible and accessible by anchor value. Aaron wrote another piece on A List Apart that covers a more general overview of how you should think about these problems. \nHere’s another example. Let’s say you have a link that loads content dynamically. The href value is empty, because everything loads via JavaScript with the preventDefault() method. \nInstead, it would be wise to set the href property to point to a different page where the content could load naturally, but the visitor only sees that page when JavaScript is disabled. \nProgressive enhancement is about more than JavaScript, but with web development advancing further every year, there’s no doubt that JavaScript plays a significant role. \nOperate under the assumption that everything has been disabled, and scale up from there. This might include problems with embedded widgets that are out of your control, the noscript tag is a viable solution here. \nAlso think about JavaScript features that lack comprehensive browser support. This includes the fetch API, the push API, the arrow function syntax, or even browsers without support for modern libraries like jQuery. \nEvery feature requires individual testing with an individual solution. \nThe essence of progressively enhanced JavaScript is to build content that functions without any scripting. This may lead to a rudimentary user experience, but that’s okay as long as the website is usable, and the content is accessible. \nIf you want to do live testing, you can typically disable CSS and JavaScript in every major browser to see how your website performs. It’s also worth considering using extensions like A-Tester for WCAG compliance. \nJavaScript with progressive enhancement is a huge topic. Here are some posts to help you dig deeper: \nProgressive Enhancement != “No JavaScript” \nInteraction is Key: Progressive Enhancement and JavaScript \nProgressive Enhancement: It’s About the Content \nHow to Apply Progressive Enhancement When JavaScript Seems Like a Requirement \n Where Progressive Enhancement Falls Short \nAlthough progressive enhancement is a brilliant idea for almost every type of modern website, it simply may not be applicable to projects that aim to push the limits of web technology. \nFor 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 Codrops’ tutorials wouldn’t even exist. You have to remember the target audience. \nA business website probably doesn’t have the audience that cares about flashy new CSS3 perspective properties, but web developers can be the perfect audience for such advanced features. \nProgressive enhancement only falls short for web applications that simply don’t care about going back in time. 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. \nI am a proponent of progressive enhancement (or even graceful degradation, your choice) for general web projects. But I also realize it’s not the perfect solution for everything. In fact, there is no perfect solution. It all boils down to audience needs and project goals. \nFurther Reading \nIf you’re constantly building web projects, you should consider applying progressive enhancement to your workflow. It’s 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. \nIf you want to learn more about progressive enhancement, check out these related posts: \nUnderstanding Progressive Enhancement \nProgressive Enhancement: What It Is, And How To Use It? \nThe JavaScript-Dependency Backlash: Myth-Busting Progressive Enhancement"},"mention-of":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","wm-property":"mention-of","wm-private":false},{"type":"entry","author":{"type":"card","name":"","photo":"","url":""},"url":"http://www.brodneil.net/best-practices-for-progressive-enhancement-in-web-design/","published":null,"wm-received":"2016-07-06T13:11:12Z","wm-id":355669,"wm-source":"http://www.brodneil.net/best-practices-for-progressive-enhancement-in-web-design/","wm-target":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","mention-of":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","wm-property":"mention-of","wm-private":false},{"type":"entry","author":{"type":"card","name":"","photo":"","url":""},"url":"http://latesttechnology.space/best-practices-for-progressive-enhancement-in-web-design/","published":null,"wm-received":"2016-07-07T00:07:09Z","wm-id":355805,"wm-source":"http://latesttechnology.space/best-practices-for-progressive-enhancement-in-web-design/","wm-target":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","mention-of":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","wm-property":"mention-of","wm-private":false},{"type":"entry","author":{"type":"card","name":"","photo":"","url":""},"url":"http://www.1touchindia.co.in/best-practices-for-progressive-enhancement-in-web-design/","published":null,"wm-received":"2016-07-10T13:15:28Z","wm-id":356842,"wm-source":"http://www.1touchindia.co.in/best-practices-for-progressive-enhancement-in-web-design/","wm-target":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","content":{"content-type":"text/html","value":"<img alt=\"Best Practices for Progressive Enhancement in Web Design\" height=\"360\" src=\"http://www.1touchindia.co.in/wp-content/uploads/2016/07/Best-Practices-for-Progressive-Enhancement-in-Web-Design.png\" width=\"640\" />Best Practices for Progressive Enhancement in Web Design<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\">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’s easy to understand progressive enhancement, but not as easy to apply it directly to your design work. I’d 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<h4>1. Understanding Progressive Enhancement</h4>\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=\"http://www.hongkiat.com/blog/css-javascript-fallback-methods/\">graceful degradation</a> which includes all features by default, then degrades when something doesn’t 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’ll be accessible.</p>\n<p>This <a href=\"http://alistapart.com/article/understandingprogressiveenhancement\"><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’s a general rundown of the main features of progressive enhancement, that you should take into account:</p>\n<ul><li><strong>Semantic markup</strong> for all content</li>\n<li>Users’ <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><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’t support modern CSS3? This is where sites like <a href=\"http://caniuse.com/\">Can I Use</a> come into play. You should decide which features are worth implementing, and make judgements based <strong>on the target audience of your website</strong>.</p>\n<h4>2. Subsistence In Stylesheets</h4>\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=\"http://www.hongkiat.com/blog/html-5-semantics/\">semantic HTML</a> and <a href=\"http://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’t necessary).</p>\n<a href=\"http://jsfiddle.net/a9jbq5bj/4/\"><img alt=\"jsfiddle columns css example\" height=\"400\" src=\"http://media02.hongkiat.com/progressive-enhancements-web-design-best-practices/01-jsfiddle-fluid-third-columns-css.jpg\" width=\"700\" /></a><p>Take for example <a href=\"http://jsfiddle.net/a9jbq5bj/4/\">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’ll notice everything stacks up nicely with the first column, then second, and finally the last.</p>\n<img alt=\"jsfiddle no css columns\" height=\"400\" src=\"http://media02.hongkiat.com/progressive-enhancements-web-design-best-practices/02-jsfiddle-no-css-columns.jpg\" width=\"700\" /><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=\"http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks\">alternate CSS solutions</a> become viable.</p>\n<p>The two primary goals of your HTML are as follows:</p>\n<ul><li>Fully <strong>semantic and valid</strong> code</li>\n<li>A <strong>consistent experience</strong> for everyone</li>\n</ul><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’s also worth considering <strong>at what point you drop support for something</strong>. Microsoft has already dropped <a href=\"http://superuser.com/questions/127628/what-is-the-official-end-of-support-date-for-internet-explorer-6-on-windows-xp\">major support for IE6 </a>, so users running that browser may not be worth your time.</p>\n<p>But there’s still one big question: if a browser doesn’t 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’t need fallbacks, because you’re <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’t supported—but 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/\">Transmit’s website</a>, the content still flows organically down the page.</p>\n<img alt=\"transmit website css disabled\" height=\"400\" src=\"http://media02.hongkiat.com/progressive-enhancements-web-design-best-practices/03-transmit-website-css-disabled.jpg\" width=\"700\" />IMAGE: <a href=\"https://panic.com/transmit/\">Transmit</a><p>Yes, it’s ugly, and yes, it feels like we’ve lost twenty years of progress… <strong>but it works</strong>.</p>\n<h4>3. Handling JavaScript</h4>\n<p>It’s 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/\">blog post</a> with solutions to various problems, like replacing Ajax with a <a href=\"http://www.w3schools.com/tags/att_meta_http_equiv.asp\">meta refresh</a> for content inside an iframe.</p>\n<p>Also, when you create JavaScript tabs, it’s 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=\"http://alistapart.com/article/progressiveenhancementwithjavascript\">A List Apart</a> that covers a more general overview of how you should think about these problems.</p>\n<p>Here’s another example. Let’s 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/\">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://www.christianheilmann.com/2015/02/18/progressive-enhancement-is-not-about-javascript-availability/\">more than JavaScript</a>, but with web development advancing further every year, there’s 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=\"http://stackoverflow.com/questions/121203/how-to-detect-if-javascript-is-disabled\"> 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=\"http://caniuse.com/#feat=fetch\">fetch API</a>, the <a href=\"http://caniuse.com/#feat=push-api\">push API</a>, the <a href=\"http://caniuse.com/#feat=arrow-functions\">arrow function syntax</a>, or even browsers without support for modern libraries like <a href=\"https://jquery.com/browser-support/\">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’s 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’s also worth considering using extensions like <a href=\"https://chrome.google.com/webstore/detail/a-tester-wcag-20-web-acce/mbmcfgbjmddnnpkibfgnofecdemjcdaa?hl=en-GB\">A-Tester</a> for <a href=\"https://www.w3.org/TR/WCAG20/\">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><li><a href=\"http://www.stucox.com/blog/progressive-enhancement-no-javascript/\">Progressive Enhancement != “No JavaScript”</a></li>\n<li><a href=\"http://molily.de/interaction-is-key/\">Interaction is Key: Progressive Enhancement and JavaScript</a></li>\n<li><a href=\"http://cognition.happycog.com/article/progressive-enhancement-its-about-the-content\">Progressive Enhancement: It’s 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/\">How to Apply Progressive Enhancement When JavaScript Seems Like a Requirement</a></li>\n</ul><h4>Where Progressive Enhancement Falls Short</h4>\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=\"http://tympanus.net/codrops/category/tutorials/\">Codrops’ tutorials</a> wouldn’t even exist. You have to <strong>remember the target audience</strong>.</p>\n<p>A business website probably doesn’t have the audience that cares about flashy new CSS3 <a href=\"http://www.w3schools.com/cssref/css3_pr_perspective.asp\">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’t 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’s 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<h4>Further Reading</h4>\n<p>If you’re constantly building web projects, you should consider applying progressive enhancement to your workflow. It’s 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><li><a href=\"http://alistapart.com/article/understandingprogressiveenhancement\">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/\">Progressive Enhancement: What It Is, And How To Use It?</a></li>\n<li><a href=\"http://www.sitepoint.com/javascript-dependency-backlash-myth-busting-progressive-enhancement/\">The JavaScript-Dependency Backlash: Myth-Busting Progressive Enhancement</a></li>\n</ul><ul><li>\r\n\t\t\t\t\t\t\t\t<a href=\"https://twitter.com/intent/tweet?text=Best+Practices+for+Progressive+Enhancement+in+Web+Design:%20http://www.1touchindia.co.in/best-practices-for-progressive-enhancement-in-web-design/%20-%20via:1touchindia\" title=\"Tweet on Twitter\">\r\n\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\tTweet\r\n\t\t\t\t\t\t\t\t</a>\r\n\t\t\t\t\t\t\t</li><li>\r\n\t\t\t\t\t\t\t\t<a href=\"http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.1touchindia.co.in%2Fbest-practices-for-progressive-enhancement-in-web-design%2F\" title=\"Share on Facebook\">\r\n\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\tShare\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t</a>\r\n\t\t\t\t\t\t\t</li><li>\r\n\t\t\t\t\t\t\t\t<a href=\"http://reddit.com/submit?url=http://www.1touchindia.co.in/best-practices-for-progressive-enhancement-in-web-design/\" title=\"Submit to Reddit\">\r\n\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\tReddit\r\n\t\t\t\t\t\t\t\t</a>\r\n\t\t\t\t\t\t\t</li><li>\r\n\t\t\t\t\t\t\t\t<a href=\"http://plus.google.com/share?url=http://www.1touchindia.co.in/best-practices-for-progressive-enhancement-in-web-design/\" title=\"Share on Google+\">\r\n\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\t+1\r\n\t\t\t\t\t\t\t\t</a>\r\n\t\t\t\t\t\t\t</li><li>\r\n\t\t\t\t\t\t\t\t<a href=\"https://getpocket.com/save?url=http%3A%2F%2Fwww.1touchindia.co.in%2Fbest-practices-for-progressive-enhancement-in-web-design%2F\" title=\"Save to read later on Pocket\">\r\n\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\tPocket\r\n\t\t\t\t\t\t\t\t</a>\r\n\t\t\t\t\t\t\t</li><li>\r\n\t\t\t\t\t\t\t\t<a href=\"https://www.linkedin.com/shareArticle?mini=true&url=http://www.1touchindia.co.in/best-practices-for-progressive-enhancement-in-web-design/&title=Best%20Practices%20for%20Progressive%20Enhancement%20in%20Web%20Design\" title=\"Share on Linkedin\">\r\n\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\tLinkedIn\r\n\t\t\t\t\t\t\t\t\t0\r\n\t\t\t\t\t\t\t\t</a>\r\n\t\t\t\t\t\t\t</li></ul>","html":"<img alt=\"Best Practices for Progressive Enhancement in Web Design\" height=\"360\" src=\"http://www.1touchindia.co.in/wp-content/uploads/2016/07/Best-Practices-for-Progressive-Enhancement-in-Web-Design.png\" width=\"640\" />Best Practices for Progressive Enhancement in Web Design<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\">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’s easy to understand progressive enhancement, but not as easy to apply it directly to your design work. I’d 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<h4>1. Understanding Progressive Enhancement</h4>\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=\"http://www.hongkiat.com/blog/css-javascript-fallback-methods/\">graceful degradation</a> which includes all features by default, then degrades when something doesn’t 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’ll be accessible.</p>\n<p>This <a href=\"http://alistapart.com/article/understandingprogressiveenhancement\"><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’s a general rundown of the main features of progressive enhancement, that you should take into account:</p>\n<ul><li><strong>Semantic markup</strong> for all content</li>\n<li>Users’ <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><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’t support modern CSS3? This is where sites like <a href=\"http://caniuse.com/\">Can I Use</a> come into play. You should decide which features are worth implementing, and make judgements based <strong>on the target audience of your website</strong>.</p>\n<h4>2. Subsistence In Stylesheets</h4>\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=\"http://www.hongkiat.com/blog/html-5-semantics/\">semantic HTML</a> and <a href=\"http://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’t necessary).</p>\n<a href=\"http://jsfiddle.net/a9jbq5bj/4/\"><img alt=\"jsfiddle columns css example\" height=\"400\" src=\"http://media02.hongkiat.com/progressive-enhancements-web-design-best-practices/01-jsfiddle-fluid-third-columns-css.jpg\" width=\"700\" /></a><p>Take for example <a href=\"http://jsfiddle.net/a9jbq5bj/4/\">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’ll notice everything stacks up nicely with the first column, then second, and finally the last.</p>\n<img alt=\"jsfiddle no css columns\" height=\"400\" src=\"http://media02.hongkiat.com/progressive-enhancements-web-design-best-practices/02-jsfiddle-no-css-columns.jpg\" width=\"700\" /><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=\"http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks\">alternate CSS solutions</a> become viable.</p>\n<p>The two primary goals of your HTML are as follows:</p>\n<ul><li>Fully <strong>semantic and valid</strong> code</li>\n<li>A <strong>consistent experience</strong> for everyone</li>\n</ul><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’s also worth considering <strong>at what point you drop support for something</strong>. Microsoft has already dropped <a href=\"http://superuser.com/questions/127628/what-is-the-official-end-of-support-date-for-internet-explorer-6-on-windows-xp\">major support for IE6 </a>, so users running that browser may not be worth your time.</p>\n<p>But there’s still one big question: if a browser doesn’t 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’t need fallbacks, because you’re <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’t supported—but 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/\">Transmit’s website</a>, the content still flows organically down the page.</p>\n<img alt=\"transmit website css disabled\" height=\"400\" src=\"http://media02.hongkiat.com/progressive-enhancements-web-design-best-practices/03-transmit-website-css-disabled.jpg\" width=\"700\" />IMAGE: <a href=\"https://panic.com/transmit/\">Transmit</a><p>Yes, it’s ugly, and yes, it feels like we’ve lost twenty years of progress… <strong>but it works</strong>.</p>\n<h4>3. Handling JavaScript</h4>\n<p>It’s 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/\">blog post</a> with solutions to various problems, like replacing Ajax with a <a href=\"http://www.w3schools.com/tags/att_meta_http_equiv.asp\">meta refresh</a> for content inside an iframe.</p>\n<p>Also, when you create JavaScript tabs, it’s 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=\"http://alistapart.com/article/progressiveenhancementwithjavascript\">A List Apart</a> that covers a more general overview of how you should think about these problems.</p>\n<p>Here’s another example. Let’s 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/\">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://www.christianheilmann.com/2015/02/18/progressive-enhancement-is-not-about-javascript-availability/\">more than JavaScript</a>, but with web development advancing further every year, there’s 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=\"http://stackoverflow.com/questions/121203/how-to-detect-if-javascript-is-disabled\"> 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=\"http://caniuse.com/#feat=fetch\">fetch API</a>, the <a href=\"http://caniuse.com/#feat=push-api\">push API</a>, the <a href=\"http://caniuse.com/#feat=arrow-functions\">arrow function syntax</a>, or even browsers without support for modern libraries like <a href=\"https://jquery.com/browser-support/\">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’s 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’s also worth considering using extensions like <a href=\"https://chrome.google.com/webstore/detail/a-tester-wcag-20-web-acce/mbmcfgbjmddnnpkibfgnofecdemjcdaa?hl=en-GB\">A-Tester</a> for <a href=\"https://www.w3.org/TR/WCAG20/\">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><li><a href=\"http://www.stucox.com/blog/progressive-enhancement-no-javascript/\">Progressive Enhancement != “No JavaScript”</a></li>\n<li><a href=\"http://molily.de/interaction-is-key/\">Interaction is Key: Progressive Enhancement and JavaScript</a></li>\n<li><a href=\"http://cognition.happycog.com/article/progressive-enhancement-its-about-the-content\">Progressive Enhancement: It’s 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/\">How to Apply Progressive Enhancement When JavaScript Seems Like a Requirement</a></li>\n</ul><h4>Where Progressive Enhancement Falls Short</h4>\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=\"http://tympanus.net/codrops/category/tutorials/\">Codrops’ tutorials</a> wouldn’t even exist. You have to <strong>remember the target audience</strong>.</p>\n<p>A business website probably doesn’t have the audience that cares about flashy new CSS3 <a href=\"http://www.w3schools.com/cssref/css3_pr_perspective.asp\">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’t 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’s 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<h4>Further Reading</h4>\n<p>If you’re constantly building web projects, you should consider applying progressive enhancement to your workflow. It’s 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><li><a href=\"http://alistapart.com/article/understandingprogressiveenhancement\">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/\">Progressive Enhancement: What It Is, And How To Use It?</a></li>\n<li><a href=\"http://www.sitepoint.com/javascript-dependency-backlash-myth-busting-progressive-enhancement/\">The JavaScript-Dependency Backlash: Myth-Busting Progressive Enhancement</a></li>\n</ul><ul><li>\r\n\t\t\t\t\t\t\t\t<a href=\"https://twitter.com/intent/tweet?text=Best+Practices+for+Progressive+Enhancement+in+Web+Design:%20http://www.1touchindia.co.in/best-practices-for-progressive-enhancement-in-web-design/%20-%20via:1touchindia\" title=\"Tweet on Twitter\">\r\n\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\tTweet\r\n\t\t\t\t\t\t\t\t</a>\r\n\t\t\t\t\t\t\t</li><li>\r\n\t\t\t\t\t\t\t\t<a href=\"http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.1touchindia.co.in%2Fbest-practices-for-progressive-enhancement-in-web-design%2F\" title=\"Share on Facebook\">\r\n\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\tShare\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t</a>\r\n\t\t\t\t\t\t\t</li><li>\r\n\t\t\t\t\t\t\t\t<a href=\"http://reddit.com/submit?url=http://www.1touchindia.co.in/best-practices-for-progressive-enhancement-in-web-design/\" title=\"Submit to Reddit\">\r\n\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\tReddit\r\n\t\t\t\t\t\t\t\t</a>\r\n\t\t\t\t\t\t\t</li><li>\r\n\t\t\t\t\t\t\t\t<a href=\"http://plus.google.com/share?url=http://www.1touchindia.co.in/best-practices-for-progressive-enhancement-in-web-design/\" title=\"Share on Google+\">\r\n\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\t+1\r\n\t\t\t\t\t\t\t\t</a>\r\n\t\t\t\t\t\t\t</li><li>\r\n\t\t\t\t\t\t\t\t<a href=\"https://getpocket.com/save?url=http%3A%2F%2Fwww.1touchindia.co.in%2Fbest-practices-for-progressive-enhancement-in-web-design%2F\" title=\"Save to read later on Pocket\">\r\n\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\tPocket\r\n\t\t\t\t\t\t\t\t</a>\r\n\t\t\t\t\t\t\t</li><li>\r\n\t\t\t\t\t\t\t\t<a href=\"https://www.linkedin.com/shareArticle?mini=true&url=http://www.1touchindia.co.in/best-practices-for-progressive-enhancement-in-web-design/&title=Best%20Practices%20for%20Progressive%20Enhancement%20in%20Web%20Design\" title=\"Share on Linkedin\">\r\n\t\t\t\t\t\t\t\t\t<i></i>\r\n\t\t\t\t\t\t\t\t\tLinkedIn\r\n\t\t\t\t\t\t\t\t\t0\r\n\t\t\t\t\t\t\t\t</a>\r\n\t\t\t\t\t\t\t</li></ul>","text":"Best Practices for Progressive Enhancement in Web DesignBest Practices for Progressive Enhancement in Web Design 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. \nProgressive enhancement is such an idea in web design that aims to reduce errors and provide a consistent user experience across the board. The concept has its own Wikipedia page which explains it as a method of fully-accessible content, rendering enhanced features only when supported by the browser. \nIt’s easy to understand progressive enhancement, but not as easy to apply it directly to your design work. I’d like to cover some best practices for progressive enhancement in real-world projects to help designers think more sustainably about their workflow. \n1. Understanding Progressive Enhancement \nThe theory of progressive enhancement recommends to start with a simple website that works in all browsers, making it accessible for every visitor. Then add features whenever possible. \nThis is the opposite of graceful degradation which includes all features by default, then degrades when something doesn’t work. \nProgressive enhancement is better for the overall user experience, because at its core it loads only necessary elements. Every web browser can support text (and usually images). Without any CSS this information will look bland and tasteless, but it’ll be accessible. \nThis List Apart article argues that progressive enhancement is content-first with styles and dynamic components added later. Content in semantic HTML should be delivered before anything else. \nThe 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. \nHere’s a general rundown of the main features of progressive enhancement, that you should take into account: \nSemantic markup for all content \nUsers’ browser preferences needs to be respected \nContent and basic functionality should be available to all users \nUnobtrusive JavaScript is loaded only in environments that can support it \n Technological restraints in front-end development are primarily determined by browser compatibility. Progressive enhancement gets you back to the basics thinking about how the bare-bone simplest webpage might look like. From there, you can plan for more advanced features, like CSS3 properties. \nBut what about browsers that don’t support modern CSS3? This is where sites like Can I Use come into play. You should decide which features are worth implementing, and make judgements based on the target audience of your website. \n2. Subsistence In Stylesheets \nMost browsers today support all the basic properties you need. But advanced CSS3 is still a problem for legacy users, and progressive enhancement offers a solution. \nInstead of looking for fallback methods to maintain these new features, concern yourself first with proper layout structures. \nWrite semantic HTML and CSS markup that works in as many active browsers as possible (support for ancient browsers like IE5 support isn’t necessary). \njsfiddle columns css example Take for example this JSFiddle that uses floats with two sidebars (.fixed), and a fluid content area (.fluid). If you delete all CSS, and rerun the code you’ll notice everything stacks up nicely with the first column, then second, and finally the last. \njsfiddle no css columns Some developers would prefer to have the content column (.fluid) appear first in the HTML. This is where progressive enhancement comes into play, and alternate CSS solutions become viable. \nThe two primary goals of your HTML are as follows: \nFully semantic and valid code \nA consistent experience for everyone \n The most straightforward way to achieve these goals is to start from nothing and work up, as most progressive enhancement advocates would recommend it. \nIf your code looks good with CSS both disabled and enabled, then it offers a reasonable solution for everyone. \nIt’s also worth considering at what point you drop support for something. Microsoft has already dropped major support for IE6 , so users running that browser may not be worth your time. \nBut there’s still one big question: if a browser doesn’t support my modern CSS, what should I do? \nYou simply write code that works without it, and consider the modern CSS as a progressive enhancement. This is the beauty of the progressive enhancement methodology. \nYou don’t need fallbacks, because you’re basically assuming that nothing is supported by default. \nProgressive enhancement methods are about making the site usable even in cases when something isn’t supported—but if it is supported, all the better. \nYou need to consider how content actually flows without CSS. For example, when I disable CSS on Transmit’s website, the content still flows organically down the page. \ntransmit website css disabledIMAGE: Transmit Yes, it’s ugly, and yes, it feels like we’ve lost twenty years of progress… but it works. \n3. Handling JavaScript \nIt’s 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 operate without JavaScript. \nThis will require lots of online research to find valid solutions. Aaron Gustafson wrote a great blog post with solutions to various problems, like replacing Ajax with a meta refresh for content inside an iframe. \nAlso, when you create JavaScript tabs, it’s a good idea to use anchor links with real ID values. That way, when JavaScript is disabled, you can still have the tabs visible and accessible by anchor value. Aaron wrote another piece on A List Apart that covers a more general overview of how you should think about these problems. \nHere’s another example. Let’s say you have a link that loads content dynamically. The href value is empty, because everything loads via JavaScript with the preventDefault() method. \nInstead, it would be wise to set the href property to point to a different page where the content could load naturally, but the visitor only sees that page when JavaScript is disabled. \nProgressive enhancement is about more than JavaScript, but with web development advancing further every year, there’s no doubt that JavaScript plays a significant role. \nOperate under the assumption that everything has been disabled, and scale up from there. This might include problems with embedded widgets that are out of your control, the tag is a viable solution here. \nAlso think about JavaScript features that lack comprehensive browser support. This includes the fetch API, the push API, the arrow function syntax, or even browsers without support for modern libraries like jQuery. \nEvery feature requires individual testing with an individual solution. \nThe essence of progressively enhanced JavaScript is to build content that functions without any scripting. This may lead to a rudimentary user experience, but that’s okay as long as the website is usable, and the content is accessible. \nIf you want to do live testing, you can typically disable CSS and JavaScript in every major browser to see how your website performs. It’s also worth considering using extensions like A-Tester for WCAG compliance. \nJavaScript with progressive enhancement is a huge topic. Here are some posts to help you dig deeper: \nProgressive Enhancement != “No JavaScript” \nInteraction is Key: Progressive Enhancement and JavaScript \nProgressive Enhancement: It’s About the Content \nHow to Apply Progressive Enhancement When JavaScript Seems Like a Requirement \n Where Progressive Enhancement Falls Short \nAlthough progressive enhancement is a brilliant idea for almost every type of modern website, it simply may not be applicable to projects that aim to push the limits of web technology. \nFor 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 Codrops’ tutorials wouldn’t even exist. You have to remember the target audience. \nA business website probably doesn’t have the audience that cares about flashy new CSS3 perspective properties, but web developers can be the perfect audience for such advanced features. \nProgressive enhancement only falls short for web applications that simply don’t care about going back in time. 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. \nI am a proponent of progressive enhancement (or even graceful degradation, your choice) for general web projects. But I also realize it’s not the perfect solution for everything. In fact, there is no perfect solution. It all boils down to audience needs and project goals. \nFurther Reading \nIf you’re constantly building web projects, you should consider applying progressive enhancement to your workflow. It’s 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. \nIf you want to learn more about progressive enhancement, check out these related posts: \nUnderstanding Progressive Enhancement \nProgressive Enhancement: What It Is, And How To Use It? \nThe JavaScript-Dependency Backlash: Myth-Busting Progressive Enhancement \n \r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\tTweet\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\tShare\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\tReddit\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t+1\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\tPocket\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\tLinkedIn\r\n\t\t\t\t\t\t\t\t\t0"},"mention-of":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","wm-property":"mention-of","wm-private":false},{"type":"entry","author":{"type":"card","name":"","photo":"","url":""},"url":"https://webdesigndevblog.wordpress.com/2016/09/06/best-practices-for-progressive-enhancement-in-web-design/","published":null,"wm-received":"2016-09-06T08:33:14Z","wm-id":374542,"wm-source":"https://webdesigndevblog.wordpress.com/2016/09/06/best-practices-for-progressive-enhancement-in-web-design/","wm-target":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","content":{"content-type":"text/html","value":"<p><img alt=\"Untitled.jpg\" src=\"https://webdesigndevblog.files.wordpress.com/2016/09/untitled.jpg?w=720\" /></p>\n<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\">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’s easy to understand progressive enhancement, but not as easy to apply it directly to your design work. I’d 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 graceful degradation which includes all features by default, then degrades when something doesn’t 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 <a href=\"https://codequs.com/a/ryDGvK0q\">CSS</a> this information will look bland and tasteless, but it’ll be accessible.</p>\n<p>This <a href=\"http://alistapart.com/article/understandingprogressiveenhancement\"><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<a href=\"https://codequs.com/a/ryDGvK0q\"> HTML</a> should be delivered before anything else.</p>\n<p>The advanced <a href=\"https://codequs.com/a/ryDGvK0q\">CSS</a> and <a href=\"https://codequs.com/a/rJ4iW8qi\">JavaScript</a> 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’s a general rundown of the main features of progressive enhancement, that you should take into account:</p>\n<ul><li><strong>Semantic markup</strong> for all content</li>\n<li>Users’ <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><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 <a href=\"https://codequs.com/a/ryDGvK0q\">CSS3</a> properties.</p>\n\n<p>But what about browsers that don’t support modern <a href=\"https://codequs.com/a/ryDGvK0q\">CSS3</a>? This is where sites like <a href=\"http://caniuse.com/\">Can I Use</a> come into play. You should decide which features are worth implementing, and make judgements 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 <a href=\"https://codequs.com/a/SJr3cPWo\">CSS3</a> 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 semantic <a href=\"https://codequs.com/a/SJr3cPWo\">HTML and CSS </a>markup that works in as many active browsers as possible (support for ancient browsers like IE5 support isn’t necessary).</p>\n<a href=\"http://jsfiddle.net/a9jbq5bj/4/\"><img alt=\"jsfiddle columns css example\" height=\"400\" src=\"https://i1.wp.com/media02.hongkiat.com/progressive-enhancements-web-design-best-practices/01-jsfiddle-fluid-third-columns-css.jpg\" width=\"700\" /></a>\n<p>Take for example <a href=\"http://jsfiddle.net/a9jbq5bj/4/\">this JSFiddle</a> that uses floats with two sidebars (<code>.fixed</code>), and a fluid content area (<code>.fluid</code>). If you delete all <a href=\"https://codequs.com/a/SJr3cPWo\">CSS</a>, and rerun the code you’ll notice everything stacks up nicely with the first column, then second, and finally the last.</p>\n<img alt=\"jsfiddle no css columns\" height=\"400\" src=\"https://i1.wp.com/media02.hongkiat.com/progressive-enhancements-web-design-best-practices/02-jsfiddle-no-css-columns.jpg\" width=\"700\" />\n<p>Some developers would prefer to have the content column (<code>.fluid</code>) appear first in the <a href=\"https://codequs.com/a/SJr3cPWo\">HTML</a>. This is where progressive enhancement comes into play, andalternate <a href=\"https://codequs.com/a/HyQ9esji\">CSS </a>solutions become viable.</p>\n<p>The two primary goals of your <a href=\"https://codequs.com/a/SJr3cPWo\">HTML</a> are as follows:</p>\n<ul><li>Fully <strong>semantic and valid</strong> code</li>\n<li>A <strong>consistent experience</strong> for everyone</li>\n</ul><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 <a href=\"https://codequs.com/a/SJr3cPWo\">CSS</a> both disabled and enabled, then it offers a reasonable solution for everyone.</strong></p>\n<p>It’s also worth considering <strong>at what point you drop support for something</strong>. Microsoft has already dropped <a href=\"http://superuser.com/questions/127628/what-is-the-official-end-of-support-date-for-internet-explorer-6-on-windows-xp\">major support for IE6 </a>, so users running that browser may not be worth your time.</p>\n<p>But there’s still one big question: if a browser doesn’t support my modern <a href=\"https://codequs.com/a/SJr3cPWo\">CSS</a>, what should I do?</p>\n<p>You simply <strong>write code that works <em>without</em> it</strong>, and consider the modern <a href=\"https://codequs.com/a/ry-P9Dbo\">CSS</a> as a progressive enhancement. This is the beauty of the progressive enhancement methodology.</p>\n<p>You don’t need fallbacks, because you’re <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’t supported—but if it is supported, all the better.</p>\n<p>You need to consider <strong>how content actually flows without <a href=\"https://codequs.com/a/ry-P9Dbo\">CSS</a></strong>. For example, when I disable <a href=\"https://codequs.com/a/ry-P9Dbo\">CSS</a> on <a href=\"https://panic.com/transmit/\">Transmit’s website</a>, the content still flows organically down the page.</p>\n<img alt=\"transmit website css disabled\" height=\"400\" src=\"https://i0.wp.com/media02.hongkiat.com/progressive-enhancements-web-design-best-practices/03-transmit-website-css-disabled.jpg\" width=\"700\" />\n<p>Yes, it’s ugly, and yes, it feels like we’ve lost twenty years of progress… <strong>but it works</strong>.</p>\n<h4>3. Handling<a href=\"https://codequs.com/a/rkr5QObj\"> JavaScript</a></h4>\n<p>It’s worth mentioning that each <a href=\"https://codequs.com/a/rkr5QObj\">JavaScript</a> 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 <a href=\"https://codequs.com/a/rJ4iW8qi\">JS</a>-based features, and consider how they could <strong>operate without <a href=\"https://codequs.com/a/rkr5QObj\">JavaScript</a></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/\">blog post</a> with solutions to various problems, like replacing <a href=\"https://codequs.com/a/S1BGvdMj\">Ajax</a> with a <a href=\"http://www.w3schools.com/tags/att_meta_http_equiv.asp\">meta refresh</a> for content inside an iframe.</p>\n<p>Also, when you create<a href=\"https://codequs.com/a/rkr5QObj\"> JavaScript </a>tabs, it’s a good idea to <strong>use anchor links with real ID values</strong>. That way, when <a href=\"https://codequs.com/a/rkr5QObj\">JavaScript</a> is disabled, you can still have the tabs visible and accessible by anchor value. Aaron wrote another piece on <a href=\"http://alistapart.com/article/progressiveenhancementwithjavascript\">A List Apart</a>that covers a more general overview of how you should think about these problems.</p>\n<p>Here’s another example. Let’s say you have a link that loads content dynamically. The <code>href</code> value is empty, because everything loads via <a href=\"https://codequs.com/a/rkr5QObj\">JavaScript </a>with the<a href=\"https://api.jquery.com/event.preventdefault/\">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://www.christianheilmann.com/2015/02/18/progressive-enhancement-is-not-about-javascript-availability/\">more than JavaScript</a>, but with web development advancing further every year, there’s 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=\"http://stackoverflow.com/questions/121203/how-to-detect-if-javascript-is-disabled\"><noscript> 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=\"http://caniuse.com/#feat=fetch\">fetch API</a>, the <a href=\"http://caniuse.com/#feat=push-api\">push API</a>, the <a href=\"http://caniuse.com/#feat=arrow-functions\">arrow function syntax</a>, or even browsers without support for modern libraries like <a href=\"https://codequs.com/a/B1uULdzi\">jQuery</a>.</p>\n<p>Every feature requires <strong>individual testing</strong> with an individual solution.</p>\n<p>The essence of progressively enhanced <a href=\"https://codequs.com/a/rkr5QObj\">JavaScript</a> is to <strong>build content that functions without any scripting</strong>. This may lead to a rudimentary user experience, but that’s 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 <a href=\"https://codequs.com/a/HyQ9esji\">CSS </a>and <a href=\"https://codequs.com/a/rkr5QObj\">JavaScript</a> in every major browser</strong> to see how your website performs. It’s also worth considering using extensions like <a href=\"https://chrome.google.com/webstore/detail/a-tester-wcag-20-web-acce/mbmcfgbjmddnnpkibfgnofecdemjcdaa?hl=en-GB\">A-Tester</a> for <a href=\"https://www.w3.org/TR/WCAG20/\">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><li><a href=\"http://www.stucox.com/blog/progressive-enhancement-no-javascript/\">Progressive Enhancement != “No JavaScript”</a></li>\n<li><a href=\"http://molily.de/interaction-is-key/\">Interaction is Key: Progressive Enhancement and JavaScript</a></li>\n<li><a href=\"http://cognition.happycog.com/article/progressive-enhancement-its-about-the-content\">Progressive Enhancement: It’s 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/\">How to Apply Progressive Enhancement When JavaScript Seems Like a Requirement</a></li>\n</ul><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 <a href=\"https://codequs.com/a/S1BGvdMj\">Ajax </a>calls. Is that a good choice for accessibility? No, of course not. But if that were the case most of <a href=\"http://tympanus.net/codrops/category/tutorials/\">Codrops’ tutorials</a> wouldn’t even exist. You have to <strong>remember the target audience</strong>.</p>\n<p>A business website probably doesn’t have the audience that cares about flashy new <a href=\"https://codequs.com/a/HyQ9esji\">CSS3 </a>perspective properties, 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’t 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’s 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<h4>Further Reading</h4>\n<p>If you’re constantly building web projects, you should consider applying progressive enhancement to your workflow. It’s 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.<strong>Written by Jake Rocheleau</strong></p>\n<p><strong>Did you find this article helpful? Don’t forget to drop your feedback in the comments section below. Suggest for you:</strong></p>\n<p>☞ <a href=\"https://codequs.com/a/H1B2qMSj\">Hands on Sketch 3 Training – Website Design</a></p>\n<p>☞ <a href=\"https://codequs.com/a/rkr5QObj\">Learning Dynamic Website Design – PHP MySQL and JavaScript</a></p>\n<p>☞ <a href=\"https://codequs.com/a/B1aVhHus\">HTML CSS How to Create a Website from Scratch</a></p>\n<p>☞ <a href=\"https://codequs.com/a/BJhAoVbs\">Build a Responsive Website with HTML5, CSS3 and Bootstrap 4</a></p>\n<p>☞ <a href=\"https://codequs.com/a/rJ4iW8qi\">Build Responsive Website Using HTML5, CSS3, JS And Bootstrap</a></p>\n<h3>Share this:</h3><ul><li><a href=\"https://webdesigndevblog.wordpress.com/2016/09/06/best-practices-for-progressive-enhancement-in-web-design/?share=twitter\" title=\"Click to share on Twitter\">Twitter</a></li><li><a href=\"https://webdesigndevblog.wordpress.com/2016/09/06/best-practices-for-progressive-enhancement-in-web-design/?share=facebook\" title=\"Share on Facebook\">Facebook</a></li><li><a href=\"https://webdesigndevblog.wordpress.com/2016/09/06/best-practices-for-progressive-enhancement-in-web-design/?share=google-plus-1\" title=\"Click to share on Google+\">Google</a></li><li></li></ul><h3>Like this:</h3>Like Loading...<a></a>","html":"<p><img alt=\"Untitled.jpg\" src=\"https://webdesigndevblog.files.wordpress.com/2016/09/untitled.jpg?w=720\" /></p>\n<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\">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’s easy to understand progressive enhancement, but not as easy to apply it directly to your design work. I’d 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 graceful degradation which includes all features by default, then degrades when something doesn’t 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 <a href=\"https://codequs.com/a/ryDGvK0q\">CSS</a> this information will look bland and tasteless, but it’ll be accessible.</p>\n<p>This <a href=\"http://alistapart.com/article/understandingprogressiveenhancement\"><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<a href=\"https://codequs.com/a/ryDGvK0q\"> HTML</a> should be delivered before anything else.</p>\n<p>The advanced <a href=\"https://codequs.com/a/ryDGvK0q\">CSS</a> and <a href=\"https://codequs.com/a/rJ4iW8qi\">JavaScript</a> 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’s a general rundown of the main features of progressive enhancement, that you should take into account:</p>\n<ul><li><strong>Semantic markup</strong> for all content</li>\n<li>Users’ <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><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 <a href=\"https://codequs.com/a/ryDGvK0q\">CSS3</a> properties.</p>\n\n<p>But what about browsers that don’t support modern <a href=\"https://codequs.com/a/ryDGvK0q\">CSS3</a>? This is where sites like <a href=\"http://caniuse.com/\">Can I Use</a> come into play. You should decide which features are worth implementing, and make judgements 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 <a href=\"https://codequs.com/a/SJr3cPWo\">CSS3</a> 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 semantic <a href=\"https://codequs.com/a/SJr3cPWo\">HTML and CSS </a>markup that works in as many active browsers as possible (support for ancient browsers like IE5 support isn’t necessary).</p>\n<a href=\"http://jsfiddle.net/a9jbq5bj/4/\"><img alt=\"jsfiddle columns css example\" height=\"400\" src=\"https://i1.wp.com/media02.hongkiat.com/progressive-enhancements-web-design-best-practices/01-jsfiddle-fluid-third-columns-css.jpg\" width=\"700\" /></a>\n<p>Take for example <a href=\"http://jsfiddle.net/a9jbq5bj/4/\">this JSFiddle</a> that uses floats with two sidebars (<code>.fixed</code>), and a fluid content area (<code>.fluid</code>). If you delete all <a href=\"https://codequs.com/a/SJr3cPWo\">CSS</a>, and rerun the code you’ll notice everything stacks up nicely with the first column, then second, and finally the last.</p>\n<img alt=\"jsfiddle no css columns\" height=\"400\" src=\"https://i1.wp.com/media02.hongkiat.com/progressive-enhancements-web-design-best-practices/02-jsfiddle-no-css-columns.jpg\" width=\"700\" />\n<p>Some developers would prefer to have the content column (<code>.fluid</code>) appear first in the <a href=\"https://codequs.com/a/SJr3cPWo\">HTML</a>. This is where progressive enhancement comes into play, andalternate <a href=\"https://codequs.com/a/HyQ9esji\">CSS </a>solutions become viable.</p>\n<p>The two primary goals of your <a href=\"https://codequs.com/a/SJr3cPWo\">HTML</a> are as follows:</p>\n<ul><li>Fully <strong>semantic and valid</strong> code</li>\n<li>A <strong>consistent experience</strong> for everyone</li>\n</ul><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 <a href=\"https://codequs.com/a/SJr3cPWo\">CSS</a> both disabled and enabled, then it offers a reasonable solution for everyone.</strong></p>\n<p>It’s also worth considering <strong>at what point you drop support for something</strong>. Microsoft has already dropped <a href=\"http://superuser.com/questions/127628/what-is-the-official-end-of-support-date-for-internet-explorer-6-on-windows-xp\">major support for IE6 </a>, so users running that browser may not be worth your time.</p>\n<p>But there’s still one big question: if a browser doesn’t support my modern <a href=\"https://codequs.com/a/SJr3cPWo\">CSS</a>, what should I do?</p>\n<p>You simply <strong>write code that works <em>without</em> it</strong>, and consider the modern <a href=\"https://codequs.com/a/ry-P9Dbo\">CSS</a> as a progressive enhancement. This is the beauty of the progressive enhancement methodology.</p>\n<p>You don’t need fallbacks, because you’re <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’t supported—but if it is supported, all the better.</p>\n<p>You need to consider <strong>how content actually flows without <a href=\"https://codequs.com/a/ry-P9Dbo\">CSS</a></strong>. For example, when I disable <a href=\"https://codequs.com/a/ry-P9Dbo\">CSS</a> on <a href=\"https://panic.com/transmit/\">Transmit’s website</a>, the content still flows organically down the page.</p>\n<img alt=\"transmit website css disabled\" height=\"400\" src=\"https://i0.wp.com/media02.hongkiat.com/progressive-enhancements-web-design-best-practices/03-transmit-website-css-disabled.jpg\" width=\"700\" />\n<p>Yes, it’s ugly, and yes, it feels like we’ve lost twenty years of progress… <strong>but it works</strong>.</p>\n<h4>3. Handling<a href=\"https://codequs.com/a/rkr5QObj\"> JavaScript</a></h4>\n<p>It’s worth mentioning that each <a href=\"https://codequs.com/a/rkr5QObj\">JavaScript</a> 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 <a href=\"https://codequs.com/a/rJ4iW8qi\">JS</a>-based features, and consider how they could <strong>operate without <a href=\"https://codequs.com/a/rkr5QObj\">JavaScript</a></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/\">blog post</a> with solutions to various problems, like replacing <a href=\"https://codequs.com/a/S1BGvdMj\">Ajax</a> with a <a href=\"http://www.w3schools.com/tags/att_meta_http_equiv.asp\">meta refresh</a> for content inside an iframe.</p>\n<p>Also, when you create<a href=\"https://codequs.com/a/rkr5QObj\"> JavaScript </a>tabs, it’s a good idea to <strong>use anchor links with real ID values</strong>. That way, when <a href=\"https://codequs.com/a/rkr5QObj\">JavaScript</a> is disabled, you can still have the tabs visible and accessible by anchor value. Aaron wrote another piece on <a href=\"http://alistapart.com/article/progressiveenhancementwithjavascript\">A List Apart</a>that covers a more general overview of how you should think about these problems.</p>\n<p>Here’s another example. Let’s say you have a link that loads content dynamically. The <code>href</code> value is empty, because everything loads via <a href=\"https://codequs.com/a/rkr5QObj\">JavaScript </a>with the<a href=\"https://api.jquery.com/event.preventdefault/\">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://www.christianheilmann.com/2015/02/18/progressive-enhancement-is-not-about-javascript-availability/\">more than JavaScript</a>, but with web development advancing further every year, there’s 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=\"http://stackoverflow.com/questions/121203/how-to-detect-if-javascript-is-disabled\"><noscript> 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=\"http://caniuse.com/#feat=fetch\">fetch API</a>, the <a href=\"http://caniuse.com/#feat=push-api\">push API</a>, the <a href=\"http://caniuse.com/#feat=arrow-functions\">arrow function syntax</a>, or even browsers without support for modern libraries like <a href=\"https://codequs.com/a/B1uULdzi\">jQuery</a>.</p>\n<p>Every feature requires <strong>individual testing</strong> with an individual solution.</p>\n<p>The essence of progressively enhanced <a href=\"https://codequs.com/a/rkr5QObj\">JavaScript</a> is to <strong>build content that functions without any scripting</strong>. This may lead to a rudimentary user experience, but that’s 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 <a href=\"https://codequs.com/a/HyQ9esji\">CSS </a>and <a href=\"https://codequs.com/a/rkr5QObj\">JavaScript</a> in every major browser</strong> to see how your website performs. It’s also worth considering using extensions like <a href=\"https://chrome.google.com/webstore/detail/a-tester-wcag-20-web-acce/mbmcfgbjmddnnpkibfgnofecdemjcdaa?hl=en-GB\">A-Tester</a> for <a href=\"https://www.w3.org/TR/WCAG20/\">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><li><a href=\"http://www.stucox.com/blog/progressive-enhancement-no-javascript/\">Progressive Enhancement != “No JavaScript”</a></li>\n<li><a href=\"http://molily.de/interaction-is-key/\">Interaction is Key: Progressive Enhancement and JavaScript</a></li>\n<li><a href=\"http://cognition.happycog.com/article/progressive-enhancement-its-about-the-content\">Progressive Enhancement: It’s 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/\">How to Apply Progressive Enhancement When JavaScript Seems Like a Requirement</a></li>\n</ul><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 <a href=\"https://codequs.com/a/S1BGvdMj\">Ajax </a>calls. Is that a good choice for accessibility? No, of course not. But if that were the case most of <a href=\"http://tympanus.net/codrops/category/tutorials/\">Codrops’ tutorials</a> wouldn’t even exist. You have to <strong>remember the target audience</strong>.</p>\n<p>A business website probably doesn’t have the audience that cares about flashy new <a href=\"https://codequs.com/a/HyQ9esji\">CSS3 </a>perspective properties, 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’t 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’s 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<h4>Further Reading</h4>\n<p>If you’re constantly building web projects, you should consider applying progressive enhancement to your workflow. It’s 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.<strong>Written by Jake Rocheleau</strong></p>\n<p><strong>Did you find this article helpful? Don’t forget to drop your feedback in the comments section below. Suggest for you:</strong></p>\n<p>☞ <a href=\"https://codequs.com/a/H1B2qMSj\">Hands on Sketch 3 Training – Website Design</a></p>\n<p>☞ <a href=\"https://codequs.com/a/rkr5QObj\">Learning Dynamic Website Design – PHP MySQL and JavaScript</a></p>\n<p>☞ <a href=\"https://codequs.com/a/B1aVhHus\">HTML CSS How to Create a Website from Scratch</a></p>\n<p>☞ <a href=\"https://codequs.com/a/BJhAoVbs\">Build a Responsive Website with HTML5, CSS3 and Bootstrap 4</a></p>\n<p>☞ <a href=\"https://codequs.com/a/rJ4iW8qi\">Build Responsive Website Using HTML5, CSS3, JS And Bootstrap</a></p>\n<h3>Share this:</h3><ul><li><a href=\"https://webdesigndevblog.wordpress.com/2016/09/06/best-practices-for-progressive-enhancement-in-web-design/?share=twitter\" title=\"Click to share on Twitter\">Twitter</a></li><li><a href=\"https://webdesigndevblog.wordpress.com/2016/09/06/best-practices-for-progressive-enhancement-in-web-design/?share=facebook\" title=\"Share on Facebook\">Facebook</a></li><li><a href=\"https://webdesigndevblog.wordpress.com/2016/09/06/best-practices-for-progressive-enhancement-in-web-design/?share=google-plus-1\" title=\"Click to share on Google+\">Google</a></li><li></li></ul><h3>Like this:</h3>Like Loading...<a></a>","text":"Untitled.jpg \nThe craft of building websites is incredibly complex with many fast-changing parts. The goal of the web design community is to lessen the complexity, andreduce the potential for error at each stage of the creation process. \nProgressive enhancement is such an idea in web design that aims to reduce errors and provide a consistent user experience across the board. The concept has its own Wikipedia page which explains it as a method of fully-accessible content, rendering enhanced features only when supported by the browser. \nIt’s easy to understand progressive enhancement, but not as easy to apply it directly to your design work. I’d like to cover some best practices for progressive enhancement in real-world projects to help designers think more sustainably about their workflow. \n1. Understanding Progressive Enhancement \nThe theory of progressive enhancement recommends to start with a simple website that works in all browsers, making it accessible for every visitor. Then add features whenever possible. \nThis is the opposite of graceful degradation which includes all features by default, then degrades when something doesn’t work. \nProgressive enhancement is better for the overall user experience, because at its core it loads only necessary elements. Every web browser can support text (and usually images). Without any CSS this information will look bland and tasteless, but it’ll be accessible. \nThis List Apart article argues that progressive enhancement is content-first withstyles and dynamic components added later. Content in semantic HTML should be delivered before anything else. \nThe 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. \nHere’s a general rundown of the main features of progressive enhancement, that you should take into account: \nSemantic markup for all content \nUsers’ browser preferences needs to be respected \nContent and basic functionality should be available to all users \nUnobtrusive JavaScript is loaded only in environments that can support it \n Technological restraints in front-end development are primarily determined by browser compatibility. Progressive enhancement gets you back to the basics thinking about how the bare-bone simplest webpage might look like. From there, you can plan for more advanced features, like CSS3 properties. \n \nBut what about browsers that don’t support modern CSS3? This is where sites like Can I Use come into play. You should decide which features are worth implementing, and make judgements based on the target audience of your website. \n2. Subsistence In Stylesheets \nMost browsers today support all the basic properties you need. But advanced CSS3 is still a problem for legacy users, and progressive enhancement offers a solution. \nInstead of looking for fallback methods to maintain these new features, concern yourself first with proper layout structures. \nWrite semantic HTML and CSS markup that works in as many active browsers as possible (support for ancient browsers like IE5 support isn’t necessary). \njsfiddle columns css example \n Take for example this JSFiddle that uses floats with two sidebars (.fixed), and a fluid content area (.fluid). If you delete all CSS, and rerun the code you’ll notice everything stacks up nicely with the first column, then second, and finally the last. \njsfiddle no css columns \n Some developers would prefer to have the content column (.fluid) appear first in the HTML. This is where progressive enhancement comes into play, andalternate CSS solutions become viable. \nThe two primary goals of your HTML are as follows: \nFully semantic and valid code \nA consistent experience for everyone \n The most straightforward way to achieve these goals is to start from nothingand work up, as most progressive enhancement advocates would recommend it. \nIf your code looks good with CSS both disabled and enabled, then it offers a reasonable solution for everyone. \nIt’s also worth considering at what point you drop support for something. Microsoft has already dropped major support for IE6 , so users running that browser may not be worth your time. \nBut there’s still one big question: if a browser doesn’t support my modern CSS, what should I do? \nYou simply write code that works without it, and consider the modern CSS as a progressive enhancement. This is the beauty of the progressive enhancement methodology. \nYou don’t need fallbacks, because you’re basically assuming that nothing is supported by default. \nProgressive enhancement methods are about making the site usable even in cases when something isn’t supported—but if it is supported, all the better. \nYou need to consider how content actually flows without CSS. For example, when I disable CSS on Transmit’s website, the content still flows organically down the page. \ntransmit website css disabled \n Yes, it’s ugly, and yes, it feels like we’ve lost twenty years of progress… but it works. \n3. Handling JavaScript \nIt’s 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 operate without JavaScript. \nThis will require lots of online research to find valid solutions. Aaron Gustafson wrote a great blog post with solutions to various problems, like replacing Ajax with a meta refresh for content inside an iframe. \nAlso, when you create JavaScript tabs, it’s a good idea to use anchor links with real ID values. That way, when JavaScript is disabled, you can still have the tabs visible and accessible by anchor value. Aaron wrote another piece on A List Apartthat covers a more general overview of how you should think about these problems. \nHere’s another example. Let’s say you have a link that loads content dynamically. The href value is empty, because everything loads via JavaScript with thepreventDefault() method. \nInstead, it would be wise to set the href property to point to a different pagewhere the content could load naturally, but the visitor only sees that page when JavaScript is disabled. \nProgressive enhancement is about more than JavaScript, but with web development advancing further every year, there’s no doubt that JavaScript plays a significant role. \nOperate under the assumption that everything has been disabled, and scale up from there. This might include problems with embedded widgets that are out of your control, the <noscript> tag is a viable solution here. \nAlso think about JavaScript features that lack comprehensive browser support. This includes the fetch API, the push API, the arrow function syntax, or even browsers without support for modern libraries like jQuery. \nEvery feature requires individual testing with an individual solution. \nThe essence of progressively enhanced JavaScript is to build content that functions without any scripting. This may lead to a rudimentary user experience, but that’s okay as long as the website is usable, and the content is accessible. \nIf you want to do live testing, you can typically disable CSS and JavaScript in every major browser to see how your website performs. It’s also worth considering using extensions like A-Tester for WCAG compliance. \nJavaScript with progressive enhancement is a huge topic. Here are some posts to help you dig deeper: \nProgressive Enhancement != “No JavaScript” \nInteraction is Key: Progressive Enhancement and JavaScript \nProgressive Enhancement: It’s About the Content \nHow to Apply Progressive Enhancement When JavaScript Seems Like a Requirement \n Where Progressive Enhancement Falls Short \nAlthough progressive enhancement is a brilliant idea for almost every type of modern website, it simply may not be applicable to projects that aim to push the limits of web technology. \nFor 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 Codrops’ tutorials wouldn’t even exist. You have to remember the target audience. \nA business website probably doesn’t have the audience that cares about flashy new CSS3 perspective properties, but web developers can be the perfect audience for such advanced features. \nProgressive enhancement only falls short for web applications that simply don’t care about going back in time. 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. \nI am a proponent of progressive enhancement (or even graceful degradation, your choice) for general web projects. But I also realize it’s not the perfect solution for everything. In fact, there is no perfect solution. It all boils down to audience needs and project goals. \nFurther Reading \nIf you’re constantly building web projects, you should consider applying progressive enhancement to your workflow. It’s 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.\nWritten by Jake Rocheleau \nDid you find this article helpful? Don’t forget to drop your feedback in the comments section below. Suggest for you: \n☞ Hands on Sketch 3 Training – Website Design \n☞ Learning Dynamic Website Design – PHP MySQL and JavaScript \n☞ HTML CSS How to Create a Website from Scratch \n☞ Build a Responsive Website with HTML5, CSS3 and Bootstrap 4 \n☞ Build Responsive Website Using HTML5, CSS3, JS And Bootstrap \nShare this: Twitter Facebook Google Like this: Like Loading..."},"mention-of":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","wm-property":"mention-of","wm-private":false},{"type":"entry","author":{"type":"card","name":"","photo":"","url":""},"url":"https://webdesigndevblog.wordpress.com/2016/09/08/best-practices-for-progressive-enhancement-in-web-design-2/","published":null,"wm-received":"2016-09-08T08:24:56Z","wm-id":375641,"wm-source":"https://webdesigndevblog.wordpress.com/2016/09/08/best-practices-for-progressive-enhancement-in-web-design-2/","wm-target":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","content":{"content-type":"text/html","value":"<p><img alt=\"Untitled.jpg\" src=\"https://webdesigndevblog.files.wordpress.com/2016/09/untitled1.jpg?w=720\" /></p>\n<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\">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’s easy to understand progressive enhancement, but not as easy to apply it directly to your design work. I’d 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<h4>1. Understanding Progressive Enhancement</h4>\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 graceful degradation which includes all features by default, then degrades when something doesn’t 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 <a href=\"https://codequs.com/a/SJMR-3ws\">CSS </a>this information will look bland and tasteless, but it’ll be accessible.</p>\n<p>This <a href=\"http://alistapart.com/article/understandingprogressiveenhancement\"><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<a href=\"https://codequs.com/a/SJMR-3ws\"> HTML </a>should be delivered before anything else.</p>\n<p>The advanced <a href=\"https://codequs.com/a/SJr3cPWo\">CSS</a> and <a href=\"https://codequs.com/a/ByYBy37j\">JavaScript</a> 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’s a general rundown of the main features of progressive enhancement, that you should take into account:</p>\n<ul><li><strong>Semantic markup</strong> for all content</li>\n<li>Users’ <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 <a href=\"https://codequs.com/a/SybdL0aO\">JavaScript</a> is loaded only <strong>in environments that can support it</strong></li>\n</ul><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<a href=\"https://codequs.com/a/SJr3cPWo\"> CSS3</a> properties.</p>\n<p>But what about browsers that don’t support modern <a href=\"https://codequs.com/a/r135OYcc\">CSS3</a>? This is where sites like <a href=\"http://caniuse.com/\">Can I Use</a> come into play. You should decide which features are worth implementing, and make judgements based <strong>on the target audience of your website</strong>.</p>\n<h4>2. Subsistence In Stylesheets</h4>\n<p>Most browsers today support all the basic properties you need. But <strong>advanced <a href=\"https://codequs.com/a/SJMR-3ws\">CSS3</a> 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 semantic<a href=\"https://codequs.com/a/SJMR-3ws\"> HTML and CSS</a> markup that works in as many active browsers as possible (support for ancient browsers like IE5 support isn’t necessary).</p>\n<a href=\"http://jsfiddle.net/a9jbq5bj/4/\"><img alt=\"jsfiddle columns css example\" height=\"400\" src=\"https://i1.wp.com/media02.hongkiat.com/progressive-enhancements-web-design-best-practices/01-jsfiddle-fluid-third-columns-css.jpg\" width=\"700\" /></a>\n<p>Take for example <a href=\"http://jsfiddle.net/a9jbq5bj/4/\">this JSFiddle</a> that uses floats with two sidebars (<code>.fixed</code>), and a fluid content area (<code>.fluid</code>). If you delete all <a href=\"https://codequs.com/a/SJMR-3ws\">CSS</a>, and rerun the code you’ll notice everything stacks up nicely with the first column, then second, and finally the last.</p>\n<img alt=\"jsfiddle no css columns\" height=\"400\" src=\"https://i1.wp.com/media02.hongkiat.com/progressive-enhancements-web-design-best-practices/02-jsfiddle-no-css-columns.jpg\" width=\"700\" />\n<p>Some developers would prefer to have the content column (<code>.fluid</code>) appear first in the <a href=\"https://codequs.com/a/ry-P9Dbo\">HTML</a>. This is where progressive enhancement comes into play, andalternate <a href=\"https://codequs.com/a/SJMR-3ws\">CSS</a> solutions become viable.</p>\n<p>The two primary goals of your <a href=\"https://codequs.com/a/ry-P9Dbo\">HTML</a> are as follows:</p>\n<ul><li>Fully <strong>semantic and valid</strong> code</li>\n<li>A <strong>consistent experience</strong> for everyone</li>\n</ul><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 <a href=\"https://codequs.com/a/ry-P9Dbo\">CSS</a> both disabled and enabled, then it offers a reasonable solution for everyone.</strong></p>\n<p>It’s also worth considering <strong>at what point you drop support for something</strong>. Microsoft has already dropped <a href=\"http://superuser.com/questions/127628/what-is-the-official-end-of-support-date-for-internet-explorer-6-on-windows-xp\">major support for IE6 </a>, so users running that browser may not be worth your time.</p>\n<p>But there’s still one big question: if a browser doesn’t support my modern <a href=\"https://codequs.com/a/ry-P9Dbo\">CSS</a>, what should I do?</p>\n<p>You simply <strong>write code that works <em>without</em> it</strong>, and consider the modern <a href=\"https://codequs.com/a/SJr3cPWo\">CSS</a> as a progressive enhancement. This is the beauty of the progressive enhancement methodology.</p>\n<p>You don’t need fallbacks, because you’re <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’t supported—but if it is supported, all the better.</p>\n<p>You need to consider <strong>how content actually flows without <a href=\"https://codequs.com/a/SJr3cPWo\">CSS</a></strong>. For example, when I disable <a href=\"https://codequs.com/a/SJr3cPWo\">CSS</a> on <a href=\"https://panic.com/transmit/\">Transmit’s website</a>, the content still flows organically down the page.</p>\n<img alt=\"transmit website css disabled\" height=\"400\" src=\"https://i0.wp.com/media02.hongkiat.com/progressive-enhancements-web-design-best-practices/03-transmit-website-css-disabled.jpg\" width=\"700\" />\n<p>Yes, it’s ugly, and yes, it feels like we’ve lost twenty years of progress… <strong>but it works</strong>.</p>\n<h4>3. Handling <a href=\"https://codequs.com/a/B10zpuEd\">JavaScript</a></h4>\n<p>It’s worth mentioning that each <a href=\"https://codequs.com/a/HJwal_Ws\">JavaScript</a> 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 <a href=\"https://codequs.com/a/B10zpuEd\">JavaScrip</a>t</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/\">blog post</a> with solutions to various problems, like replacing<a href=\"https://codequs.com/a/B1uULdzi\"> Ajax </a>with a <a href=\"http://www.w3schools.com/tags/att_meta_http_equiv.asp\">meta refresh</a> for content inside an iframe.</p>\n<p>Also, when you create <a href=\"https://codequs.com/a/HJwal_Ws\">JavaScript</a> tabs, it’s a good idea to <strong>use anchor links with real ID values</strong>. That way, when<a href=\"https://codequs.com/a/B10zpuEd\"> JavaScript</a> is disabled, you can still have the tabs visible and accessible by anchor value. Aaron wrote another piece on <a href=\"http://alistapart.com/article/progressiveenhancementwithjavascript\">A List Apart</a>that covers a more general overview of how you should think about these problems.</p>\n<p>Here’s another example. Let’s say you have a link that loads content dynamically. The <code>href</code> value is empty, because everything loads via <a href=\"https://codequs.com/a/HJwal_Ws\">JavaScript</a> with the<a href=\"https://api.jquery.com/event.preventdefault/\">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 <a href=\"https://codequs.com/a/B1qaM67j\">JavaScript </a>is disabled</strong>.</p>\n<p>Progressive enhancement is about <a href=\"https://www.christianheilmann.com/2015/02/18/progressive-enhancement-is-not-about-javascript-availability/\">more than JavaScript</a>, but with web development advancing further every year, there’s no doubt that <a href=\"https://codequs.com/a/HJwal_Ws\">JavaScript </a>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=\"http://stackoverflow.com/questions/121203/how-to-detect-if-javascript-is-disabled\"><noscript> tag</a></code> is a viable solution here.</p>\n<p>Also think about <a href=\"https://codequs.com/a/B1qaM67j\">JavaScript</a> features that <strong>lack comprehensive browser support</strong>. This includes the <a href=\"http://caniuse.com/#feat=fetch\">fetch API</a>, the <a href=\"http://caniuse.com/#feat=push-api\">push API</a>, the <a href=\"http://caniuse.com/#feat=arrow-functions\">arrow function syntax</a>, or even browsers without support for modern libraries like<a href=\"https://codequs.com/a/ryoNWBK5\"> jQuery</a>.</p>\n<p>Every feature requires <strong>individual testing</strong> with an individual solution.</p>\n<p>The essence of progressively enhanced <a href=\"https://codequs.com/a/B1qaM67j\">JavaScript</a> is to <strong>build content that functions without any scripting</strong>. This may lead to a rudimentary user experience, but that’s 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 <a href=\"https://codequs.com/a/rkW9Ndh_\">CSS </a>and <a href=\"https://codequs.com/a/rkr5QObj\">JavaScript</a> in every major browser</strong> to see how your website performs. It’s also worth considering using extensions like <a href=\"https://chrome.google.com/webstore/detail/a-tester-wcag-20-web-acce/mbmcfgbjmddnnpkibfgnofecdemjcdaa?hl=en-GB\">A-Tester</a> for <a href=\"https://www.w3.org/TR/WCAG20/\">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><li><a href=\"http://www.stucox.com/blog/progressive-enhancement-no-javascript/\">Progressive Enhancement != “No JavaScript”</a></li>\n<li><a href=\"http://molily.de/interaction-is-key/\">Interaction is Key: Progressive Enhancement and JavaScript</a></li>\n<li><a href=\"http://cognition.happycog.com/article/progressive-enhancement-its-about-the-content\">Progressive Enhancement: It’s 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/\">How to Apply Progressive Enhancement When JavaScript Seems Like a Requirement</a></li>\n</ul><h4>Where Progressive Enhancement Falls Short</h4>\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 <a href=\"https://codequs.com/a/S1BGvdMj\">Ajax </a>calls. Is that a good choice for accessibility? No, of course not. But if that were the case most of <a href=\"http://tympanus.net/codrops/category/tutorials/\">Codrops’ tutorials</a> wouldn’t even exist. You have to <strong>remember the target audience</strong>.</p>\n<p>A business website probably doesn’t have the audience that cares about flashy new <a href=\"https://codequs.com/a/SJMR-3ws\">CSS3</a> <a href=\"http://www.w3schools.com/cssref/css3_pr_perspective.asp\">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’t 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’s 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<h4>Further Reading</h4>\n<p>If you’re constantly building web projects, you should consider applying progressive enhancement to your workflow. It’s 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.<strong>Written by Jake Rocheleau</strong></p>\n<p><strong>Did you find this article helpful? Don’t forget to drop your feedback in the comments section below. Suggest for you:</strong></p>\n<p>☞ <a href=\"https://codequs.com/a/H1B2qMSj\">Hands on Sketch 3 Training – Website Design</a></p>\n<p>☞ <a href=\"https://codequs.com/a/HyQ9esji\">CSS3 Introduction web Building Blocks Fundamentals</a></p>\n<p>☞ <a href=\"https://codequs.com/a/ByGS-7nK\">Web Design For Grandmothers With Html</a></p>\n<p>☞ <a href=\"https://codequs.com/a/rk4Ps9B9\">CSS3 Gradients for Web Designers</a></p>\n<p>☞ <a href=\"https://codequs.com/a/By_x_GQu\">Learn Responsive Web Development from Scratch</a></p>\n<h3>Share this:</h3><ul><li><a href=\"https://webdesigndevblog.wordpress.com/2016/09/08/best-practices-for-progressive-enhancement-in-web-design-2/?share=twitter\" title=\"Click to share on Twitter\">Twitter</a></li><li><a href=\"https://webdesigndevblog.wordpress.com/2016/09/08/best-practices-for-progressive-enhancement-in-web-design-2/?share=facebook\" title=\"Share on Facebook\">Facebook</a></li><li><a href=\"https://webdesigndevblog.wordpress.com/2016/09/08/best-practices-for-progressive-enhancement-in-web-design-2/?share=google-plus-1\" title=\"Click to share on Google+\">Google</a></li><li></li></ul><h3>Like this:</h3>Like Loading...<a></a>","html":"<p><img alt=\"Untitled.jpg\" src=\"https://webdesigndevblog.files.wordpress.com/2016/09/untitled1.jpg?w=720\" /></p>\n<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\">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’s easy to understand progressive enhancement, but not as easy to apply it directly to your design work. I’d 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<h4>1. Understanding Progressive Enhancement</h4>\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 graceful degradation which includes all features by default, then degrades when something doesn’t 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 <a href=\"https://codequs.com/a/SJMR-3ws\">CSS </a>this information will look bland and tasteless, but it’ll be accessible.</p>\n<p>This <a href=\"http://alistapart.com/article/understandingprogressiveenhancement\"><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<a href=\"https://codequs.com/a/SJMR-3ws\"> HTML </a>should be delivered before anything else.</p>\n<p>The advanced <a href=\"https://codequs.com/a/SJr3cPWo\">CSS</a> and <a href=\"https://codequs.com/a/ByYBy37j\">JavaScript</a> 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’s a general rundown of the main features of progressive enhancement, that you should take into account:</p>\n<ul><li><strong>Semantic markup</strong> for all content</li>\n<li>Users’ <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 <a href=\"https://codequs.com/a/SybdL0aO\">JavaScript</a> is loaded only <strong>in environments that can support it</strong></li>\n</ul><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<a href=\"https://codequs.com/a/SJr3cPWo\"> CSS3</a> properties.</p>\n<p>But what about browsers that don’t support modern <a href=\"https://codequs.com/a/r135OYcc\">CSS3</a>? This is where sites like <a href=\"http://caniuse.com/\">Can I Use</a> come into play. You should decide which features are worth implementing, and make judgements based <strong>on the target audience of your website</strong>.</p>\n<h4>2. Subsistence In Stylesheets</h4>\n<p>Most browsers today support all the basic properties you need. But <strong>advanced <a href=\"https://codequs.com/a/SJMR-3ws\">CSS3</a> 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 semantic<a href=\"https://codequs.com/a/SJMR-3ws\"> HTML and CSS</a> markup that works in as many active browsers as possible (support for ancient browsers like IE5 support isn’t necessary).</p>\n<a href=\"http://jsfiddle.net/a9jbq5bj/4/\"><img alt=\"jsfiddle columns css example\" height=\"400\" src=\"https://i1.wp.com/media02.hongkiat.com/progressive-enhancements-web-design-best-practices/01-jsfiddle-fluid-third-columns-css.jpg\" width=\"700\" /></a>\n<p>Take for example <a href=\"http://jsfiddle.net/a9jbq5bj/4/\">this JSFiddle</a> that uses floats with two sidebars (<code>.fixed</code>), and a fluid content area (<code>.fluid</code>). If you delete all <a href=\"https://codequs.com/a/SJMR-3ws\">CSS</a>, and rerun the code you’ll notice everything stacks up nicely with the first column, then second, and finally the last.</p>\n<img alt=\"jsfiddle no css columns\" height=\"400\" src=\"https://i1.wp.com/media02.hongkiat.com/progressive-enhancements-web-design-best-practices/02-jsfiddle-no-css-columns.jpg\" width=\"700\" />\n<p>Some developers would prefer to have the content column (<code>.fluid</code>) appear first in the <a href=\"https://codequs.com/a/ry-P9Dbo\">HTML</a>. This is where progressive enhancement comes into play, andalternate <a href=\"https://codequs.com/a/SJMR-3ws\">CSS</a> solutions become viable.</p>\n<p>The two primary goals of your <a href=\"https://codequs.com/a/ry-P9Dbo\">HTML</a> are as follows:</p>\n<ul><li>Fully <strong>semantic and valid</strong> code</li>\n<li>A <strong>consistent experience</strong> for everyone</li>\n</ul><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 <a href=\"https://codequs.com/a/ry-P9Dbo\">CSS</a> both disabled and enabled, then it offers a reasonable solution for everyone.</strong></p>\n<p>It’s also worth considering <strong>at what point you drop support for something</strong>. Microsoft has already dropped <a href=\"http://superuser.com/questions/127628/what-is-the-official-end-of-support-date-for-internet-explorer-6-on-windows-xp\">major support for IE6 </a>, so users running that browser may not be worth your time.</p>\n<p>But there’s still one big question: if a browser doesn’t support my modern <a href=\"https://codequs.com/a/ry-P9Dbo\">CSS</a>, what should I do?</p>\n<p>You simply <strong>write code that works <em>without</em> it</strong>, and consider the modern <a href=\"https://codequs.com/a/SJr3cPWo\">CSS</a> as a progressive enhancement. This is the beauty of the progressive enhancement methodology.</p>\n<p>You don’t need fallbacks, because you’re <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’t supported—but if it is supported, all the better.</p>\n<p>You need to consider <strong>how content actually flows without <a href=\"https://codequs.com/a/SJr3cPWo\">CSS</a></strong>. For example, when I disable <a href=\"https://codequs.com/a/SJr3cPWo\">CSS</a> on <a href=\"https://panic.com/transmit/\">Transmit’s website</a>, the content still flows organically down the page.</p>\n<img alt=\"transmit website css disabled\" height=\"400\" src=\"https://i0.wp.com/media02.hongkiat.com/progressive-enhancements-web-design-best-practices/03-transmit-website-css-disabled.jpg\" width=\"700\" />\n<p>Yes, it’s ugly, and yes, it feels like we’ve lost twenty years of progress… <strong>but it works</strong>.</p>\n<h4>3. Handling <a href=\"https://codequs.com/a/B10zpuEd\">JavaScript</a></h4>\n<p>It’s worth mentioning that each <a href=\"https://codequs.com/a/HJwal_Ws\">JavaScript</a> 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 <a href=\"https://codequs.com/a/B10zpuEd\">JavaScrip</a>t</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/\">blog post</a> with solutions to various problems, like replacing<a href=\"https://codequs.com/a/B1uULdzi\"> Ajax </a>with a <a href=\"http://www.w3schools.com/tags/att_meta_http_equiv.asp\">meta refresh</a> for content inside an iframe.</p>\n<p>Also, when you create <a href=\"https://codequs.com/a/HJwal_Ws\">JavaScript</a> tabs, it’s a good idea to <strong>use anchor links with real ID values</strong>. That way, when<a href=\"https://codequs.com/a/B10zpuEd\"> JavaScript</a> is disabled, you can still have the tabs visible and accessible by anchor value. Aaron wrote another piece on <a href=\"http://alistapart.com/article/progressiveenhancementwithjavascript\">A List Apart</a>that covers a more general overview of how you should think about these problems.</p>\n<p>Here’s another example. Let’s say you have a link that loads content dynamically. The <code>href</code> value is empty, because everything loads via <a href=\"https://codequs.com/a/HJwal_Ws\">JavaScript</a> with the<a href=\"https://api.jquery.com/event.preventdefault/\">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 <a href=\"https://codequs.com/a/B1qaM67j\">JavaScript </a>is disabled</strong>.</p>\n<p>Progressive enhancement is about <a href=\"https://www.christianheilmann.com/2015/02/18/progressive-enhancement-is-not-about-javascript-availability/\">more than JavaScript</a>, but with web development advancing further every year, there’s no doubt that <a href=\"https://codequs.com/a/HJwal_Ws\">JavaScript </a>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=\"http://stackoverflow.com/questions/121203/how-to-detect-if-javascript-is-disabled\"><noscript> tag</a></code> is a viable solution here.</p>\n<p>Also think about <a href=\"https://codequs.com/a/B1qaM67j\">JavaScript</a> features that <strong>lack comprehensive browser support</strong>. This includes the <a href=\"http://caniuse.com/#feat=fetch\">fetch API</a>, the <a href=\"http://caniuse.com/#feat=push-api\">push API</a>, the <a href=\"http://caniuse.com/#feat=arrow-functions\">arrow function syntax</a>, or even browsers without support for modern libraries like<a href=\"https://codequs.com/a/ryoNWBK5\"> jQuery</a>.</p>\n<p>Every feature requires <strong>individual testing</strong> with an individual solution.</p>\n<p>The essence of progressively enhanced <a href=\"https://codequs.com/a/B1qaM67j\">JavaScript</a> is to <strong>build content that functions without any scripting</strong>. This may lead to a rudimentary user experience, but that’s 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 <a href=\"https://codequs.com/a/rkW9Ndh_\">CSS </a>and <a href=\"https://codequs.com/a/rkr5QObj\">JavaScript</a> in every major browser</strong> to see how your website performs. It’s also worth considering using extensions like <a href=\"https://chrome.google.com/webstore/detail/a-tester-wcag-20-web-acce/mbmcfgbjmddnnpkibfgnofecdemjcdaa?hl=en-GB\">A-Tester</a> for <a href=\"https://www.w3.org/TR/WCAG20/\">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><li><a href=\"http://www.stucox.com/blog/progressive-enhancement-no-javascript/\">Progressive Enhancement != “No JavaScript”</a></li>\n<li><a href=\"http://molily.de/interaction-is-key/\">Interaction is Key: Progressive Enhancement and JavaScript</a></li>\n<li><a href=\"http://cognition.happycog.com/article/progressive-enhancement-its-about-the-content\">Progressive Enhancement: It’s 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/\">How to Apply Progressive Enhancement When JavaScript Seems Like a Requirement</a></li>\n</ul><h4>Where Progressive Enhancement Falls Short</h4>\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 <a href=\"https://codequs.com/a/S1BGvdMj\">Ajax </a>calls. Is that a good choice for accessibility? No, of course not. But if that were the case most of <a href=\"http://tympanus.net/codrops/category/tutorials/\">Codrops’ tutorials</a> wouldn’t even exist. You have to <strong>remember the target audience</strong>.</p>\n<p>A business website probably doesn’t have the audience that cares about flashy new <a href=\"https://codequs.com/a/SJMR-3ws\">CSS3</a> <a href=\"http://www.w3schools.com/cssref/css3_pr_perspective.asp\">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’t 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’s 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<h4>Further Reading</h4>\n<p>If you’re constantly building web projects, you should consider applying progressive enhancement to your workflow. It’s 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.<strong>Written by Jake Rocheleau</strong></p>\n<p><strong>Did you find this article helpful? Don’t forget to drop your feedback in the comments section below. Suggest for you:</strong></p>\n<p>☞ <a href=\"https://codequs.com/a/H1B2qMSj\">Hands on Sketch 3 Training – Website Design</a></p>\n<p>☞ <a href=\"https://codequs.com/a/HyQ9esji\">CSS3 Introduction web Building Blocks Fundamentals</a></p>\n<p>☞ <a href=\"https://codequs.com/a/ByGS-7nK\">Web Design For Grandmothers With Html</a></p>\n<p>☞ <a href=\"https://codequs.com/a/rk4Ps9B9\">CSS3 Gradients for Web Designers</a></p>\n<p>☞ <a href=\"https://codequs.com/a/By_x_GQu\">Learn Responsive Web Development from Scratch</a></p>\n<h3>Share this:</h3><ul><li><a href=\"https://webdesigndevblog.wordpress.com/2016/09/08/best-practices-for-progressive-enhancement-in-web-design-2/?share=twitter\" title=\"Click to share on Twitter\">Twitter</a></li><li><a href=\"https://webdesigndevblog.wordpress.com/2016/09/08/best-practices-for-progressive-enhancement-in-web-design-2/?share=facebook\" title=\"Share on Facebook\">Facebook</a></li><li><a href=\"https://webdesigndevblog.wordpress.com/2016/09/08/best-practices-for-progressive-enhancement-in-web-design-2/?share=google-plus-1\" title=\"Click to share on Google+\">Google</a></li><li></li></ul><h3>Like this:</h3>Like Loading...<a></a>","text":"Untitled.jpg \nThe craft of building websites is incredibly complex with many fast-changing parts. The goal of the web design community is to lessen the complexity, andreduce the potential for error at each stage of the creation process. \nProgressive enhancement is such an idea in web design that aims to reduce errors and provide a consistent user experience across the board. The concept has its own Wikipedia page which explains it as a method of fully-accessible content, rendering enhanced features only when supported by the browser. \nIt’s easy to understand progressive enhancement, but not as easy to apply it directly to your design work. I’d like to cover some best practices for progressive enhancement in real-world projects to help designers think more sustainably about their workflow. \n1. Understanding Progressive Enhancement \nThe theory of progressive enhancement recommends to start with a simple website that works in all browsers, making it accessible for every visitor. Then add features whenever possible. \nThis is the opposite of graceful degradation which includes all features by default, then degrades when something doesn’t work. \nProgressive enhancement is better for the overall user experience, because at its core it loads only necessary elements. Every web browser can support text (and usually images). Without any CSS this information will look bland and tasteless, but it’ll be accessible. \nThis List Apart article argues that progressive enhancement is content-first withstyles and dynamic components added later. Content in semantic HTML should be delivered before anything else. \nThe 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. \nHere’s a general rundown of the main features of progressive enhancement, that you should take into account: \nSemantic markup for all content \nUsers’ browser preferences needs to be respected \nContent and basic functionality should be available to all users \nUnobtrusive JavaScript is loaded only in environments that can support it \n Technological restraints in front-end development are primarily determined by browser compatibility. Progressive enhancement gets you back to the basics thinking about how the bare-bone simplest webpage might look like. From there, you can plan for more advanced features, like CSS3 properties. \nBut what about browsers that don’t support modern CSS3? This is where sites like Can I Use come into play. You should decide which features are worth implementing, and make judgements based on the target audience of your website. \n2. Subsistence In Stylesheets \nMost browsers today support all the basic properties you need. But advanced CSS3 is still a problem for legacy users, and progressive enhancement offers a solution. \nInstead of looking for fallback methods to maintain these new features, concern yourself first with proper layout structures. \nWrite semantic HTML and CSS markup that works in as many active browsers as possible (support for ancient browsers like IE5 support isn’t necessary). \njsfiddle columns css example \n Take for example this JSFiddle that uses floats with two sidebars (.fixed), and a fluid content area (.fluid). If you delete all CSS, and rerun the code you’ll notice everything stacks up nicely with the first column, then second, and finally the last. \njsfiddle no css columns \n Some developers would prefer to have the content column (.fluid) appear first in the HTML. This is where progressive enhancement comes into play, andalternate CSS solutions become viable. \nThe two primary goals of your HTML are as follows: \nFully semantic and valid code \nA consistent experience for everyone \n The most straightforward way to achieve these goals is to start from nothingand work up, as most progressive enhancement advocates would recommend it. \nIf your code looks good with CSS both disabled and enabled, then it offers a reasonable solution for everyone. \nIt’s also worth considering at what point you drop support for something. Microsoft has already dropped major support for IE6 , so users running that browser may not be worth your time. \nBut there’s still one big question: if a browser doesn’t support my modern CSS, what should I do? \nYou simply write code that works without it, and consider the modern CSS as a progressive enhancement. This is the beauty of the progressive enhancement methodology. \nYou don’t need fallbacks, because you’re basically assuming that nothing is supported by default. \nProgressive enhancement methods are about making the site usable even in cases when something isn’t supported—but if it is supported, all the better. \nYou need to consider how content actually flows without CSS. For example, when I disable CSS on Transmit’s website, the content still flows organically down the page. \ntransmit website css disabled \n Yes, it’s ugly, and yes, it feels like we’ve lost twenty years of progress… but it works. \n3. Handling JavaScript \nIt’s 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 operate without JavaScript. \nThis will require lots of online research to find valid solutions. Aaron Gustafson wrote a great blog post with solutions to various problems, like replacing Ajax with a meta refresh for content inside an iframe. \nAlso, when you create JavaScript tabs, it’s a good idea to use anchor links with real ID values. That way, when JavaScript is disabled, you can still have the tabs visible and accessible by anchor value. Aaron wrote another piece on A List Apartthat covers a more general overview of how you should think about these problems. \nHere’s another example. Let’s say you have a link that loads content dynamically. The href value is empty, because everything loads via JavaScript with thepreventDefault() method. \nInstead, it would be wise to set the href property to point to a different pagewhere the content could load naturally, but the visitor only sees that page when JavaScript is disabled. \nProgressive enhancement is about more than JavaScript, but with web development advancing further every year, there’s no doubt that JavaScript plays a significant role. \nOperate under the assumption that everything has been disabled, and scale up from there. This might include problems with embedded widgets that are out of your control, the <noscript> tag is a viable solution here. \nAlso think about JavaScript features that lack comprehensive browser support. This includes the fetch API, the push API, the arrow function syntax, or even browsers without support for modern libraries like jQuery. \nEvery feature requires individual testing with an individual solution. \nThe essence of progressively enhanced JavaScript is to build content that functions without any scripting. This may lead to a rudimentary user experience, but that’s okay as long as the website is usable, and the content is accessible. \nIf you want to do live testing, you can typically disable CSS and JavaScript in every major browser to see how your website performs. It’s also worth considering using extensions like A-Tester for WCAG compliance. \nJavaScript with progressive enhancement is a huge topic. Here are some posts to help you dig deeper: \nProgressive Enhancement != “No JavaScript” \nInteraction is Key: Progressive Enhancement and JavaScript \nProgressive Enhancement: It’s About the Content \nHow to Apply Progressive Enhancement When JavaScript Seems Like a Requirement \n Where Progressive Enhancement Falls Short \nAlthough progressive enhancement is a brilliant idea for almost every type of modern website, it simply may not be applicable to projects that aim to push the limits of web technology. \nFor 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 Codrops’ tutorials wouldn’t even exist. You have to remember the target audience. \nA business website probably doesn’t have the audience that cares about flashy new CSS3 perspective properties, but web developers can be the perfect audience for such advanced features. \nProgressive enhancement only falls short for web applications that simply don’t care about going back in time. 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. \nI am a proponent of progressive enhancement (or even graceful degradation, your choice) for general web projects. But I also realize it’s not the perfect solution for everything. In fact, there is no perfect solution. It all boils down to audience needs and project goals. \nFurther Reading \nIf you’re constantly building web projects, you should consider applying progressive enhancement to your workflow. It’s 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.\nWritten by Jake Rocheleau \nDid you find this article helpful? Don’t forget to drop your feedback in the comments section below. Suggest for you: \n☞ Hands on Sketch 3 Training – Website Design \n☞ CSS3 Introduction web Building Blocks Fundamentals \n☞ Web Design For Grandmothers With Html \n☞ CSS3 Gradients for Web Designers \n☞ Learn Responsive Web Development from Scratch \nShare this: Twitter Facebook Google Like this: Like Loading..."},"mention-of":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","wm-property":"mention-of","wm-private":false},{"type":"entry","author":{"type":"card","name":"Aaron Gustafson","photo":"","url":"https://www.aaron-gustafson.com/about"},"url":"https://www.aaron-gustafson.com/notebook/links/the-developer-experience-bait-and-switch/","published":"2018-09-14T13:17:31-07:00","wm-received":"2018-10-04T22:21:19Z","wm-id":553417,"wm-source":"https://www.aaron-gustafson.com/notebook/links/the-developer-experience-bait-and-switch/","wm-target":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","name":"The “Developer Experience” Bait-and-Switch","content":{"content-type":"text/html","value":"<p>This piece is worth a thorough read. Then a re-read. It’s that important.</p>\n\n<blockquote>\n <p>[W]e need to confront the “developer experience” bait-and-switch. Tools that cost the poorest users to pay wealthy developers are bunk. To do better, we need to move the conversation to an evidence-based footing. I wish the arguments folks made against my positions were data-driven. There’s so much opening! Perhaps a firm is doing market analysis and only cares about ever reaching users who make more than $100K USD/yr or who are in enterprise settings. Perhaps research will demonstrate that interactivity isn’t as valuable as getting bits on screen (the usual SSR argument). Or, more likely, that acknowledgement (bits on screen) buys a larger-than-anticipated amount of perceptual padding (perhaps due to scanning). Perhaps the global network landscape is shifting so dramatically that the budget for client-side JS runtime has increased. Perhaps the median CPU improvement that doesn’t look set to materialize until 2021 at the earliest will happen much earlier; i.e., maybe the current baseline is wrong!</p>\n</blockquote>\n\n<blockquote>\n <p>But we aren’t having that conversation. And we aren’t going to have it until we identify, call-out, and end the “developer experience” bait-and-switch.</p>\n</blockquote>\n\n<p>Further reading from this site:</p>\n\n<ul>\n <li><a href=\"https://www.aaron-gustafson.com/notebook/who-should-pay/\">Who Should Pay?</a></li>\n <li><a href=\"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/\">How to Apply Progressive Enhancement When JavaScript Seems Like a Requirement</a></li>\n <li><a href=\"https://www.aaron-gustafson.com/notebook/the-web-should-just-work-for-everyone/\">The Web Should Just Work for Everyone</a></li>\n <li><a href=\"https://www.aaron-gustafson.com/notebook/PWAs-and-desktop/\">PWAs + Desktop = Equity, Opportunity, and Reliability</a></li>\n</ul>\n\n <p>\n <a href=\"https://infrequently.org/2018/09/the-developer-experience-bait-and-switch/\">Read on Infrequently Noted</a>\n </p>","html":"<p>This piece is worth a thorough read. Then a re-read. It’s that important.</p>\n\n<blockquote>\n <p>[W]e need to confront the “developer experience” bait-and-switch. Tools that cost the poorest users to pay wealthy developers are bunk. To do better, we need to move the conversation to an evidence-based footing. I wish the arguments folks made against my positions were data-driven. There’s so much opening! Perhaps a firm is doing market analysis and only cares about ever reaching users who make more than $100K USD/yr or who are in enterprise settings. Perhaps research will demonstrate that interactivity isn’t as valuable as getting bits on screen (the usual SSR argument). Or, more likely, that acknowledgement (bits on screen) buys a larger-than-anticipated amount of perceptual padding (perhaps due to scanning). Perhaps the global network landscape is shifting so dramatically that the budget for client-side JS runtime has increased. Perhaps the median CPU improvement that doesn’t look set to materialize until 2021 at the earliest will happen much earlier; i.e., maybe the current baseline is wrong!</p>\n</blockquote>\n\n<blockquote>\n <p>But we aren’t having that conversation. And we aren’t going to have it until we identify, call-out, and end the “developer experience” bait-and-switch.</p>\n</blockquote>\n\n<p>Further reading from this site:</p>\n\n<ul>\n <li><a href=\"https://www.aaron-gustafson.com/notebook/who-should-pay/\">Who Should Pay?</a></li>\n <li><a href=\"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/\">How to Apply Progressive Enhancement When JavaScript Seems Like a Requirement</a></li>\n <li><a href=\"https://www.aaron-gustafson.com/notebook/the-web-should-just-work-for-everyone/\">The Web Should Just Work for Everyone</a></li>\n <li><a href=\"https://www.aaron-gustafson.com/notebook/PWAs-and-desktop/\">PWAs + Desktop = Equity, Opportunity, and Reliability</a></li>\n</ul>\n\n <p>\n <a href=\"https://infrequently.org/2018/09/the-developer-experience-bait-and-switch/\">Read on Infrequently Noted</a>\n </p>","text":"This piece is worth a thorough read. Then a re-read. It’s that important.\n\n\n [W]e need to confront the “developer experience” bait-and-switch. Tools that cost the poorest users to pay wealthy developers are bunk. To do better, we need to move the conversation to an evidence-based footing. I wish the arguments folks made against my positions were data-driven. There’s so much opening! Perhaps a firm is doing market analysis and only cares about ever reaching users who make more than $100K USD/yr or who are in enterprise settings. Perhaps research will demonstrate that interactivity isn’t as valuable as getting bits on screen (the usual SSR argument). Or, more likely, that acknowledgement (bits on screen) buys a larger-than-anticipated amount of perceptual padding (perhaps due to scanning). Perhaps the global network landscape is shifting so dramatically that the budget for client-side JS runtime has increased. Perhaps the median CPU improvement that doesn’t look set to materialize until 2021 at the earliest will happen much earlier; i.e., maybe the current baseline is wrong!\n\n\n\n But we aren’t having that conversation. And we aren’t going to have it until we identify, call-out, and end the “developer experience” bait-and-switch.\n\n\nFurther reading from this site:\n\n\n Who Should Pay?\n How to Apply Progressive Enhancement When JavaScript Seems Like a Requirement\n The Web Should Just Work for Everyone\n PWAs + Desktop = Equity, Opportunity, and Reliability\n\n\n \n Read on Infrequently Noted"},"mention-of":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","wm-property":"mention-of","wm-private":false},{"type":"entry","author":{"type":"card","name":"","photo":"","url":""},"url":"https://www.buddlelaw.com/blog/trademark-your-cannabis-brand","published":null,"wm-received":"2019-02-04T08:00:42Z","wm-id":585785,"wm-source":"https://www.instagram.com/buddlelaw/","wm-target":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","name":"Buddle Law","photo":"https://scontent-atl3-1.cdninstagram.com/vp/e1b7de34f58047da4fe3c99575bda1f8/5CE075B2/t51.2885-19/s320x320/31894827_1811017778955643_3809102423469850624_n.jpg?_nc_ht=scontent-atl3-1.cdninstagram.com","mention-of":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","wm-property":"mention-of","wm-private":false},{"type":"entry","author":{"type":"card","name":"Aaron Gustafson","photo":"","url":"https://www.aaron-gustafson.com/about"},"url":"https://www.aaron-gustafson.com/notebook/links/my-talk-at-microsoft/","published":"2019-09-30T14:51:34-07:00","wm-received":"2019-10-01T23:34:27Z","wm-id":702994,"wm-source":"https://www.aaron-gustafson.com/notebook/links/my-talk-at-microsoft/","wm-target":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","name":"My Talk at Microsoft","content":{"content-type":"text/html","value":"<p>I wasn’t there for the talk, but Richard Stallman spoke at Microsoft earlier this month and offered 10 suggestions to the company. The one that stood out to me was this:</p>\n\n<blockquote>\n <p>Help make the web usable with Javascript deactivated.</p>\n</blockquote>\n\n<p>Amen.</p>\n\n<p>For what it’s worth, this is <a href=\"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/\">not a problem of capability</a>. You can build just about every kind of website and web-based software without requiring JavaScript. Sure, it would be a challenge to build a real-time video or image editor online without JavaScript, but let’s face fact: most of us are not building those kinds of tools.</p>\n\n<p>Rather than being a capability issue, our over-reliance on JavaScript has more to do with developers approach to the web. Many see it like any other software platform. <a href=\"https://www.aaron-gustafson.com/notebook/a-fundamental-disconnect/\">It’s not</a>. The web is different and building well (and resiliently) for it requires competence in all three languages that make it possible: HTML, CSS, and JavaScript. Most devs over-index on only one of those and it’s a problem.</p>\n\n <p>\n <a href=\"https://stallman.org/articles/microsoft-talk.html\">Read on Richard Stallman </a>\n </p>","html":"<p>I wasn’t there for the talk, but Richard Stallman spoke at Microsoft earlier this month and offered 10 suggestions to the company. The one that stood out to me was this:</p>\n\n<blockquote>\n <p>Help make the web usable with Javascript deactivated.</p>\n</blockquote>\n\n<p>Amen.</p>\n\n<p>For what it’s worth, this is <a href=\"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/\">not a problem of capability</a>. You can build just about every kind of website and web-based software without requiring JavaScript. Sure, it would be a challenge to build a real-time video or image editor online without JavaScript, but let’s face fact: most of us are not building those kinds of tools.</p>\n\n<p>Rather than being a capability issue, our over-reliance on JavaScript has more to do with developers approach to the web. Many see it like any other software platform. <a href=\"https://www.aaron-gustafson.com/notebook/a-fundamental-disconnect/\">It’s not</a>. The web is different and building well (and resiliently) for it requires competence in all three languages that make it possible: HTML, CSS, and JavaScript. Most devs over-index on only one of those and it’s a problem.</p>\n\n <p>\n <a href=\"https://stallman.org/articles/microsoft-talk.html\">Read on Richard Stallman </a>\n </p>","text":"I wasn’t there for the talk, but Richard Stallman spoke at Microsoft earlier this month and offered 10 suggestions to the company. The one that stood out to me was this:\n\n\n Help make the web usable with Javascript deactivated.\n\n\nAmen.\n\nFor what it’s worth, this is not a problem of capability. You can build just about every kind of website and web-based software without requiring JavaScript. Sure, it would be a challenge to build a real-time video or image editor online without JavaScript, but let’s face fact: most of us are not building those kinds of tools.\n\nRather than being a capability issue, our over-reliance on JavaScript has more to do with developers approach to the web. Many see it like any other software platform. It’s not. The web is different and building well (and resiliently) for it requires competence in all three languages that make it possible: HTML, CSS, and JavaScript. Most devs over-index on only one of those and it’s a problem.\n\n \n Read on Richard Stallman"},"mention-of":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","wm-property":"mention-of","wm-private":false},{"type":"entry","author":{"type":"card","name":"","photo":"","url":""},"url":"https://triu.ru/luchshie-praktiki-dlya-progressivnogo-uluchsheniya-v-veb-dizajne/","published":null,"wm-received":"2020-05-21T09:46:00Z","wm-id":799831,"wm-source":"https://triu.ru/luchshie-praktiki-dlya-progressivnogo-uluchsheniya-v-veb-dizajne/","wm-target":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","name":"Лучшие практики для прогрессивного улучшения в веб-дизайне","content":{"content-type":"text/html","value":"<p>Мастерство создания веб-сайтов невероятно сложно со многими быстро меняющимися частями. Цель сообщества веб-дизайнеров – уменьшить сложность и снизить вероятность ошибок на каждом этапе процесса создания.</p>\n<p>Прогрессивное улучшение – это такая идея в веб-дизайне, которая направлена на уменьшение ошибок и обеспечение согласованного взаимодействия с пользователем. Концепция имеет свою <a href=\"https://en.wikipedia.org/wiki/Progressive_enhancement\">собственная страница Википедии</a> что объясняет его как метод полностью доступного контента, предоставляющий расширенные функции только в том случае, если он поддерживается браузером.</p>\n<p>Прогрессивное улучшение легко понять, но не так просто применить его непосредственно к вашей работе. Я хотел бы рассказать о некоторых передовых методах прогрессивного улучшения в реальных проектах, чтобы помочь дизайнерам более устойчиво мыслить о своем рабочем процессе.<br />\n1. Понимание прогрессивного улучшения<br />\nТеория прогрессивного улучшения рекомендует начинать с простого веб-сайта, который работает во всех браузерах, что делает его доступным для каждого посетителя. Затем добавьте функции, когда это возможно.</p>\n<p>Это противоположно постепенному ухудшению, которое включает в себя все функции по умолчанию, а затем ухудшается, когда что-то не работает.</p>\n<p>Прогрессивное улучшение лучше для общего пользовательского опыта, потому что по своей сути оно загружает только необходимые элементы. Каждый веб-браузер может поддерживать текст (и обычно изображения). Без какого-либо CSS эта информация будет выглядеть скучно и безвкусно, но она будет доступна.</p>\n<p>Эта <a href=\"http://alistapart.com/article/understandingprogressiveenhancement\"><em>List Apart</em> статья</a> утверждает, что прогрессивное улучшение – сначала контент, со стилями и динамическими компонентами, добавленными позже. Контент в семантическом HTML должен доставляться раньше всего.</p>\n<p>Современные CSS и JavaScript, которые мы используем сегодня, широко поддерживаются, но если мы хотим следовать принципам прогрессивного улучшения, их следует считать роскошью.</p>\n<p>Вот краткое изложение основных характеристик прогрессивного улучшения, которые вы должны принять во внимание:</p>\n<ul><li>Семантическая разметка для всего контента</li>\n<li>Предпочтения браузера пользователя должны быть соблюдены</li>\n<li>Контент и основные функции должны быть доступны всем пользователям.</li>\n<li>Ненавязчивый JavaScript загружается только в средах, которые могут его поддерживать</li>\n</ul><p>Технологические ограничения при разработке интерфейса в первую очередь определяются совместимостью браузера. Прогрессивное улучшение возвращает вас к основам мышления о том, как может выглядеть простейшая веб-страница. Оттуда вы можете планировать более продвинутые функции, такие как свойства CSS3.</p>\n<p>Но как насчет браузеров, которые не поддерживают современный CSS3? Это где сайты, как <a href=\"http://caniuse.com/\">Могу ли я использовать</a> вступают в игру. Вы должны решить, какие функции стоит реализовать, и принять решение на основе целевой аудитории вашего сайта.<br />\n2. Прожиточный минимум в таблицах стилей<br />\nБольшинство браузеров сегодня поддерживают все основные свойства, которые вам нужны. Но продвинутый CSS3 все еще является проблемой для старых пользователей, и прогрессивное улучшение предлагает решение.</p>\n<p>Вместо того, чтобы искать запасные методы для поддержки этих новых функций, сначала позаботьтесь о правильной структуре макетов.</p>\n<p>Напишите семантическую разметку HTML и CSS, которая работает в максимально возможном количестве активных браузеров (поддержка старых браузеров, таких как поддержка IE5, не требуется).<br /><a href=\"http://jsfiddle.net/a9jbq5bj/4/\"><img alt=\"jsfiddle columns css пример\" width=\"580\" height=\"331\" src=\"https://i0.wp.com/assets.hongkiat.com/uploads/progressive-enhancements-web-design-best-practices/01-jsfiddle-fluid-third-columns-css.jpg?resize=580%2C331&ssl=1\" /></a>Возьмите например <a href=\"http://jsfiddle.net/a9jbq5bj/4/\">это JSFiddle</a> который использует поплавки с двумя боковыми панелями (.fixed) и областью содержания жидкости (.fluid). Если вы удалите весь CSS и повторно запустите код, вы заметите, что все хорошо складывается с первым столбцом, затем вторым и, наконец, последним.<br /><img alt=\"jsfiddle нет css столбцы\" width=\"580\" height=\"331\" src=\"https://i1.wp.com/assets.hongkiat.com/uploads/progressive-enhancements-web-design-best-practices/02-jsfiddle-no-css-columns.jpg?resize=580%2C331&ssl=1\" />Некоторые разработчики предпочли бы, чтобы столбец содержимого (.fluid) отображался первым в HTML. Это где прогрессивное улучшение вступает в игру, и <a href=\"http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks\">альтернативные решения CSS</a> стать жизнеспособным.</p>\n<p>Две основные цели вашего HTML следующие:</p>\n<ul><li>Полностью семантический и действительный код</li>\n<li>Последовательный опыт для всех</li>\n</ul><p>Самый простой способ достичь этих целей – начать с нуля и работать, как рекомендуют большинство сторонников прогрессивного улучшения.</p>\n<p>Если ваш код выглядит хорошо с CSS, как отключенным, так и включенным, то он предлагает разумное решение для всех.</p>\n<p>Также стоит подумать, в какой момент вы отказываетесь от поддержки чего-либо. Microsoft уже упала <a href=\"http://superuser.com/questions/127628/what-is-the-official-end-of-support-date-for-internet-explorer-6-on-windows-xp\">основная поддержка IE6 </a>поэтому пользователи, использующие этот браузер, могут не стоить вашего времени.</p>\n<p>Но есть еще один большой вопрос: если браузер не поддерживает мой современный CSS, что мне делать?</p>\n<p>Вы просто пишете код, который работает <em>без</em> это, и рассматривать современный CSS как прогрессивное улучшение. В этом красота методологии прогрессивного улучшения.</p>\n<p>Вам не нужны запасные варианты, потому что вы в основном предполагаете, что по умолчанию ничего не поддерживается.</p>\n<p>Прогрессивные методы улучшения состоят в том, чтобы сделать сайт пригодным для использования даже в тех случаях, когда что-то не поддерживается, но если это поддерживается, тем лучше.</p>\n<p>Вы должны рассмотреть, как контент на самом деле течет без CSS. Например, когда я отключаю CSS на <a href=\"https://panic.com/transmit/\">Веб-сайт Transmit</a>содержимое по-прежнему органично течет вниз по странице.<br /><img alt=\"передача веб-сайта css отключена\" width=\"580\" height=\"331\" src=\"https://i0.wp.com/assets.hongkiat.com/uploads/progressive-enhancements-web-design-best-practices/03-transmit-website-css-disabled.jpg?resize=580%2C331&ssl=1\" />ОБРАЗ: <a href=\"https://panic.com/transmit/\">Передача</a>Да, это уродливо, и да, такое ощущение, что мы потеряли двадцать лет прогресса … но это работает.<br />\n3. Обработка JavaScript<br />\nСтоит отметить, что каждая проблема JavaScript, с которой вы можете столкнуться в процессе разработки, является сложной и уникальной. Когда вы создаете новый проект с прогрессивным улучшением, вы должны перечислить все необходимые функции на основе JS и подумать, как они могут работать без JavaScript.</p>\n<p>Это потребует много онлайн-исследований, чтобы найти правильные решения. Аарон Густафсон написал отличный <a href=\"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/\">Сообщение блога</a> с решениями различных проблем, таких как замена Ajax на <a href=\"http://www.w3schools.com/tags/att_meta_http_equiv.asp\">метаобновление</a> для содержимого внутри iframe.</p>\n<p>Кроме того, когда вы создаете вкладки JavaScript, рекомендуется использовать якорные ссылки с реальными значениями идентификаторов. Таким образом, когда JavaScript отключен, вы все равно можете видеть вкладки и видеть их по значению привязки. Аарон написал еще одну статью <a href=\"http://alistapart.com/article/progressiveenhancementwithjavascript\">Список отдельно</a> это охватывает более общий обзор того, как вы должны думать об этих проблемах.</p>\n<p>Вот еще один пример. Допустим, у вас есть ссылка, которая загружает контент динамически. Значение href пусто, потому что все загружается через JavaScript с <a href=\"https://api.jquery.com/event.preventdefault/\">preventDefault ()</a> метод.</p>\n<p>Вместо этого было бы разумно установить свойство href так, чтобы оно указывало на другую страницу, где содержимое могло бы загружаться естественным образом, но посетитель видит эту страницу только тогда, когда JavaScript отключен.</p>\n<p>Прогрессивное улучшение о <a href=\"https://www.christianheilmann.com/2015/02/18/progressive-enhancement-is-not-about-javascript-availability/\">больше чем JavaScript</a>Но с развитием веб-разработки с каждым годом нет сомнений, что JavaScript играет важную роль.</p>\n<p>Работайте в предположении, что все отключено, и увеличивайте масштаб оттуда. Это может включать проблемы со встроенными виджетами, которые находятся вне вашего контроля, <a href=\"http://stackoverflow.com/questions/121203/how-to-detect-if-javascript-is-disabled\"></a></p> тег это жизнеспособное решение здесь.\n<p>Также подумайте о функциях JavaScript, в которых отсутствует всесторонняя поддержка браузера. Это включает в себя <a href=\"http://caniuse.com/#feat=fetch\">получить API</a>, <a href=\"http://caniuse.com/#feat=push-api\">push API</a>, <a href=\"http://caniuse.com/#feat=arrow-functions\">синтаксис функции стрелки</a>или даже браузеры без поддержки современных библиотек, таких как <a href=\"https://jquery.com/browser-support/\">JQuery</a>,</p>\n<p>Каждая функция требует индивидуального тестирования с индивидуальным решением.</p>\n<p>Суть прогрессивно улучшенного JavaScript заключается в создании контента, который функционирует без каких-либо сценариев. Это может привести к элементарному восприятию пользователя, но это нормально, если веб-сайт можно использовать и контент доступен.</p>\n<p>Если вы хотите провести живое тестирование, вы можете отключить CSS и JavaScript во всех основных браузерах, чтобы увидеть, как работает ваш сайт. Также стоит рассмотреть возможность использования таких расширений, как <a href=\"https://chrome.google.com/webstore/detail/a-tester-wcag-20-web-acce/mbmcfgbjmddnnpkibfgnofecdemjcdaa?hl=en-GB\">A-тестер</a> за <a href=\"https://www.w3.org/TR/WCAG20/\">WCAG</a> соблюдение.</p>\n<p>JavaScript с прогрессивным улучшением – огромная тема. Вот несколько постов, которые помогут вам копнуть глубже:<br />\nТам, где прогрессивное улучшение не дотягивает<br />\nХотя прогрессивное усовершенствование является блестящей идеей почти для любого типа современного веб-сайта, оно может просто не быть применимо к проектам, которые стремятся расширить границы веб-технологий.</p>\n<p>Например, эта методология не является хорошим решением для веб-приложений, которые работают исключительно на вызовах Ajax. Это хороший выбор для доступности? Нет, конечно нет. Но если бы это было так, большинство <a href=\"http://tympanus.net/codrops/category/tutorials/\">Учебники Codrops</a> даже не существует Вы должны помнить целевую аудиторию.</p>\n<p>Бизнес-сайт, вероятно, не имеет аудитории, которая заботится о новом CSS3 <a href=\"http://www.w3schools.com/cssref/css3_pr_perspective.asp\">перспективные свойства</a>Но веб-разработчики могут быть идеальной аудиторией для таких расширенных возможностей.</p>\n<p>Прогрессивное улучшение не хватает только для веб-приложений, которые просто не хотят возвращаться во времени. Я понимаю, что таких веб-приложений очень мало, но разработчики любят прогресс, и в некоторых случаях может быть разумно продвигаться вперед с новыми технологиями, оставляя позади отставших.</p>\n<p>Я сторонник прогрессивного улучшения (или даже постепенного ухудшения, по вашему выбору) для общих веб-проектов. Но я также понимаю, что это не идеальное решение для всего. На самом деле идеального решения не существует. Все сводится к потребностям аудитории и целям проекта.<br />\nДальнейшее чтение<br />\nЕсли вы постоянно создаете веб-проекты, вам следует рассмотреть возможность применения прогрессивного улучшения в вашем рабочем процессе. Это гораздо проще, чем кажется на первый взгляд, и все начинается с основ. Большинство тем, касающихся прогрессивного улучшения, просто требуют практики и тестирования. Попробуйте предложения из этой статьи и посмотрите, что лучше всего подходит для вашего рабочего процесса.</p>\n<p>Если вы хотите узнать больше о прогрессивном улучшении, ознакомьтесь со следующими публикациями:</p>\n\n\n<span><span>Нравится</span></span> <span>Загрузка...</span>\n\n<span></span><a></a>\n\n\n\t<h3><em>Похожее</em></h3>","html":"<p>Мастерство создания веб-сайтов невероятно сложно со многими быстро меняющимися частями. Цель сообщества веб-дизайнеров – уменьшить сложность и снизить вероятность ошибок на каждом этапе процесса создания.</p>\n<p>Прогрессивное улучшение – это такая идея в веб-дизайне, которая направлена на уменьшение ошибок и обеспечение согласованного взаимодействия с пользователем. Концепция имеет свою <a href=\"https://en.wikipedia.org/wiki/Progressive_enhancement\">собственная страница Википедии</a> что объясняет его как метод полностью доступного контента, предоставляющий расширенные функции только в том случае, если он поддерживается браузером.</p>\n<p>Прогрессивное улучшение легко понять, но не так просто применить его непосредственно к вашей работе. Я хотел бы рассказать о некоторых передовых методах прогрессивного улучшения в реальных проектах, чтобы помочь дизайнерам более устойчиво мыслить о своем рабочем процессе.<br />\n1. Понимание прогрессивного улучшения<br />\nТеория прогрессивного улучшения рекомендует начинать с простого веб-сайта, который работает во всех браузерах, что делает его доступным для каждого посетителя. Затем добавьте функции, когда это возможно.</p>\n<p>Это противоположно постепенному ухудшению, которое включает в себя все функции по умолчанию, а затем ухудшается, когда что-то не работает.</p>\n<p>Прогрессивное улучшение лучше для общего пользовательского опыта, потому что по своей сути оно загружает только необходимые элементы. Каждый веб-браузер может поддерживать текст (и обычно изображения). Без какого-либо CSS эта информация будет выглядеть скучно и безвкусно, но она будет доступна.</p>\n<p>Эта <a href=\"http://alistapart.com/article/understandingprogressiveenhancement\"><em>List Apart</em> статья</a> утверждает, что прогрессивное улучшение – сначала контент, со стилями и динамическими компонентами, добавленными позже. Контент в семантическом HTML должен доставляться раньше всего.</p>\n<p>Современные CSS и JavaScript, которые мы используем сегодня, широко поддерживаются, но если мы хотим следовать принципам прогрессивного улучшения, их следует считать роскошью.</p>\n<p>Вот краткое изложение основных характеристик прогрессивного улучшения, которые вы должны принять во внимание:</p>\n<ul><li>Семантическая разметка для всего контента</li>\n<li>Предпочтения браузера пользователя должны быть соблюдены</li>\n<li>Контент и основные функции должны быть доступны всем пользователям.</li>\n<li>Ненавязчивый JavaScript загружается только в средах, которые могут его поддерживать</li>\n</ul><p>Технологические ограничения при разработке интерфейса в первую очередь определяются совместимостью браузера. Прогрессивное улучшение возвращает вас к основам мышления о том, как может выглядеть простейшая веб-страница. Оттуда вы можете планировать более продвинутые функции, такие как свойства CSS3.</p>\n<p>Но как насчет браузеров, которые не поддерживают современный CSS3? Это где сайты, как <a href=\"http://caniuse.com/\">Могу ли я использовать</a> вступают в игру. Вы должны решить, какие функции стоит реализовать, и принять решение на основе целевой аудитории вашего сайта.<br />\n2. Прожиточный минимум в таблицах стилей<br />\nБольшинство браузеров сегодня поддерживают все основные свойства, которые вам нужны. Но продвинутый CSS3 все еще является проблемой для старых пользователей, и прогрессивное улучшение предлагает решение.</p>\n<p>Вместо того, чтобы искать запасные методы для поддержки этих новых функций, сначала позаботьтесь о правильной структуре макетов.</p>\n<p>Напишите семантическую разметку HTML и CSS, которая работает в максимально возможном количестве активных браузеров (поддержка старых браузеров, таких как поддержка IE5, не требуется).<br /><a href=\"http://jsfiddle.net/a9jbq5bj/4/\"><img alt=\"jsfiddle columns css пример\" width=\"580\" height=\"331\" src=\"https://i0.wp.com/assets.hongkiat.com/uploads/progressive-enhancements-web-design-best-practices/01-jsfiddle-fluid-third-columns-css.jpg?resize=580%2C331&ssl=1\" /></a>Возьмите например <a href=\"http://jsfiddle.net/a9jbq5bj/4/\">это JSFiddle</a> который использует поплавки с двумя боковыми панелями (.fixed) и областью содержания жидкости (.fluid). Если вы удалите весь CSS и повторно запустите код, вы заметите, что все хорошо складывается с первым столбцом, затем вторым и, наконец, последним.<br /><img alt=\"jsfiddle нет css столбцы\" width=\"580\" height=\"331\" src=\"https://i1.wp.com/assets.hongkiat.com/uploads/progressive-enhancements-web-design-best-practices/02-jsfiddle-no-css-columns.jpg?resize=580%2C331&ssl=1\" />Некоторые разработчики предпочли бы, чтобы столбец содержимого (.fluid) отображался первым в HTML. Это где прогрессивное улучшение вступает в игру, и <a href=\"http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks\">альтернативные решения CSS</a> стать жизнеспособным.</p>\n<p>Две основные цели вашего HTML следующие:</p>\n<ul><li>Полностью семантический и действительный код</li>\n<li>Последовательный опыт для всех</li>\n</ul><p>Самый простой способ достичь этих целей – начать с нуля и работать, как рекомендуют большинство сторонников прогрессивного улучшения.</p>\n<p>Если ваш код выглядит хорошо с CSS, как отключенным, так и включенным, то он предлагает разумное решение для всех.</p>\n<p>Также стоит подумать, в какой момент вы отказываетесь от поддержки чего-либо. Microsoft уже упала <a href=\"http://superuser.com/questions/127628/what-is-the-official-end-of-support-date-for-internet-explorer-6-on-windows-xp\">основная поддержка IE6 </a>поэтому пользователи, использующие этот браузер, могут не стоить вашего времени.</p>\n<p>Но есть еще один большой вопрос: если браузер не поддерживает мой современный CSS, что мне делать?</p>\n<p>Вы просто пишете код, который работает <em>без</em> это, и рассматривать современный CSS как прогрессивное улучшение. В этом красота методологии прогрессивного улучшения.</p>\n<p>Вам не нужны запасные варианты, потому что вы в основном предполагаете, что по умолчанию ничего не поддерживается.</p>\n<p>Прогрессивные методы улучшения состоят в том, чтобы сделать сайт пригодным для использования даже в тех случаях, когда что-то не поддерживается, но если это поддерживается, тем лучше.</p>\n<p>Вы должны рассмотреть, как контент на самом деле течет без CSS. Например, когда я отключаю CSS на <a href=\"https://panic.com/transmit/\">Веб-сайт Transmit</a>содержимое по-прежнему органично течет вниз по странице.<br /><img alt=\"передача веб-сайта css отключена\" width=\"580\" height=\"331\" src=\"https://i0.wp.com/assets.hongkiat.com/uploads/progressive-enhancements-web-design-best-practices/03-transmit-website-css-disabled.jpg?resize=580%2C331&ssl=1\" />ОБРАЗ: <a href=\"https://panic.com/transmit/\">Передача</a>Да, это уродливо, и да, такое ощущение, что мы потеряли двадцать лет прогресса … но это работает.<br />\n3. Обработка JavaScript<br />\nСтоит отметить, что каждая проблема JavaScript, с которой вы можете столкнуться в процессе разработки, является сложной и уникальной. Когда вы создаете новый проект с прогрессивным улучшением, вы должны перечислить все необходимые функции на основе JS и подумать, как они могут работать без JavaScript.</p>\n<p>Это потребует много онлайн-исследований, чтобы найти правильные решения. Аарон Густафсон написал отличный <a href=\"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/\">Сообщение блога</a> с решениями различных проблем, таких как замена Ajax на <a href=\"http://www.w3schools.com/tags/att_meta_http_equiv.asp\">метаобновление</a> для содержимого внутри iframe.</p>\n<p>Кроме того, когда вы создаете вкладки JavaScript, рекомендуется использовать якорные ссылки с реальными значениями идентификаторов. Таким образом, когда JavaScript отключен, вы все равно можете видеть вкладки и видеть их по значению привязки. Аарон написал еще одну статью <a href=\"http://alistapart.com/article/progressiveenhancementwithjavascript\">Список отдельно</a> это охватывает более общий обзор того, как вы должны думать об этих проблемах.</p>\n<p>Вот еще один пример. Допустим, у вас есть ссылка, которая загружает контент динамически. Значение href пусто, потому что все загружается через JavaScript с <a href=\"https://api.jquery.com/event.preventdefault/\">preventDefault ()</a> метод.</p>\n<p>Вместо этого было бы разумно установить свойство href так, чтобы оно указывало на другую страницу, где содержимое могло бы загружаться естественным образом, но посетитель видит эту страницу только тогда, когда JavaScript отключен.</p>\n<p>Прогрессивное улучшение о <a href=\"https://www.christianheilmann.com/2015/02/18/progressive-enhancement-is-not-about-javascript-availability/\">больше чем JavaScript</a>Но с развитием веб-разработки с каждым годом нет сомнений, что JavaScript играет важную роль.</p>\n<p>Работайте в предположении, что все отключено, и увеличивайте масштаб оттуда. Это может включать проблемы со встроенными виджетами, которые находятся вне вашего контроля, <a href=\"http://stackoverflow.com/questions/121203/how-to-detect-if-javascript-is-disabled\"></a></p> тег это жизнеспособное решение здесь.\n<p>Также подумайте о функциях JavaScript, в которых отсутствует всесторонняя поддержка браузера. Это включает в себя <a href=\"http://caniuse.com/#feat=fetch\">получить API</a>, <a href=\"http://caniuse.com/#feat=push-api\">push API</a>, <a href=\"http://caniuse.com/#feat=arrow-functions\">синтаксис функции стрелки</a>или даже браузеры без поддержки современных библиотек, таких как <a href=\"https://jquery.com/browser-support/\">JQuery</a>,</p>\n<p>Каждая функция требует индивидуального тестирования с индивидуальным решением.</p>\n<p>Суть прогрессивно улучшенного JavaScript заключается в создании контента, который функционирует без каких-либо сценариев. Это может привести к элементарному восприятию пользователя, но это нормально, если веб-сайт можно использовать и контент доступен.</p>\n<p>Если вы хотите провести живое тестирование, вы можете отключить CSS и JavaScript во всех основных браузерах, чтобы увидеть, как работает ваш сайт. Также стоит рассмотреть возможность использования таких расширений, как <a href=\"https://chrome.google.com/webstore/detail/a-tester-wcag-20-web-acce/mbmcfgbjmddnnpkibfgnofecdemjcdaa?hl=en-GB\">A-тестер</a> за <a href=\"https://www.w3.org/TR/WCAG20/\">WCAG</a> соблюдение.</p>\n<p>JavaScript с прогрессивным улучшением – огромная тема. Вот несколько постов, которые помогут вам копнуть глубже:<br />\nТам, где прогрессивное улучшение не дотягивает<br />\nХотя прогрессивное усовершенствование является блестящей идеей почти для любого типа современного веб-сайта, оно может просто не быть применимо к проектам, которые стремятся расширить границы веб-технологий.</p>\n<p>Например, эта методология не является хорошим решением для веб-приложений, которые работают исключительно на вызовах Ajax. Это хороший выбор для доступности? Нет, конечно нет. Но если бы это было так, большинство <a href=\"http://tympanus.net/codrops/category/tutorials/\">Учебники Codrops</a> даже не существует Вы должны помнить целевую аудиторию.</p>\n<p>Бизнес-сайт, вероятно, не имеет аудитории, которая заботится о новом CSS3 <a href=\"http://www.w3schools.com/cssref/css3_pr_perspective.asp\">перспективные свойства</a>Но веб-разработчики могут быть идеальной аудиторией для таких расширенных возможностей.</p>\n<p>Прогрессивное улучшение не хватает только для веб-приложений, которые просто не хотят возвращаться во времени. Я понимаю, что таких веб-приложений очень мало, но разработчики любят прогресс, и в некоторых случаях может быть разумно продвигаться вперед с новыми технологиями, оставляя позади отставших.</p>\n<p>Я сторонник прогрессивного улучшения (или даже постепенного ухудшения, по вашему выбору) для общих веб-проектов. Но я также понимаю, что это не идеальное решение для всего. На самом деле идеального решения не существует. Все сводится к потребностям аудитории и целям проекта.<br />\nДальнейшее чтение<br />\nЕсли вы постоянно создаете веб-проекты, вам следует рассмотреть возможность применения прогрессивного улучшения в вашем рабочем процессе. Это гораздо проще, чем кажется на первый взгляд, и все начинается с основ. Большинство тем, касающихся прогрессивного улучшения, просто требуют практики и тестирования. Попробуйте предложения из этой статьи и посмотрите, что лучше всего подходит для вашего рабочего процесса.</p>\n<p>Если вы хотите узнать больше о прогрессивном улучшении, ознакомьтесь со следующими публикациями:</p>\n\n\n<span><span>Нравится</span></span> <span>Загрузка...</span>\n\n<span></span><a></a>\n\n\n\t<h3><em>Похожее</em></h3>","text":"Мастерство создания веб-сайтов невероятно сложно со многими быстро меняющимися частями. Цель сообщества веб-дизайнеров – уменьшить сложность и снизить вероятность ошибок на каждом этапе процесса создания.\nПрогрессивное улучшение – это такая идея в веб-дизайне, которая направлена на уменьшение ошибок и обеспечение согласованного взаимодействия с пользователем. Концепция имеет свою собственная страница Википедии что объясняет его как метод полностью доступного контента, предоставляющий расширенные функции только в том случае, если он поддерживается браузером.\nПрогрессивное улучшение легко понять, но не так просто применить его непосредственно к вашей работе. Я хотел бы рассказать о некоторых передовых методах прогрессивного улучшения в реальных проектах, чтобы помочь дизайнерам более устойчиво мыслить о своем рабочем процессе.\n\n1. Понимание прогрессивного улучшения\n\nТеория прогрессивного улучшения рекомендует начинать с простого веб-сайта, который работает во всех браузерах, что делает его доступным для каждого посетителя. Затем добавьте функции, когда это возможно.\nЭто противоположно постепенному ухудшению, которое включает в себя все функции по умолчанию, а затем ухудшается, когда что-то не работает.\nПрогрессивное улучшение лучше для общего пользовательского опыта, потому что по своей сути оно загружает только необходимые элементы. Каждый веб-браузер может поддерживать текст (и обычно изображения). Без какого-либо CSS эта информация будет выглядеть скучно и безвкусно, но она будет доступна.\nЭта List Apart статья утверждает, что прогрессивное улучшение – сначала контент, со стилями и динамическими компонентами, добавленными позже. Контент в семантическом HTML должен доставляться раньше всего.\nСовременные CSS и JavaScript, которые мы используем сегодня, широко поддерживаются, но если мы хотим следовать принципам прогрессивного улучшения, их следует считать роскошью.\nВот краткое изложение основных характеристик прогрессивного улучшения, которые вы должны принять во внимание:\nСемантическая разметка для всего контента\nПредпочтения браузера пользователя должны быть соблюдены\nКонтент и основные функции должны быть доступны всем пользователям.\nНенавязчивый JavaScript загружается только в средах, которые могут его поддерживать\nТехнологические ограничения при разработке интерфейса в первую очередь определяются совместимостью браузера. Прогрессивное улучшение возвращает вас к основам мышления о том, как может выглядеть простейшая веб-страница. Оттуда вы можете планировать более продвинутые функции, такие как свойства CSS3.\nНо как насчет браузеров, которые не поддерживают современный CSS3? Это где сайты, как Могу ли я использовать вступают в игру. Вы должны решить, какие функции стоит реализовать, и принять решение на основе целевой аудитории вашего сайта.\n\n2. Прожиточный минимум в таблицах стилей\n\nБольшинство браузеров сегодня поддерживают все основные свойства, которые вам нужны. Но продвинутый CSS3 все еще является проблемой для старых пользователей, и прогрессивное улучшение предлагает решение.\nВместо того, чтобы искать запасные методы для поддержки этих новых функций, сначала позаботьтесь о правильной структуре макетов.\nНапишите семантическую разметку HTML и CSS, которая работает в максимально возможном количестве активных браузеров (поддержка старых браузеров, таких как поддержка IE5, не требуется).\nВозьмите например это JSFiddle который использует поплавки с двумя боковыми панелями (.fixed) и областью содержания жидкости (.fluid). Если вы удалите весь CSS и повторно запустите код, вы заметите, что все хорошо складывается с первым столбцом, затем вторым и, наконец, последним.\nНекоторые разработчики предпочли бы, чтобы столбец содержимого (.fluid) отображался первым в HTML. Это где прогрессивное улучшение вступает в игру, и альтернативные решения CSS стать жизнеспособным.\nДве основные цели вашего HTML следующие:\nПолностью семантический и действительный код\nПоследовательный опыт для всех\nСамый простой способ достичь этих целей – начать с нуля и работать, как рекомендуют большинство сторонников прогрессивного улучшения.\nЕсли ваш код выглядит хорошо с CSS, как отключенным, так и включенным, то он предлагает разумное решение для всех.\nТакже стоит подумать, в какой момент вы отказываетесь от поддержки чего-либо. Microsoft уже упала основная поддержка IE6 поэтому пользователи, использующие этот браузер, могут не стоить вашего времени.\nНо есть еще один большой вопрос: если браузер не поддерживает мой современный CSS, что мне делать?\nВы просто пишете код, который работает без это, и рассматривать современный CSS как прогрессивное улучшение. В этом красота методологии прогрессивного улучшения.\nВам не нужны запасные варианты, потому что вы в основном предполагаете, что по умолчанию ничего не поддерживается.\nПрогрессивные методы улучшения состоят в том, чтобы сделать сайт пригодным для использования даже в тех случаях, когда что-то не поддерживается, но если это поддерживается, тем лучше.\nВы должны рассмотреть, как контент на самом деле течет без CSS. Например, когда я отключаю CSS на Веб-сайт Transmitсодержимое по-прежнему органично течет вниз по странице.\nОБРАЗ: ПередачаДа, это уродливо, и да, такое ощущение, что мы потеряли двадцать лет прогресса … но это работает.\n\n3. Обработка JavaScript\n\nСтоит отметить, что каждая проблема JavaScript, с которой вы можете столкнуться в процессе разработки, является сложной и уникальной. Когда вы создаете новый проект с прогрессивным улучшением, вы должны перечислить все необходимые функции на основе JS и подумать, как они могут работать без JavaScript.\nЭто потребует много онлайн-исследований, чтобы найти правильные решения. Аарон Густафсон написал отличный Сообщение блога с решениями различных проблем, таких как замена Ajax на метаобновление для содержимого внутри iframe.\nКроме того, когда вы создаете вкладки JavaScript, рекомендуется использовать якорные ссылки с реальными значениями идентификаторов. Таким образом, когда JavaScript отключен, вы все равно можете видеть вкладки и видеть их по значению привязки. Аарон написал еще одну статью Список отдельно это охватывает более общий обзор того, как вы должны думать об этих проблемах.\nВот еще один пример. Допустим, у вас есть ссылка, которая загружает контент динамически. Значение href пусто, потому что все загружается через JavaScript с preventDefault () метод.\nВместо этого было бы разумно установить свойство href так, чтобы оно указывало на другую страницу, где содержимое могло бы загружаться естественным образом, но посетитель видит эту страницу только тогда, когда JavaScript отключен.\nПрогрессивное улучшение о больше чем JavaScriptНо с развитием веб-разработки с каждым годом нет сомнений, что JavaScript играет важную роль.\nРаботайте в предположении, что все отключено, и увеличивайте масштаб оттуда. Это может включать проблемы со встроенными виджетами, которые находятся вне вашего контроля, тег это жизнеспособное решение здесь.\nТакже подумайте о функциях JavaScript, в которых отсутствует всесторонняя поддержка браузера. Это включает в себя получить API, push API, синтаксис функции стрелкиили даже браузеры без поддержки современных библиотек, таких как JQuery,\nКаждая функция требует индивидуального тестирования с индивидуальным решением.\nСуть прогрессивно улучшенного JavaScript заключается в создании контента, который функционирует без каких-либо сценариев. Это может привести к элементарному восприятию пользователя, но это нормально, если веб-сайт можно использовать и контент доступен.\nЕсли вы хотите провести живое тестирование, вы можете отключить CSS и JavaScript во всех основных браузерах, чтобы увидеть, как работает ваш сайт. Также стоит рассмотреть возможность использования таких расширений, как A-тестер за WCAG соблюдение.\nJavaScript с прогрессивным улучшением – огромная тема. Вот несколько постов, которые помогут вам копнуть глубже:\n\nТам, где прогрессивное улучшение не дотягивает\n\nХотя прогрессивное усовершенствование является блестящей идеей почти для любого типа современного веб-сайта, оно может просто не быть применимо к проектам, которые стремятся расширить границы веб-технологий.\nНапример, эта методология не является хорошим решением для веб-приложений, которые работают исключительно на вызовах Ajax. Это хороший выбор для доступности? Нет, конечно нет. Но если бы это было так, большинство Учебники Codrops даже не существует Вы должны помнить целевую аудиторию.\nБизнес-сайт, вероятно, не имеет аудитории, которая заботится о новом CSS3 перспективные свойстваНо веб-разработчики могут быть идеальной аудиторией для таких расширенных возможностей.\nПрогрессивное улучшение не хватает только для веб-приложений, которые просто не хотят возвращаться во времени. Я понимаю, что таких веб-приложений очень мало, но разработчики любят прогресс, и в некоторых случаях может быть разумно продвигаться вперед с новыми технологиями, оставляя позади отставших.\nЯ сторонник прогрессивного улучшения (или даже постепенного ухудшения, по вашему выбору) для общих веб-проектов. Но я также понимаю, что это не идеальное решение для всего. На самом деле идеального решения не существует. Все сводится к потребностям аудитории и целям проекта.\n\nДальнейшее чтение\n\nЕсли вы постоянно создаете веб-проекты, вам следует рассмотреть возможность применения прогрессивного улучшения в вашем рабочем процессе. Это гораздо проще, чем кажется на первый взгляд, и все начинается с основ. Большинство тем, касающихся прогрессивного улучшения, просто требуют практики и тестирования. Попробуйте предложения из этой статьи и посмотрите, что лучше всего подходит для вашего рабочего процесса.\nЕсли вы хотите узнать больше о прогрессивном улучшении, ознакомьтесь со следующими публикациями:\n\n\nНравится Загрузка...\n\n\n\n\n\tПохожее"},"mention-of":"https://www.aaron-gustafson.com/notebook/how-to-apply-progressive-enhancement-when-javascript-seems-like-a-requirement/","wm-property":"mention-of","wm-private":false,"rels":{"canonical":"https://triu.ru/luchshie-praktiki-dlya-progressivnogo-uluchsheniya-v-veb-dizajne/"}}]
Webmentions