There is no question that since the beginning of the Internet digital creatives have always had a sense of progressive enhancement. By that I mean producers have consistently been looking forward, always trying to deliver the newest and best approach while allowing for graceful degradation where their approach is not supported.
Recently however, progressive enhancement has been focused on responsive design, largely due to the publication of Ethan Marcotte’s book Responsive Web Design. The reason for this popularity is seen in the countless mobile devices and tablets that have been released over the last few years. These devices vary in screen size, definition and power, meaning they provide different experiences and require special attention. In terms of progressive enhancement, producers want to ensure their digital experience will be future proof: they will not only work and look good on any screen size but they will actually be optimized for any such device. A website or application will respond accordingly to whatever device it is being used on, even without knowing in advance the exact specs of the platform. This is by definition responsive design.
At first glance responsive design seems like the best possible solution for almost any website or application. Here I would like to stress the word almost. It is in practice not always the best solution. What may sometimes trump responsive design is simply mobile design, something that isn’t talked about nearly as much as it should be. Let me explain the difference.
Responsive design is one singular website that responds to varying devices. From a development standpoint there is only one codebase, meaning the developer only needs to update content in one place to have it updated in each experience. This is great for developers, but what if the client wishes to provide different content on the desktop version of the website than on the tablet or mobile versions? After all, using the web on a PC and using the web on a mobile device is entirely different in context. People using the web on mobile devices are generally on the go, in public space and are using a limited data plan to connect, whereas a person using a PC will likely be stationary at home or work and will have significantly more bandwidth on their data plan to surf and download content. The experiences are very different and this is why our approach to design matters.
A website that is responsive simply changes it’s appearance and optimization for different devices but the content itself does not change, which can often be ideal. Using mobile design on the other hand, not only does the experience differ on each device (or at least certain devices) but so does the content and this is the key difference.
An example of where mobile design may be preferable over responsive design is in the case of a company about section. Think about this: people are more likely to sit and read large bodies of text such as these while on a PC than they are on a mobile device. It is often the case, though not entirely, that someone using a mobile device has a very specific purpose in mind, whether it be finding a company phone number, the address of a restaurant or a map of a location. In essence, a mobile device can sometimes be seen as more of a utility than a PC.
For this reason, it may be preferable to exclude that about section from the mobile experience (though not in all cases!). We no longer want those large bodies of text to respond to different devices because they may not be absolutely necessary for the mobile experience. We may want to get rid of them completely. Using responsive design strategies, namely media queries, we are able to achieve this and simply hide that content when appropriate but we want to avoid loading in content that isn’t being used as it will inevitably slow down the loading process and make for a rather bad experience. It would be preferable to not include that hidden content at all.
A better example would be one in which the actual architecture of the site requires change. For instance, a restaurant may want their contact information on the home page of their mobile site because they realize users visiting their site using a mobile device may already be on their way to the restaurant. On the desktop version however, they may want a brief description of their cuisine or their chef or something else that is focused more on selling the restaurant instead of their phone number or a map of directions showing how to get there. The objectives in both circumstances, that of giving the user directions and that of selling the user on the restaurant are very different. Thus, from a design standpoint the content of the home page should change to accommodate whatever purpose the site or application is to serve. To achieve this we can detect what kind of device the user is on and actually serve up an entirely different page than what you would see on the desktop version. That is the difference in mobile design.
What it really comes down to is priorities. Knowing that a mobile user will generally spend less time on their device and likely has a very specific objective in mind, it is ideal to cater the experience to those needs. Of course, what the objective is can sometimes change per device. A tablet may be just fine for reading large bodies of text while a mobile phone may not be (depending on how important that copy really is). Let me be clear: neither responsive or mobile design is better than the other. They simply serve different purposes.
As a final note, I want to stress that with all this buzz surrounding responsive design it is absolutely critical in knowing what kind of experience is best suited for different devices and therefore which approach to design best suits the client objective. Think of what exactly you and your client want to achieve on each platform before making decisions regarding design and development. In doing so, you will create a more useful experience that both your client and users will surely benefit from.
