Mobile-first design approach

One site, designed from the phone

Most visits to a public site arrive on a small screen. A layout that starts on a desktop and is then squeezed will hide the action, stack the navigation into an afterthought, and ship images the phone should never have downloaded. We design the Drupal theme from that smaller viewport and let the larger screens earn their extra space.

It is still one codebase. There is no separate mobile site to keep in sync, and no template that only exists at one breakpoint. Content, languages, and permissions stay in Drupal. The theme decides how that content is presented when the window is narrow, and how it opens up when there is room.

Performance is part of the layout

A responsive grid that loads a desktop photograph, three unused libraries, and a menu built for a mouse is not mobile-first. We keep the public page to what the view needs: images that fit the slot, type that can be read without zooming, targets that a thumb can hit, and CSS that does not wait on a script before the page is usable.

Editors need to see the same thing. A preview that only makes sense on a wide monitor will produce pages that fail on the device the audience uses. The editorial check is part of the theme, so a publisher can look at the small layout before the page is public.

• Layouts drawn for the small screen first, then expanded.
• Touch targets, type size, and navigation that work without a precise pointer.
• Images and front-end weight chosen for the viewport, not scaled down afterwards.
• One Drupal theme, so a content change appears on every device.

The brief it belongs to

Use this when the Drupal platform is the public site: a programme, an institution, a service people open on the way to something else. The mobile layout is not a phase after visual design. It is the design, and it ships with the modules, the content model, and the handover.

This work sits inside Drupal Development. Start a Drupal project — tell us the organisation, the platform, and the constraint.