Progressive Enhancement

What is it?

Progressive enhancement is a principle of web design, where sites are built in layers on top of a basic piece of content that is compatible with all browsers and accessible to everyone. The core of progressive enhancement is building the content first. The name “progressive enhancement” comes from the idea that users with more advanced systems can enjoy progressively enhanced experiences as they employ more technologies (such as CSS and JavaScript) to view the page. Progressive enhancement is about structuring information and functionality that can stand on its own, and building optional visuals and user experiences on top of the content.

Why is it important?

One of the oldest challenges in web development is figuring out how to build sites that work on both older and newer browsers. A site built for up-to-date browsers might have serious problems on older browsers that lack support for the newest features and standards. Worst case, the site might break completely on old browsers.

Faced with this dilemma, developers had to make a choice. Many decided that new browsers would get the best experience, and that they would make sure that it would at least not break on older browsers. This follows an old engineering principle that if a system breaks, it should do so in a way that gives the user a soft landing. They call this “graceful degradation.”

It turns out that the graceful degradation approach has a lot of problems. Instead of building sites that are meant to last, it encourages using the most current technologies, while looking backwards to do some damage control. It can produce sites that do a bad job of running on older technology, while also not being future-proof. The rise of smartphones created an unexpected need for simpler websites, and progressive degradation did a poor job of handling this development.

The hope is that progressive enhancement will produce websites that are future-proof and accessible to everyone, while still allowing designers to build cutting edge websites.

Further Reading

The British Government used progressive enhancement in building their official websites, and they were kind enough to provide a nice writeup that explains the benefits of this approach.

Wikipedia has a good article on progressive enhancement, with some history and description.

Dragon Project Revision and Reflection

For the Dragon site, I implemented instructor-provided feedback in two areas. First was moving the nav element to a higher location where it would be visible to users when they first view the page. The second was improving the vertical spacing of the page. I also consulted with a friend who gave some additional ideas to improve the site.

For the navigation element, the first thing I did was move the nav up so that it fell below the main banner image. I also made some upgrades to its display behavior. In particular, I made it into a flexbox where the list items would display in a row on larger screens. On smaller screens, the list items will display in a column using the @media screen rule. Also, the anchor elements now display as a block, and the entire area is clickable.

Next, I worked to implement vertial rhythm in the overall text layout of the page. This was, per the advice, based on multiples of 24 pixels. Most bits of text and vertical spacing were changed to multiples of 24. Larger headings have a line-height of 48 pixels, and paragraph and similar text has a height of 24. The previous design had some margins set to 20 or 40 pixels, and these were mostly changed to 24 or 48.

After reviewing the website with a friend, I made a few more changes. I changed the heading text sizes to be somewhat larger, which reinforces the visual hierarchy. I swapped the starfield background between the nav element and the h4 headings, which makes the h4 text more legible. The brighter background is now on the nav, and the darker starfield is now on the h4 headings.

Then there are some more minor changes. For the FAQ page, the text already benefitted greatly from increasing line height, but I also slightly indented the answer text, and increased the text size on the questions. This greatly reduces the "wall of text" feel of the original. On the History page, I improved the table by fixing the column widths. I also swapped the main top logo on all pages for a dark version. Overall, these changes decompress the page and improve readability.

If I were to work on this site further, I have a few ideas. I would want to experiment with creating a more horizontal layout for large screens. Many sites nowadays are designed as a single column, because it works well on mobile, so if I went this route it would require desiging two different layouts and then making sure the site responded correctly to the viewing device. On the FAQ page, I would want to make each question into a clickable element which would hide and reveal the answer text below. Many websites use this format and it works well, making it easy to skim the questions and select what the user wants to see, because most users are not there to read every single item.

I enjoyed working on this site. I found marking up the html to involve some judgment call decisions, so I would be curious to read more about style guides for html. For example, on the main page I structured the headers and related information as a dictionary list, but on the FAQ page I made everything into paragraph elements with classes for questions and answers. Both approaches work, but I suspect something like the second one is more common in practice. For the CSS, in the Dragon project I used the prototype CSS document as a template, which was helpful to get started, but for my course homepage I started from scratch with a few boilerplate items. I can see benefits to both approaches, but using a clean sheet is nice because it simplifies troubleshooting and prevents you from having a lot of unused CSS code.