What is responsive design?

Responsive design refers to the process of making websites adaptable to all devices and screen sizes in terms of both form and function—because 80% of users won’t use a website that doesn’t work.

Responsive design considerations

Slow connections

More than half the world still doesn’t have an internet connection, let alone a fast one. Although support largely depends on the target audience, optimizing websites for speed is still advantageous for two reasons:

1. Search engines will demote websites that don’t load quickly. This applies to both mobile and desktop searches.
2. Websites that don’t load in under four seconds run the risk of losing 25% of their visitors.

Prioritizing features and content on smaller screens

When we think about mobile design, we wonder how we’ll fit all the features and content onto a small screen. It can seem daunting—but it doesn’t have to be. By thinking mobile-first, we can prioritize features and content to deliver a reduced layout (not to be mistaken for a reduced experience).

When we consider how awkward browsing on a mobile device can be, it’s easy to understand how a majority of users visit with the intention of finding basic information or completing a relatively simple task. Social media users, for example, might only visit to check their notifications or scroll their feed.

With this in mind, a mobile-first approach to responsive design allows designers to think about what’s really necessary for the design to function, leaving more complex actions to be completed on a larger screen, or accessed via an off-canvas menu.

Making it fit vs. making it work

Providing a reduced and less-ambitious experience on mobile allows designers to focus more of their time and resources on usability and accessibility. This is especially important considering mobile websites are notoriously more awkward, as users typically interact with taps rather than clicks.

Because of this, UI designers need to consider the size and location of tap targets, as well as the number of interactions required for the user to complete their task.

Responsive design breakpoints

Responsive breakpoints are specific milestones on the screen size spectrum that may sometimes reap special attention due to their hold on the market share. In 2018, the most common screen sizes include:

• 360×640 (small mobile range of mainly Android devices): 22.6%
• 1366×768 (average laptop): 11.26%
• 1920×1080 (large desktop): 8.29%
• 375×667 (iPhone 6-8): 5.05%
• 1440×900 (average desktop): 2.27%
• 720×1280 (large mobile): 1.73%

Despite the common responsive breakpoints mentioned above, it’s recommended to cater for all devices and screen sizes, especially since these statistics will change over time.

Also, most desktop users don’t maximize their browsers (meaning their viewport size could be random), highlighting the importance of both fluid design and responsive design. Fluid layouts will expand and shrink to any screen size as needed, including all size variations in between the common responsive breakpoints. Screen design tools such as InVision Studio, Sketch, and Figma all include responsive resizing features that allow for the design of fluid components.

Screen resolution and load times

Considering that both users and search engines dislike slow websites—yet high-resolution devices demand large images—we have three solutions:

1. Include fewer images.
2. Export assets as SVG instead of JPG/PNG.
3. Only serve high-resolution images on high-resolution devices.

Including fewer images is an easy way to optimize load times on mobile. But what about SVG assets? In what scenario can we use SVG instead of JPG or PNG?

SVG images are resolution-independent because they’re a vector format constructed using mathematical equations that allow the images to scale in size without losing quality. When images contain no bitmap elements, they can be exported as SVG and implemented for all screen sizes and devices with ease, despite their resolution.

When images contain bitmap-like qualities (i.e. textures or photographic elements), they need to be exported as either JPG or PNG formats (JPG for large images that need to be compressed, PNG for images with transparent elements). This introduces the issue of high-resolution devices that render images at two or three times the normal amount in an effort to improve visual quality. While the obvious solution is to export assets at three times their ordinary size (@3x) to cater for devices with the highest resolution/pixel density, this unnecessarily increases load times for older devices unable to render images in a higher resolution (@1x).

Luckily, all screen design tools allow designers to export assets in varying degrees of resolution, most notably @1x, @2x, and @3x. Design handoff tools like InVision Inspect, Zeplin, Sympli, and Avocode make the exporting workflow painlessly easy.

Responsive design best practices

Mobile traffic in 2018 (so far) accounts for 52.2% of all traffic (+1.9% from 2017). By taking a mobile-first approach to responsive design, designers can deliver a progressive experience across all devices and screen sizes, prioritizing mobile as the majority (and growing) medium. For websites that already exist on the internet, we can also take a data-driven approach, optimizing for the most common devices first.

Other responsive design and/or mobile-first best practices include:

• Avoid image-heavy layouts.
• Reduce the number of form fields.
• Remove unnecessary features.
• Prioritize common navigation items.
• Include a link back to the homepage.
• Don’t force users to dismiss unsolicited content.
• Don’t force sign up or other unnecessary user flows.
• Implement search to allow users to fast-track to their destination.
• Design tap targets at at least 44px² squared for optimal usability.
• Try to include interactive elements in the center of the screen.
• Avoid complex interactions; simple taps work best.
• Although it’s not common, consider landscape orientation.
• Design for the “in-betweens,” not just the common responsive breakpoints.
• Make use of design handoff tools to communicate invisible UX (when a form field is specifically an email field, for example).

Size me up and watch me go

Responsive design goes way beyond “making it fit.” In fact, the best responsive websites are those that offer a more modest experience, prioritizing primary objectives while gracefully tucking secondary objectives away as needed. Combined with everyday responsive design usability tips, this enables designers to create future-proof websites that will work on all devices and screen sizes; even those that don’t exist yet, or are on the verge of becoming more commonly used.

