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
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.