Course notes 8
syllabus | schedule | exercises | assignments | class notes | resources | students | ARTC courses

Applying Progressive Enhancement to Mobile Design

Progressive Enhancement is a web design/development methodology which focuses on presenting a usable and function experience at each possible 'level' of interaction. In desktop-oriented design, these levels are considered content, presentation, and behavior. Each refers to support for a separate technology; html, css, and javascript respectively. When designing with progressive enhancement in mind, one would make something work completely at the lower level (starting with just html) before moving to a higher level where you would provide additional elements.

Consider a "form" element. The designer might first create the form in pure html, making sure the content is fully functional. Then, they would add CSS to enhance the visual presentation of form element. And last, they might add some AJAX behaviors with javascript to faciliate a more seamless experiance. The form will still work no matter what technology the user's system supports, but, as support increases to more advanced technologies, so the overall experience is enhanced.

The idea of progressive enhancement can be applied to formatting content for mobile devices, allowing us to 'build up' from each level of mobile phone to the next.

When delivering mobile content, it is very important to consider the amount of data you transferring. When someone is using a mobile device to view a website they do not have the same speed of internet connection that a desktop would be able to access. 3G, EDGE, and other radio standards will taken significanty longer to download content and display a webpage. In addition, they may be paying per mb of data they download, and would otherwise avoid transfer heavy sites.

In order to present the best experience we have to limit to delay between the mobile user accessing the page, and viewing it. One way to reduce the delay is to make sure we are not forcing the user to download content they are not going to use. We dont want the mobile user to have to download the much larger display data that would be used were they viewing the website on a desktop.

To achieve this relationship between viewer and the data they download, we use the ideas of progressive enhancement. At the lowest level is the smaller mobile screens, so we start with just the code and resources needed to view the website at that size. Then, using media queries, we add another stylesheet which enhances us to the next level. We can continue adding stylesheets untill we have created support for each level of device that needs addressed. This way, we can minimize the download of extraneous resources that the user does not need.