Responsive vs Adaptive Sites?

Google has always recommended responsive web design (RWD), especially after rolling out a big update on the 4/21/15 which ranked mobile-friendly sites higher.

It doesn’t specify in the update that you must use responsive design though, just that a site be accessible on mobile, with good UX and performance.

With that in mind, let’s examine the pros and cons of adaptive vs. responsive design with regards to performance and UX.

One of the biggest debates that we’ve seen since the rise of mobile is whether you should choose to develop a responsive, adaptive web design (AWD) or standalone mobile site (with its own m. URL).

For the purposes of this discussion, we’ll leave out standalone m. sites as it appears to be the least favorite solution for designers and businesses since they must be created separately (which accrues more upfront cost and maintenance costs).

So first up, what’s the key differences between responsive and adaptive design?

Put simply, responsive is fluid and adapts to the size of the screen no matter what the target device. Responsive uses CSS media queries to change styles based on the target device such as display type, width, height, etc., and only one of these is necessary for the site to adapt to different screens.

• Adaptive design, on the other hand, uses static layouts based on breakpoints which don’t respond once they’re initially loaded. Adaptive works to detect the screen size and load the appropriate layout for it – generally you would design an adaptive site for six common screen widths: 
• 320px
• 480px
• 760px
• 960px
• 1200px
• 1600px.

Why Use Responsive Design?

The majority of new sites now use responsive, which has been made easier for less experienced designers and developers, thanks to the availability of themes accessible through CMS systems such as WordPress, Joomla, and Drupal.

Responsive doesn’t offer as much control as adaptive, but takes much less work to both build and maintain. Responsive layouts are also fluid and whilst adaptive can and do use percentages to give a more fluid feel when scaling, these can again cause a jump when a window is resized

With responsive, you will be designing with all layouts in mind and this, of course, can confuse the process and make it quite complex. This means that you should focus on creating a viewport for mid-resolution and you can then use media queries to adjust for low and high resolutions later on.

So in essence, it’s usually better to use responsive for new projects, and adaptive for retrofits.

Considerations to Take into Account

As discussed earlier, responsive sites can suffer when it comes to site speed (if they aren’t properly implemented).

Responsive also requires more in the way of coding in order to ensure that the site fits each and every screen that access it. However, the extra work is debatable (compared to adaptive design) since adaptive design requires that you develop and maintain separate HTML and CSS code for each layout. Modifying adaptive sites is also more complex since it’s likely you’ll have to ensure that everything is still working sitewide (such as SEO, content, and links) when it’s time for implementation.

You should, of course, also consider the user experience. Because responsive essentially shuffles the content around in order to fluidly fit the device window, you will need to pay particular attention to the visual hierarchy of the design as it shifts around.

According to Amy Schade, “Responsive design often turns into solving a puzzle — how to reorganize elements on larger pages to fit skinnier, longer pages or vice versa. However, ensuring that elements fit within a page is not enough. For a responsive design to be successful, the design must also be usable at all screen resolutions and sizes.”

So there are no shortcuts to whichever technique you decide to use – both require the work that comes with creating a site that’s essentially one-size-fits-all. Responsive has a slight edge, as you won’t, going forward, need to spend an awful lot of time in site maintenance.

A responsive website changes the layout to offer an experience based on the device being used, especially ideal for mobile viewing.

A mobile responsive website includes design elements such as:

• Readable text without requiring zoom
• Adequate space for tap targets
• No horizontal scrolling

Websites not optimized for the smaller screens can experience a decline in their search engine rankings. This means that they are not getting found online.

To ensure your website offers an experience tailored to handheld devices without creating a separate app, you can now understand why responsive design is important as a mobile solution.

Responsive web design is not a shiny trend anymore, but more of a shift in the thinking behind building websites. The term was actually coined in 2010 by web designer Ethan Marcotte.

“Responsive web design offers us a way forward, finally allowing us to design for the ebb and flow of things.” -Ethan Marcotte

Having a mobile responsive website is not just another option—it’s a requirement!

Benefits of Mobile Responsive Design

1. The number one benefit of a responsive layout is the guarantee that any user on any device will have the best experience possible on your website. And, the most consistent.
2. Website responsiveness is also a great way to refine the content on your site, making sure that people using a mobile device are only seeing the most essential information.
3. With the Google algorithm update, a responsive web design increases visibility on search engines—because it is mobile-friendly. A site with an effective mobile experience will show up in search results above one without.

Why Responsive Design is Important for Business

• Increase reach to customers and clients on smaller devices (tablets & smartphones)
• A consistent experience that can increase lead generation, sales and conversions
• Analytics, tracking, and reporting can all be in one place
• Time and cost on-site content management is decreased
• Stay ahead of the competition (even 44% of Fortune 500 companies are not mobile-ready at this time!)