Although the subject is not new, one of the hottest issues in web design and development is still the accessibility of websites on devices other than the standard desktop or laptop screens.
Predictions show that, by 2014/2015, mobile and tablet devices will be the dominant form of website browsing, it behooves businesses to address the issues encompassing user experience and acceptance of their websites on the latest devices on the market.
The majority of website visitors who access sites via mobile and tablet devices do not care whether a website is responsive or adaptive, just as long as they can navigate easily around the site and read content clearly on whatever their chosen device may be.
While both responsive design and adaptive design solve the issue of resizing websites to become mobile friendly, there are subtle differences between them…
Responsive Web Design
Responsive web design is fluid, meaning that the design responds to fit any screen size by using CSS media queries (the code used to give websites a visual appearance) . In responsive web design text can wrap and images can resize depending on the browser.
Adaptive Web Design
Adaptive web design uses multiple static layouts based on a series of breakpoints. If you wanted a website to only display on desktop computers, tablet devices (such as the iPad) and mobile devices (such as the iPhone) you would use three different breakpoints which the design would adapt too. Unlike responsive design, adaptive design is not fluid, instead the design will ‘jump’ to suit the predefined breakpoint when a browser is scaled down.
Responsive web design may give your sites visitors an optimal experience no matter what device they view the design on. It also allows for one HTML file to be optimized for more than one environment. However, with responsive web design you might have less control over how everything looks if you’re taking a fluid approach by using percentage based scaling. In this case, media queries still open up a range of possibilities for layout as previously mentioned.
The adaptive design approach may work better if you only need to accommodate the design for certain devices, such as the iPhone and iPad. Adaptive web design is arguably the best approach if a website uses a lot of images as these tend not to scale too well.
The biggest similarity between the two methods is that they both allow websites to be viewed in mobile devices and various screen sizes, ultimately providing visitors with a better mobile user experience.
We practice what we preach here at Entyce Creative, which is why we are currently designing a new ADAPTIVE website due to be completed in 2014.