Using audits to drive change, Mechanics Bank launched with a new CMS and an improved design that follows web best practices. Find out how.
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
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.”
Senior Digital Marketing Strategist
SELCO
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.
2023 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.