Working with Responsive Frames and Layout Blocks

Frames and blocks are the two building materials of every StretchWire board. This article explains what each is, how they relate, and how to use them to plan a screen that reflows cleanly across breakpoints.

What a frame is

A frame is a responsive artboard inside a board — a fixed-width canvas that represents one breakpoint. When you create a board, StretchWire seeds three frames automatically:

• Desktop — 1440 px wide (the default working canvas for web layouts)
• Tablet — 834 px wide
• Mobile — 390 px wide

Each frame is independent: the blocks you place on Desktop don't automatically appear on Mobile. That's deliberate — it lets you decide exactly how a layout reflows at each size instead of forcing an identical arrangement.

Frames vs. viewport mode

Don't confuse the two:

• Viewport mode is a property of the whole board (responsive, mobile, tablet, email, canvas). It signals what kind of thing the board is.
• Frames are the artboards inside the board where you actually lay out content.

A responsive board uses all three frames to plan one screen across sizes. A mobile board focuses on the phone breakpoint. A canvas board (used for user flows, sitemaps, and component boards) is free-form, where fixed breakpoints don't apply.

What a block is

A block is a structural piece placed inside a frame. Every block has:

• A type — for example a hero, or a content section.
• A position — x and y coordinates on the frame.
• A size — a width (w) and height (h).
• Content properties — editable fields appropriate to the block. A hero, for instance, carries an eyebrow, a headline, body copy, and a call-to-action label.

A fresh board's Desktop frame starts with a single hero block containing placeholder eyebrow, headline, body, and CTA — a starting point you replace with your real structure.

Build a screen across breakpoints

1. Open the board in the canvas and select the Desktop frame.
2. Place the major blocks top to bottom: hero, then the content sections the page needs, then a footer region.
3. Size and position each block to reflect its real weight on the page (a full-width hero spans the frame; a sidebar takes a column).
4. Replace placeholder content with real intent — the actual headline, the real CTA label — so the wireframe communicates purpose, not lorem ipsum.
5. Switch to the Tablet frame and rebuild the same content for a narrower canvas (often two columns collapse toward one).
6. Switch to the Mobile frame and stack the content in a single column in priority order.

Tip: Wireframes are about structure and hierarchy, not polish. Greyboxing with clearly labeled blocks beats detailed styling at this stage — save the visuals for the design tools downstream.

Example

For a Pricing board you place, on Desktop: a hero ("Simple pricing"), a three-column plan-comparison block, an FAQ section, and a CTA band. On Tablet the three plan columns become a two-up grid; on Mobile they stack into a single scrollable column with the most popular plan first. Anyone reviewing the board immediately understands the page's structure and how it adapts.

Tips

• Keep block labels honest — name a form a form, a nav a nav — so reviewers read structure at a glance.
• Reuse the same block order across frames where possible; consistent hierarchy across breakpoints is easier to design and build.
• For non-page artifacts (flows, sitemaps, component inventories), use a canvas board and treat blocks as free-form nodes.

FAQ

Can I add my own breakpoint sizes? Boards start with the standard Desktop (1440), Tablet (834), and Mobile (390) frames. Use the viewport mode and frames that fit your artifact; for free-form work, use a canvas board.

Do blocks carry styling like colors and fonts? No — blocks capture structure, position, size, and content intent. Visual styling belongs in the design stage after the wireframe is locked.

If I change a block on Desktop, does Mobile update too? No. Frames are independent by design so you control how each breakpoint reflows.