Making a product interface work beyond the perfect screenshot

The layout failed between the obvious sizes.

While reviewing this studio website, we found product illustrations whose captions collided with their contents. The card still looked like a card. The text was still in the document. But the information no longer had enough room to be read comfortably.

The problem was especially apparent at intermediate widths, where a two-column layout made each product preview narrower than the overall screen suggested. Reviewing a large desktop screenshot and one phone screenshot had not been enough to describe that behavior.

This is an engineering note about changes to our own site on September 12, 2026. The examples are our product illustrations, not screenshots of customer systems.

Let content determine the height.

Our first correction was to put illustration captions into the normal document flow. A caption now occupies its own row instead of depending on an absolute position near the bottom of a fixed-height picture. When content wraps, the figure can grow with it.

We also reserved space for the card’s navigation arrow. Decorative controls should not consume the same space a caption needs to explain the product.

The collection uses CSS subgrid where supported to align corresponding rows between neighboring cards, with a fluid fallback. The goal is consistent alignment without requiring every description or illustration to have the same amount of text.

Respond to the space inside the component.

A large browser window can still contain a narrow card. We used a container query inside the Construction Nova illustration to rearrange milestone and status details according to the board’s available space.

The narrow layout keeps the information and labels its next action. This is more useful than shrinking the entire illustration until the text fits, or removing the status because the screen is smaller.

For the surrounding collection, a minimum card width helps determine when another column fits. Headings, links, and long text also need permission to wrap; a responsive grid alone cannot fix a child element that refuses to shrink.

Check text settings as well as devices.

Our local review covered 17 routes at 13 viewport widths from 320 to 1920 pixels. Additional checks increased text size to 200 percent and expanded text spacing on representative routes. Across the resulting 245 layout checks, the final run found no failures in the conditions tested.

We checked horizontal overflow, clipped illustrations, caption separation, and collisions between board cells. We also reviewed desktop and mobile screenshots. One text-resizing check exposed a small overflow around the team names that was not present at the default size.

These were Chromium-based emulation checks. They are evidence about specific tested conditions, not a promise that every device or browser has been tested. Changes to content can create new cases, so the checks belong in the release workflow.

Keep motion under the visitor’s control.

Entrance effects and hover effects can compete for the same CSS transform. We corrected an entrance-animation fill behavior that was preventing the intended hover movement after the entrance finished.

Pointer-following effects are limited to suitable pointer devices. The site respects reduced-motion preferences and provides a persistent pause control. Decorative loops pause when their sections are off screen or the page is hidden.

The underlying product content and navigation remain in static HTML. Motion adds feedback to information that is already there; visitors do not have to wait for an animation to create that information.

Measure the cost of the visual treatment.

We retained the original product logos and generated smaller lossless WebP sizes for the contexts in which they appear. A small icon no longer needs to download the full-size source image.

In one cold-cache local mobile sample, the homepage’s Largest Contentful Paint was 2.25 seconds and the collection’s was 1.40 seconds, with zero measured layout shift in those samples. The setup used a 390-pixel viewport, device pixel ratio 2, four-times CPU slowdown, 1.6 Mbps download, and 150 ms latency.

Those measurements describe a local lab run, not production Core Web Vitals or a universal visitor experience. Live performance needs its own measurement once traffic arrives.

A useful order for the next interface review.

1. Start with the content that is hardest to fit.
2. Test the component at intermediate widths, not only the full page at desktop and phone sizes.
3. Increase text size and spacing before hiding information.
4. Check keyboard use, touch, and reduced motion.
5. Measure the page after its images and interactions are in place.

See the product collection to explore the resulting layouts, or read how we approach product design and software development.

Source: Oddly Brilliant Studios’ September 12, 2026 responsive review and local performance checks. This article reports that specific review, including its limitations.