Progressive Enhancement

I want to discuss here basic and fundamental concepts, which every front-end developer must know i.e. Progressive Enhancement. Unknowingly you might be following this pattern in your day to day works.
So let's talk about it.
When we design any website what should be our focus whether it should be Behavior, Presentation or Content? What do you think?
If you are thinking about Presentation or behavior then you are on wrong direction.
User visits any website for content not for any fancy UI.
So in simple word Progressive enhancement is functional separation between HTML, JavaScript and CSS. It is layered approach to Web Design where more focus needs to be given on content, the user and accessibility. The first step is to keep your HTML, CSS and JavaScript separated, these layers are referred as a Structure, Presentation and behavior respectively.
So our first focus should be on the content, marked your content with meaningful HTML. After the content is properly marked up, you can move to presentation layer. On the presentation layer we deal with CSS. The third layer of the Progressive enhancement is behavior where we spend lot of time because it is the place where we use JavaScript.
Below Image has been taken from book "Learning JavaScript" by Tim Wright.
Graphical Representation of Progressive Enhancement
Here are different benefits with Progressive Enhancement Design:
  • Maintenance is easier. Even though your code are separated with each other but they are Integrated. Making changes in any layers with this approach is much easier.
  • Keeping layer separated raises re-usability factor. You can reuse the same code again and again in your website and it is easier to extract and reuse part of your CSS and JavaScript logic for other project which has related features or functionality.
  •   Accessibility of your website get increased.  

That's all about Progressive Enhancement concept. Soon I will come up with new topics and concept.