Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS How to Make a Website CSS: Cascading Style Sheets Take a Mobile-First Approach

Progressive enhancement

What's the concept behind progressive enhancement?

1 Answer

Progressive enhancement is the state of a website where a certain aspect of the user's experience is improved (but not broken) when they support certain features. That was complicated, so I'll try to explain it better.

Say you're making a website, and you're making it mobile-first. You want to add a drop-down navigation (not unlike this) so that it's hidden by default, but when the user taps a button, the navigation slides down and allows them to go to whatever page they want. Such a feature requires JavaScript, but not all people like turning JavaScript on in their browser. So you make sure that the menu works and looks fine without JavaScript, and then you make sure it's hidden by default and slides down if the user has JavaScript turned on.

In that way, your mobile navigation works perfectly fine if the use decides to turn off JavaScript. It's not the best, but it works and looks fine. If the user has JavaScript turned on, then they have the benefit of this collapsing navigation. Their experience is enhanced by having JavaScript on, but it's not ruined if they turn it off.

The reasoning behind this is that we might want to use all the latest goodies, but if they're not supported in certain browsers, they'll break. And when they break, the users of those browsers won't be happy.

So we need to make sure that the experience is solid on certain browsers (Internet Explorer) or without certain features enabled (JavaScript, flexbox). At the same time, we need to be forward-thinking and implement some modern techniques so that we'll be ready for the upcoming generation of browsers.

That's progressive enhancement. Does that help?