How Does Progressive Enhancement Relate to Mobile-First Strategy?

Have you ever heard of progressive enhancement or graceful degradation? They are two schools of thought which relate to how one goes about designing a website. Progressive enhancement is a strategy which takes a bottom-up approach where you first design for the most common platform – one that everyone could see – and then embellish for the more advanced browsers.

Graceful degradation is the opposite way of developing websites where you first design for the latest and greatest in mind. This second method is the top-down approach where you design for the most advanced browsers first, and then you scale it down for the less capable ones like older or mobile browsers.

Progressive enhancement web design looks like this:

You can create websites with both of those approaches. There is only one thing: graceful degradation is more difficult when you are trying to achieve usability and accessibility for all. Progressive enhancement, on the other hand, not only makes things easier when it comes to accessibility and usability; it has serious advantages which lead to a greater and overall more pleasant user experience.

Core principles of progressive enhancement

There are a few principles which progressive enhancement consists of. They are, in my humble opinion, very straightforward when you think about it.

First of all, progressive enhancement is based on the fact that content is accessible to all browsers, meaning you get the same pages, the same text, and the same images on all possible platforms. At the same time, basic functionality is also accessible to all browsers.

If an older browser can’t support a feature, you wouldn’t do it, at least right away. Only once you nailed the less capable browsers then you’d move on to create more advanced interactions, for example, for the more capable ones.

You can see in the Being Limited website that the site works really well both on mobile and desktop. The large horizontal stripes of titles and photos provide the same visual boundaries in both scenarios.

Next, all content is contained in the same markup. For example, browsers with enabled JavaScript shouldn’t get content embedded within the JavaScript file because then the non-enabled browsers don’t get the content. It’s basically not fair. Additionally, enhanced layouts are to be made through external CSS files so that you can cater specifically to the browsers who can support it. The same is true for enhanced behavior through JavaScript.

This is a mouthfull but that is what progressive enhancement stands for, in a nutshell.

Progressive enhancement and content strategy

If you haven’t noticed a pattern about progressive enhancement and content in the principles sections I will point it out to you right now.

The biggest advantage of progressive enhancement is that it's closely related to optimizing your content. A content strategy is something you do when you plan, organize, develop and manage your website’s content. This can include text, images, individual pages, videos and all sorts of things you see within a website: you know, content.

The goal of such strategy is to make sure your website delivers meaningful and valuable content that has been seriously thought through. Websites have become infamous and notorious for having poor content: content which seemed to be put together on a whim without much thought.

So, when you think about it, progressive enhancement helps with your content strategy. That’s because it makes sure that your content is accessible by all types of browsers.

Progressive enhancement, content and mobile first

Mobile first is a design and content strategy which refers to designing for mobile devices first, then moving onto bigger ones like tablets and desktop/laptop computers (in a progressive fashion). Mobile browsers are simply not as capable as desktop computer browsers. This, in turn, makes mobile first the perfect example of progressive enhancement. More so, it’s a great example where progressive enhancement helps with content strategy.

Jet Edge's landing page is meant to capture its core values both in mobile and on a full browser. The clear message is the same no matter where the user experiences it first.

Mobile first means that I would first design for an iPhone or an Android device, for instance. Technically speaking, mobile first also refers to the way a website is developed.

A great example of this is how responsive websites are made – through media queries. Not all mobile browsers actually support this CSS feature so it’s best to develop a website that looks good on mobile devices first, than add media queries for desktop browsers because most of them support media queries. It’s opposite of what you were taught in years past: to first do a typical website then add media queries for mobile devices. That’s graceful degradation.

But, when it comes to content and design, because of the small screen sizes, designers and content creators should be much more conscious about the amount of information we put on any page. Additionally, mobile first can also affect the amount of content one has within a website, because a long navigation won’t do too well on a mobile device because it will seem overwhelming.

Simplicity but not minimalism

Because of the small screen on mobile devices a lot of website need to cut down on their content when they create a responsive website. This is the top-down approach and a perfect example of graceful degradation. When you take the mobile first approach instead it forces you to start with minimal content in the first place. You tend to only put in as much content as is useful and valuable to your users. This is fantastic.

Skinny Ties is a great example of limiting viewable (and clickable) content for mobile.

Today, it’s a big deal for designs to implement only the most valuable content to help create the most amazing user experiences. People don’t like to read long and verbose copy, so web pages are becoming more succinct and to the point. If you are unsure how to create such content trying using the mobile first approach and see what information you can fit within an iPhone to get your point across. Don’t embellish it, be succinct and leave it at that. This will enable you to create very simple and effective content.

By no means should content be minimal unless it's integral to your process. My word of choice to describe great content is simple content. You don’t need to have only one sentence per page, if it doesn't work for you or your brand. Mostly, just make sure you keep the jargon out, the unnecessary decorative words, the pictures or graphics that don’t serve any purpose. When you design for a mobile device first, it’s easier to cut out all the crap because you can clearly see when your content becomes messy.

Five Simple Steps' message is made clear: they are back in business.

Not just content, design too

Minimal design is influenced by mobile devices: elaborate graphical pages don't perform well on mobile, as they became obtrusive. Everything I just mentioned about simple content is also true for a design. You shouldn’t have intricate graphical headers or footers on your site when designing for mobile. This doesn’t mean you can’t have gorgeous looking mobile sites, but adding textures or images that are nothing more but fun or pretty isn’t going to do you justice on a mobile device. Not to mention, it’s not that trendy anymore either!

United Pixel Workers' site is a great example of how minimal and flat design choices were made in order for their site to make sense on both mobile and desktop.

In conclusion

This is how progressive enhancement, mobile first design approach and a content strategy relate to one another. They don’t necessary go hand in hand, but you can see why they should.

It’s best practice to accommodate all device and all browsers when developing a website. It also provides a great user experience to keep things simple and to the point. Combining these strategies will ensure you provide amazing content to your users, and that your users can see the content no matter if they are using a smart phone with an old or incapable browsers or the latest technologies.

When thinking about your design and content, how has mobile-first helped you approach your projects and strategies?