# What is Responsive Design?

What is Responsive Design? A website that adapts to different screen sizes — desktop (1200px+), tablet (768px), mobile (375px).

## How it works in practice

Responsive design is the bare minimum. A site that looks great on desktop but breaks on mobile gives 60% of visitors a bad experience. Google ranks mobile-first — responsive design also affects SEO.

## Related metrics

- Core Web Vitals — good responsive design means good Core Web Vitals
- Mobile Commerce — responsive design is the foundation of mCommerce
- CR — low mobile CR often signals a responsive-design problem
- Bounce Rate — poor responsive design means high mobile bounce

## Common misconception

'My site is responsive because I built it on Shopify.' A responsive template isn't the same as good responsive design. Common issues: oversized images, tiny text, buttons placed too close together. Test on a real mobile device, not just DevTools.

## How to fix it

Poor mobile experience? (1) Test on a real iPhone, not just DevTools, (2) tap target size: buttons at least 44×44px, (3) font size: minimum 16px for body text, (4) navigation: a clear hamburger menu, (5) images: lazy load plus WebP.

## Real-world example

A jewelry store: desktop CR 3.2%, mobile CR 0.7%. BrowserStack testing revealed the add-to-cart button was half-hidden on the iPhone SE. A 2-hour CSS fix raised mobile CR to 1.9% — an extra $9,000/month.

## Where to start

Test your mobile experience now on a real device. If mobile CPC underperforms desktop by 50%+, a responsive-design issue is highly likely. Fixing it delivers fast ROI.

---

Category: Technology · From the [Jimmy OS KPI Glossary](https://jimmy-os.com/glossary/kpi.md) · Source page: https://jimmy-os.com/glossary/kpi/responsive-design