Breakpoints and web pages

A web page has to work in a window nobody chose the width of. PopCraft keeps one design and lets each layer differ at narrower widths, instead of a separate copy of the page per device.

Breakpoints

The breakpoint bar sits over the canvas in a Web or App file, and whenever the web preview is open. It lists the file's breakpoints, widest first:

1. 1.Pick Phone on the breakpoint bar: the canvas lays the page out at that width0:00
2. 2.Change the layout there: set the row's flow to vertical0:01
3. 3.The Design panel lists what the layer sets at this breakpoint0:03
4. 4.Desktop is untouched0:05

Description

The website template with its row of three feature cards selected. Phone is picked on the breakpoint bar over the canvas, and the page is laid out again at a phone's width. In the Design panel the row's flow is set to vertical: the cards stack, and an "At Phone" section lists the layout mode as what the row sets differently there. Back on Desktop the cards sit side by side as before.

1. Pick Phone on the breakpoint bar. The canvas lays the page out again at that width.
2. Change the layout there: set a row's flow to vertical, hide a sidebar, make a headline smaller.
3. The Design panel's At Phone section lists what the layer sets differently. Click a property to reset it, or Reset all.
4. Pick Desktop. The design is as it was.

What a breakpoint can change is layout, size and visibility: the flow and its spacing and padding, alignment, grid columns, how a layer is sized (fixed, hug, fill) and its width, height and limits, its position, whether it shows, and a text's size, line height and alignment. Colour, effects and the words themselves are the same at every width, so editing those on Phone changes them everywhere.

A narrower breakpoint inherits from the wider ones. What you set on Tablet also holds on Phone until you set it again there.

To change the widths, click the gear at the end of the breakpoint bar: rename a breakpoint, set the window width it applies up to and the width the canvas shows it at, add one, or go back to the defaults. Removing a breakpoint drops what layers set there.

On the page each breakpoint is a media query. The web preview's width picker lists the same breakpoints.

What a layer is on the web

Select a layer and open the Design panel's Web section:

• Element: a heading (h1–h6), a landmark (header, nav, main, footer, section, article, aside), a list (ul, ol, li), a button, a figure or a label. Left on automatic, a text is a paragraph and anything else a div.
• Accessible name: what a screen reader says where the layer's words don't, such as an icon button's "Close".
• Hide from screen readers: for decoration.
• Anchor: the id the layer has on the page, so a link can go to #pricing.
• Link: makes the whole layer a link to a web address, another screen, a layer on this page, an email address or a phone number.

The Open link prototype action does the same from any trigger. Web addresses open in a new tab unless you turn that off. Only http, https, mailto and tel addresses are written to the page.

Pages and addresses

Every top-level frame is a page. Select one and the Web section also shows:

• Address: /pricing, /blog/first-post. Left empty, the first screen (or the flow's starting frame) is / and the others are named for their layer.
• Page title and Description: what a browser tab and a search result show.
• Show for addresses the site does not have: makes the frame the site's 404 page.