Responsive Design

What is Responsive Design?

In 2010, users browsed the internet exclusively from desktop computers. Today, more than 60% of web traffic comes from mobile devices. And users may start a task on mobile, continue it on a laptop, and review it on a tablet.

Responsive Design means that the design automatically adapts to the screen size the user is using — from 320px (smallest mobile) to 2560px (large monitor) and beyond.

The term was coined by Ethan Marcotte in 2010 and became the fundamental standard in web design. The idea is that content is like water — it takes the shape of the container it's poured into.

The Mobile-First Approach

Why Start from Mobile?

In the past, designers would design for desktop first and then "shrink" the design for mobile. This led to many problems:

Elements that break or overlap
Invisible content
Poor mobile experience

The Mobile-First approach reverses the process: start designing for the smallest screen and then expand gradually. The benefits:

Focus: The small screen forces you to focus on what matters — what content is truly essential?
Performance: A simpler design loads faster — and mobile needs speed
Easier to scale: Adding content for a larger screen is easier than removing it for a smaller one
Priority: When space is limited, you learn to rank information by importance

The Mobile-First Design Process

Design for mobile first (375px): define the essential content and flow
Expand to tablet (768px): add columns and sidebar content
Expand to desktop (1440px): use the larger space with a richer layout
Test every size: ensure the design is smooth at every stage

Breakpoints

Breakpoints are the sizes at which the design changes. You don't need a breakpoint for every device — you need breakpoints when the content needs to change.

Common Breakpoints

Name	Width	Usage
xs	< 475px	Small mobiles
sm	475 - 639px	Large mobiles
md	640 - 767px	Portrait tablet
lg	768 - 1023px	Landscape tablet
xl	1024 - 1279px	Small laptop
2xl	1280 - 1535px	Desktop
3xl	1536px+	Large screen

Tailwind CSS Breakpoints

Tailwind provides ready-made breakpoints:

sm: 640px
md: 768px
lg: 1024px
xl: 1280px
2xl: 1536px

What Changes at Each Breakpoint?

Number of columns: 4 on mobile → 8 on tablet → 12 on desktop
Element layout: vertical on mobile → horizontal on desktop
Font sizes: smaller on mobile and larger on desktop
Navigation: Hamburger on mobile → horizontal bar on desktop
Show/hide: some elements disappear on mobile (Sidebar, for example)

Fluid Layouts

Percentages Instead of Fixed Numbers

Instead of defining a column width as 400px, define it as 33.33% (one third of the width). This way the column adapts to any screen width.

CSS Grid and Flexbox

In development, fluid layouts are built with:

Flexbox — for one-directional layouts (horizontal or vertical):

Navigation bar: elements side by side
Item list: one below the other

CSS Grid — for two-dimensional layouts (rows and columns):

Card grid: 3 columns × multiple rows
Full page layout: header + sidebar + content + footer

Fluid Typography

Instead of defining a fixed size for each breakpoint, use fluid typography that changes smoothly:

The idea is that the font size changes gradually between a minimum and maximum:

On a 320px screen: heading is 24px
On a 1440px screen: heading is 48px
Between the two: the size changes gradually

In CSS, this is done with clamp():
font-size: clamp(1.5rem, 1rem + 2vw, 3rem)

Flexible Images

Images must adapt to the size of their container:

max-width: 100% so the image doesn't exceed the container's bounds
Use fixed aspect ratios so the image doesn't distort
Provide different image sizes for different screen sizes (srcset)

Responsive Patterns

1. Column Drop

The most common pattern — columns that are side by side on desktop stack vertically on mobile.

Example: 3 cards side by side on desktop → one card per row on mobile.

When to use: for content where each part is independent — cards, products, articles.

2. Mostly Fluid

Similar to Column Drop but with a limited width on large screens. The content reaches a maximum (max-width) and then the margins increase.

Example: Content with a maximum width of 1200px — on a 1920px screen, there are large margins on both sides.

When to use: most websites and applications — it's the default pattern.

3. Layout Shifter

The layout changes radically between screen sizes — not just columns stacking.

Example: On mobile — Tab Bar at the bottom. On tablet — collapsed Sidebar. On desktop — open Sidebar.

When to use: when the experience needs to be genuinely different on each device.

4. Off Canvas

Certain content is hidden on small screens and appears when the user requests it.

Example: The filter menu in an online store — visible in a Sidebar on desktop. Hidden behind a "Filter" button on mobile.

When to use: for secondary content that isn't essential on small screens.

5. Responsive Table

Tables are a big challenge on mobile. There are different solutions:

Horizontal scroll: the table stays as-is but the user scrolls horizontally
Convert to cards: each row becomes a card with all the data
Hide columns: less important columns disappear on mobile
Stacking: columns become rows

