Responsive design

Learn about the essentials of responsive design: what it is, the challenges of responsive design, responsive breakpoints, screen resolutions, and more.

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.