Pages on a phone

Most customers open a shared page on a phone, from a link in a chat. A page needs no separate phone version: the same page rearranges itself for a narrow screen, by fixed rules. You do not set anything for it.

What changes on a phone

• Elements stack, each the full width of the screen, in the page's order. The widths and the layout you chose for a computer count for nothing here.
• Numbers pair up: two Numbers that follow each other share a row, half each. A Number with no Number beside it keeps the whole row. Start on a new line on a Number starts a new pair.
• The header shows the title, the main button and More, which holds the other buttons. Mark the button that matters with Make it the main button.
• The filter bar becomes one button, "Filters · 2" when two are set, with a chip for each value picked. It opens one sheet with every filter, whose picks apply at once; the sheet ends in a button such as "Show 264 orders".
• Tabs scroll sideways when they do not fit.
• Lists: Cards and List run to the screen's edges; a Table becomes compact rows. Category chips are not shown. Group headings stay at the top while their records scroll under them, and totals sit in one line at the foot of the screen.
• Charts drop their value labels. The first tap on a bar shows its value; the second tap does what the chart's click is set to do.
• Record pages take the whole screen, with a button back to the list.
• Pages and forms opened by a button as a panel or a popup open as a sheet. A button set to open as a full page replaces the page, as on a computer.

Check it before you send it

• When you make a page, the New page dialog draws it on a phone from the table's first rows.
• In the editor, switch between Desktop and Phone at the top to see the page at either width while you change it.
• Preview as customer shows the page as someone outside the team gets it: buttons shown only to members are left out.

Then open the published link on your own phone. A restaurant menu that staff update and guests read on their phones is the worked example in How to make a multilingual e-menu.