When it comes to web design, there are major differences to account for which affect development time, site management and how the site looks to visitors. Originally, sites were designed only one way and looked the same however they were accessed.
This was because websites were only accessed on a desktop or laptop computer at the time. Of course, things have changed considerably since this time and now websites are often accessed more than half the time on mobile devices with smaller screens than the traditional laptop configuration.
The two current schools of web design use the terms responsive design and adaptive design. Let’s look at the difference between adaptive and responsive web design and how they can be used in different ways to achieve the result the designer wants.
Responsive Web Design
With responsive design, a single page is created that is intended to look good on any device that accesses the web page. The design of the page and certain elements move and morph around the page canvas depending on the constraints of the screen width and height. The screen size and device type get detected and this is how a design will respond by adjusting what is shown.
Problems with Responsive Design
One example of a responsive design issue is how a traditional two-column blog layout on a desktop computer becomes a single column layout on a mobile device because displaying both columns side-by-side would make the content illegible. The 2nd column – often called a sidebar – is pushed down to sit underneath the first content column which means that visitors must scroll all the way down until the main content has finished if they wish to view the information stored in the sidebar.
One issue this creates is for affiliate sites that place a disclaimer about their affiliate commissions in the sidebar. Even when it’s positioned at the very top of the second column, on a mobile device it usually won’t be seen because it’s so far down the page as to go unnoticed.
Adaptive Web Design
Adaptive web design is a little bit of a return to the bad old days of web design where multiple page designs had to be created to manage the deficiencies of various web browsers. Some would interpret page code incorrectly whereas others were incapable of understanding newer code at all which resulted in pages looking very different (or breaking the layout) in some browsers.
With adaptive design, designers aim to get the most out of desktop/laptop, tablet and smartphone displays by offering up (usually) three different designs. The website determines the type of device used and displays the appropriate one.
Problems with Adaptive Design
Adaptive design is useful when designs look good on one type of device and completely unusable with another device type, but the site owner still wishes to retain the original design. In this situation, multiple page designs must be maintained with a different layout for each. Not only is this more work, but there is no standardisation. For instance, a smartphone layout might look good on a 6-inch phone screen but not so good on a 4-inch older phone. Where do you draw the line on an applicable design? It’s not easy.
There is a business case for both responsive and adaptive designs. It’s even possible that an adaptive design has responsive elements within it too. Designers have to choose the right approach to best meet their client’s needs and go from there. In most cases, this will mean a responsive design but adaptive designs still have their place too.