Complete Layout Guide
Layout as a whole: hierarchy, grids, spacing, alignment and balance, then how layouts adapt to different screen sizes. Long, but it is the connective tissue between this stage and the responsive work later.
Watch on YouTube (opens in a new tab)Third-party video. It is loaded from YouTube and is not hosted by the academy.
By the end of this lesson you can
- Plan a layout that works from small phones to wide screens.
- Use content priority to decide how a layout reflows.
- Choose breakpoints based on content rather than specific devices.
- Avoid common responsive failures such as hidden content and horizontal scrolling.
The idea
Composition is the arrangement of elements on a screen to create a clear, balanced whole. Responsive design is making that composition adapt to the space available, from a narrow phone to a wide monitor, and to settings like zoom and larger text.
Start with content priority
On a narrow screen, everything stacks into one column, so the order of content becomes the hierarchy. Decide the order first: what must people see first, what supports their decision, what is optional. That order should be the same on every screen size, even when wide screens place things side by side.
How layouts adapt
- Reflow: columns stack vertically on narrow screens.
- Resize: elements stretch or shrink within limits, for example images scale to the container width.
- Reveal or condense: wide screens can show more at once, such as a sidebar; narrow screens can move secondary content behind a disclosure. Do not remove essential content on small screens.
- Change pattern: a horizontal tab bar might become a menu, or a table might become stacked cards.
Breakpoints
A breakpoint is a width where the layout changes. Choose breakpoints where your content starts to look wrong (lines too long, cards too cramped), not around particular phone models, which change every year. Most products need two to four breakpoints.
Mobile first
Designing for the smallest screen first forces you to prioritise, because there is no room for everything. You then add layout enhancements as space grows. This approach also tends to produce simpler, faster pages. It is not the only approach, and complex desktop tools are sometimes designed desktop first, but the content priority exercise is valuable either way.
Zoom and reflow
Responsive design is also an accessibility requirement. WCAG asks that content reflows without horizontal scrolling at a width equivalent to 320 CSS pixels (which is what a 1280px-wide window looks like at 400% zoom), with exceptions for things like data tables and maps.
Why it matters in real projects
People use the same product on different devices, often within one task: researching on a phone, buying on a laptop. If the mobile layout hides prices or makes buttons hard to tap, people leave. Layouts that break at zoom levels exclude people with low vision. Responsive thinking is part of designing any screen, not a final adaptation step.
A realistic example
A university course page on desktop shows a left sidebar with key facts (duration, fees, start date, entry requirements) next to a long description. On phones, the sidebar was moved to the bottom of the page, so prospective students had to scroll past a long description to find the fees.
The team reorders the content by priority: course name, a short summary, then the key facts as a compact list, then the "Apply" button, then the full description in sections. On desktop the key facts still sit in a sidebar, but on phones they now come straight after the summary. Questions to the admissions office about fees and dates fall noticeably over the next term.
Step by step
List content in priority order
Write the content of a page as a single ordered list. This is your phone layout.
Sketch the phone layout
Draw it at 320 to 375px wide. Check the primary action is reachable without scrolling past unrelated content.
Widen until it looks wrong
In a design tool or browser, stretch the frame. Note the width where lines get too long or space feels wasted. That is a breakpoint.
Decide what changes
At each breakpoint, decide whether to reflow, resize, reveal or change pattern.
Check extremes
Check 320px wide, a very wide screen, long text, and 200% text size.
Common mistakes
Mistake Hiding important content on mobile to save space.
Instead Reorder or condense instead. People on phones need the same information.
Mistake Choosing breakpoints for specific devices.
Instead Choose them where the content needs a change.
Mistake Designing only the desktop and "squeezing" it later.
Instead Design the smallest layout early, or at least define content priority before desktop layouts.
Mistake Fixed widths that cause horizontal scrolling.
Instead Use flexible widths and test at 320px.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 45 min
Three-width layout
Choose a content-heavy page (a recipe, a product, a course) and design it at phone, tablet and desktop widths.
Steps
- Write the content in priority order.
- Design the phone layout first.
- Find natural breakpoints by widening the frame.
- Design tablet and desktop layouts that keep the same priority.
- Annotate what changes at each breakpoint and why.
Deliverable
Three annotated layouts and the priority list.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- On narrow screens, order is hierarchy; decide content priority first.
- Layouts adapt by reflowing, resizing, revealing and changing patterns.
- Place breakpoints where content needs them.
- Responsive design is also an accessibility requirement (reflow at 320 CSS pixels).
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
Your notes
Marking complete updates your course and roadmap progress.