CSS and UI capabilities refer to new CSS features and syntax which enable you to reduce or replace custom JavaScript solutions or some CSS hacks and help you write better and simpler code. Adopting modern CSS features enable developers to:
- Reduce development time.
- Improve code efficiency, readability, and maintainability.
- Improve performance.
- Create beautiful user interfaces that are seamless, efficient, and accessible.
In this series of case studies, learn how a variety of ecommerce sites adopted
Scroll-driven animations, View Transitions, the Popover API, Container Queries,
and the has() selector, and the benefits they have seen from doing so.
Why should ecommerce sites use these features?
In Six Steps for Justifying Better UX, Forrester Research shows that a well designed UI can increase conversions by up to 200%. Users seem to correlate design quality with trust with 94% of consumers citing design being the main reason for leaving or distrusting a website. This is why ecommerce sites will especially benefit from these CSS and UI capabilities. Conversion funnels need to be as frictionless as possible, so that users can easily and confidently complete their task. Responsive interactions and seamless navigation can provide good visual feedback for the user, and add delight and expression to the overall journey.
These features have been designed to be easy to use, and can be implemented mostly in CSS with minimal JavaScript. They help to create awesome ecommerce experiences without having to resort to third-party libraries or custom JavaScript to create the same functionality. Using less JavaScript can also give you a performance boost: making these experiences more smooth and responsive.
Web UI capabilities can be used across all parts of the user journey. Here are a few real world examples:
| Feature/Company | redBus | PolicyBazaar | Tokopedia |
|---|---|---|---|
| Scroll-driven animations | Cart | Product Listing Page (PLP) | Product Details Page (PDP) |
| View Transitions | Login | PDP | PDP |
| Popover | - | - | PDP |
| Container Queries | Home | - | PDP |
| :has() | - | PLP | PDP |
This can also be displayed as a conversion funnel:
The following case studies share how companies implemented these features and the benefits they discovered.
Special call out to Penelope McLachlan, Hannah Van Opstal, Una Kravets, Bramus Van Damme, and Rachel Andrew for your feedback and reviewing of this series of articles.