Tables, while seemingly simple, can be difficult to implement — especially when it comes to mobile widths. For SELCO, Blend helped develop a table option that worked at both full-width and on mobile.
Sometimes the features that seem easiest to implement can be the most complicated, at least underneath the surface. Case in point: tables.
Tables have been around since the beginning of the web, serving as both an easy way to organize the bare elements of early websites (namely, content) and also as an ill-advised hack for designing complicated layouts (especially in the early days, before CSS helped separate design from content).
Now, tables land in a really tricky area: they are designed to provide a visual relationship between different content items, but that relationship sometimes depends on space. The kind of space that’s easy to accommodate at desktop widths, for example, but much more difficult at mobile widths. Simply put, a table is not a mobile phone’s best friend.
For SELCO — a community credit union that uses tables to compare and contrast different products — our goal was to balance along a tightrope: create comparison tables that could provide the space each relationship required while still working at mobile widths.
