Justinmind

BLOG

Expand your prototyping knowledge

Choosing a web design: Responsive Vs Adaptive

Choosing a web design: Responsive Vs Adaptive


Responsive web design Vs Adaptive web design: which should you choose? Today we’re discussing the prototyping throughout the design process to find the best mobile solution for you.

In our multi-device, multifaceted user society, we face increasing pressure to keep users happy (and connected), all the time: no matter where they are or what they’re doing. Luckily, we have a variety of tools at our disposal that help us to keep on top of this. But with all the options out there, it can sometimes get a bit overwhelming. The design concepts of Responsive and Adaptive are quite different, so how do you pick the most suitable? Well, it totally depends on you and your business, of course. Why not try finding your solution through prototyping, where you can test both of the designs out early on.

It seems that sometimes we interact from different planes of understanding and we get lost in the specifics. So, let’s take things one step at a time. First things first: let’s agree that responsive sites and adaptive sites are similar in that they both change appearance based on the browser environment they are being viewed on—they both intend to make your web page look good on multiple devices (desktops and mobile devices alike). But, let’s be clearer: whilst responsive websites respond to the size of the browser by fluidly adjusting the placement of elements on a web page to best fit the available space, adaptive websites adapt to the width of the browser at specific points, based on the size and capabilities of each device. Responsive Vs Adaptive: this debate keeps coming up in web design conversation, but there is no straightforward answer. Let’s take a look for ourselves.

The origins of Responsive

Responsive web design (RWD), accredited to Ethan Marcote, describes a website’s content and layout appropriately designed to fit the screen of given devices. This design type is achieved by using CSS media queries and HTML to resize, hide, shrink, enlarge, and/or move the content to make it look good on any screen. RWD features include fluid grids, flexible media, and breakpoints with a fluid layout between them.

responsive-web-design-interactive-prototyping

We’re living in the days of mobile-first, and we can’t always anticipate which device our users are going to use. As a result, a staggering number of today’s newer sites use responsive web design in order to cater to the multitude of users of today. But why should you use responsive?

  • Readability: Responsive delivers a single design that has slight variances from device to device. The intention is to offer an overall universal look and feel without users having to zoom in and out of differently sized screens on their various devices.
  • Fluidity: in Responsive design, all components buttons, menus bars, images etc. are automatically scaled downed in order to respond suitably to the design features of each device. This feature makes for an unchanging experience no matter which device you’re viewing a design on.
  • Consistent and complete experience: we know that it’s no longer enough to simply make sure your web content fits on a small screen—’mobile first’ is the way forward, so let’s keep it classy. With Responsive web design, the content, like the layout, remains consistent through all devices. Users are lazy, so we need to bring the information to them. When users can access all the information, across all mediums if and when possible, they get the bigger picture: a consistent and complete user experience. Additionally, as users are able to share their web content more easily from any of their devices, shared expectations will increase.
  • And with that consistent approach, let’s talk about a really cool feature of RWD: the singular URL. Responsive design means that you only need to have one URL that can be used on all devices, which means that Search Engine Optimization (SEO) only needs to be managed once because content will not be changed from device to device. So what does this mean for users? Well, imagine if your information was consistent from device to device and easy to read! Lower bounce rate anyone?
  • Responsive web design is cost effective, in comparison with Adaptive: RWD has a long life span, does not require constant rework and it’s easier to set up for rebuilds.

Bonus: RWD is super easy to implement in your interactive prototypes with Justinmind! To learn how to design responsive prototypes with Justinmind, click here.

Responsive: what’s the catch?

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.

Here’s the thing: Responsive requires more work. To make sure that the webpage fits each screen that users access, you will need a substantial amount of programming and coding. And then there’s the effects on the user and their experience. RWD mixes up content in each screen so that it can fluidly fit everything to the size and shape of the device’s window. Taking special care of the visual hierarchy of the design, this is also true for Adaptive, as it is shuffled around, as well as whether all that content is suitable for mobile devices is key. Oh, and be prepared for longer page load times and incompatibility with older browsers.


Download Justinmind today and create your best mobile prototypes yet!

DOWNLOAD FREE


Design thinking with Adaptive

Adaptive web design (AWD), the term coined by Aaron Gustafson, describes content authored and layout designed for distribution across multiple channels, media, products and interfaces. This design is achieved through progressive enhancement, detecting the device, and static layouts.

adaptive-web-design-interactive-prototyping

As explained on VenturePact: “AWD 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: 320, 480, 760, 960, 1200, and 1600”. The article goes on to add that Adaptive can be a useful way of making an existing website mobile-friendly, as it gives the designer more control and freedom over how to place elements in each device. Let’s take a look at how this design type could work for you:

  • Adaptive web design makes room for a tailored UX, with individual devices treated as unique mediums, and unique designs: ‘device-first’. As Carrie Cousins points out: “The ‘magic’ is in that the device and device-specific features are detected and a website’s original layout and content are served to the user based on that information. The result is a website custom-made for the user’s device.”
  • Fast page loads are common in AWD because only the essential elements are loaded on mobile devices.
  • Existing sites don’t need alteration, the layout is already set up!

Bonus: Adapative web design can also be worked in to your Justinmind prototypes! To learn how to design adaptive prototypes with Justinmind, click here.

The downside of Adaptive

As Adaptive web design requires advanced knowledge of web development for implementation, preparing multiple page-layout templates and testing across target, can can be a rather costly and time consuming concept to work with, as well as resource demanding. Making enhancements and modifications to multiple layout templates can be uneconomical, and the structure can be difficult to manage when it comes to multiple views. Due to the need to manually prep each design on each device, Adaptive web design “can sometimes result in a less consistent cross-device experience, than say with Responsive design.”

Nevertheless, however complex and expensive Adaptive can be, it’s a much more effective way to reach the broadest mobile audience.

The best of both worlds

Sometimes simple terms can represent complex concepts, so let’s try not to get confused.  There are no shortcuts to whichever web design technique you decide to use—both require the work that comes with creating a site that’s essentially one-size-fits-all. It could be argued that Responsive doesn’t give the designer as much control as Adaptive, but generally requires less rework to both build, sustain and modify as needed.

If neither of these sound right for you, or you would ideally combine the two methods: why not try Redaptive web design! Whatever you decide, consider incorporating it into the early stages of the design process,, for example the prototyping stage, so that you can really test it out before making the final end product. Download Justinmind today to create responsive and adaptive prototypes!download-justinmind-prototyping-tool-banner-1

Emily Grace Adiseshiah

About the Author

Emily is Marketing Content Editor at Justinmind

Comments are closed.