Design & UX

Responsive design

Designing a site so its layout adapts to any screen size, from phones to large monitors.

By Nick Irmo · Updated

What Responsive design means

Most web traffic for many businesses comes from phones, and Google primarily evaluates the mobile version of a site. A responsive site gives every visitor a usable experience. It is a baseline requirement, not an extra.

Why it matters for your website

Visitors use phones, tablets, laptops and big monitors, and your site needs to work on all of them. A site that doesn't adapt is frustrating to use, so people leave and contact a competitor. Google also recommends responsive design as the easiest pattern to maintain for mobile.

Example

A catering company's menu page shows three columns on desktop and one easy-to-scroll column on phones. The order button stays visible and easy to tap on every screen.

Tips

  • Check key pages on several real devices, not just one phone.
  • Use flexible images that scale down without being cropped awkwardly.
  • Make buttons and links large enough to tap comfortably.

Common mistakes

  • Using wide tables or images that force sideways scrolling on phones.
  • Testing only the homepage and missing broken layouts on inner pages.

Questions about Responsive design

What is Responsive design?
Designing a site so its layout adapts to any screen size, from phones to large monitors.
How do I test if my website is responsive?
Open it on different phones and tablets, and use your browser's developer tools to preview different screen sizes. Watch for overlapping text and tiny buttons.
Is a separate mobile site better than responsive design?
Usually not. A separate mobile site means two versions to maintain. Google recommends responsive design because one URL and one set of HTML is simpler for users and search engines.

Learn more

Tell us what the site needs to do.

Share a few details and a budget range. We reply within one business day with a plan, a platform recommendation and a fixed quote.