wk 1 Frontend Development - Sophievanderburg/blok-tech GitHub Wiki
Progressive enhancement (PE in short) is a methodology for developing web applications. It means that you start with a rock-solid foundation. Once that foundation is finished you can add more features to it. But there’s no point in enhancing something if it doesn’t add value.
Progressive enhancement makes us think about what happens when things fail. The basic experience is the best and most performant one. When the enhanced features do not work, the rock-solid foundation should still be able to give the user a good experience.
This means that the HTML (the content) is the most important. When the JavaScript fails, you still have you HTML and CSS. But even if you CSS also fails, the user can still get the information they need, because the content is still there. Maybe it does not look great, but is gives them what they need. In short, progressive enhancement is the separation of HTML, CSS and JavaScript.
PE focuses on the start only on the very basic technologies before introducing some complex features. It is about always giving users a reasonable experience, no matter their browser or device.
Core principles of the Progressive Enhancement strategy:
- The basic content of the web application should be accessible to all web browsers
- The basic functionality of the web application should be accessible to all web browsers.
- Enhanced layout is provided by externally linked CSS
- Enhanced behaviour is provided by externally linked Javascript
- User web browser preferences are respected
The main thing about my feature is that I have to delete someone from your saved matches list.
1. CSS
The most obvious way to use progressive enhancement is CSS. CSS makes the user experience so much more valuable. So ofcourse, I will used this in my application.
2. Are you sure you want to delete this person?
You have to confirm if you want to delete the person when you pushed a remove button. This way you will not delete someone by accident.
3. Delete from profile
You can go to the profile of a saved match and delete that person there. By going to the profile first, you can take a good look at the profile and decide if you really want to delete this person. Otherwise, the user may regret deleting a person after he has done it.
-
Craig, W. (2011, February 11). Progressive Enhancement 101: Overview and Best Practices. Webfx. https://www.webfx.com/blog/web-design/progressive-enhancement/
-
Dwyer, S. (2009, 22 april). Progressive Enhancement: What It Is, And How To Use It? Smashing Magazine. https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/
-
FreeCodeCamp. (2018, 26 november). What is Progressive Enhancement, and why it matters. https://www.freecodecamp.org/news/what-is-progressive-enhancement-and-why-it-matters-e80c7aaf834a/
-
Silver, A. (2018, April 1). Progressive enhancement explained simply. Adam Silver. https://medium.com/@adambsilver/progressive-enhancement-explained-simply-32dd1dc9e064
-
Gustafson, A. (2008, October 7). Understanding Progressive Enhancement. A List Apart. https://alistapart.com/article/understandingprogressiveenhancement/