Planning Media for Responsive Pages

Responsive design is not only a resizing task. A four-column grid becomes a long stack, a portrait image can dominate several screens, and carousel text can displace its controls. The editorial sequence must remain clear at every width.

Choose crops that tolerate change

Keep important subjects away from fragile edges and areas likely to hold text or controls. When one crop cannot serve every context, prepare intentional alternatives rather than relying on unpredictable automatic cropping.

• Wide context images need a mobile crop that retains the primary subject.
• Portrait images need limits so they do not overwhelm the reading flow.
• Diagrams need readable labels or an accompanying textual explanation.
• Captions must stay visibly associated with the correct image after reflow.

Keep interactions within reach

Carousel controls, position indicators, and slide actions should remain visible without forcing excessive scrolling. Touch targets need enough space, keyboard behavior must still work, and autoplay should never prevent someone from reading at their own pace.

1. Test the natural reading order after columns collapse.
2. Check controls with touch, keyboard, increased text size, and zoom.
3. Confirm that critical copy and actions are not hidden in later slides.
4. Review the complete page on a slower mobile connection.

Deliver only the media each device needs

Use responsive sources, modern formats, suitable compression, explicit dimensions, and lazy loading below the fold. Performance is part of the experience: a beautiful image that arrives too late cannot support the story. Reserve high-resolution files for moments where the additional detail has real editorial value.