11 powerful examples of responsive web design
Mobile phones and tablets are responsible for 56.74% of global internet usage. Having a responsive website is a necessity—not an option....Read More
Learn about the essentials of responsive design: what it is, the challenges of responsive design, responsive breakpoints, screen resolutions, and more.
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.
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:
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.
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 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:
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.
Considering that both users and search engines dislike slow websites—yet high-resolution devices demand large images—we have three solutions:
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.
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:
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.