When building a website, you have a few ways to go about doing it.
You can start by creating the most advanced version of the site with all of the scripts, styles, and so on, and then have it render in older browsers via graceful degradation, you may opt to ignore older browsers, or you can start with a basic page and add scripts and styles such that it becomes more functional via progressive enhancement.
In this series, we're going to take a look at the latter.
First, we're going to take a look at the theory behind progressive enhancement. But don't be intimidated - it's not rocket science. The rules you will have to follow are simple.
You may ask: Why should I bother with older browsers? At this point in time, most all major browsers automatically update.
First and foremost, unless you are creating a highly interactive web app, you must consider disabled users. They can use screen readers to access your site and these programs don't read styles or complicated interfaces simply because it would be too hard for the user to understand what is on the page.
Next, it will make your code more maintainable. You will likely have more semantic HTML. You will be able to revisit it in the future and easily understand what's happening with the markup, the styles, and the scripts.
Finally, it's important to remember that there are environments that do not allow users to install or upgrade any software, including the web browser (this is popular in large corporations).
And if you still aren't convinced, some countries have even legislated appropriate laws, forcing web developers to make their sites accessible to disabled users (for example, the UK).
Now let's review the the basic rules of creating websites using progressive enhancement.
Basic Content Should Be Accessible to All Web Browsers
This seems pretty straightforward if you you understand the context in which the word "content" is being used.
Here, "content" is the information you want the user to receive in its most basic form - text. Headers, annotations, links, paragraphs and similar are okay, but images, music, animations are not the content we are talking about here (and they should be described properly using
Now a word about the "accessible" aspect: Not only should all web browsers be able to display your content, but they should to display it in a readable format. Thus, dumping all text into a single paragraph without formatting is a bad idea.
Basic Functionality Should Be Accessible to All Web Browsers
This means that if there is an anchor or a button on your page, the user should still be able to navigate the content. This is no matter if s/he is using the latest version of Chrome or an older version of Internet Explorer.
Semantic Markup Contains All Content
This point requires more planning especially when it comes to create elaborate designs. It forces you to put your content in basic HTML tags with as few of them as possible. This means that we can't nest a dozen of
<div> elements within themselves to create some nice effect.
If you follow this rule, your HTML will be cleaner and easier to understand. The fireworks will reside in CSS.
Enhanced Layout Is Provided by Externally Linked CSS
First of all, forget about the
style attribute in HTML tags. You will have to use classes, IDs, and other attributes and define their looks in your stylesheet.
<style> tag is not an option either - the stylesheets have to be loaded using the
<link> tags, so if a browser does not support CSS or it is disabled the files will not be downloaded.
This is similar to the point above - no event handlers in HTML, no
End-User Web Browser Preferences Are Respected
This is a little more complicated. You may ask yourself: What does a user's browser preferences have to do with my web page?
The first relation is the CSS. Basically, the layout should be responsive. All font sizes should be relative to user's default one (using
em units instead of
The Process of Design
Your design process may not change very much. You just have to remember the aforementioned rules and don't create any functionality that violates them.
Testing For Progressive Enhancement
Testing requires a few more applications than just the major browsers.
This will allow you to "see" your webpage as someone who has a vision impairment. There are plenty of them (the full list can be seen here). I recommend ChromeVox. It's Google Chrome extension and is very easy to use.
Not everyone adheres to the HTML and CSS standards or evaluates their work against them, but using them will help track down problems with the HTML that may be invisible in a modern browser. This is important as some modern browsers do a decent job of trying to understand - and repair - broken HTML whenever it's rendered to the user. You can validate your code here.
This covers the basic theory of progressive enhancement. At this point, you should have everything that you need to know in order to begin building and testing pages using this strategy.
In the next article, we will put this theory to practice and create basic HTML layout for our page and style it with CSS.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post