04 Aug Responsive Design and Adaptive Design

With more people accessing the websites on multiple devices, it is now important to make sure that your website is mobile-friendly. With a friendlier website, your target audience will enjoy better user experience (across devices) and therefore create/maintain happy customers (both potential and existing).

When developing websites on multiple devices, it is impossible not to discuss Responsive Design and/or Adaptive Design. However, these 2 terms are often confused and mis-used.

In this post, we shall attempt to help bust your mystery about what is Responsive Design, what is Adaptive Design, and the difference between the two.

Responsive Web Design (RWD) uses a fluid (percentages) grid AND media queries. Together with use of ems, responsive images, videos and typography, the content will respond according to the browser size or device screen size.

Some examples of RWD

Adaptive Web Design (AWD) uses media queries and load the website based on specific device sizes or breakpoints (eg. Mobile phones, tablets). In this, AWD adapts to the pre-defined device size that is detected.

Some examples of AWD

Differences between RWD & AWD

RWD will require more coding with the trickier use of fluid grids while AWD is more systematic with desired layouts based on the specified sizes. When using RWD, one also has to cater for the visual hierarchy of the design as the content shifts fluidly to fit the device window.

On the other hand, with AWD, there might be some device sizes that could be missed out during implementation. Do note that the number of sizes that are implemented actually depends on the budget that you might have. Also, AWD will be less flexible and include some maintenance. In situations where are new screen sizes that need to be included, the code will need to be updated to cater for them. Eg. With the launch of the iPhone 6+, some code might need to be updated to allow the website to load fine on the new screen size.

In case you are wondering, the 6 common screen widths are:

• 320
• 480
• 760
• 960
• 1200
• 1600

For customers thinking of implementing AWD on limited screen sizes, and who already have Google Analytics on their current website, what we suggest is to check the statistics to see which are the more commonly-used device and then design for the popular (target) viewports.

Afterword

With news that Google is working on an update to rank mobile-friendly sites higher on their search results, we foresee that RWD & AWD will be in higher demand. At the moment, Google has not specified that the website must be responsive or adaptive design – just that it needs to be a site accessible on mobile.