UX DesignNewInVision StudioBurning Questions

5



reads remaining



Learning UX Design, eh? 🙌 Read this chapter and the rest of the ebook for only $10. Includes online access and updates.


Buy $10

Summary

Responsive design is crucial in today’s digital world. Learn why mobile-first is the best responsive design approach, and the relevant responsive breakpoints for 2019.


Agenda

  • Fluid design
  • Mobile usability
  • Mobile-first design
  • Responsive images
  • Common breakpoints

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 neglecting a frightening share of their users, since 80% of users say that they’ll disengage with websites that don’t work well for their device. Also, search engines actively demote websites that aren’t mobile-friendly in their ranking algorithm. We can check if a live website is mobile-friendly in the eyes of Google by taking the mobile-friendliness test.

So, does this mean that designing for tablets and desktops is 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 iPhone and iPad. In fact, the software industry seems to be moving towards apps that work natively on mobile, tablet, and desktop, so we may see the term “responsive app design” surge massively in the coming months.

Fluid Design

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 solve this we’ll need to design our layouts using both % units and max-widths, so that they always fit into the mobile viewport but without being too wide on desktop.

Fluid web design

Reducing 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. Interacting with handhelds is frustratingly awkward (especially when typing is involved), which naturally makes the user’s objectives harder to complete. Hence, we’ll need to focus heavily on accessibility and usability, with special focus on reducing friction. Although the benefits of reducing friction also apply to desktop experiences, it’s rather crucial for handheld experiences.

Mobile-First Design

Reducing friction is easy when taking a mobile-first approach to responsive design.

Debatably, mobile-first is the best approach to responsive design, mainly because it’s harder to simplify a desktop layout for mobile screens than it is to elaborate on a mobile layout for desktop screens. Designing mobile-first enables us to evaluate what’s really necessary for the design to function, and when we do so, we can then design mobile layouts that are frictionlessly minimalistic by default. Start small, and work upwards.

Mobile-first design example

Mobile-First Design: Best Practices

  • Prioritize key menu items
  • Remove visual distractions
  • Remove instances of dark UX
  • Remove non-essential form fields
  • Focus on the primary call-to-action
  • Implement search and filter functionality

Responsive Breakpoints 2019

So, we’ve established that we need to design for all types of devices, and also that smaller devices should typically have a more frictionless experience, but specifically which screen sizes should we be targeting? What are the smallest screens; what are the largest? According to statistics, these are the most common breakpoints in 2019:

Responsive breakpoints 2019

Regardless, there’s no standard website width in 2019, so the best screen sizes for responsive web design are the sizes that our users are actually using, and we’ll need to leverage our website’s analytics data to find out what those screen sizes are exactly.

We also have to consider that handheld users might view our website in landscape orientation, and desktop users might not have their web browser maximized, so really, their screen size could be virtually anything — this means that our websites should also be optimized for all of the “in-betweens” and not only the key responsive breakpoints.

Note: apps have fewer variations in screen size, however, the above rules still apply.

Check out these responsive design examples 👏.

Leveraging Device Functionality

Smaller screens make typing difficult, however, we can compensate by leveraging functionality such as GPS, biometric ID, bank card scanning, and QR code reading to drastically reduce the user’s typing requirements. In addition, we can make it easy for users to start emails or call telephones by creating links with special functionalities.

Consider making use of native device functionality, because the best responsive websites and apps are those that simplify or even eliminate frustrating interactions.

Responsive Images

Internet speeds often suck, especially on mobile connections. Since 25% of users abandon websites that take 4+ seconds to load, we need to be creating low-resource websites with compressed images, ideally using a compression ratio of about 91%. In addition, images also need to be resized according to the device’s size and resolution.

Smaller Screen, Smaller Images

Bitmap images — e.g. JPGs and PNGs — can be scaled down without losing quality, however their file sizes will remain the same. We’ll need to export smaller images for smaller screens, which means that most images will wind up with multiple variations.

Obviously, though, we can’t serve a different image for every single screen size 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

Supporting Multiple 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 as well. 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 top-notch explanation.

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

Different devices have different resolutions, and so the images that we create (like backgrounds and icons, for instance) will need to be exported at all of these various resolutions. For example, an @2x device 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).

SVG Fixes Both Issues

Supporting multiple device resolutions is only a concern when exporting images as bitmaps, i.e. PNG and JPG images. It’s not a concern, however, when exporting as an SVG image. SVG is a vector format, and images that are exported as SVGs are instead rendered using mathematical formulas as opposed to rasterized as pixels, meaning that not only can they scale without losing quality, but we’ll only need to export them @1x.

However, there is a downside. SVGs, like all vector formats, must be made up of vectorized shapes and contain no bitmap qualities whatsoever — this makes SVGs suitable for icons, but not so suitable for images with detailed imagery and textures.

Note: support for SVG in mobile apps is limited/non-existent.

Practical Responsive Design

Majority of UI design tools have three useful features to help us design responsive websites. Firstly, they have artboards, which enable us to design mobile, tablet, and desktop versions of our websites side-by-side. Secondly, they have device mirroring features, meaning that we can self-test our layouts on real handheld devices. Finally, anchors allow us to mockup fluid layouts, the first step towards responsive design.

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

This guide forms part of our ebook, A Beginner’s Guide to Designing Great UX.

Daniel Schwarz, author

Daniel Schwarz

Daniel is a UX/UI designer, web developer, and maker by background, but a teacher at heart. After years of writing for magazines and design blogs, as well as being an editor at both SitePoint and Toptal, Daniel now creates content for brands like InVision, UXPin, and Adobe while traveling and working remotely.

UX DesignInVision StudioAdvanced UXUsabilityUX DesignInVision StudioBurning Questions