Why blocks on a Nemi share page never overlap

When you send a link from Nemi, the person on the other end lands on a page. You can design that page: a header, your files, a note from you, a countdown, a button, laid out on a twelve column grid. Every link your workspace sends opens the same design, including links you sent last month. That last part is why one rule in the editor is absolute: two blocks never share a cell.

Why can't blocks overlap on a share page?

A free layout would let them. A block would sit exactly where it was dropped, and if that was on top of another block, the browser would paint one through the other. That is how a whiteboard works, and on a whiteboard it is right: Nemi's own Canvas lets you stack a sticky note over a screenshot because the person drawing it is the person reading it, and layering is the point.

A share page is a different kind of object. One person designs it, and thirty people open it, on screens the designer never sees, with files the designer did not have in front of them while they were arranging the page. Overlap on that kind of page fails in three ways, and none of them shows up while you are designing:

• Text over text is not layered, it is unreadable. A heading that slides under a note on one link because that link's name is longer is a page your client cannot read.
• Two blocks in the same place have no honest reading order. Which one comes first for a screen reader, or for the keyboard? Any answer is a guess.
• The phone layout falls apart. A phone stacks the blocks in reading order, so a guess about order becomes a phone page in an order that matches nothing anybody designed.

A sender cannot preview every link they will ever send. So the editor has to be the thing that cannot produce a broken one. It is the same reasoning behind a type scale the build enforces: a rule that holds only when everybody remembers it does not hold.

What happens when you drop a block on another one?

The block you are holding goes exactly where you put it, and whatever it lands on moves down just far enough to clear it. If that block now lands on a third, the third moves down too, and so on to the bottom of the page. Nothing is ever pushed up, left or right.

Down is the only direction that cannot surprise anybody. Pushing sideways would swap columns around behind your back. Pushing up would make blocks jump out from under the pointer. Down keeps every block in its own column at its own width, and it leaves alone the gaps you left on purpose: whitespace above a block you did not touch is still there afterwards.

Closing gaps is a separate button, Tidy up, which grows any block that is cut off and then pulls everything up until it touches. It is separate because it throws away deliberate whitespace, which is right when you ask for it and wrong at every other moment.

Why does dragging back undo the push?

This is the detail that makes the rule bearable, and it is worth trying in the figure with both settings. A drag is dozens of frames. If each frame worked out the push from the page as it was one frame earlier, a block dragged down across the page would shove its neighbour a little further on every frame, and dragging back up would leave the neighbour wherever it ended up, because nothing ever pushes up.

So the editor takes a snapshot of the page the moment a drag starts, and every frame is computed from that snapshot plus the block's new position. Let go where you picked the block up and the page is exactly as it was. The same snapshot is what undo goes back to, so a whole drag is one press of undo rather than a hundred.

How does the phone layout work?

There is no phone layout to design. On a narrow screen the blocks stack in reading order: down the page, then across, so of two blocks on the same row the left one comes first. The page is written into the HTML in that same order, which means the phone layout, the order the tab key moves through, and what a screen reader announces all follow the page as it looks. A stored second layout would be a second design to keep in step with the first, and it would fall out of step.

The one choice you get is per block: hide it on phones. A wide gallery that is a delight on a laptop can be a long scroll on a phone, and that is the sender's call to make.

What if the words do not fit the block?

Rows have a fixed height, 32 pixels with a 12 pixel gap, across 12 columns. Fixed rows are what make a drag land under the pointer, and the price is that you can give a block less room than its contents need, especially once a long file name or a long message arrives on a real link.

When that happens the block is clipped, never spilled. The overflow is cut off at the bottom of the block rather than painted over its neighbour, the editor measures the difference and marks the block Cut off, and Make it fit grows it to the height its contents need, pushing what is below down like any other move. Cut off and fixable in one press is better than spilled across the page and invisible until a client opens it.

The editor is the one place a sender sees the page. So it is the one place a broken page has to be impossible.

The same rule runs on the way in, not just in the editor: when a page is saved, whatever layout arrives is settled by the same function before it is stored, so a page written by hand, or saved by an older editor, is held to it too.

Who can design the page?

Anybody who can edit the workspace can design its page and publish it, and changes stay a draft until somebody presses Publish, so your links do not change while you work. There is one page per workspace, and every link that workspace sends opens it.

The foot of every page carries a small line saying it was sent with Nemi. It is not a block, so there is nothing to move. It follows the plan of whoever owns the workspace: on Free it is always there, and from Starter upwards (Starter, Creator, Pro, Max, Business) it can be switched off, because that is the same plan line that lets your own branding replace ours. From Creator up, a workspace can also serve its links from its own domain. The step by step guide is in the help centre: designing the page people land on, with branding covered in branding your share page. For everything else a link can do, see Sharing, and for what the page tells you about who opened it, see link statistics without tracking.