Responsive website

What is a responsive website?

A responsive website serves the same HTML to every device and adapts the layout with fluid grids, scalable images, and CSS media queries. Instead of a separate mobile site (m-dot), the content flows so columns, fonts, and navigation adjust to the screen width. The foundation is <meta name="viewport" content="width=device-width, initial-scale=1"> in the page’s <head> — without it, mobile browsers render the page at desktop width and ignore your media queries.

Why does a responsive website matter?

Google uses mobile-first indexing, which means the mobile version of your page is what gets crawled, indexed, and used for ranking. A responsive setup with one URL and one HTML is also Google’s recommended approach, because it is easier to maintain and avoids the SEO mistakes that separate mobile sites often introduce. For an online store it is pure conversion too: most traffic comes from mobile, and a cramped product page or a checkout that does not fit the screen costs sales directly.

Common use cases

• Product pages on mobile. Make sure images, price, and the “Add to cart” button are readable and tappable without zooming.
• Reserved dimensions. Set width/height or an aspect ratio on images and banners so they do not shift content and hurt CLS.
• Prioritizing above the fold. The most important content should be visible on small screens without scrolling.
• Cross-device testing. Check the theme on phone, tablet, and desktop before every major change.

Shopify perspective

Shopify’s Online Store 2.0 themes like Dawn are responsive and mobile-first out of the box, but customizations and apps can break that. Popups, sticky bars, and third-party scripts are the most common offenders on mobile. Test your changes in the theme editor’s device view and on a real phone, and watch Core Web Vitals in Search Console, rather than assuming the theme handles everything automatically.