What is Responsive Design?
Responsive web design means to design websites that look (and work) well on mobile, tablet, and desktop devices. Mobile traffic is increasing drastically—according to Statista, where mobile traffic accounted for ~53% of all traffic in 2017, this number is expected to soar to ~79% by 2019, an almost 20% increase in only one year.
What does this mean for UX/UI/web designers? 🤔
It means, websites not well-optimized for mobile devices could be neglecting a frightening share of their users, since 80% of users say they’ll stop engaging with a website that doesn’t work well on their device. In fact, search engines will demote websites that aren’t mobile-friendly in their ranking algorithm. Designers can check if websites are responsive (in the eyes of Google) by taking Google’s mobile-friendly test.
So why not just design for mobile? 🤔
Because 83% of users express desire to continue their experience on a desktop device (where the experience is usually more comfortable), making responsive design not only important, but absolutely necessary for businesses that care about conversions.
Let’s take a look at some responsive web design best practices 👌.
Fluid vs. Responsive Design
By default, websites are fluid (i.e. they expand to fill the horizontal viewport).
However, this doesn’t work out well for desktop websites because the content can become too wide (imagine reading this article where the sentences are spread across the entire screen!). Now, this doesn’t mean that fixed-width layouts are the way forward—instead, we can declare max-widths to stop the content from becoming too wide while still leaving the website otherwise fluid. Just by implementing a few boundaries, we can design a semi-fluid layout that works comfortably on any device.
Fluid design is only the first step.
Responsive design isn’t just about making it fit. Interacting on a mobile device is awkward and often frustrating, which makes the user’s objective all the more harder to achieve, hence, we also need to be coming up with ways to minimize, both visually and functionally. The main question we need to be asking is: what’s the user’s primary objective? Once we know the answer to this question, everything else is secondary.
- Focus on the primary call-to-action first
- Remove visual clutter/shift secondary CTAs if needed
- Remove unnecessary friction (i.e. email opt-ins, forced signups, etc)
Prioritization is key.
When it comes to mobile navigation, don’t hide the most important menu items behind an off-canvas menu and/or hamburger menu. For secondary menu items this is fine (reducing visual clutter is a good thing), but the most important links and actions should be immediately visible, easily accessible to thumbs (we’ll talk more about that later), and one of these menu items should link back to the website’s homepage.
Provide direct access/express highways to where users want to go.
Mobile-First Responsive Web Design
Reducing friction is easier when we take a “mobile-first” approach to responsive design. Mobile-first is arguably the best responsive web design technique, because it’s harder to condense a complex design for mobile, than it is to elaborate on a simple design for desktop. Designing mobile-first allows us to think about what’s really necessary for the design to function, and when we do so, we can design websites that adapt to all screens, simply because their layouts are uncomplicated by nature.
Designing For Thumbs
When designing responsive websites, it’s important to think about the way that we physically interact with different devices (i.e. on desktop we interact using mouse clicks, but on mobile we interact with thumb taps, and sometimes other gestures, like swipes).
Hence, when it comes to designing for thumbs, sometimes that means taking a different approach for mobile users. Let’s consider navigation as an example:
On a desktop website, it’s somewhat standard to display the navigation at the top, where it’s immediately visible (and where users sort of expect it to be). On mobile, however, our thumbs don’t comfortably reach the top of the screen. This is where responsive design goes way beyond fluid design, where the approach to navigation (and web design as whole) needs to be fundamentally different for mobile users.
Mobile Usability Tips
At the risk of turning this article into a mobile design handbook, we’ll quickly breeze over the basics of mobile usability/accessibility where responsive design is concerned:
- Reduce forms to include only the necessary fields
- Allow users to navigate straight to their destination
- Design tap targets at at least 44px² (so they’re easily tappable)
- Avoid complex gestures, such as swipes (user’s don’t expect them)
- Communicate to developers, for example, when a form field is an email field
Google also has a concise list of do’s and don’ts for designing mobile websites:
- Keep calls-to-action at the front and center
- When appropriate, hide secondary CTAs to reduce visual clutter
- Make it easy for users to return to the homepage
- Prioritize navigation over marketing visuals
- Keep menus short, don’t confuse users with too many options
- Don’t force unsolicited content, let the user explore freely
- Don’t force users to signup, let them swiftly achieve their objective
- Let the user bypass all navigation by implementing search functionality
- Allow the user to filter and narrow results to make them more relevant
Allow the user to continue their experience on another device (for example, by letting them send themselves a “view this later” link)—because some users, even though they’re motivated to convert, don’t feel comfortable doing so on a mobile device. The best responsive web designs are those that cater to desktop, even if they’re a minority.
Conduct usability tests to identify flaws and test fixes.
Leveraging Device Hardware
Hardware capabilities differ between mobile and desktop. Even though mobile websites notoriously suffer from sub-optimal usability, they do benefit from a wide range of device hardware that actually makes some user experiences (e.g. uploading photos) a little easier on mobile. Besides photos, the camera can also be used to scan credit card information (an experience frustratingly difficult on mobile otherwise).
Fingerprint scanning and facial recognition can be used to help users log in without typing, and GPS can be used to automatically determine the user’s location. For websites that include a telephone number, we can convert links into a click-to-call action. As you can see, the main benefit of leveraging device hardware is that users don’t have to type things. As a responsive web design best practice, keep in mind that device hardware can be used improve various user experiences in very unique ways.
Slow Internet Connections
Internet connections aren’t always fantastic, especially on mobile.
Majority of the world isn’t even online yet, so we can only speculate how widespread slower GPRS/EDGE connections still are. This means that websites with an overload of heavy imagery are likely to load very slowly on some mobile devices, and since 25% of visitors will abandon a website that takes more than 4 seconds to load, making mobile load times a top priority will improve mobile engagement metrics significantly.
Responsive Images for the Mobile Web
When designing user interfaces with UI tools such as Sketch, Adobe XD, Figma, InVision Studio, Framer Studio, and the like, make sure to export image assets with the correct file format. SVGs are a vector format, meaning they can be scaled up and down without losing quality. They also have small filesizes (usually), however this only applies when the SVG file doesn’t contain any bitmap qualities (i.e. images, textures, etc).
SVGs are useful for icons, for example.
Photography-style images have larger filesizes because of textures, colors, details, and whatnot—this is why these types of images should be exported as JPG (a bitmap format), because JPGs can be compressed to make the size of the file much smaller.
PNGs are also bitmaps, but support transparency where JPGs don’t, making them suitable for icons or web illustrations. The downside to PNGs is that they’re not scalable like SVGs, so they may lack quality if upscaled, or when displayed on a retina/HDPI screen. Luckily, for retina/HDPI devices, most UI design tools allow designers to export bitmaps assets @2x and @3x, to compensate for upscaling on devices that support it. SVGs, because they’re vector formats, don’t require this.
Here’s an article that explains image exports for retina/HDPI screens in more detail.
Which file format should we use? 🤔
- PNG: supports transparency, suitable for icons, but requires @2x and @3x versions
- SVG: scalable, supports transparency, best used for icons and simple shapes
- JPG: non-scalable, no transparency, can be compressed, best used for photography
Video files should be used only when absolutely necessary.
Screen Resolution Statistics
Which screen sizes should we actually be designing for? 🤔
Well, this is a tough question to answer because it depends on the target audience (research is key here). These are the most common screen resolutions worldwide:
- 360x640 (small mobile): 22.64%
- 1366x768 (average laptop): 11.98%
- 1920x1080 (large desktop): 7.35%
- 375x667 (average mobile): 5%
- 1440x900 (average desktop): 3.17%
- 720x1280 (large mobile): 2.74%
Desktop users don’t always have their screen maximized (especially “large desktop” users). Design for the in-betweens, as well as the key responsive breakpoints.
Although not a common scenario, think about what might happen if the website was displayed in portrait orientation (users will switch to two hands in this scenario).
Don’t forget about large desktop and TV screens (e.g. think: Microsoft Edge on Xbox).
When designing websites, keep in mind that UI design tools have two very useful features for designing responsive websites. Firstly, they have artboard functionality, which allows us to design mobile, tablet, and desktop versions side-by-side. Secondly, they have device preview features, meaning we can conduct quick usability tests (with ourselves, or with real users) to see how our design handles on the smaller screen.
For epic responsive web design examples, see ResponsiveDesign.is 👏👏👏.
Learn more in our ebook, A Beginner’s Guide to Designing UX 💪.