Following the rolling out of its big update on the 21st of April 2015, which gave mobile-based platforms a higher ranking, Google has ever since recommended RWD (responsive web design) to users. Even though it does not show why one should choose a responsive design, it is only that a website should be mobile-friendly, with ideal performance and UX.
This article discusses the advantages and disadvantages of adaptive against responsive design about UX and performance.
Amongst the biggest center of contention, we may have, at one point or another, come across since mobile invention is if you must decide to create responsive AWD (adaptive web design) or develop a standalone mobile website (with a mobile URL). It would be great to leave out standalone mobile sites for discussion purposes since most businesses and designers don’t seem to prefer that, considering that they require being developed separately, thus increasing the upfront and maintenance expenses.
Responsive And Adaptive Design – How Do They Differ?
In simple terms, responsive can be defined as fluid to adapt to the screen’s size regardless of the targeted device. Responsive applies CSS media search queries to alter styles depending on the target system like width, display type, and height, among others. Only one among these is required for the website to adapt to various screens. On the contrary, adaptive design applies fixed layouts founded on unresponsive breakpoints after initial loading.
Adaptive works in a manner that it identifies the size of the screen and loads the right layout for the same – typically, you can craft an adaptive site based on the six mutual screen widths:
On the outside, it seems that adaptive design entails more work since you will need to create layouts for 6 widths, minimum. Yet, responsiveness is more intricate considering that incorrect media query usage (or failing to use them) can result in performance and display issues.
In essence, the latter has elicited heated debate over the last few years. The main bone of contention here is that most sites offer the complete desktop version, which negatively impacts site speeds significantly regardless of whether it doesn’t load on the mobile platform. You may apply media queries to counter this, but you should be prepared for some trade-offs as a responsive website won’t load faster than a steadfast mobile site.
Why You Need An Adaptive Design?
Adaptive is essential for retrofitting your current website to make it mobile-friendly. It enables you to manage the design and create for certain various viewports. How many viewports you decide to design depends entirely on you, the company, and your budget. However, it offers you some level of power – for instance, over the layout and content – which you may not enjoy in responsive design. Typically, you would start by designing a viewport for low-resolution and continue to ensure the design does not become content-controlled. As observed earlier, it is common to design for 6 resolutions. Yet, you can make an ideal decision by going through web analytics to find out the popularly used systems and choose to design for the viewports.
It is also OK to design a fresh adaptive site. You will also need to begin designing viewports for the lowest resolution and work things through. Apply media queries to enlarge the outline for much higher resolution viewports. But, if you design viewports for various resolutions, you will realize that your layout “jumps” during window resizing.
It can prove cumbersome designing and creating a site with adaptability for various viewports; hence, it is often applied for retrofitting purposes.
Why You Need A Responsive Design?
Most new sites use responsive design, simplified for developers and beginners in the web design field, courtesy of theme availability and accessible via CMS systems like Joomla, WP, and Drupal. Responsive does not provide you with more control than adaptive, but it requires less effort to develop and maintain. Also, the layouts in responsive design are fluid, whereas will and use percentages to deliver a much more fluid feel during scaling. But, they can also lead to jumping during window resizing.
By using responsive, you can design with all outlines in consideration, complicating the process, making it somewhat difficult. Therefore, it implies that you must emphasize creating a mid-resolution viewport and apply media queries to later change from low to high resolutions. Thus, it is often appropriate to utilize responsive design for newer projects and adaptive design for retrofits.
Things to Consider
As observed above, responsive sites are susceptible to site speed issues if not implemented appropriately.
Also, a responsive design demands more coding to ensure the site fits each accessible screen. But, the extra effort is contentious (unlike in database design) because adaptive design demands that you create and maintain each layout CSS and HTML code separately. Making adjustments to adaptive sites is more demanding as you will probably need to guarantee everything is functional sitewide (including content, SEO, and links) during execution. It would help if you also reflected the user familiarity. Since responsive principally waddles about the content to be accommodated within the device window fluidly, you should consider the design’s visual hierarchy as it turns around.
As Nielsen Norman Group puts it, “More often than not, responsive design solves a puzzle – the best way to restructure features on bigger pages to fit smaller, longer pages, and vice-versa. But, making sure that the elements fit on a page isn’t sufficient. For a successfully responsive design, it should also be operational at all screen sizes and resolutions.” Thus, there aren’t any shortcuts to any strategy you choose to apply – both of them require the work involving the creation of a site that is fundamentally all-fitting. A responsive design includes a small edge, sin you won’t, moving forward, require spending too much time on-site maintenance.
The most important thing here is giving priority to your audience regardless of the design technique you choose. The moment you understand who your audience is and the devices they use to access their sites, it will be easier for you to create a design with their needs in mind in terms of content, layout, links, etc.
Responsive design is currently the go-to technique in design, and it is believed that about an eighth of websites are currently using responsive, with little to no proof on adaptive usage. The responsive adoption rates are increasing faster, and they are also thought to have equaled the standalone mobile site usage levels. Bearing that in mind, it would be safer to conclude that responsive is typically the most preferred design technique based on the more demanding work associated with adaptive design.