How to Make a Responsive Design

Responsive design is a term that is gaining more and more momentum in the world of product design. If you’re wondering how to make a responsive design and what responsive design actually is, fret not – we have dived deep into this topic for you!

Read on to shine a new light on this buzzing but relevant topic of responsive design.

You have two options: mobile-first and desktop-first. You’ve probably heard that you should always start mobile-first, which is an excellent option for when you’re working on a product that’s going to be used by a lot of mobile users.

But if you’re designing something like a dashboard for a large accounting company, you should focus on the desktop first. Those accountants will access the dashboard 99% of the time (if not 100%) from the desktop, so starting with the mobile-first approach doesn’t make much sense.

So, how to make a responsive design? Always think about the context of the product. Choose mobile-first if the data justifies it (e.g., 50% of site visits come from mobile), if the product has only a few core features, and if there’s a massive difference from mobile to desktop. It’s also widespread in BTC situations.

Similarly to the mobile-first, choose desktop first if the data justifies it, if the product is intended primarily for desktop use, or if it has many features users need to concentrate on (think dashboards, databases). It’s also common for BTB products and old-world industries like construction. There’s probably a low chance that a construction company will order many construction supplies via a mobile website.

To know how to make a responsive design, it’s crucial to set breakpoints. A breakpoint is a screen dimension at which the design changes in a certain way better to accommodate the content for the new width limits. 

If this sounds vague or unclear: open one page in your browser and put it on fullscreen. Now try reducing the window width. The sizes (points) at which the layout of the website changes are called breakpoints. Your choice of breakpoints will depend on a few things. If you don’t have much time available — choose fewer breakpoints. 

Also, think about the final layout. Simple 3-item top navigation, hero image, title, and a paragraph? That will work great on more screen sizes compared to a complicated 5-column news page layout. 

Think about the device majority of your users will use. There’s no need to spend a lot of time adjusting the designs for tablets if you know, e.g., that the site has less than 1% of tablet visitors. 

To make a responsive design, work to deliver the experience as similar to the desktop or mobile experience as possible.

All the best practices for desktop or mobile are still valid if they apply to your unique case. We singled out a few key things to watch out for when you want to make a responsive design and are balancing between mobile and desktop solutions.

Pay attention to hierarchy closely because the same layout can work drastically differently from device to device. Some things that stand out on a desktop won’t be noticeable on mobile, and vice versa.

Always make appropriate mobile replacements for desktop hover states. Also, make the most crucial CTA-s span the full-screen width on mobile. Don’t do that for the desktop. Ensure that buttons are easily tappable on all screen sizes. Use Figma Mirror to check how big everything looks on the actual device.

You can use intuitive or native gesture navigation patterns for mobile to reduce the number of items that need to be visible immediately. For example, cards can easily save up on vertical space through swiping and overflows. For the desktop, there are no gestures, so to make a responsive design, make sure to structure navigation according to IA. The essential navigational elements should always be visible in both cases. But on mobile, it will be limited to only a few most important items.

Make sure a form triggers the appropriate keyboard on mobile. Also, ensure that your date pickers and dropdowns are still usable on mobile.

Images will be loaded in their original size unless the viewing area becomes narrower than the original image width. In that case, crop the images to retain impact (example below). Also, don’t stretch images, but resize them in the same aspect ratio or crop.

To make a responsive design, you must test, test, and test. Check how it looks on devices, test it with real users, and the actual context in which they will use the product.

Answer to the following questions: Is the hierarchy good? Do the most important things still stand out in all sizes? Are essential elements reachable on mobile? Does the navigation make sense in all sizes? Iterate on your findings, test again, and voila – your design is now responsive! 

Responsive design can sound a bit intimidating or confusing at first. Still, it comes down to knowing how to design for desktop, learning how to design for mobile, and knowing which practice to implement to achieve the same (or similar) effect for each platform. To make a responsive design means repeatedly asking yourself what you are trying to achieve, which is what you’re (hopefully) already doing. 

For example, if you want to promote onboarding completion on both desktop and mobile, you will minimize distractions and make the next step obvious. It will just look a tiny bit differently, depending on the platform. Or, if you want to achieve an emotional impact, you will go for immersion by spanning the photo over the entire screen on a desktop. 

On mobile, since the screen is small, it might be wise to span the most crucial part across the screen because you don’t have that much space and still want users to feel the feelings.

So, this is how to make a responsive design! We hope this term will sound a bit more familiar from now on. If you still have doubts, check out our Learn section. You can choose from multiple free and paid materials that will help you resolve some doubts that hover over your product design career or expand your existing knowledge.

For more informative and entertaining content from the world of product design, follow our Instagram – we solemnly swear we never post boring stuff. 😉

Happy designing! 🥳