Responsive layouts
Google Developers Logo

Progressive Web App Road Show 2016

Stopping in New York, Chicago, Austin, Toronto, Mountain View and Seattle. Learn more and sign up now.

Create flexible, not fixed, layouts that work on mobile, desktop, or any other device.

Responsive Web Design Fundamentals

Explore what makes a site responsive and how some common responsive design patterns work across different devices. Learn how to create your own responsive layouts and experiment with breakpoints, and optimizing text and more.

Responsive web design basics

Much of the web isn't optimized for those multi-device experiences. Learn the fundamentals to get your site working on mobile, desktop or anything else with a screen.

  1. Responsive web design basics
  2. Set the viewport
  3. Size content to the viewport
  4. Use CSS media queries for responsiveness
  5. How to choose breakpoints

Responsive web design patterns

Responsive web design patterns are quickly evolving, but there are a handful of established patterns that work well across the desktop and mobile devices

  1. Responsive web design patterns
  2. Mostly fluid
  3. Column drop
  4. Layout shifter
  5. Tiny tweaks
  6. Off canvas

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Terms of Service.