Touch Targets

On mobile, users interact with their fingers, not a mouse. A finger is much less precise than a mouse cursor.

Minimum Touch Target Size

Apple HIG: 44 × 44 points
Material Design: 48 × 48dp
WCAG: 24 × 24px minimum (AA), 44 × 44px (AAA)

Practical rule: Any interactive element on mobile must be at least 44px in height and width.

Spacing Between Interactive Elements

There must be at least 8px between any two interactive elements on mobile. A user tapping a button shouldn't accidentally tap the one next to it.

Thumb Zones

When a user holds a phone with one hand:

Easy zone: bottom center of the screen
Medium zone: bottom edges and top center of the screen
Hard zone: top corners of the screen

The lesson: Place the most important and most frequently used actions at the bottom of the screen. That's why Tab Bars are at the bottom and primary buttons are in the thumb zone.

Responsive Design in Figma

Setting Up Frames

Design every screen at least 3 times:

Mobile: 375 × 812 (iPhone 13/14)
Tablet: 768 × 1024 (iPad)
Desktop: 1440 × 900

Responsive Auto Layout

Use Auto Layout with Fill Container so components adapt:

Flexible card:

Width: Fill Container (takes the container's width)
Height: Hug Contents (takes the content's height)
Image: Fill Container + fixed aspect ratio

Flexible card grid:

On desktop: horizontal Auto Layout + Wrap
On mobile: vertical Auto Layout

Constraints in Figma

If you're not using Auto Layout (in rare cases):

Left & Right: the element stretches with the frame width change
Center: the element stays centered
Scale: the element scales proportionally

Desktop → Mobile

Desktop	Mobile
Full horizontal navigation bar	Hamburger Menu or Bottom Tab Bar
Always-open Sidebar	Hidden Sidebar (Drawer)
Breadcrumbs	Back button
Horizontal tabs	Scrollable tabs or Dropdown
Full table	Cards or scrollable table
Multi-column form	Single-column form
Hover tooltips	Long press or info icon

Important Tips

Don't hide important content on mobile — if content matters, it must be present at all sizes
Don't create a separate mobile site (m.example.com) — use a single responsive design
Test on real devices — the simulator doesn't show all problems

Testing Responsive Design

In Figma

Use Prototype Mode and set the Device to different sizes
Use Figma Mirror to test the design on your actual mobile device

In the Browser

Chrome DevTools: press Ctrl+Shift+M to open the device emulator
Resize the window manually and observe the design at every size
Responsively App: a tool that shows the website at multiple sizes simultaneously

On Real Devices

Your personal mobile: the first and most important test
BrowserStack: test on real devices remotely
Different devices: if possible, test on iPhone, Android, and iPad at minimum

Common Mistakes in Responsive Design

1. Designing for Desktop First

When you start with desktop, you fill the space with lots of content. Then when you come to design for mobile, you can't fit all that into a small space. Always start with mobile.

2. Too Many Breakpoints

3-4 breakpoints are sufficient for most projects. Every additional breakpoint adds complexity to design, development, and maintenance.

3. Small Buttons on Mobile

A 30px button on mobile is impossible to tap comfortably. 44px is the minimum.

4. Ignoring Large Screens

Many designers design for mobile and desktop only, ignoring large screens (2560px+). The result: thin content in the center of a massive screen. Define a max-width and use the space intelligently.

5. Unreadable Text

A font size that looks good on desktop can be too small on mobile. 16px is the minimum for regular body text on mobile.

6. Not Testing with Real Content

Lorem Ipsum doesn't reveal problems. Use real content — long titles, long names, real text. Real content exposes problems that placeholder content hides.

Responsive Design Checklist

Before handing off any design, ask yourself:

Have you designed for all required screen sizes?
Are all buttons and interactive elements at least 44px on mobile?
Is the text readable at all sizes?
Is navigation easy on all devices?
Is essential content not hidden at any screen size?
Are images adaptive and not distorting?
Is there sufficient spacing between interactive elements on mobile?
Does the design look good in landscape orientation too?

Practical Exercise

Design a home page for a personal website at 3 sizes:

Mobile (375px):

Simple Header + Hamburger Menu
Hero Section with headline and CTA button
"My Work" section — cards stacked vertically
"About me" section — text and photo
Footer

Tablet (768px):

Header + partially visible navigation
Larger hero
Cards in two rows (2 per row)
"About me": photo beside the text
Footer with two columns

Desktop (1440px):

Full header + all links visible
Large hero with side image
Cards in 3 columns
"About me": rich layout
Footer with 4 columns

Start with mobile and make sure everything works, then expand. Notice how design decisions on mobile also improve the design on larger screens.