Working on a phone

The stacked layout, the bottom sheet, and two fingers on the canvas.

The layout

Below 700 pixels wide the editor rearranges itself rather than shrinking. The canvas takes the window. The header keeps four things: the wordmark, Save, Run and a menu button holding everything else. The code editor, the serial monitor and the Build tab become one bottom sheet with tabs, and the part panel comes up from the bottom of the screen instead of docking to the left.

Every target is at least 44 pixels, and no page on the site scrolls sideways.

Two fingers

Put two fingers on the canvas and it pinches. The point of the circuit under the midpoint between your fingers stays under it while you move: spreading zooms in, pinching zooms out, and moving both fingers pans.

Whatever the first finger had started is put back before the pinch begins. A half-dragged part goes home, a held pushbutton lets go, and a wire being drawn is dropped. That is deliberate: the second finger means you wanted to look at something, not that you wanted to finish the drag.

Lifting one finger ends the gesture and leaves the view where it is. The finger still on the glass does nothing until it presses again.

One finger

One finger drags a part, draws a wire from a pin, or pans the empty canvas, exactly as a mouse does. Everything in the editor is built on pointer events, so there is nothing that needs hover to be discovered and nothing a finger cannot reach.

Hold a tile in the part panel for a moment and its description appears.

Typing

The code editor works with the on-screen keyboard and starts at a readable 14 pixel visual size. Pinch with two fingers or use the minus, percentage and plus controls below the code to move from 11 to 22 pixels. Long lines stay whole and pan sideways. The editable layer remains at Safari's 16 pixel focus threshold, so tapping into code does not enlarge or move the whole page.

The rest of the site

Every page works at phone width. Worth knowing:

• a section's button moves under that section's content rather than sitting under the heading;
• the parts bench is two tiles across and shows eight at a time behind a Show more that says how many are left;
• plan cards, project cards and board tiles read centered;
• the footer's four link lists sit two across under the brand;
• the help button clears the home indicator at the bottom of the screen.

Is a phone enough?

For reading a circuit, changing a value and pressing Run, yes. For laying out a board of forty parts, a larger screen is easier, and the same project opens on both: the account carries it between them. See saving and autosave.

You can also add Mokxi to the home screen so it opens like an app: install it as an app.