Just Add CSS
Gregg Blanchard /
There have been three separate times recently that I’ve been faced with a unique challenge at the day job. We needed to update an interface or design, but unless we wanted to do a full rebuild (something that our bandwidth and roadmap make impossible) the only thing we could do was add CSS and overwrite existing styles to add elements, refresh designs, and tweak layouts.
Initially, it seemed impossible to make a meaningful difference with just CSS, but I continue to be surprised with what’s possible.
For Example
Many of our users were using the default booking engine design that used a tile-based layout, but over and over again we’d be asked for a design that stacked results vertically.
With limited bandwidth on the engineering team, one afternoon I tried writing an additional stylesheet that would overwrite existing styles to see what was possible. A couple hours later, I had my stacked layout along with a couple other small tweaks to add a little more visual hierarchy.
Later, once we had the support to put the time into this, we took this even further. There was some JS that we used to move a couple elements around, but all the visual work was pure CSS on top of the original page shown in the first screenshot.
Query Interface
A while later we discovered that the users of our list builder tool were struggling with the hierarchy and relationship between the criteria they’d built into their query. Initially thought we’d need something close to a full rewrite because the developer who had built this tool had moved on and the code, while working, was a bit of a mess.
Encouraged by my efforts on the ecommerce interface, we decided to see if I could write an extra stylesheet to add the lines, spacing, and deeper indenting we needed to better convey this structure without a full rewrite of the builder. A few hours later, we had a working v0.1. A few days of testing and tweaking later, we were ready to launch.
User Interface
One of our three lines of business is an analytics program for destinations called DestiMetrics. Their old portal was designed before they became part of Inntopia and was a little out of date. Seeing that I’d done for the other two interfaces, the team wanted to see if I could update their look and feel as well.
The original code featured a lot of inline styles and elements without ids or classes, but I was once again surprised by how much I could do with my add-on stylesheet with a little creativity and patience.
User Sign Up Form
When I started working with the athleteReg team, we were looking for ways to improve the performance of the form event directors used to create an account. That form was outdated and clunky and we hoped that a refresh to increase conversion on our new user funnel.
It turns out that the team’s designer had already come up with a beautiful layout for this form that was aligned with the design direction of other pages, but implementing the design was going to require backend work that made the ROI on the project a tough ask. So I proposed we do a CSS-only update instead. In a few hours work we had a new stylesheet they could add to the page.
Really Interesting
Are these perfect? Of course not.
For every element I could change, there was at least one other element that couldn’t be targeted or overwritten by an external stylesheet. But I was honestly blown away by how much I could change or improve or clean up an interface without changing any of the original code. Overwriting old CSS without removing it is hardly going to be considered a sexy solution shared by thought leaders, but it’s not a bad angle to explore when the main updates hoped for are largely visual.
And when you think about how many engineering teams out there are stalled because they think only a full rewrite of their front end can modernize their outdated interfaces? It’s a pretty intriguing approach.