Invite us into your inbox! We promise we won't overstay our welcome - we'll pop up once a month with updates on industry trends, best practices & new strategies. 

Responsive Tables Help Customers Compare Accounts

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.

Client

  • SELCO Community Credit Union

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.

“The Blend team has been great to work with and has exceeded our expectations. We have been impressed with how quick the project moved along and couldn’t have picked a better agency to partner with.”

Michelle Hyland,
Senior Digital Marketing Strategist
SELCO
Screenshots of a comparison table on the SELCO site at both desktop and mobile widths.

This meant taking a mobile-first approach, first determining how these tables would work best on mobile, then working backwards into a traditional table. Account names need to stay static as users scroll through specific product features. Then, at wider screen widths, the table snaps into a more traditional format, preserving both product groupings and feature comparisons.

As a design practice, this is easy — some reorganization of text, and some shuffling of headings — but as a front-end exercise, in which the cells need to preserve their structure, accessibility, and understanding even through multiple width changes, it can be a real challenge. Kudos to the front-end team for striking a balance between mobile-friendliness and information design, and doing so in a way that editors can maintain and manage day-to-day.

In the end, the solution felt like the best possible outcome — a balance of usability and function, of modern design and traditional information management.

Optimizely

Partners since 2008, Optimizely brings your project a best-in-class digital experience, backed by Blend’s years of experience.

Partners since 2008.

Blend has been working with Optimizely and Episerver since 2008, and was named North American Partner of the Year in 2009.

2022 Gold Solution Partner for Optimizely.

2021 Gold Solution Partner.

Blend is a Gold Solution Partner with four Optimizely certified developers on staff.

Setting you up for success.

Blend's history and experience developing custom Optimizely and Episerver solutions equips us to provide top-shelf co-development with your organization's existing development team.

Related work.

View financial service projects similar to this one.

Partnering Toward a Fresh New Credit Union Design

Relationships matter, especially in the world of federal credit unions. Thankfully, partnerships are what we specialize in at Blend — and it was a partnership with SELCO that led to a fresh, beautiful new site.

Implementation of Partner Provided Design

Implementation of vendor-provided graphic design to help improve customer experience.