Written by DROPS.ST.
Give each mobile product card a clear reading order: recognisable item, exact format, current price, availability and the next action. Move secondary detail into the product view, but keep anything that changes the purchase visible before the customer adds it to the cart.
DROPS is built around mobile shopping, product details and a nearby cart. That layout works best when the catalogue itself is disciplined. Shorter names are useful only when they preserve the model, pack or choice customers need to order correctly.
Decide what belongs on the card
A dense catalogue does not need every specification on every tile. It does need enough information to distinguish similar products. Start with the question a customer must answer at that stage: “Is this the item I want to inspect or add?”
Here is an illustrative hierarchy for a fictional replacement pack.
| Card level | Example content | Reason it earns space |
|---|---|---|
| Product identity | Orbit V2 replacement pods | Identifies the family and product type |
| Purchase format | Pack of 2 | Explains the sellable quantity |
| Selected or required choice | Choose listed version | Prevents an ambiguous addition |
| Price | 8 per pack | Shows the required purchase price |
| Availability and action | Available; view details | Gives a truthful next step |
Full manufacturer specifications, detailed compatibility notes and gallery images can sit in the product detail view. Essential exclusions, such as “device not included”, may also deserve a short card-level note when the imagery could otherwise mislead.
Remove repetition before reducing text size
A title such as “Brand Orbit Premium Quality Original Orbit V2 Replacement Pod Cartridge Pack” spends scarce space repeating itself. “Orbit V2 replacement pods — pack of 2” carries more useful information in fewer words.
Avoid unexplained abbreviations that only staff understand. If two models differ by a short suffix, make that suffix visible instead of truncating both titles into the same first line. A neat grid is not a success when every product appears identical.
Keep badges selective. Five promotional badges, a rating, an animated sticker and a discount label can crowd out the actual pack size. Choose the one or two facts that help the current decision and remove decoration that competes with them.
Preserve readability when the screen changes
Test portrait orientation, larger text and a narrow browser window. W3C's reflow guidance describes adapting content to smaller viewports so people can read without unnecessary two-direction scrolling. Product-card text should not require sideways movement just to finish a sentence.
Look for clipped prices, overlapping labels and controls that shift when an image loads. Check that colour is not the only indication of the selected choice or availability. The words should still tell the customer what is happening.
Do not assume that fitting more cards above the fold improves the buying experience. Two readable cards may help more than four tiny ones. Compare actual shopping tasks rather than judging density by appearance alone.
Make the return from details feel predictable
Open a product, inspect a choice, return to the category and continue browsing. The customer should be able to understand where they are and what remains in the cart. Demonstrate that behaviour in the actual shop rather than inferring it from a screenshot.
Our mobile-first shop guide covers the wider journey. Use consistent product descriptions to make the detailed view as understandable as the card.
For a practical review, choose ten similar items and ask someone to find three exact products on a phone. Note where names, quantities or choices cause hesitation. Explore DROPS with that same set. Build a catalogue customers can scan comfortably and turn into a precise order.