What is RWD?

Responsive web design isn’t your site working on phones and tablets. It’s about your site working everywhere. Responsive website is built on a fluid grid and uses media queries to control the design and its content as it scales down or up with the browser or device.

Example of a responsive grid

Mobile-first approach

Websites and applications should be designed and built for mobile first. It prepares you for tech growth, forces you to focus and prioritize and saves you time. Starting with mobile-first approach is very restrictive and forces you to make decisions early.

Breakpoints

•Resolution breakpoints are horizontal widths of browsers / screen sizes
• Mobile: 0px — 767px
• Tablet: 768px — 991px
• Medium desktop: 992px — 1200px
• Large desktop: 1200 — and up

• In reality you might take into account
• device pixel ratio
 • orientation