Blog

Designing a Website: Responsive or Adaptive?

As a web developer in 2015, it’s safe to say you’ve heard people saying that we’re now in a “post-PC” world. For those who do not move within web development circles, this statement may seem weird. After all, how can one say these are post-PC times when there are still a good number of PC users all over the world? Well, the term simply means that these days, about half of the traffic every website gets comes from an array of mobile devices, and PC users are expected to become a minority on the worldwide web very soon.

Dealing with the Change

This shift in user behavior has forced web developers across the globe to adjust their practices. Over the years, they had to adopt different techniques and apply different strategies to keep up with the changes in user requirements. Today, the focus is on adaptive and responsive design techniques, which are collectively known as a “One Web Approach.” The term “One Web” means that the approach makes the same information and services accessible to users, regardless of what device they use. The biggest advantage of the One Web Approach is that it helps ensure that your website will continue to be accessible whatever new screens are invented in the future.

The Difference between Adaptive and Responsive Designs

Okay, first things first. Users don’t really care what kind of design you use in your websites; they’re not going to ask or check if you have a responsive or adaptive design and then make a decision whether to proceed to the site or note based on the answer. What matters to them is that they’re able to quickly access your site and easily navigate through it whether they’re on a desktop or mobile device. Responsive and adaptive designs can both meet this challenge, but there are subtle differences that could dictate your decision as to which design to adopt.

Responsive Web Design (RWD)

It was Ethan Marcotte who first coined the term and introduced it in an article with the term as the title. The design begins with the incorporation of CSS3, the @media rule, media queries, and fluid grids using percentages for building a flexible foundation. These and the use of flexible images, EMs, fluid type, and flexible videos enable your website to adjust its layout according to the device, environment, and user agent. The RWD is simply defined as having the ability to “fluidly change and respond” such that it fits any screen size.

Adaptive Web Design (AWD)

This term was coined by Aaron Gustafson and introduced in a book with the term itself as the title. The design uses several components of progressive enhancement to place more focus on the user rather than the browser. Using CSS, JavaScript, and a predefined set of various layout sizes, the approach is expected to adapt to whatever device is detected. There are generally three layers that constitute the adaptive design approach: content layer, presentation layer, and client-side scripting layer.

Adaptive Design for Websites

The adaptive design is generally constituted by three layers: content layer, presentation layer, and client-side scripting layer.

The content layer is known for its rich semantic HTML markup. The presentation layer is composed of CSS and styling. The client-side scripting layer consists of JavaScript and jQuery behaviors. In an interview, Gustafson stated that the concept of AWD is essentially the same as that of progressive enhancement, except that he wanted a term that encompassed what the concept is really all about, which was to create rich and adaptable user experiences tailoring themselves to the specific device used. Simply put, AWD is defined as changing to suit a set of screen sizes.

Okay, so let’s make this a bit easier to understand. A responsive design uses a single layout that changes according to the size of the screen on which a website is viewed. It can be likened to a ball that has the ability to shrink or expand depending on the size of the hoop through which you shoot it. An adaptive design, on the other hand, uses a number of different layouts for the different screen sizes. These layouts are essentially placed on standby until a user visit the website; the website will then determine which particular layout fits the screen size used and then deliver that layout. That’s how the two designs differ from each other.

Responsive vs. Adaptive

Now that you know how the responsive and adaptive designs differ, you may start wondering which one suits your needs best. The best way to determine that is, of course, to find out what the advantages and disadvantages of each type of design are.

Advantages

The biggest advantages of using an adaptive design for your website are the following:

  • The work involved is generally easier than that of planning a responsive design. You simply need to design and develop one layout for each viewport you believe your website needs to plan for. As a general rule, it is best to plan for six viewports—one low and one high resolution layout for smartphones, tablets, and desktops/laptops, respectively.
  • The development process is quite simple. It is very similar to developing traditional websites. You begin by developing at the mobile low resolution viewport and then work your way up to the desktop high resolution viewport.
  • The approach is very useful for when you are retrofitting or when you are designing complex web apps.
  • It offers more control over the layout compared to the responsive design.
 

As for the responsive design, the biggest advantages are the following:

  • It is more convenient to implement and maintain, since you are working on only one layout.
  • It is more flexible than an adaptive design. This is, after all, what the responsive design is all about—the ability to effectively display a single layout on all types of devices and screen sizes.
  • It provides a website with quicker loading time. Since there is only one version of the site layout to load, a responsive design allows for faster loading.
 
Responsive Website Design

A responsive website generally has faster load time than an adaptive one.

Disadvantages

The biggest disadvantages of using an adaptive design for your website are the following:

  • It is less flexible than the responsive design. The layouts are designed and developed for predetermined screen sizes, so when a new screen size comes out, the layouts may not work as well on those screens. You may have to create another layout each time a new screen size is introduced on the market.
  • Adaptive sites are generally slower than responsive websites. An adaptive site will have to load all possible layouts whereas a responsive site only needs to load a single layout and then adjust it according to screen size. This means that an adaptive site will usually take more time to load than a responsive one.
  • Implementation and maintenance is more complicated, as you’ll have to work on several different layouts.
 

The biggest disadvantages of using a responsive design for your website are the following:

  • The design process isn’t as clear-cut as that of adaptive design. You’ll have to keep all existing viewports in mind while being careful not to have your design leaning towards a particular viewport. You’ll also have to pay close attention to the CSS and organization to ensure that the site works well regardless of screen size.
  • The testing phase is often a hassle, and you may have to go through a lengthy trial-and-error process to make sure the site layout doesn’t look like puzzle pieces that do not fit perfectly.
 

So, which design should you adopt for your website? Should you go responsive or adaptive? Well, you may want to consider the fact that most websites these days use the responsive design primarily because they are aiming for faster load times and the security of knowing their site will continue to work even as various careen sizes and devices come and go. It may take more time and effort to put together, but most web designers and developers consider the overall result well worth the time and effort.

If you do decide to go for an adaptive design, though, note that you can approach this design either from the client side or the server side. The client side approach has the advantage of not requiring you to rebuild your site from scratch. If you are an expert developer, then you’ll also appreciate the fact that this approach allows you to target specific devices and screen resolutions. The server side approach, on the other hand, allows for more customization and enables smaller mobile pages to load faster. It does, however, require you to make considerable changes to back-end systems and involve lengthier implementation.

If you are still currently having a difficult time with the basics of responsive web design, then you may not really be ready for the bigger challenge of adaptive design. But if you’ve mastered responsive design and are quite good with adaptive design as well, then it should be easier for you to determine which particular approach works best for your target site visitors. You may even be equipped to create a creative and customized layout for your website.

Posted in: Blog

Leave a Comment (0) ↓

Leave a Comment