Create a High Performing Website with Progressive Enhancement

What does it take to create a high-performing website?

Is it a matter of integrating the latest technology, being mobile-friendly or using more visuals?

It’s all of those things, but, ultimately, it’s about creating a universal experience for your website visitors, no matter what screen they’re using to view your website.

With a progressive enhancement strategy, the core functionality remains intact on a smaller screen. On larger screens, additional functionality becomes available. Both experiences are ultimately pleasing to the end user.

Let’s take a look at how you can use this approach to continually improve your business website.

Why Would I Want to Take a Progressive Approach?

One of the main reasons to stay current is customer behavior, which is a moving target. Things are changing much too fast for you to be standing still in the online world, and traditional redesign practices keep you locked in for longer without the ability to adapt to demands.

Consider this:

• Audiences have a limited attention span. This is where the famous nine-second attention span of the goldfish would often be cited. People aren’t goldfish, but it’s still an apt comparison when it comes to websites where visitors bounce off if they can’t quickly find what they’re looking for.
  
• Mobile device usage is on the rise. You would have to check your own analytics to determine the importance of mobile, but for many sites, mobile browsing is fast becoming the standard over desktop browsing.
  
• Audiences are increasingly being drawn to visual content. Images, videos, GIFs and other visual media create an engaging and appealing user experience.
  
• They are seeking out answers. Plus, they want clear and concise answers to their questions.
  
• They prefer a great user experience. Good UX design isn’t just a good-to-have. Many audiences now expect it. Speed, convenience and intuitiveness are all important.

Can you safely say that your website is built with these criteria in mind?

Shifting to a Progressive Approach

With traditional website redesign practices, you would use the data available to you to determine what your users want in a website today.

But by the time you’ve fully developed and implemented the new design, browsing behaviors could have changed already.

This is why designers have started using a new approach to stay on top of the trends. Growth-driven design, mobile-first and progressive enhancement help designers keep things fresh and earn brownie points with users in the process.

As a result, websites can continually deliver an amazing experience to their user base.

What is the Progressive Enhancement Approach?

Now you have a better idea of the why. Let’s take a look at the what.

There are basically two approaches to website design. They are:

1. Graceful degradation. Moving from complex to minimalistic. With this approach, the browser is the focus. It’s basically an “everything including the kitchen sink” methodology where you start with all of the bells and whistles and then strip away whatever features don’t work to adapt to browser functionality. Sadly, with graceful degradation, the focus is often more on the browser than the user, leaving the user with a suboptimal UX.
   
2. Progressive enhancement. Moving from minimalistic to complex. In essence, progressive enhancement is the opposite approach to graceful degradation. You start with the foundation of the house, and then you build the structure, the walls, and so on. Complexity can be increased from there, while keeping the content and the UX the central focus. Accessibility is thus achieved with the layering of technology. Of these two approaches, more and more designers are favoring progressive enhancement.

Progressive Enhancement is Like a Cake

In this case, we’ll say the cake has three layers—the bread, the filling and the frosting.

With progressive enhancement, the bread would be the core of the website, which is structured so that anyone can navigate and utilize it. If we were to use more technical terms, this would be the semantic HTML markup.

The filling is basically the design. How does the website look and behave? How does it adapt to screen size? This is driven by an external CSS stylesheet.

Finally, we have the frosting. These are the extras that can add interactive elements to the website. JavaScript can be used to enhance usability.

Apt analogy? We hope so.

The Advantages of Progressive Enhancement

Using progressive enhancement to build a website has many benefits.

Here are three specific advantages you’ll want to be aware of:

• It allows users to view the content on any browser or device. This is fundamental to the success of any website. Users on any device should be able to access and view your content.
  
• It improves SEO.Content is served as HTML, which is how search engines like to view your website.
  
• It starts with the core. No crazy Flash animations or web application functionality out of the box. Progressive enhancement starts by building a solid foundation and infrastructure for a website before it becomes concerned with all of the extra frills. Why does that matter? Because it means excellent UX.

Why Progressive Enhancement?

Continually improving your website enables you to adapt to user behavior. That, in turn, drives up engagement, which will also affect your bottom line.

Progressive enhancement is just one piece to the bigger puzzle of maintaining a robust online presence, but it is key to making it all work. Many designers are beginning to see it as the “right way” to developing a website, and it’s not hard to see why—it’s a user-first approach to design. Instead of pandering to the constraints of web technology, it allows for adaptive design that better serves the intent of the customer, and after all, they are that important.

Would you like to learn more about developing a website that stands the test of time? Download our High Performing Websites Guide to keep your website looking fresh.

(13)