Designing Responsive Mobile Friendly Pages

Make layouts adapt comfortably across phones, tablets and large screens.

What you will learn

• Use fluid sizes and responsive images
• Apply mobile-first media queries
• Test content at many viewport widths

Before you begin

Create a separate practice folder and use non-sensitive sample content. Keep backup copies before restructuring files. Browser interfaces vary, so use the browser developer tools available on your computer.

Start fluid

Responsive design lets content adapt to available space. Use relative units, flexible layouts and images that do not exceed their containers.

Include the viewport meta element so mobile browsers use the device width correctly. Avoid a fixed page width that forces horizontal scrolling.

Add breakpoints for content

Begin with a simple single-column layout, then add a media query when the content has enough room for another arrangement.

Choose breakpoints where the design begins to fail rather than targeting a list of device brands. Keep touch targets and spacing comfortable.

Test resizing and zoom

Resize the browser slowly to find overflow, clipped text and awkward wrapping. Test portrait and landscape views and zoom the page.

A responsive page must remain usable with long content, larger text and keyboard navigation, not merely match a screenshot at three widths.

Guided practice

1. Add the viewport meta element and fluid image CSS.
2. Make the card grid change from one to multiple columns when space permits.
3. Test from a narrow width to a wide width and record fixes.

Knowledge check

1. What does the viewport meta element help with?
2. How should breakpoints be selected?
3. Why test with larger text?

Completion standard

Continue when you can complete the guided practice and explain the knowledge-check answers in your own words.