Mycelium

I · Meaning

A Phone Is Not a Small Screen

The medium is part of the journey

For years the question of mobile was asked as a question of width. The same page, narrower: the columns stack, the sidebar folds into a menu, the type gets a little bigger, and the thing is called responsive. That work matters, and it answers a real question. It just isn't the first one.

The person holding a phone isn't the person at the desk with a smaller window. They're somewhere else, doing something else, with a different amount of time, a different hand free, and a different reason to have opened the thing at all. The width is the least of it. The medium changes the journey, and the journey is where the screens should come from.


How far apart should they be?

There isn't one answer to mobile. There's a range. At one end, the same product, laid out again for a narrower screen: the same features, the same flows, the same words, rearranged. That can be done with real care for the journeys, and for a lot of products it's exactly right. At the other end, a dedicated app, built for the phone from the start, that shares the data and almost nothing else. Between them sits everything else: the product that changes its flows on a phone, not only its layout; the one that leaves some features out on purpose; the one that does things on a phone it can't do anywhere else.

None of those is the correct one. Each is a decision, and each answers a why that's worth asking out loud before it gets answered by default.

Take the person who knows a feature exists, because they use it at their desk every week, and who now can't find it on their phone. Did it move? Is it hidden behind a menu? Did it never exist here? Some products decide the honest thing is to say so: you can't do this on mobile; open the web app. That sentence is a small promise kept, the product telling the truth about its own edges. The silent version, where the feature is simply not there, leaves the person wondering whether they misremember, or whether something broke.

It works the other way, too. Sometimes a journey needs the phone, and the computer is the wrong place for it. Signing in on a laptop and approving it on the phone in your hand. Photographing a document instead of typing it out. Signing a contract with your finger or a stylus, instead of steering a mouse through the letters of your own name. Scanning an ID and then your own face, so the system knows the person holding it is the person on it. Anything that has to know where you are, right now. Then the honest notice points the other way: open the app on your phone to finish this.

Ride-hailing and scooter rentals are the clearest case. The journey starts where the person is standing. The car has to find them; the scooter is the one in front of them, unlocked by scanning the code on its handlebar and paid for when they step off. A desk has nothing to add to that. So does a product like that need a web version at all? Maybe for the parts of the journey that don't happen on the street: booking a ride for someone else, an airport pickup arranged the week before, a year of receipts for the expense report. The question underneath is the same one in both directions: which parts of this product happen where the person is standing, and which happen where they sit?

And then the far end of the range. My bank is the first fully digital bank in Israel, and it has only a phone app. No website to log into, nothing on a computer at all. Its own answer to why is right there in its help pages: as a digital bank, it believes keeping everything in the app, with push notifications, is the most convenient way to stay in touch with its customers, and it doesn't rule out a website one day, if people ask for it. That's the reason they give. Whatever else sits behind it, security, regulation, the cost of building and protecting a second front door, I'd only be guessing. Products get made inside businesses, with budgets, risks and regulators, and not every reason makes it onto a help page.

But I can ask what it means for me, as the person on the other end, and I don't think the answer is one-sided. I gain a bank that's always in my pocket, that knows it's me by my face, that tells me about a payment the moment it happens, and that only has one surface to learn. What do I lose? The big screen for a year of transactions. A keyboard for the long reference number. The calm of doing my money at a desk instead of on a bus. And on the day my phone breaks, or gets stolen, or runs out of battery the morning rent is due, where is my bank?

And who isn't in the room at all? Someone without a smartphone, or with an old one. Someone whose eyes find a phone screen hard. Someone who shares a computer at the library but not a phone. A phone-only product is a decision about who it's for, whether or not anyone said it that way. That isn't a criticism. It's the question I'd want the people who made it to have asked, and I'd guess they did.


What changes when the screen is in a hand?

Where the person is, first. A desk is a place you go to work. A phone comes with you to everywhere that isn't a desk: the queue, the car park, the kitchen, the five minutes before a meeting. So the same product meets the same person in situations it was never drawn for.

Then the body. A phone is held, often in one hand, with the thumb doing everything. Hoober (2013), watching people use their phones out in the world, found about half of them holding it in one hand, and the grip shifting all the time as they went. What the thumb can reach comfortably is a smaller area than the screen, and it isn't the top of it.

Then attention. A phone gets interrupted. A message lands on top of what the person was doing, a call takes the whole screen, they put it in a pocket mid-task and take it out four minutes later in a different mood. A journey on a phone has to survive being dropped halfway and picked up again, cold.

