12 Dec 2019

The Pros and Cons of Responsive Design

Before building a website, it’s important to understand the implications that design choices will have down the line. Once the site is live it becomes much harder to change the site structure, so it’s crucial to make an informed decision at the outset about what type of website to build. There’s no one perfect solution; the choice about whether to build a site with responsive design or adaptive design involves site owner programming experience, time, business goals and more.

What is Responsive Design?

Responsive web design is a site design strategy that allows the web pages to automatically render to whatever screen size the viewer is on. This discipline has become more popular in recent years because of the proliferation of different internet-browsing devices. People are viewing web pages on desktops, laptops, mobile devices of varying sizes, tablets and more. 

Benefits of Responsive Design

1. Time Efficiency

Setting up the website to automatically render to all device sizes on the backend is a much more time-efficient solution than serving different pages to each device type in most cases. Generally, adaptive design takes at least twice as long to set up and can take up to five times longer.

2. Cost Efficiency

For site owners considering hiring a developer to build their site, responsive design is almost always cheaper. This is logical: most developers charge by the hour, hence a project which takes half as long or less will cost half as much or less. Additionally, the web development skills involved in building a responsive design site are less demanding than building an adaptive design site, so the hourly rate is usually lower.

3. Guaranteed Performance

There tend to be fewer bugs with responsive design relative to adaptive design. Since responsive design is a well-studied discipline, and many out-of-the-box platforms like WordPress and Shopify use it, a site owner can be more sure about the performance of the site. For this reason, responsive design is often recommended to novice programmers or people building a website without much technical knowledge.

Drawbacks of Responsive Design

1. Unable to Optimize for Specific Devices

With responsive design, there is a set template that adapts to each device. This means that a site owner who wants to show a different layout to desktop users than mobile users is unable to do so. This can decrease conversions because information isn’t displayed in the most UX-friendly format.

2. Harder to Fix Errors That Do Occur

Since responsive design is supposed to automatically update to screen size, when an error occurs on a specific device it can be technically challenging to code in a fix, since the fix has to relate to the general template and not to a specific size. This challenge is more apparent when coding a custom-designed website. If you’re using an out-of-the-box service like Shopify, their tech support team can assist with issues like this.

3. Decreased Load Speed

Responsive design is built on an HTML5 structure which tends to use significant CSS resources. CSS delivery is well-known to slow page load speed. The only way around this is to optimize CSS delivery with various programming tricks like minification and “lazy loading”. These tricks are beyond the technical competence of most website owners, so most of these owners will experience decreased load speed as a result of their responsive design.

Final Thoughts

Like any high-level website structure decision, there is no right answer for whether responsive design is right or wrong for every site owner. For site owners with novice-level programming skills, I would recommend an out-of-the-box responsive design backend like Shopify. This will reduce or remove altogether the need to think about coding in design elements. For more experienced developers, adaptive design can optimize certain layouts and help your site stand out, since the vast majority of sites built today are built with responsive design.

Guest Author: Calloway Cook is the Founder of Illuminate Labs, an herbal supplements retailer.