Mobile web

Mobile web is where most traffic actually lands, and most designs still treat it as a compression of the desktop layout. The mockup below is a portfolio design for a fictional independent bookshop called Ruled Lines. Desktop on the left, mobile on the right, both rendered at the same visual scale so the tradeoffs are obvious.

Two layouts, one content model

The desktop shows four products in a single row under the hero. The mobile shows two per row in a 2x6 grid below a shorter hero. Same content, different density. No hidden items on mobile, no navigation collapsed behind a hamburger menu that lies about how much is inside.

Type scales down more than it needs to

The desktop headline is 34 point. On mobile it is 18. That is a bigger jump than most sites make. Trying to preserve the desktop headline size on a 375-pixel screen crowds the hero and pushes the product grid below the fold. Better to sacrifice a little of the display feel and let the reader see two rows of books above the fold.

Navigation that respects the thumb

The desktop nav shows five items across the top. Mobile compresses to a logo, a bag count, and a hamburger. Every high-value action (Shop, Journal, Visit, Bag) lives inside the sheet the hamburger opens, and the sheet opens from the right so the reader's thumb reaches the close control without stretching. The bag count survives at the top because it is the only navigation item that has state.

Images that carry their weight

Product tiles are solid coloured swatches in the mockup because the real design uses full-bleed book covers. On mobile these tiles compress to 40 percent of their desktop size but the covers remain readable because titles are set on the card, not on the cover. Overlaying type on the cover would work at desktop scale and would fall apart at mobile scale. Separating the two means one image serves both breakpoints.

Design decisions

• Two column mobile grid. One tall column of products feels endless. Two per row respects the way people actually scan.
• Bigger relative type gap. Mobile headline drops harder than the ratio suggests so the hero clears the fold quickly.
• Persistent bag count. The one navigation element that carries information stays visible at every breakpoint.
• No image overlay type. Titles sit below the tile so a single image asset works at every size.

The stack

Platform

Shopify with a custom Hydrogen storefront on Cloudflare.

Design tools

Figma with autolayout for the four defined breakpoints.

Front-end

React with CSS grid, container queries for the product tiles.

Performance

Image CDN with responsive srcset. Sub-1s LCP on 4G targets.