Mobile devices are growing in usage worldwide. People are buying more smartphones — and tablets — each and every year. Moreover, people are using their mobile devices more and more to access the web. It’s important to take the web experience on a mobile device into account. It’s important today and it will be even more important tomorrow as the number of users is constantly increasing. Progressive enhancement is a philosophy that makes sure that people have an easy access to your information, no matter their device; because it focuses on how you build your website.
The philosophy of progressive enhancement
During the 00’s, it was common to design for the latest and greatest browsers first. It’s a concept called graceful degradation, which means that you would first build for the newest browsers with the newest technological supports. Then you would dumb down the website for the browsers that were not as powerful and not as supportive. This is a top-down approach where on the top you have the greatest and latest browsers. You then go down the list of less and less capable browsers and make sure the site works as well with them as it can.
This approach was questioned later. People were concerned about making content available for all browsers no matter what. They were interested in improving usability and addressing the lack of capabilities in mobile browsers. Their goal was to make content accessible to all no matter the browser; and graceful degradation didn’t easily allow for that.
The term “progressive enhancement” was coined by Steve Champeon and Nick Finck for their SXSW 2003 presentation where they explained a better, more effective concept for developing websites. It was a bottom-up approach, where you first develop a website so that every browser can easily access it and get the exact same results. Only then you go up the browser list to add in features to the website — like animations — for browsers which can actually support it. This ensures that all browsers can show the same content to their users.
Mobile web design
Progressive enhancement was created to support mobile browsers. They are mostly inferior to current desktop browsers so it’s easier to ensure they support the content with progressive enhancement rather than graceful degradation. Here are some statistics to give you a clearer picture of the current state of mobile devices, and how having a mobile-friendly site can improve your business:
No one screen size has more than 20% of the market share. – Mobify Research
25.85% of all emails are opened on mobile phones, and 10.16% are opened on tablets. – Knotice
61% of customers who visit a mobile unfriendly site are likely to go to a competitor’s site – Yahoo Small Business Advisor
Over 1.2 billion people access the web from their mobile devices. – Trinity Digital Marketing
Global mobile traffic now accounts for 15% of all Internet traffic. – Internet Trends Report
62% of companies which designed their website(s) for mobile platforms increased their sales and 64% of companies that designed their website for tablets increased sales. – Ironpaper
Mobile-based searches make up one quarter of all searches. – The Search Agency
61% of people have a better opinion of brands when they offer a good mobile experience. – Latitude
I hope none of the above statistics surprised you. We all know that mobile is growing, and it’s doing it fast. Therefore it’s of the upmost importance to cater to mobile browsers. It’s so important to have a mobile friendly website today, it will be even more important tomorrow as more and more people will become mobile users.
Progressive enhancement and responsive web design
To tie the two together I want to talk about progressive enhancement and mobile web design. There is a reason those two go hand in hand. You see, when you utilize progressive enhancement to develop a responsive website, a mobile friendly website, you win. Simply put, creating a responsive website with the progressive enhancement approach is the best when it comes to ensure mobile browsers are catered for no matter what.
A lot of mobile browsers are simply not as capable as desktop browsers. They lack support of the more obvious things like fancy animations; but, believe it or not, not all mobile browsers support media queries, which make responsive websites possible. Well, all current browsers support it; but we can’t ensure that all users have current browsers on their devices. Who says people use only the newest devices, anyway?
See which mobile browsers do support media queries on Can I Use.
Media query the desktop
Use progressive enhancement to develop your responsive website. To do so, you’d have to first create the mobile website as your actual standard site. Only then you’d create the desktop site with media queries. Desktop browsers have supported media queries for much longer than mobile browsers giving them the technical advantage. You might think it makes more sense to first develop the desktop site and than strip it down with media queries for mobile; but that is graceful degradation, which is more difficult to achieve. Don’t forget that your goal is to reach more people with your content.
Mobile-first approach
When it comes to developing mobile friendly websites you need to also learn about the mobile-first approach. It’s a philosophy coined by Luke Wroblweski. It’s an approach to prioritize content for mobile devices first in order to ensure the best user experience. You see the philosophy of progressive enhancement is to allow your content to reach as many people as you can – content is the core of this philosophy. Mobile-first is an approach that helps you develop the best content for you; it helps you optimize it.
Luke actually wrote a whole book about it; but there are a couple core points I can summarize for you. First, thanks to mobile devices, more people can get access to content on the internet. Second, when developing your website you need to focus on the core content and functionality. The less the better, as it keeps the focus.
Conclusion
So there you have it, a quick crash course about progressive enhancement. It’s a philosophy that truly affects a team’s productivity and has a more positive effect on the end product, because it’s an approach that tries to make things easier for both the developing team and ensures a better experience for the user. I encourage you all to try to pursue it in your upcoming projects.
