As part of our ongoing efforts to keep everyone up to date with the latest technology, improvements and features, we regularly do training sessions with the entire team. Last week, we challenged our entire team for what initially was laughed at in terms of simplicity – build the 'perfect' card in only html and CSS.
Card designs and implementations are so ubiquitous and there are hundreds of shiny 5 minutes examples online on how to build a perfectly good-looking card. So why this challenge?
We wanted primarily to challenge everyone’s perception about the time estimation for this task. It is one thing to build a single-purpose designed card versus a re-usable card-design that allows re-ordering and/or removing of elements.
In our case our card was straight forward in terms of elements: a header, title, image, one or more tags, some paragraphed content, and one or more action links. It should work responsively and adaptively depending on the content and allow for various image formats and grid-column formats.
Secondly, we wanted everyone to think consciencely about what they’re building.
Developers are often under tight deadlines, having to default to their preferred and tested approaches and techniques to get the job done as efficient as possible and are rarely allowed the time to experiment on different approaches to content- and browser-proof implementations.
And finally, as Enso, we strive to deliver with accessibility, scalability and design system thinking at the forefront of the work we do for our clients.
So, for this exercise we wanted everyone to particularly rethink the approach towards styling (in terms of design tokens and card states) and reinforce a component-thinking mindset.
The end-result?
Everyone’s initial estimations were blown out of the water. With the majority of the time spent actually not on accessibility or the html aspects of the card but on the design-thinking approach and refactoring / abstracting the styles to get the cleanest and most robust approach.
Our key lessons learnt:
- There’s no such thing as perfection - but there’s a perfect balance to strike between efficient and effective.
- Building with accessibility in mind makes testing easier. Plus gives more developer satisfaction when all the lighthouse/axe/wave boxes are ticked.
- Even a simple, non-flashy challenge can provide ample of food for thought.