Building a Sustainable User Experience

Modular front-end design patterns and techniques

As user experience fanatics, there’s a no shortage of articles, tips, and tricks out there for us to learn from.

And over the years, I’ve picked up a lot of useful tools and techniques. Many more than I could ever list in one sitting. But there’s one thing that I feel is above all the most important thing to remember:

Build a sustainable system.

This is my mantra. By a “sustainable system”, I mean that we need to strive to create projects that will last over time. Trends will change, priorities will shift, and our projects need to be structured intelligently so they don’t get ravaged along the way.

Here’s some things I’ve found to be very helpful:

1. Create re-usable widgets and components. One-off code modules should be used with extreme caution.

I cannot emphasize this enough.

When we create re-usable components, we’re not only making our lives easier as developers, the end user experience is much cleaner as well. Consistency is everything on the front-end; consistent clean code will ultimately lead to a consistent user experience.

2. CSS preprocessors are the future. If you’re not using one yet, start now.

Sass seems to be the most popular right now, but there’s certainly other options out there; LESS, and Stylus being the 2 big ones.

If you’re just getting started, I’d recommend Sass mainly because it’s the most widely supported at the moment; but it ultimately doesn’t matter which one you pick: you can always change your mind later, the logic behind them is what’s important.

The larger your codebase gets, the harder it is to keep a handle on all the different styles in use. Preprocessors let you do cool stuff like:

• Create variables to use in your CSS. Ever worked on a site with 25 variations on a single blue? Never again. Define it once, and you’re done.
• Split your files out into as many smaller chunks as you want, and then compile into one whenever you make changes. There’s a number of architectural ideas out there you might make use of, like the sass style guide, or the module and partials approach.

I could go on, but you get the idea. If you’re not using a preprocessor, start now.

3. Just cause you’re a front-end ninja doesn’t mean you shouldn’t look at using a framework like Bootstrap or Foundation.

In the development community, there seems to be this idea that “someone who knows what they’re doing doesn’t need Bootstrap”.

As someone who’s been writing front-end code for a number of years now, I’d say that’s crap. We don’t need to keep re-inventing the wheel for every project we build.

Think of how many websites/apps you’ve built that need things like buttons/modals/link styles/form styles. Think of all the time involved in building that, and building it well.

Using something like Bootstrap doesn’t mean that you can’t code. It means that you’d rather spend your time focused on interesting and challenging interface problems instead of styling buttons over and over again.

I’m not at all opposed to using these types of front-end frameworks as ultimately, they free up my time so I can focus on what’s really important: the content structure, flow of the site, and finer details of the user experience.

These are some thoughts on how to build sustainable front-end systems for the web. Have some more? Feel free to add feedback, I’d love to get other opinions and ideas on this subject.