Web Design
User Interface: Content Card System
The Story
When I started working at the University of Alabama in Huntsville (UAH) in 2019, the website was running on Joomla and Bootstrap. Because of a number of institutional factors beyond our office’s control, our Joomla and Bootstrap versions had not kept pace with software updates. As a result, the university’s website, designed in 2013, was growing stale and inflexible. In particular, the site’s design lacked a card system that could be paired with a database and a dynamic search interface to offer users easily filterable and digestible content. Newer versions of Bootstrap offer a responsive card system whose card containers feature the ability to flex their height in tandem with adjacent cards, resulting in page layouts that look clean, neat, and tidy.
The Happy Ending
The best element we had at our disposal was the Bootstrap panel container element, which lacked height responsiveness relative to its neighbors. Taking initiative, I proposed to create a custom card system that would work with our outdated version of Bootstrap to create the same effect as the fully responsive card elements that its newer siblings featured. Collaborating closely with our office’s developer, we used a combination of CSS flex properties and Javascript to create a clone of Bootstrap’s card system and unveiled it with our release of a new microsite for UAH’s Office of Student Housing. You can read the story of that site’s development and our design of the search filter that the cards work with here.
Before
After
Before
After
