As we hurtle at light speed toward mobile overtaking desktop devices, some new philosophies in Web design have surfaced – philosophies that redefine how we approach our clients’ needs.
At GS Design, we’re exploring a new approach to Web design and development called “Mobile First.” Directly related to this strategy are two Web terms to digest: “responsive” and “adaptive.” What do they mean? Aren’t they the same thing? It seems there are as many opinions on the correct definition of these two terms as there are Web developers.
Let’s break it down.
Both terms can refer to allowing a Website to provide the best possible experience on a variety of devices, whether it be mobile, tablet, or desktop.
The term responsive design can be credited to Ethan Marcote, who coined the term in his book Responsive Web Design to describe using “fluid grids, fluid images/media & media queries.” This basically speaks to the layout’s ability to respond to the user’s technology (browser or device) to best meet the user’s needs.
Resolution Independence: 2012.dconstruct.org responsive layout. A “fluid” grid allows the layout to “respond” to its respective device (or browser window) width.
Some examples of an adaptive strategy:
- Programming touch event functionality, such as swiping through a gallery, for devices that understand touch events.
- Adding geolocation functionality for devices that can track the user’s location (e.g., “Use my current location”).
- Programming a canvas element to replace an image if the user’s browser supports HTML5.
Basically, responsive and adaptive aren’t mutually exclusive concepts. They go hand in hand. Adaptive is an overall approach, and responsive is sort of a bullet point within that approach. It could be argued that responsive is more about the layout, and adaptive is more about enhancing the experience, but I’ll leave that for you to decide. Combined, they’re part of a strategy to provide the best experience based on the technology being used. It’s all about exploiting the capabilities of the user’s environment to create a more authentic and personalized experience.