<figure data-here="1" style="margin:1.6rem 0;text-align:center"><svg width="400" height="234" viewBox="0 0 400 234" role="img" aria-label="a phone held in the right hand: the lower middle of the screen is easy for the thumb, a band above it and the corner under the thumb are a stretch, and the top and far side are out of reach"><defs><clipPath id="tr-screen"><rect x="157" y="28" width="98" height="178" rx="3"/></clipPath><pattern id="tr-hatch" width="5" height="5" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><line x1="0" y1="0" x2="0" y2="5" stroke="#d8d2c8" stroke-width="1"/></pattern></defs><g clip-path="url(#tr-screen)"><rect x="157" y="28" width="98" height="178" rx="0" fill="url(#tr-hatch)"/><circle cx="268" cy="200" r="145" fill="#eeeae3"/><circle cx="268" cy="200" r="100" fill="#f2e4e1"/><circle cx="268" cy="200" r="42" fill="#eeeae3"/><circle cx="268" cy="200" r="100" fill="none" stroke="#7a1f1f" stroke-width="1.2"/></g><rect x="150" y="10" width="112" height="214" rx="14" fill="none" stroke="#c9c2b6" stroke-width="1.4"/><rect x="192.0" y="17" width="28" height="4" rx="2" fill="#e0dad0"/><text x="130" y="44" font-family="Inter, system-ui, sans-serif" font-size="9" font-weight="500" fill="#3a3631" text-anchor="end">out of reach</text><text x="130" y="55" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="end" font-style="italic">a second hand, or a shuffle</text><line x1="134" y1="40" x2="170" y2="40" stroke="#8f887d" stroke-width="0.8"/><circle cx="170" cy="40" r="1.8" fill="#8f887d"/><text x="130" y="94" font-family="Inter, system-ui, sans-serif" font-size="9" font-weight="500" fill="#3a3631" text-anchor="end">a stretch</text><text x="130" y="105" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="end" font-style="italic">the grip shifts</text><line x1="134" y1="90" x2="200" y2="90" stroke="#8f887d" stroke-width="0.8"/><circle cx="200" cy="90" r="1.8" fill="#8f887d"/><text x="130" y="164" font-family="Inter, system-ui, sans-serif" font-size="9" font-weight="500" fill="#3a3631" text-anchor="end">where the thumb lives</text><text x="130" y="175" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="end" font-style="italic">easy, without thinking</text><line x1="134" y1="160" x2="214" y2="160" stroke="#8f887d" stroke-width="0.8"/><circle cx="214" cy="160" r="1.8" fill="#8f887d"/></svg><figcaption style="font-size:.8rem;color:#a8a298;font-style:italic;margin-top:.4rem">One phone, one hand, the right thumb. The top of the screen, where most menus live, is the part it reaches least.</figcaption></figure>

Then input. There's no hover, so nothing can hide behind one. Typing costs more, and every field asks more of the person than it does at a keyboard. But the phone has things the desk doesn't: a camera, a location, a microphone, and the oldest one, the call itself. The two steps ahead of someone looking at a contact on a phone are different from the two steps at a desk, because on the phone the call is one tap away and on the desk it's a different device.

None of that is about pixels. A phone version of a product that only rearranged the desktop's boxes has answered how the screen is shaped, and skipped what the person in front of it is doing.


And the desk?

The desk is the opposite situation, and it deserves the same respect instead of being treated as the default.

At a desk people stay. An hour, a whole working day. They have a keyboard and learn its shortcuts, a pointer precise enough for small targets, room for a list and the thing beside it, and often a second screen with something else open. The people who live in a product all day, the dispatcher, the support agent, the bookkeeper, want density there that would be cruel on a phone: forty rows at once, everything a keystroke away, nothing animated that they have to wait for.

So "mobile first" and "desktop first" are both slightly wrong as slogans. The question is which journeys happen where. Some of a product's journeys only ever happen at a desk. Some only happen standing up. Some happen on both, and those are the ones that deserve the most thought, because the same person is doing the same thing in two different bodies.


The screen nobody touches

Take the medium to its far end: a screen on a wall. The announcements in a school corridor, the queue numbers at a clinic, the departures board, the dashboard on the office TV.

Nobody uses it. There's no input at all: no tap, no scroll, no back, no hover, nothing to search. It's read from three meters away, in passing, by someone who was walking somewhere else and will give it a few seconds at most. It's public, so whatever is on it is on it for everyone. And it moves on its own schedule; if the slide the person needed went by while they were looking at their shoes, it's gone until it comes round again.

Everything a screen like that says, it says through what it shows and when. How big, how few, in what order, for how long, and how often it comes back. It's the purest case of the whole book's argument: there's no interaction to hide behind, so the meaning has to be there, in the form, at a glance, or it isn't there at all.


Paper is a medium too, and the one this book borrows from most. A page is finite, it doesn't scroll or update, and the limit forced a discipline of deciding what matters, one I keep borrowing from.

This book is itself three media. It's a printed A5 page. It's a spread on a desktop screen, two pages side by side, turned with a key. And it's a single page on a phone, turned with a thumb, read in a break. The words are the same. Whether the reading is the same is something only the reader can say.


Where this bends

None of this means a separate product for every device. Most products are one product, and most of their screens should hold up at any width, which is exactly what responsive work is for. Nor does every phone version need to do less; sometimes it should do something the desk can't, like scan the thing in front of the person instead of asking them to type it.

The narrower point is about the order of the questions. Width is a question about the screen. The medium is a question about the person: where they are, what they're holding, how long they have, what they can do with their hands, and what just interrupted them. Ask that first, and the width usually turns out to be the easy part.