Showing posts with label Front-end. Show all posts
Showing posts with label Front-end. Show all posts


Mobile-First, Responsive and Adaptive design differences

Due to the amount of people who are using smart phones these days, people (
entrepreneurs) realize that they can expand their market if their websites can be used properly in both mobile and desktop. Because of this, the development of "mobile-friendly" websites came in and later on until this day it is commonly called responsive websites.

Due to the term "responsive" is being widely used these days for websites that has built-in mobile display. New developers get confused if they are being introduced to these other mobile design terms such as "adaptive" and "mobile-first".

In this topic we will clear that one out in order for us to have a better understanding on what type of websites we are developing.

What is mobile-first design?

Mobile-first design is a "development strategy" wherein you consider first how your website displays in mobile. This development strategy uses two different approach called "responsive" and "adaptive" design.

What is responsive design?

Responsive design is a technical approach where the developer is more focused on how the website element behaves in different device platforms by using specific CSS sizing unit or relative length such as percentage (%), vw (viewport width), vh (viewport height) . . and so on or certain display type such as flex.

This allows the website app elements to automatically adjust in any screen sizes without any delay. In some cases this approach is a bit slower in terms of performance since you will be using the same assets all over specially if you are browsing the website app using older devices. But hey! there are lots of ways to optimize this type of approach such as asset caching and proper data handling.

What is adaptive design?

From the word "adapt" meaning, something suitable for a new use or purpose. Adaptive design is sometimes misunderstood as responsive but they are totally different in terms of how they behave and being presented to the user.

In a simple explanation, adaptive design is a technical approach where you create different components that will render in different platforms or devices using media query or user agent. This type of design approach is quite expensive and hard to maintain because of different components that you have to look in to. But in most cases this is a lot faster compared to responsive because you will be using or rendering specific assets in a specific platform or device.

One good example of this is when you decide to provide better user experience to your users who are using older phones. That means you have to create a component and use lightweight assets so it can render fast in older devices.

Visual Presentation of Adaptive and Responsive design

Mobile-First, Responsive and Adaptive design differences

What to use?

This depends on the available resources you have but in most cases, responsive design is preferred by many due to these general reasons:

  • Google friendly
  • Fast development at lower cost
  • Single code base which means easy to maintain
Hope it helps.