Best Practices for Progressive Enhancement in Web Design

The qualification of building websites is impossibly formidable with many fast-changing parts. The thought of a web pattern village is to lessen a complexity, and reduce a intensity for error during any theatre of a origination process.

Progressive enhancement is such an thought in web pattern that aims to reduce errors and provide a unchanging user experience conflicting a board. The judgment has a own Wikipedia page that explains it as a routine of fully-accessible content, digest extended facilities customarily when upheld by a browser.

It’s easy to know on-going enhancement, though not as easy to request it directly to your pattern work. I’d like to cover some best practices for on-going encouragement in real-world projects to help designers cruise some-more sustainably about their workflow.

1. Understanding Progressive Enhancement

The speculation of on-going encouragement recommends to start with a elementary website that works in all browsers, creation it accessible for any visitor. Then supplement facilities whenever possible.

This is a conflicting of graceful degradation that includes all facilities by default, afterwards degrades when something doesn’t work.

Progressive encouragement is improved for a altogether user experience, since during a core it loads customarily compulsory elements. Every web browser can support calm (and customarily images). Without any CSS this information will demeanour uninspired and tasteless, though it’ll be accessible.

This List Apart article argues that on-going encouragement is content-first with styles and energetic components combined later. Content in semantic HTML should be delivered before anything else.

The modernized CSS and JavaScript we use currently are widely supported, though if we wish to follow a beliefs of on-going enhancement, they should be deliberate luxuries.

Here’s a ubiquitous outline of a categorical facilities of on-going enhancement, that we should take into account:

  • Semantic markup for all content
  • Users’ browser preferences needs to be respected
  • Content and simple functionality should be available to all users
  • Unobtrusive JavaScript is installed customarily in environments that can support it

Technological restraints in front-end growth are essentially dynamic by browser compatibility. Progressive encouragement gets we behind to a basis meditative about how a bare-bone simplest webpage competence demeanour like. From there, we can plan for some-more modernized features, like CSS3 properties.

But what about browsers that don’t support complicated CSS3? This is where sites like Can we Use come into play. You should confirm that facilities are value implementing, and make judgements formed on a aim assembly of your website.

2. Subsistence In Stylesheets

Most browsers currently support all a simple properties we need. But advanced CSS3 is still a problem for bequest users, and on-going encouragement offers a solution.

Instead of looking for fallback methods to contend these new features, regard yourself initial with proper blueprint structures.

Write semantic HTML and CSS markup that works in as many active browsers as probable (support for ancient browsers like IE5 support isn’t necessary).

jsfiddle columns css example

Take for instance this JSFiddle that uses floats with dual sidebars (.fixed), and a liquid calm area (.fluid). If we undo all CSS, and rerun a formula you’ll notice all stacks adult easily with a initial column, afterwards second, and finally a last.

jsfiddle no css columns

Some developers would cite to have a calm mainstay (.fluid) seem initial in a HTML. This is where on-going encouragement comes into play, and alternate CSS solutions turn viable.

The dual primary goals of your HTML are as follows:

  • Fully semantic and valid code
  • A consistent experience for everyone

The many candid approach to grasp these goals is to start from nothing and work up, as many on-going encouragement advocates would suggest it.

If your formula looks good with CSS both infirm and enabled, afterwards it offers a reasonable resolution for everyone.

It’s also value deliberation at what indicate we dump support for something. Microsoft has already forsaken major support for IE6 , so users regulating that browser competence not be value your time.

But there’s still one large question: if a browser doesn’t support my complicated CSS, what should we do?

You simply write formula that works without it, and cruise a complicated CSS as a on-going enhancement. This is a beauty of a on-going encouragement methodology.

You don’t need fallbacks, since you’re basically presumption that zero is upheld by default.

Progressive encouragement methods are about creation a site serviceable even in cases when something isn’t supported—but if it is supported, all a better.

You need to cruise how calm indeed flows though CSS. For example, when we invalidate CSS on Transmit’s website, a calm still flows organically down a page.

transmit website css disabled
IMAGE: Transmit

Yes, it’s ugly, and yes, it feels like we’ve mislaid twenty years of progress… but it works.

3. Handling JavaScript

It’s value mentioning that any JavaScript emanate we competence strike into during a growth routine is wily and unique. When we build a new plan with on-going enhancement, we should list all your compulsory JS-based features, and cruise how they could operate though JavaScript.

This will need lots of online investigate to find current solutions. Aaron Gustafson wrote a good blog post with solutions to several problems, like replacing Ajax with a meta refresh for calm inside an iframe.

Also, when we emanate JavaScript tabs, it’s a good thought to use anchor links with genuine ID values. That way, when JavaScript is disabled, we can still have a tabs manifest and permitted by anchor value. Aaron wrote another square on A List Apart that covers a some-more ubiquitous overview of how we should cruise about these problems.

Here’s another example. Let’s contend we have a couple that loads calm dynamically. The href value is empty, since all loads around JavaScript with a preventDefault() method.

Instead, it would be correct to set a href skill to point to a opposite page where a calm could bucket naturally, though the caller customarily sees that page when JavaScript is disabled.

Progressive encouragement is about more than JavaScript, though with web growth advancing serve any year, there’s no doubt that JavaScript plays a poignant role.

Operate underneath a arrogance that everything has been disabled, and scale adult from there. This competence embody problems with embedded widgets that are out of your control, a noscript tag is a viable resolution here.

Also cruise about JavaScript facilities that lack extensive browser support. This includes a fetch API, a push API, a arrow duty syntax, or even browsers though support for complicated libraries like jQuery.

Every underline requires individual testing with an particular solution.

The hint of gradually extended JavaScript is to build calm that functions though any scripting. This competence lead to a easy user experience, though that’s fine as prolonged as a website is usable, and a calm is accessible.

If we wish to do live testing, we can typically disable CSS and JavaScript in any vital browser to see how your website performs. It’s also value deliberation regulating extensions like A-Tester for WCAG compliance.

JavaScript with on-going encouragement is a outrageous topic. Here are some posts to assistance we puncture deeper:

Where Progressive Enhancement Falls Short

Although on-going encouragement is a shining thought for roughly any form of complicated website, it simply competence not be germane to projects that aim to pull a boundary of web technology.

For example, this methodology is not a good resolution for web applications that duty usually on Ajax calls. Is that a good choice for accessibility? No, of march not. But if that were a box many of Codrops’ tutorials wouldn’t even exist. You have to remember a aim audience.

A business website substantially doesn’t have a assembly that cares about adorned new CSS3 perspective properties, though web developers can be a ideal assembly for such modernized features.

Progressive encouragement customarily falls brief for web applications that simply don’t caring about going behind in time. we comprehend these web applications are few and distant between, though developers adore progress, and in some cases it can be essential to forge forward with new tech withdrawal a stragglers behind.

I am a proponent of on-going encouragement (or even seemly degradation, your choice) for ubiquitous web projects. But we also comprehend it’s not a ideal resolution for everything. In fact, there is no ideal solution. It all boils down to assembly needs and plan goals.

Further Reading

If you’re constantly building web projects, we should cruise requesting on-going encouragement to your workflow. It’s most easier than it seems during initial glance, and it all starts with a fundamentals. Most topics surrounding on-going encouragement only need use and testing. Try out a suggestions from this article, and see what works best for your workflow.

If we wish to learn some-more about on-going enhancement, check out these associated posts:

Add Comment