Responsive design constraints

What a constraint actually controls

A constraint is a rule about what an element does when the space around it changes. It does not move the element while you design, and it does not reflow content. It records a decision so the editor can apply it again when the frame gets bigger or smaller, which is why a decision survives a real project.

Canvasola has two constraint settings, one per axis, and each offers five behaviors. Horizontally an element can be fixed to the left, center or right, stretched or scaled. Vertically it can be fixed to the top, center or bottom, stretched or scaled. Choosing a constraint is choosing which statement is true about the element.

The default is fixed to the left and fixed to the top, which suits most elements and traps the rest. A block fixed left inside a container that widens to 1280 pixels stays 16 pixels from the left edge while everything else slides away. Sometimes that is right. The layout concept guide covers making these rules while the design is still blocky.

• Left, center, right, stretch and scale on the horizontal axis
• Top, center, bottom, stretch and scale on the vertical axis
• Fixed left and fixed top is the default for every new component
• A constraint records a decision rather than creating a layout

Note: The constraints sit in their own section of the inspector, separate from the layout section that holds auto-layout, and the two are easy to confuse because both talk about position.

Fixed to the left, center or right

Fixed positioning pins an element to one edge of its container and holds the distance from that edge. Fixed to the left means the gap to the left edge stays the same as the container widens. That suits a menu rail, a sidebar, a column of text on a page edge, and anything that should stay put.

Fixed to the right does the same job on the other side, and it suits a trailing action in a top bar, a close control and a number at the far end of a row. Fixed to the center is for elements that belong in the middle, such as a dialog.

• Fixed to the left for rails, sidebars and page edges
• Fixed to the right for trailing actions and end-of-row totals
• Fixed to the center for dialogs and centered fields
• Ask whether the element marks an end or a middle

Stretch for text, scale for media

Stretch and scale both let an element respond to new space, and they are not interchangeable. A stretched element keeps its own size and gains or loses the difference, so a card gets wider while its height and the type inside it stay as they were. A scaled element multiplies position and size by the ratio, so it grows in both directions and its contents grow with it.

Stretch is the right choice for anything holding text, because text reflows inside a wider box. A stretched paragraph keeps the same type size and simply holds more characters per line, which is precisely what a responsive layout should do. Stretch also suits a row of cards that should share a width, and a background that should reach the edge of a wider panel.

Scale suits media, and it has a cost. A scaled image keeps its proportions, but text placed inside it is scaled too and becomes awkward to read, and scaled icons grow out of proportion with the type beside them. Use scale for pictures and video frames.

• Stretch keeps the size and gives up the space
• Scale multiplies the position and the size together
• Stretch anything that holds text
• Scale media that carries no words of its own

Note: Because the scale factor applies to the whole box, a scaled element can drift away from the edge it was aligned to, while a stretched element keeps the alignment you already had.

Vertical behavior is a separate decision

The horizontal constraint says what happens when the width changes, and the vertical constraint answers a different question: what happens when the height changes. They are chosen separately, and an element can be fixed horizontally while stretching vertically, which is the normal setting for a sidebar that runs the full height of a panel.

Fixed to the top keeps an element the same distance below the top edge, and it suits a header, a title or the first row of a list. Fixed to the bottom suits a footer bar, a summary strip and a floating action. Fixed to the center suits a dialog or an empty state message.

The vertical decision is where phone layouts go wrong, because a frame that is 844 pixels tall becomes 932 on a larger device and everything pinned to the bottom drifts. That is the rule working as written, so bottom elements have to be bottom anchored on purpose rather than by accident.

• Fixed to the top for headers and first rows
• Fixed to the bottom for footers and floating actions
• Fixed to the center for dialogs and empty states
• Stretch vertically for a panel or a background that fills the frame

Test on phone, tablet and desktop frames

Constraints are only as good as the resize you check them against, so run the test on real presets rather than by dragging the frame edge. The inspector offers Tablet at 820 by 1180, Laptop at 1280 by 800 and Desktop at 1440 by 900 beside the phone sizes, and each is a different problem.

