Often I see, designers presenting both versions of the design to clients, however I believe that choosing the right style at the outset, is the key to executing the design with better direction and focus on results.
Responsive design:
A responsive website will show content based on the available browser real estate. A responsive site on the desktop will move dynamically and arrange itself, as you change the size of the browser window. This process is automatic, on mobile phones – where the site verifies the available space to presents itself in an ideal arrangement.
Responsive design
As a concept responsive design is pretty straightforward, as it is very fluid the user gets a seamless view of the site on a handheld as they would on a large screen. To implement this in theory, requires deep understanding of the client and the end users and also in depth visual conceptualization of the site from early on.
Example: The Microsoft website is a great example to check the features of a responsive site.
Adaptive design:
While responsive design, is about changing the design pattern to fit the screen – adaptive design relies on multiple fixed layout sizes. The site/app detects the available real estate and then displays the layout most relevant to the screen. In such a scenario, resizing the browser will have no impact on the design and layout on display.
In adaptive design, it’s normal to develop six designs for the six most common screen widths; 320, 480, 760, 960, 1200, and 1600 pixels. This style of design is in demand for e-commerce websites, where businesses require handheld device- optimised websites. So much so, that popular UX design tools now come with predefined template sizes for each device.
Example: Amazon is a great example to check the features of an adaptive site over various devices.
Choosing between the two
Note: I’d like to point out here, that there is also a third option, which is still relevant although losing out on popularity. This is the ‘Standalone Mobile Design’. You would have seen mobile only websites – these are usually denoted in the URL bar of a browser using the “m.” prefix. Once a design alternative of choice ( even Google used to enable search engine rankings to such sites), this option is falling out of favour, as it requires double the effort to maintain two versions of the same site.
Coming back to choosing between a responsive versus an adaptive design, a broad stroke would imply that if designing a website for high mobile web browsing – responsive web design is a goof fit. Similarly for mobile features that rely on touch, the accelerometer or geolocation, adaptive website design may be required.
While broad generalizations can be made, the solution needs to be flexible on a case by case basis.
The case for responsive design:
Pro’s
- Responsive is easier to design as it is essentially a flexible flow elements
- Takes less work to implement
- Easy to find pre-designed templates
- Uniform and seamless transition when viewed on different screen sizes
- SEO friendly
Con’s
- Lesser control of design, on each screen size
- Lot’s of testing is needed to ensure that visual hierarchy is manintained as elements are shuffled on screen screensizes
- Advertisement sizes need not translate well on smaller screens
- Flexibility of images needs to be considered – like enabling preview images for smaller screens
- Longer mobile download times
The case for adaptive design:
Pro’s
- Tailormade screen solutions
- Better user experience, as the display adapt’s to the users situational needs and capabilities
- Better for touch friendly interface
- Can be designed to optimise advertisements
- Adaptive sites are often 2-3 times faster than responsive ones
Con’s
- Lesser data is presented o user, but this is a small price for increased convinience
- Usually a lot more work – six designs are th current standard, but it could vary
- Tablet and notebpk users need to be provided with option to togge between available versions, as this ‘mid’size’ segment is often neglected
- SEO challenged – most search engines still don’t rank identical content over multiple URLs equally