Primarily due to the ever-present nature of mobile tablets and smartphones, adaptive vs. responsive design has been a hot debate in the last few years. Because companies now need to build websites to work on smartphones, tablets, and standard laptops and desktops, understanding adaptive vs. responsible design is incredibly important.

Responsive

Responsive design means the layout changes with you. In this way, it is often described as the best viewing experience. Using fluid grids, the layout will change sizes with you as you resize the window or switch from a tablet or smartphone to a desktop. By using percentages, all of the layouts retain the same percentage, resulting in the same layout percent across devices. Regardless of the device you are using, the screen will look the same and it will instantly fit the size of that unit. Since you only have one layout size that you build, responsive often requires much less upkeep and changes along the way. It takes longer to build and design – mainly due to CSS – but it is more flexible. Many developers would say to start in the web browser and go from there.

Adaptive

Earlier on in web design, adaptive layout design was the way to go. It uses predetermined screen sizes – measured in pixels – whereas responsive uses fluid percentages. Rather than having one design that will resize, adaptive requires specific sizes for each device – one layout size set for a tablet, one for a smartphone, one for a desktop, etc. Most designers would consider adaptive the easier one to design. Once you do one of the layouts, you can tweak the sizes for the other device layouts. Adaptive is easier to design and develop than responsive, requiring less extensive CSS.

Why It’s Important

Knowing the difference between adaptive and responsible design is necessary not only for designers and developers, but also for anyone working on or with a web platform for a company. It is important to note that both designs work on multiple screen sizes. The building processes differ, as do the actual resizing actions. Responsive requires only one design that will then change to meet any device size need – making it beneficial when new screen sizes release – while adaptive developers must create a new design layout for each device.

Which To Use

Nowadays, a majority of designers and developers would argue that responsive design is the better way to go. It allows instant functionality across all screen sizes – something very useful as new screen sizes (4K and 5K, for example) come to life. With the constant expectation for a website to also function on a mobile device or tablet, responsive design also automatically works there, whereas adaptive requires a new layout size.

The question of responsive and adaptive is understandably one that requires a lot of discussion and research when developing a new website. Because a website must work on a phone, tablet, desktop, and laptop, it becomes very important to select the right layout design. While most would say that in 2015, responsive design is more popular and the way to go, there is no clear-cut answer for everyone. For instance, many smaller companies and sites still prefer adaptive. Therefore, it becomes vital to research the difference between the two, as each one has benefits and downsides.