What is progressive enhancement?
The web is filled with websites for all sorts of subjects and goals;
web shops to buy clothes, information sites for writing research
papers, cooking blogs for following recipes and many more. These
websites should be accessible to everyone, no matter what situation
they are in. For this we use progressive enhancement.
Progressive enhancement is an approach to ensure that
the basic functionality is accessible to everyone but where the
experience improves layer by layer. A good way to explain
progressive enhancement is by eating a cake:
Functional / Reliable core (Base cake)
The functional goal of this dry cake is to be eaten and this
should always be achievable. It doesn't taste great and it's not
the most amazing experience to eat this dry cake, but the idea
of 'cake' is there and you can eat it.
Usable (Frosting)
The frosting that has been added makes the cake less dry and
therefore easier (and even a little bit tastier) to eat. The
cake is now more usable for eating and therefore the experience
of eating a cake increases.
*Unnecessary for eating the cake
Pleasurable (Candles/Toppings)
The final step is the ultimate user experience. The user
experience increases because happy toppings have been added, new
flavors are added and because candles can now be blown out. This
is why it is more fun and tastier to eat this cake.
*Unnecessary for eating the cake
The frosting and the candles both create a more fun and enjoyable
experience, but neither of these are necessary to achieve the goal of
eating a piece of cake.
Cake and websites... ?
HTML creates content and structure. With paragraphes, headers and
links you can give a website content. It is important that the key
features of the website are created in the HTML. This means that
text and images should be written straight into the HTML instead of
being injected with javascript. It is also important to use the
correct tags; headers should go into a H1, H2, H3 etcetera. Content
like a navigation, a link and a footer all have specific elements
that can be used to make the user’s experience as pleasant as
possible. Using these correct tags also benefits screen readers
greatly.
CSS makes the website pleasant to look at, whether with some nice
styling or by making the website responsive. It is important that
CSS does not add any key features, only additions. This is because,
for example a screen reader, can not convey the styling to a user
who is blind. Yes, CSS can give many great additions to a website
nowadays, with responsive styling, grid layouts, dark or light theme
detection and many more incredible features. But these should and
can not be used for key features that will help the user reach their
goal.
It is almost unimaginable, a website without JavaScript. Yet there
are still many cases where JavaScript can simply not be used. Think
of older browsers, bad internet connections, old and lesser quality
devices. In these circumstances, JavaScript files will often either
not be loaded as they should or not be loaded at all. This is why it
is important to not add any important features with javascript, you
could potentially lock a lot of people out of your website by
accident.
Why is progressive enhancement so important?
Progressive enhancement is not just useful for people with a
permanent disability, it can help a lot of people with their
experience on your website. For example, someone with a broken
dominant arm will have to use the keyboard to navigate a hospital
website to book an appointment, a user with bad internet might still
want to look at a news website, a user who lost their glasses might
need a high contrast or a zoom function to be able to order new
glasses and a driver might need to have as little distractions as
possible when looking for an address. These people are often few but
does that mean that we should exclude them completely? Of course
not. This is why progressive enhancement is so important, users
should be able to use a website no matter what specific situation
they are currently in.
How do you work with progressive enhancement in your mind?
So how do you build a progressive enhanced website? You start off
with your basic HTML; text in the corresponding HTML tags, forms in
pure HTML and a navigation for ease of use. Once the HTML is
finished, the website should be fully usable to reach a goal. Now
this experience does not have to be ideal, you will likely have to
substitute certain features only usable with Javascript for
alternatives. With progressive enhancement, you aim for the best
possible experience with what is available. The next step to
creating a progressively enhanced website is adding CSS. CSS
supports quite a lot of handy media queries which can greatly help
with building a progressively enhanced website. For example, you can
adjust your website for people who wish to have reduced motion due
to epilepsy or for people who wish to view the web with a higher
contract due to difficulty with reading. These and a lot of other
media queries help greatly with creating a progressively enhanced
website. Once again, at this point your website should be fully
usable to reach a goal. Finally, you can add JavaScript to add final
additions to your website to enhance the user’s experience.