Progressive Enhancement 💻
Progressive enhancement improves the user's experience. You can do this by providing feedback or making a feature easier. When you turn off JavaScript on a site, the site should still work and the content should still be visible. Only the function becomes less easy, the website should still work.
So Progressive Enhancement enables the user experience to be improved, you do this using client-side javascript. You can build components that enable the user experience to be improved.
- provides a baseline of essential content
- provides a baseline of essential functionality
- good for user experience
- easy to maintain
You need 3 different layers to apply Progressive Enhancement to the concept. This layers are HTML, CSS and JavaScript file.
HTML is the most basic file that user can see, there is no styling or any other features. CSS is where all the styling is done and JavaScript is for more complicated functions or features.
Consider browsing the YouTube app without a network connection. Users receive nothing. There is a user-friendly 'No connection' notification but the application can still be used, especially if videos have been downloaded. As soon as the network is restored, the app displays 'Back online' and starts syncing the data. Although not perfect, the behavior is far superior to a web program that accomplishes nothing without a network connection.
Another example of progressive enhancement is web fonts. Custom fonts may not be supported by all browsers or may take a long time to load when used to style a website. The developer offers a fallback font if the custom font fails to load.
To make sure my project follows progressive enhancement principles, I've added a feature using forms for the login and sign-up pages. Even if you turn off JavaScript, the forms still work fine. The only thing that won't work is external APIs, but I've included a message using to let users know. If you disable CSS, the design might not look perfect, but the login feature and error validations still functions. Additionally, by using semantic HTML, the login feature benefits from improved structure and meaning. Semantic HTML elements enhance accessibility and understanding for users and search engines. This way, everyone can use the login feature no matter their browser settings. It's all about making it easy for everyone to access and use.
- https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement
- https://medium.com/eqs-tech-blog/progressive-enhancement-to-pwas-4315b821b2ad
- https://blog.logrocket.com/understanding-progressive-enhancement/#:~:text=Web%20fonts%20are%20another%20example,developer%20provides%20a%20fallback%20font.