It affords less control over your design on each screen size, but it’s by far the preferred method for creating new sites at this moment. Responsive design is easier and takes less work to implement. Choosing Between Responsive and Adaptive Design It seems unlikely that it will make a comeback anytime soon. With no particular incentive to do this, the mobile-only design has fallen out of favor in recent times. The big drawback of creating a separate site (rather than using different designs or employing a changeable design) is that it requires an awful lot more maintenance in order to keep the two versions of a website homogenous. Google delivered search engine rankings to mobile sites, but today the same preferences are given to adaptive and responsive sites. Designers would create sites for mobile devices, attuning the elements and layout for a dedicated format. This option was once an excellent approach. There is also the option to create a mobile-only website (these are usually denoted in the URL bar of a browser using the “m.” prefix). 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. However, this is because the designers have picked a different layout for the phone’s screen rather than leaving the design to try to rearrange itself. The layout displayed on a mobile website using adaptive design may be different from the desktop’s version. Amazon, USA Today, Apple, and configured themselves to be mobile-optimized websites. Some sites have been quick to embrace adaptive design. So, when you open a browser on the desktop, the site chooses the best layout for that desktop screen resizing the browser has no impact on the design. When the site detects the available space, it selects the layout most appropriate for the screen. Where responsive design relies on changing the design pattern to fit the real estate available to it, adaptive design has multiple fixed layout sizes. It is also known as progressive enhancement of a website. For this to be true, responsive design requires a very good conceptualization of the site and a deep knowledge of the needs and wants of the end users! Adaptive Web DesignĪdaptive Web Design was introduced in 2011 by web designer Aaron Gustafson in his book, Adaptive Web Design: Crafting Rich Experiences With Progressive Enhancement. Because it is fluid, it means that users can access your online world and enjoy as much of it on their handheld device as they would on a massive monitor. On mobile phones, this process is automatic the site checks for the available space and then presents itself in the ideal arrangement. If you open a responsive site on the desktop and then change the size of the browser window, the content will move dynamically to arrange itself (at least in theory) optimally for the browser window. Responsive designs respond to changes in browser width by adjusting the placement of design elements to fit in the available space.Ī responsive website shows content based on the available browser space. The term Responsive Design was first coined by the web designer and developer Ethan Marcotte in his book, Responsive Web Design. Copyright terms and licence: CC BY-SA 3.0
Responsive DesignĪuthor/Copyright holder: Muhammad Rafizeldi.
The boundaries may seem blurred to those without experience of either style of design, but there are clear differences when you look more closely at the two.
There is a certain amount of confusion as to the difference between responsive designand adaptive design. Designers looking to bridge the gap between devices have two options for their designs: the adaptive site or the responsive site.Īuthor/Copyright holder: Stéphanie Walter. From the giant corporate monitor to the smartwatch, there are a huge number of ways that users can access information online today. This is a challenge that every web and app designer currently faces. With the pervasiveness and diversity of mobile devices, as designers we need to cater to the variety of screen sizes. Choosing with insight can empower you to plan and execute your designs with better aim, purpose and results. The differences between responsive and adaptive design approaches spotlight important options for us as web and app designers.