The difference between Adaptive, Native and Responsive Web Design

As covered in earlier blog posts, ’Responsive’ design is one of Affino’s key priorities for 2013. Affino already handles ’Adaptive’ design, but what are the differences and benefits of each of these methodologies? A key trend in current web design is that people are increasingly accessing websites via their mobile devices - i.e. smartphones and tablets. Where before desktop / laptop was king, now customers are much more likely to access a company’s services via one of their mobile devices. The 3 methodologies each set out to tackle this shift in behaviour, and each has its pros and cons.

Adaptive Design

This essentially means designing several different interfaces - each to tackle a different screen resolution - Affino currently allows you to design and target different interfaces / Skins for: Web | Mobile | iPhone | Android Phone | Tablet | iPad | Android Tablet. You can create as few or many Skins as you need to suit your purposes. You would start by doing generic Web, Smartphone and Tablet skins and then specific per platform. The interesting trend is that tablets are approximating laptop / desktop resolution - so for Comrz.com we currently only have desktop and smartphone variant Skins. The key benefit of Adaptive Design is that you can create a dedicated interface for each screen resolution / access device.

Native Design

This essentially means creating Apps - which means a different solution for every device. In doing this you can create the perfect environment for your customers - for each device, but obviously this means a lot of work, and a lot of overhead as platform software / firmware is relatively frequently updated, and you need to prepare various assets for each of the different mobile platform stores. Customers will also obviously need to download and regularly update your app to make use of it. Morevover, you still require a core website as that’s where most of these company-centric apps get their data from in any case.

Responsive Design

This methodology involves creating just a single fluid interface which expands and contracts to fit the various different access devices. There are numerous ingenious aspects to responsive design - how text and media re-size to fit, and the column / design element structure varies to accommodate the different formats - get used to seeing a ’Hamburger Menu Tray’ icon top left of the site. The key benefit of Responsive design is that you need only create a single interface which is beholdent to the generic web / browser standards and which thus has the lowest overheads. For Comrz.com this is the methodology we will be adopting, and we will essentially be designing the main interface to a tablet-style format - which re-sizes and re-arranges elegantly to accommodate smaller mobile resolutions too. Navigation will be tailored so that the left/right up/down tablet-style navigation is universally applicable, yet for desktop navigation will still be slick - whether you choose to use a mouse, trackpad or keyboard - for instance utilising arrow keys.