Great Ideas Start Here

blog: a regularly updated web page, typically run by an individual or organization, containing relevant thoughts and ideas.
by: Christine Swartzendruber, Chief Technology Officer

Progressive Enhancement is a strategy for web design that emphasizes accessibility, semantic HTML markup, and external style-sheet and scripting technologies. The technical definition is not really clear to most people, and unfortunately many web designers haven’t adopted it or don’t apply it properly. Here’s how we break it down for our clients… Each browser (IE, Chrome, Firefox etc…) has different capabilities. They are not all the same and they don’t all interpret code the same way. Web designers and developers must build to make the most of what each browser can do. The website is the same, but subtly different depending on what browser it’s displayed in.

When I started designing web sites, I would complain because Firefox and IE, were not rendering my design the same way and things like menus needed to be duplicated or adjusted to accommodate both browsers. Most recently HTML5 and CSS3 have really changed the game. Some browsers like Chrome and Firefox have embraced the new technology, but Microsoft IE7 and 8 (which most IE users are still running) are not equipped to handle the changes.  In 2012, the tablet prevails and 30% of mobile phones are “smartphones” running their own browsers. When I sit down to conceptualize a site today, I have to create a display for a 30 inch monitor and an 8X5 inch cellphone screen and I have to take into account the different technologies and how they will present the site to the user, this is very difficult to do.

Some developers have implemented a radical form of Progressive Enhancement, basically building a separate site for each device. In the past we would build one, fairly adaptive site. This new approach means building a site for each device separately, one for the iPad, a site for IE, a site for Android mobile phones, a complete mobile web application etc…

A better method includes Responsive Design. Things like building the site on a fluid grid, with flexible images and non-fixed layouts. A big jump from the HTML tables I was using two years ago. Flexible designs make no assumptions about a browser window’s width, and adapt beautifully to devices that have portrait and landscape modes.

Primarily, we have to treat all the different web devices as facets of the same experience. The W3C created media queries as part of the CSS3 specification. A media query allows us to target not only certain device classes, but to actually inspect the physical characteristics of the device rendering our work. The media query specification provides many media features, allowing designers to test multiple property values in a single query.

Media queries are an excellent way to deliver different styles to different devices, providing the best experience for each type of user.You can use media queries to assign different style-sheets depending on browser window size and change the layout based on the space available. Media queries are supported in Internet Explorer (IE) 9+, Firefox 3.5+, Safari 3+, Opera 7+, as well as on most modern smartphones and other screen-based devices. Although older versions of IE don't support media queries, web designers can—and should—start using them now.

Beyond design techniques, web developers need to know their target audience. For example, we know that less than 5% of the users who visit our site use IE6 and less than 15% use IE at all. Developing primarily for IE rather than Chrome, Firefox or even tablets would be a mistake and would lessen the browsing experience for the majority of our users. If you are still designing for the lowest common denominator it may be time to consider Progressive Enhancement.