When cellphones began to access the web, it was never a guarantee you’d actually be able to read a given webpage on mobile.
Sites might have tiny text, be impossible to navigate, or redirect to a limited mobile-specific site without the feature you were looking for. Now, having full access to any site on your phone is usually a given; we don’t even have to question it. What made this dramatic shift possible? Responsive web design.
Sites that reflow and adjust themselves to be effortlessly legible and usable across devices require thoughtful, intentional design, but that has become incredibly easy to do with new techniques in Cascading Style Sheets (CSS) and no-code programs. Rather than addressing cross-device functionality as an afterthought, a skilled designer should plan for this adaptability throughout their process. In today’s multi-device world, a responsive design will be one of the most critical elements of your website’s success.
Key responsive web design terms
- fluid grids — a grid is an element with areas in columns and rows that can have content added. A fluid grid can be set to auto-fit or be set manually to adjust across breakpoints.
- flexible images — responsive images that can be served to the browser in different sizes depending on the size of the image in the layout and the resolution of the viewer’s screen. Ensuring images are responsive will avoid having pixelated too-small images or images that are unnecessarily large and slow down site loading.
- breakpoints — the points in screen size or orientation (informed by media queries) where a website is triggered to adjust its layout.
- media queries — the specific CSS function that receives information about size from the viewer’s device to trigger the breakpoints in the design.
- viewport — the visible area on the user’s device where content can be seen.
- overflow — elements in your design that exist outside the viewport or are too large for their container.
- fixed sizing — sizing that is always the same no matter the other factors affecting your site or layout (pixels). Fixed sizing is not responsive.
- relative sizing — sizing that changes in response to another element in your layout or the user’s device (%, em or rem, character height, viewport height, or viewport width). Relative sizing is responsive.
- mobile-first — a design strategy of designing the most restricted mobile design first before designing for larger devices, in reverse of the previously assumed process of designing for desktop and scaling down from there. Its intention is to push designers to prioritize successful, accessible mobile designs.
- hamburger menu — a menu button that enables a drop-down function for navbar links that helps save space in restricted designs. Named for its shape consisting of stacked lines whose appearance resembles ... a hamburger.
What is responsive web design?
Responsive web design creates websites that respond to the viewer’s device by adjusting their layout and functionality to display content in an aesthetic and legible way no matter the size and proportion of the screen they are being viewed on.
The term was conceived in 2010 by Ethan Marcotte, inspired by the creation of architecture that responds to the interaction or presence of people within a space. Marcotte described responsive design as consisting of three key elements: fluid grids, flexible images, and media queries (using breakpoints).
Making a site responsive involves much more than simply creating a “lite” version of the site for mobile. With the increasing ubiquity of smartphones, mobile devices have grown from generating 2.94% of web traffic in 2010 to 54.87% in 2021.
Beyond that, many people are now using mobile as their primary web access and expect mobile sites to be seamless and fully functional. Therefore, regardless of whether you are providing information or operating a web store, users need to be able to do it all on mobile alone if you want to be effective.
In recent years, no-code programs have revolutionized responsive web design even further by making it possible to design for a spectrum of screen sizes simultaneously without needing to code the adjustments yourself.
Responsive vs. adaptive design
Adaptive design is creating an independent, lighter, and more streamlined mobile-optimized version of a website. When browsing mobile, it can be seen when you get redirected to a mobile subdomain — such as m.website.com or mobile.website.com. It was coined in the 2011 book, “Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement.” Though popular for many years, it is now being phased out in favor of responsive approaches.
Adaptive web design does have certain advantages. Mobile sites can be tailored very specifically to what the designer wants mobile users to see and how, and they may still be a better choice for complex sites that need a lot of fine control. The challenge is the development time and money it takes to create two (or more) separate sites.
As a result, responsive design is likely to be significantly better for small and medium-sized businesses and individuals that want a unified, seamless experience for their users.
The essential elements of responsive web design
A successfully responsive web design will address a few key elements that affect the aesthetics and functionality of a site. The first step is to be aware of the diversity of access to your site — both in terms of devices and users’ unique needs and habits. From there, each element of your content and structure can respond to those varied circumstances.
Design for diverse devices
Your site should be prepared to adjust to many screen sizes and dimensions — desktop, laptop, tablet, mobile (so many different sizes of mobile). It can be best to consider this a fluid spectrum rather than separate categories, as devices come in a wide range of sizes and proportions now. In addition, when viewing on mobile, users may move between landscape and portrait, which you will want to adjust to as well.
Consider the way different devices affect how the user might interact with your site. For example, on mobile, how does your site respond to gesture functionality like swipe and pinch? On desktop, users may not maximize browser windows — what does it look like when they make their window larger or smaller?
An important element to keep in mind is the possible sizes and proportions of future devices. To avoid refreshing your site with every technological update or invention, build in flexibility and fluidity from the beginning.
Ultimately, the content flow should be determined by the device, not the other way around.
Relative length units
The settings you use for length are the fundamental element that will enable your site to be responsive. Absolute units (like pixels) won’t allow your design to respond to changing device sizes and won’t enable users to adjust the text for their own accessibility needs. "Absolutely no absolute units!" says web designer Nick Gard.
For responsive design, use viewport-relative units like vh or vw or font-relative units like em or rem. This will scale with changes in device or typography size and preserve your site’s functionality no matter how your layout flexes.
Layout
The overall layout of your site is the key to maintaining the look and legibility of the majority of your site between devices. Consider columns, grids, negative space, and the flow of the eye down the page. As the viewport narrows, content should reflow to make your layout more vertical.
Incorporating flexible grids with relative length units will allow your layout to change while still maintaining a logical structure. Setting min-width, max-width, min-height, and max-height properties can keep those changes controlled and intentional.
On a laptop, having multiple columns can be legible and attractive, but on a mobile screen, it can make your content look crowded and necessitate text too small to be legible. This is where fluid grids can be especially useful. As you move through progressively smaller breakpoints, the number of columns can reduce accordingly.
Navigation
Not only will navigation look different on different devices, but the way users interact with it will change significantly. For example, on a laptop with a trackpad, a navigation bar along the top or side of the screen feels natural and is easy to use. This might be the case on a tablet as well. But once the device gets small enough to be held one-handed, users will expect one-handed functionality. This can mean enabling thumb navigation by having the navbar at the bottom of the screen when you reach a mobile breakpoint. The suggested size to be usable for thumbs is the equivalent of 48dp.
On larger screens, having navigation options visible along the length of the navbar makes it more discoverable. However, as the screen gets smaller and visible real estate becomes more valuable, you may want to condense navigation into something like a hamburger menu. This also means the buttons can be larger, making them easier to use with fingers.
Images
Use responsive images to ensure that images scale in resolution with your site to avoid slowing loading time with overly large files.
Images also need to scale with your layout as visual elements. Consider how your images are relating to the rest of your content. Are they informative or decorative? How does that function affect the way your images will need to scale? A background image might look fine overflowing the screen, but an infographic won’t be very helpful if half of it is cut off or too tiny to read.
Text
Text is vital to the success of your responsive web design. Though an oddly laid-out image might look strange, badly formatted text will completely break your functionality. Make sure your text is in em or rem units and always sized to be effortlessly readable — not so tiny that readers have to strain their eyes, not so large that only a few words at a time fit on the screen.
Ensure it doesn’t get cut off or overflow the viewport as you move through breakpoints. Consider how all the types of your text relate to each other as they scale and aim to maintain a good aesthetic balance between headlines, body paragraphs, and functional text, such as within buttons. Using relative units like em or rem units allows your text to scale responsively.
Accessibility
Responsive web designs support accessibility. A well-designed site can respond to a user’s needs, not just their device, making the internet easier to successfully navigate for a wider population of people. Some users may have challenges navigating websites due to disabilities, low/no vision, language challenges, or motor-function limitations. There are ways to make sure they can still easily use your site.
Consider screen readers and other assistive devices when designing. Screen readers have trouble with some non-fluid elements, such as fixed tables. They also can’t read text within images, so it will help to ensure all text is in paragraphs or has alt text. Adding alt text to images allows those with limited vision to understand your site’s visual elements, and it will have the added benefit of being searchable for search engine optimization (SEO).
Using relative units for text makes your site more accessible. When text can be resized without interrupting the flow of the page, users with low vision who might need larger text will have an easier time reading it. Larger buttons on mobile support users who might have difficulty seeing small buttons or impaired motor functions that make them harder to press. Consider the populations and age groups your website serves and what their unique needs could be.
Use Webflow's visual development platform to build completely custom, production-ready websites — or high-fidelity prototypes — without writing a line of code.
Use Webflow's visual development platform to build completely custom, production-ready websites — or high-fidelity prototypes — without writing a line of code.
Examples of responsive web design
What does responsive web design look like in practice? Take a look at the following websites on both desktop and mobile to see how these Webflow customers use responsive design.
Additionally, all Webflow Templates have built-in responsive design.
Responsive design with no-code tools
No-code web design makes it easy to design responsively without having to know any HTML or CSS. Webflow enables both programmers and those with little or no programming experience to build a site using a graphical user interface, to design visually and instantly seeing the way their changes move through breakpoints.
Breakpoints cascade style changes upward and downward from the base layout. From there, specific design elements can be further adjusted in larger or smaller breakpoints without interfering with the original base layout. This can be viewed by clicking through your breakpoints in navigation or by clicking and dragging the viewport size directly.
Flexbox layouts can be built and manipulated visually and are powerful tools for creating more sophisticated responsive pages. Responsive images are built into Webflow, so there is no need to create multiple resolution files, saving a lot of time for designers and ensuring sites load as quickly and efficiently as possible.
Webflow will write CSS as the site is constructed and the resulting code will be streamlined and clean, ensuring responsive changes and detailed instructions won’t break the site. It’s also future-proof, anticipating and changing with new devices as they are developed.
Tutorials like Webflow University combined with the visual interface make it easy to learn and play for designers of any experience level. There is also a large network of designers, programmers, and no-code geeks creating templates and tutorials that can be sought for support and inspiration.
The no-code future of responsive web design
With internet-enabled devices proliferating and becoming more diverse, and internet accessibility built into more aspects of our daily lives, coding with responsive web design in mind is simultaneously more important and more challenging. No-code design means you are always designing responsively, not as an add-on or afterthought. It allows for sophistication across all types of devices and builds in an eye for future complexity.
Websites are only becoming more powerful, and the tools that we use to create them need to grow and improve along with them. With no-code solutions, designers can make the designs you want to make without ever having to write a line of code and build responsiveness into the design process from the beginning in a holistic, sophisticated way.
