A smaller screen needs a different story

Mobile layout often becomes a separate design effort because smaller screens do not support the same cinematic experience as desktop. Shrinking a desktop layout into narrower proportions can fail for expressive or editorial projects. Mobile behaves more like a sequential flow than a simultaneous stage, requiring clarity, sequencing, timing, and focus. Content may need to change across formats, including showing less text and using a different mix of images. Interaction differences also drive restructuring, since taps replace clicks and hover states are not available. Layout decisions such as multi-column spacing on desktop may need to be redesigned for mobile to fit its interaction model and reading behavior.

"Back in the day, designing for mobile largely meant making things smaller. A desktop layout would be compressed into narrower proportions, with columns stacked and images resized. Responsive systems made this feel almost automatic. But for designers working on more expressive or editorial projects, mobile adaptation rarely feels this simple. If desktop can be compared to a stage, mobile is more akin to a flow, where simultaneity gives way to sequence. Mobile asks for different priorities: clarity, sequencing, timing, and focus."

"“There's a mantra a teacher once told me that I always keep in my head,” says Francisco Pires. “'Adapt the content to mobile.' Sometimes you don't need to show the full text on mobile because people don't want to read huge amounts of text on a very small screen. It's completely okay to have a slightly different version across formats. Even some studios do this-on mobile they simplify things and use a different mix of images, then on desktop they show a lot more information.”"

"“On desktop, we had a huge amount of space, so we could feature columns on the left and right, with the text sitting in the middle. But I was convinced we simply couldn't do this in the same way on mobile,” Francisco shares. “Interaction is different there. You don't really have clicks in the same sense-you mostly have taps. You don't have hover, so you need”"

Read at Readymag Blog