What is adaptive design and why should I care?

Let’s start with a little bit of context.

Websites can be viewed on desktop and laptop computers (standard-size displays), tablets (smaller screens), and smartphones (the smallest screens). Unless the site has been carefully designed, the entire layout will simply be reduced in size on smaller screens, which can make it difficult to easily read page content, navigate, and scroll. To meet this challenge, two methods of designing and coding websites are gaining wide acceptance:

▪   Responsive design uses a single code base, cleverly designed to scale the website content according to the device’s screen size. Because there is a single code base and just one set of display templates, responsive design makes it simpler to create, test, and maintain the site, and it keeps the user experience consistent no matter the screen size.

▪   Adaptive design involves detailed consideration of each distinct screen size, often leading to development of multiple display templates. The display code detects the device first, and then uses the information to deliver the specific page content and navigation for that screen size, including both functionality and layout. For instance, it is possible to allow smartphone users to check on case status but not download software updates, although both functions would be available from a desktop.

Which one is better? It depends! If your web metrics show that your mobile visitors are using the website in very different ways than desk-bound users, it makes sense to invest in adaptive design. (And you can create an adaptive design for an existing website without changing the existing code, which is handy for a massively complex site that you don’t want to disrupt.) On the other hand, if users want to perform similar tasks on all kinds of devices (or you do not have web metrics showing different tasks being used more on different devices), you are better off using responsive design techniques.

With more users than ever accessing your support website from mobile devices, it’s important to deliver a great experience to them. We can help you decide whether your site would benefit most from responsive design or adaptive design — and help you (re)design it appropriately.

Click here for a description of our support website design services. Click here for an article that describes responsive design in more details (you will access a non-FT Works website).

Does your site use adaptive or responsive design? Please post a comment.