Your go-to resource for understanding responsive web design and how to do it well.

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 the responsive design as consisting of three key elements: fluid grids, flexible images, and media queries (using breakpoints).

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.