Progressive enhancement

What is it?

It's actually just a website split in three pieces, you've got the Markup, this exists out of plain (semantic & well-structured) HTML code. Next up we got the Styling, this is mostly the look and feel of your website made in CSS (or SCSS, LESS, etc). Lastly we have the Behaviour, you can change the behaviour of your website by adding bits and pieces of JavaScript code.

Why should I use it?

Progressive enhancement has a lot of benefits to it, the most important one being Accessibility, you'd want to make sure that every visitor on your website can see what everyone else can see. Another benefit is that it's very portable, meaning that it'll be able to run across multiple browsers and devices. The last but not least benefit is the Site Performance. By using semantic code, search engines will appreciate the code more and place you higher in the rankings.

Graceful degradation

Graceful degradation is the older concept, that was used before progressive enhancement. With graceful degradation you usually test in older browsers in the last bit of the development cycle, it's often been restricted to previous releases of the most popular browsers. There will be little effort involved in making it look good for every old browser, it just needs to be passable in this case. This is why graceful degradation is referred to as a browser oriented method.

Progressive enhancement isn't about browsers, it's about the content. You can start by putting down all of the content you'd like to show. Once you got a good foundation you can add your CSS styles to the content, lastly you can add the JavaScript functionalities to make it more visually pleasing.

Progressive enhancement in the PlayDate app

To make the chat function of PlayDate progressively enhanced I have decided to show people a message to use JavaScript when it's not enabled, but still let the user send messages. It refreshes the page every 10 seconds so it can check for new messages, and make the user able to send another message.

Sources

Craig, William. “Progressive Enhancement 101: Overview and Best Practices.” WebFX Blog, 19 Nov. 2018, www.webfx.com/blog/web-design/progressive-enhancement/. Gustafson, Aaron. “Understanding Progressive Enhancement.” A List Apart, 7 Oct. 2008, alistapart.com/article/understandingprogressiveenhancement/.