Design for every major breakpoint using InVision Studio—and utilize responsive resizing features to make artboards adaptable to all the in-between screen sizes.

*source : https://www.invisionapp.com/defined/responsive-design

What is adaptive design?

Adaptive design is a user interface that’s adapted to different screen sizes. It consists of multiple fixed layouts where the size most closely associated with the user’s device is rendered—whether that’s a phone, tablet, computer, or something in between.

Adaptive design vs. responsive design

Adaptive design is similar to responsive design in that both systems look for a device’s size before rendering the content. However, adaptive design is based on a fixed layout: It’s not moving the content around based on the size of the device, but rather loading a specific design for that specific device.

An adaptive design usually caters to the six most common screen widths: 320px, 480px, 760px, 960px, 1200px, or 1600px. On the other hand, responsive design is based on a dynamic layout, and fitting the content to the screen regardless of its size.

Let’s break this down even more. Say there are three separate devices rendering the same web page: a desktop, tablet, and a mobile phone.

For an adaptive design, we could create three different layouts for each of the devices. Or we could have two layouts: one for mobile, and one for the desktop/tablet. The resolution for the desktop would probably be wider than the tablet, but we could reuse it in a pinch.

For a responsive design, each one of these devices would have a design that’s dynamically loaded and displayed, and would fit all screen resolutions. That means one design would cater to all devices, but they wouldn’t look the same. And they might not be optimized for each specific resolution.

There are definitely trade-offs for either implementation, and the execution is very dependent on the situation.

Advantages and disadvantages of adaptive design

Adaptive design lends itself well to being completely optimized for the current device. Irrelevant data—whether that’s images, frameworks, or API endpoints—is moot. The advantages of adaptive design can be huge, especially if you’re in a position where you can optimize everything.

Advantages

One of the biggest strengths of adaptive design is that the content is customized. Since it’s created for your exact device, it feels more relevant. This is especially true in comparison to a responsive site, which is not designed specifically for that device. Let’s look at a few examples.

The new iPhone X, XR, and XS were introduced without physical home buttons on the bottom of their screens. Because of this, there’s a larger area of padding needed to accommodate the new design convention that’s introduced by the OS. An adaptive design would be customized to the new specifications, and, since you know exactly what device you’re targeting, optimized for a better performance—making it faster.

At a deli, the self check-out system runs on a specific touchscreen tablet; the same check-out process applies to mobile users. With an adaptive approach, you’d have two different designs: one for mobile, one for the in-store tablet. This would allow you to create a unique experience for each. The in-store tablet might not need a menu, logo, log-in, or accounts that the mobile site would warrant. Both solutions can be customized directly to the audience and the device.

Disadvantages

The biggest disadvantage of adaptive design is supporting multiple designs. Depending on how big your footprint is, and how many iterations of the experience you’d have to create, it might take a small army to support it. You would need to design, build, and support each experience. If you’re a small team or lone wolf, this would be a large task that might not be worth tackling.

You could also leave users with non-compatible designs that are stuck in the middle. For example, the design for a medium-sized tablet might default to the nearest size, which could be a mobile or desktop display. This could create an odd experience and might not work well for the user. (Tip: Giving a user a toggle between the two modes might be a good way to empower your user to self-correct the display.)

Finally, there could be concern for duplicate content when it comes to SEO and Google reading your domain. If the content for your multiple sites lives at something like a m.domain.com or a t.domain.com URL, there’s a possibility that Google could penalize your rankings because it’s reading the same content in multiple places on your site.

Identifying if adaptive design is right for you

So how do you decide if an adaptive site is right for you? When you’re considering which to use, it’s easy to select a responsive design solution and call it a day. But an adaptive design could offer a better user experience and—depending on how many devices you need to support—be less maintenance for you to design and build.

New build or existing site

If you’re retrofitting an existing site, adaptive design might be an easy way to bring the site into other breakpoints or devices. This would allow you to cater the content to a few different devices without having to invest in a fully-responsive framework.

If you’re building a new site, adaptive design could still be worth investing in; you just need to consider a few more things.

Look at your current traffic

Is your data dominated by a few specific devices or resolutions? Or are there a ton of different ones? If your current traffic is dominated by a few devices, this could be a prime adaptive design candidate. You can hone in on a few specific dimensions and create a really refined experience for those users.

On the flip side, if you have a ton of different devices on your site, your solution might be better suited for responsive design.

Consider your target devices

If you’re designing for a fixed set of hardware (POS systems, flight kiosks, mobile e-commerce, etc.), adaptive design could be a good solution. Since you’ve eliminated the variables that come with multiple-device support, you’ve freed yourself up to concentrate on the best design for your hardware.

Save time and money right from the start

You want your user to have a smooth product experience—but what’s the most efficient way to go about this important step?

With InVision, it’s easy to share prototypes in order to quickly gather meaningful feedback. This empowers your team to test and learn on multiple devices, and iterate rapidly as the project evolves. Once you’ve got buy-in, take your design to high fidelity with the screen design power of InVision Studio. No matter where you are in the design process, InVision is there to help.

source : https://www.invisionapp.com/defined/adaptive-design