How to make a responsive website

Profile picture of Nick Babich

{date}

{#hash1}

{#hash2}

Illustrations by {name}

Responsive web design allows precise control over your layout at every viewport. Here are expert tips to bring your vision to life.

6 min read

A responsive website for a furniture and interior design store, seen across various viewports

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

Get our latest stories delivered straight to your inbox →

Responsive web design adjusts to the size and capabilities of every device or browser it’s viewed on, thereby guaranteeing that visitors always see the best possible version of your site. With so many devices, browsers and resolutions available on the market today, creating a responsive website is now essential for crafting a successful user experience.


If you’re a designer or web creator about to embark on a new responsive project, you’ll probably need to adjust to thinking in relative sizes and proportions rather than envisioning one fixed and final layout. Read on for expert tips on how to make a responsive website from start to finish.



How to make a responsive website

  1. Get started with wireframes

  2. Define your breakpoints

  3. Design for small screens first

  4. Create a fluid grid

  5. Optimize images for responsive design

  6. Optimize typography for responsive design



1. Get started with wireframes


The process of creating a responsive website always starts with planning the layout, and there is no better tool for early layouting than wireframes. A wireframe is a schematic representation of a future design, and it's a convenient method for structuring your layout in an organized, yet low-fidelity manner.


Here are a few important points to consider when wireframing:



Keep your wireframes unpolished


Speed and simplicity are two key attributes of wireframes. At the early stages of product design, you need to experiment and see what solutions work best for your users. Don’t spend extra time making your wireframes pixel perfect. Instead, create your layout and validate it with your target audience and stakeholders, focusing on functionality and information architecture rather than aesthetics.



Create wireframes for different groups of devices


Mobile, tablet and desktop are the most common types of devices that people use to browse the web. When creating wireframes, try and address all three groups to see whether your design scales well across them.



Wireframes for a responsive website design across three breakpoints: desktop, tablet and mobile


2. Define your breakpoints


Breakpoints are the building blocks of responsive design, making them a crucial step when making a responsive website. Breakpoints are the pixel values at which your design is adjusted, so that visitors always see the best possible version of your site, on any viewport size.


Breakpoints are defined by CSS media queries width (min-width and max-width) and height (min-height and max-height). Those media queries determine the conditions under which specific media attributes are applied, allowing you to change styles based on the type of device or browser that renders the content.


If you’re building your website on Editor X, you’ll have 3 default breakpoints to start with: desktop (1,001 pixels and up), tablet (751-1,000 pixels) and mobile (350-750 pixels). You can also edit the existing breakpoints or add custom breakpoints to fit your project’s needs, code-free.


While there is no universal set of breakpoints, there are a few recommendations you can follow when choosing yours:

  • Try to maintain the least number of breakpoints possible. Since designers have to adjust content to match breakpoints, you should strive for around 3 breakpoints for the most device flexibility.

  • The main criteria in choosing your breakpoints shouldn’t be your devices, but the content you have. Your content should determine how the layout adjusts to its container.



Customize the design for every viewport


Be intentional about what you show or hide at different breakpoints. For example, a common approach on mobile is to hide top-level navigation options and use hamburger menus instead. This approach helps you save more real estate on your screen and makes the experience more content-focused. At the same time, make sure not to hide any content that can detract from the user experience.



A responsive website design across three breakpoints: desktop, tablet and mobile