🖥️

Responsive design

Definition

Responsive web design is about creating web pages that look good on all devices!

A responsive web design will automatically adjust for different screen sizes.

Introduction

➡️ Resize the browser window to see how the layout adapts ⬅️

Well that is responsive design.

Not doing responsive design means have only one layout that tries to fit in every screen sizes.

Note that at different width, the layout adjusts to another design. Those point of changes are called breakpoints. As a designer you will not be handling the definition of those breakpoints.

You will see later in Figma how to handle them properly.

How to be responsive?

In order to build a responsive website, you will need to design a minimum of 2 screens (mobile + desktop) and up to 4 screen sizes if your project requires so (mobile, tablet, desktop and large desktop).

Once those designs created you will need to set the breakpoints. One design is used above a breakpoint and another design is applied below that breakpoint. The breakpoints are commonly based on the width of the browser.

Github example (2018)
Github example (2018)

Common breakpoints

Screen sizeBreakpoint
Mobile devices
0 - 480
Tablets
481 - 768
Small screens, laptops
769 - 1024
Desktop, large screens
1025 - 1200
Extra large screens, TV
1201 - and more

Next up

📖
Product Requirements

Dive deeper