The test is a pair of resizes in opposite directions. Widen the frame and check that nothing important has been pushed toward the far right. Narrow it and check that nothing has been crushed. Between those two checks most constraint mistakes show themselves.

1. Apply the laptop preset. Set the frame Preset to Laptop 1280 by 800 and watch which elements moved and which stayed exactly where you put them.
2. Apply the smallest phone. Switch the same frame to iPhone SE 375 by 667 and look for elements that are crushed or overlapping.
3. Fix the first thing that breaks. Change one constraint, resize again, and confirm that the rest of the frame still behaves the way you expected.

Note: Resizing re-applies the constraints to the children, so the test is quick, but nothing reflows your content for you. A row of cards that no longer fits still does not fit afterwards, and that one needs a layout change rather than a constraint change.

Where auto-layout beats constraints

Constraints and auto-layout solve different problems, and reaching for the wrong one is where mockups feel brittle. A constraint describes the relationship between one element and the space around it. Auto-layout describes the relationship between a group of elements and each other. How three cards sit next to each other is a question for auto-layout.

The most useful habit is to let a container own the space between its children and to use constraints for the things that sit against the frame. A column of cards inside a vertical container with a gap of 16 spaces itself correctly at any width. The mockup tutorial covers the rest of the build.

The cross alignment of stretch is the bridge between the two systems. A child set to stretch inside a horizontal container grows with that container, which gives fluid behavior without giving up control. The mobile layout guide covers the order content goes in, and the responsive layout guide covers the same rules on a full page.

• Auto-layout spaces the siblings, constraints position against the frame
• Let a container own its children and use constraints at the frame edge
• Cross alignment of stretch gives a child the width of its container
• Set the constraints last, once the structure has settled

Note: A container whose width or height is zero hugs its children, which is the setting to use when a group should sit at its natural size rather than fill the frame.

A checklist you can reuse

• Every element has a horizontal constraint that was chosen
• Text containers stretch and media scales
• The vertical rule was decided separately from the horizontal one
• Bottom anchored elements are anchored on purpose
• The frame was resized to a wider preset
• The frame was resized to the smallest phone preset
• The longest table, card row and title survived both resizes
• Auto-layout handles the spacing between siblings

Common mistakes to avoid

• Leaving every constraint at the default. Fixed left and fixed top is the starting point for a new component, and it leaves a row of cards stuck to one side of a wide frame. Set the constraints you mean.
• Scaling a text container. A scaled element scales its contents too, so the type inside grows with the box. Stretch the text and scale the picture.
• Treating the two axes as one rule. An element fixed left and centered vertically behaves very differently from one fixed on both sides. Decide the vertical rule on its own.
• Testing only the wider layout. Narrowing is where the crushing happens, and the smallest phone preset is the one people skip. Check both directions.
• Setting constraints before the structure. A constraint describes a position inside a container, so it means little until the container holds what you think. Structure first, then constraints.

Frequently asked questions

What is the difference between stretch and scale in a constraint?

Stretch changes the size of an element by the amount the space changed, so a card gets wider while its height and type size stay as they are. Scale multiplies position and size by the ratio, so the element grows in both directions and anything inside it grows too. Text belongs stretched, media scaled.

Do I need separate frames for phone, tablet and desktop?

Not separate designs. One frame resized between the Tablet 820 by 1180, Laptop 1280 by 800 and Desktop 1440 by 900 presets finds mistakes faster, because you watch the same elements react to the same rules. Add a second frame only when the content priority changes.

What happens when I resize a frame in App Builder?

The children are laid out against the new size using the constraints you set, so a stretched card gets wider and a bottom anchored button moves down. Nothing reflows the text inside a card, so the resize shows you the problem and leaves the solution to you.

Should I use constraints or auto-layout for a layout?

Use auto-layout for the space between siblings and constraints for elements positioned against the frame. A column of cards in a vertical auto-layout container spaces itself at any width, and the container holds the constraints that keep it in place.

This guide is part of the design foundations collection. For the wider product tour, read the complete Canvasola guide, and keep the keyboard shortcut cheat sheet open while you work.