Chapter 6

A Quick Guide to Responsive Design

~ Daniel Schwarz

Author avatar (Daniel Schwarz)

What Is Responsive Design?

Responsive web design means to design websites that work well on mobile, tablet, and desktop devices, and according to Statista, mobile traffic is increasing significantly.

What does this mean? 🤔

It means, websites that aren’t optimized for mobile devices are likely alienating a frightening share of their users, since 80% of users say that they’ll disengage with websites that don’t work well on their device. Additionally, search engines actively demote websites that aren’t mobile-friendly in their search results, affecting SEO.

Does this mean that tablet and desktop users are less important? 🤔

Generally, mobile users are the majority, but tablet and desktop users are still very important. 83% of users want to be able to continue their handheld experience on a desktop device, where the usability is often much better. And besides, there are many websites — like ours — that are desktop-focused. So, in short, design for everyone.

Responsive App Design

Responsive design best practices can also be applied to native apps; as an example, those that are designed to work on both iPhones and iPads. In fact, the app industry seems to be moving towards apps that work — like websites – on mobile, tablet, and desktop, so we might see an upsurge in responsive app design in the coming months.

Create Fluid Designs

Fluid design means to design layouts that expand and contract to fit the device’s viewport. When layouts are fixed at a specific size, they’re very likely to undesirably overflow the viewport on smaller screens and appear too narrow on larger screens. In order to fix this we’ll need to design our layouts using both % units and max-widths so that they always fit handheld viewports without being too wide on desktop viewports.

Fluid web design

Reduce Friction

Responsive design isn’t just about making the design fit on all devices, it’s about making the design easy to use on all devices as well. Handhelds especially are very awkward (especially when typing is involved), so we’ll need to take accessibility and usability into account, focusing above all on small-screen friction. Reducing friction is important for desktop experiences, but it’s extra important for handheld experiences.

Leverage Mobile-First Design Best Practices

Reducing friction is easy when taking a mobile-first approach to responsive design, because it’s harder to simplify a desktop experience for mobile viewports than it is to elaborate on a mobile experience for desktop viewports. Designing mobile-first lets us address only what’s necessary, and then “scale up” to desktop much more comfortably.

Reducing friction is easy:

  • Prioritize key menu items
  • Remove dark annoyances
  • Remove visual distractions
  • Optimize tap target tapability
  • Remove inessential form fields
  • Focus on the primary call-to-action
  • Implement search and filter functionality
Mobile-first design example

Leverage Device Functionality

Mobile devices make typing tricky, but, we can compensate by leveraging device functionality such as GPS, biometric ID, bank card scanning, and QR code reading to drastically reduce the user’s typing requirements. Additionally, we can make it easy for users to start emails or call telephones by enabling links with special functionalities.

Consider making use of various device functionalities, because the best responsive websites and apps are those that simplify or eliminate awkward mobile interactions.

Responsive Breakpoints 2020

So, we’ve established that we need to design for all types of devices, and also that handheld designs should have much less friction; however, specifically which screen sizes should we be targeting? What are the largest screens and what are the smallest?

Well, according to statistics, these are the 6 most common screen sizes in 2020:

Responsive breakpoints 2020

Regardless, there’s no “standard website width” in 2020 simply because of the astonishing number of devices on the market today, and this also applies to apps.

We also have to consider that handheld users might view our interface in landscape orientation, and also, desktop users might not have their window maximized, so really, the size of their viewport could be anything — this means that our designs should also be optimized for all of the “in-betweens” and not only the most common screen sizes.

Check out these responsive design examples 👏.

Responsive Images

Internet speeds often suck, especially on mobile connections. Since 25% of users abandon websites that take 4+ seconds to load, ideally, we need to be creating low-resource designs with compressed images (ideally using a compression ratio of about 91%). Also, images should adapt according to viewport size and screen resolution.

Export Small Images For Small Viewports

Bitmap images — e.g. PNGs and JPGs — can be scaled down without losing quality; however, their file size will remain the same, so we’ll need to export smaller images for smaller viewports, which, yes, means that most images will require multiple variations.

Obviously though, we can’t serve different images for every single viewport in existence. 2–3 images for 2–3 breakpoints is a bit more manageable. In the example below, a large 1024x image is served only once the viewport exceeds 414x — this is so that 414x (and smaller) devices aren’t being forced to load large images unnecessarily.

Responsive images

Support Various Screen Resolutions

Maybe you’ve heard of Apple’s Retina technology. Retina devices have screens with higher pixel density than usual because it increases the display’s quality; and all other device manufacturers use this type of technology too. Pixel density is a frustratingly complex concept, and since we don’t really need to understand it in order to be able to design for it correctly, I’ll simply leave you with Peter Nowell’s decent explanation 👏.

However, here’s what you do need to know:

Different screens have different resolutions, and so the images that we create (like backgrounds and icons, for example) will need to be exported at all of these various resolutions. For instance, an @2x screen will need @2x images, exported from our UI design tool of choice. Luckily, design handoff tools typically take care of this for us, so all we have to do is design @1x (which is the default setting for all UI tools anyway).

Consider Using SVGs

Designing for all sizes and resolutions is only a concern when exporting images in bitmap formats, i.e. PNG and JPG images. It isn’t a concern, however, when exporting images in vector formats, i.e. SVG images. Images that are exported in SVG format are rendered using formulas instead of rasterized as flat pixels, meaning, not only can they be scaled up and down without losing quality, but we’ll only need to export them @1x.

However, SVGs aren’t perfect. Like all vector formats, SVGs must be made up of vectorized shapes and contain no bitmap qualities whatsoever, which makes SVGs suitable for icons, but not so suitable for images with detailed textures and imagery.

Additionally, mobile apps don’t really support SVGs, only websites do.

Responsive UI Design

Majority of UI design tools have cool features that help us to design responsive interfaces. Firstly, they have artboard features, which enables us to design mobile, tablet, and desktop versions of our screens side-by-side. Secondly, they have device mirroring features, meaning that we can test our mockups on handheld devices. Finally, anchors allow us to design fluid layouts, which is key to creating responsive mockups.

If you’re curious about the practical side of designing user interfaces, especially responsive user interfaces, then you might be interested to read our free series on InVision Studio. InVision Studio is one of the freshest UI design tools on the market.

UX Design InVision Studio Advanced UX Product Design Burning Questions Quick Tricks