Ask a dozen web designers how to build a specific feature – and you’ll likely get a dozen unique answers. That’s part of the beauty of web design. You don’t need to stick to one specific formula to achieve a desired look or functionality.
However, not every solution is on equal footing. The fact that it works nicely in the browser isn’t enough. The potential downside is that some approaches are going to be more resilient than others.
But what exactly is resiliency when it comes to web design? Let’s take a look at what makes for a resilient design (in one designer’s view, anyway). Then, we’ll discuss how resiliency can change how you approach projects.
Don’t Build a House of Cards
Have you ever built a page or even a feature that was highly dependent on a single element? Something that, if that element is changed in some way, the entire thing breaks?
It’s likely that all of us have done this at some point. For example, think of an old-school multi-column layout. Before we had CSS Grid or Flexbox, we often found ourselves trying to piece it all together with floats.
While it was possible to get it to work well enough in a browser, the whole thing was a house of cards. Accidentally removing the wrong CSS class or forgetting to use a clearfix hack led to a broken layout.
In short, this approach was not resilient. It was too easy to break and couldn’t adapt well to future changes. Eventually, it’s likely we’d have to rebuild the layout to better handle different scenarios.
Instead, Build a Skyscraper
Perhaps it’s not the most elegant analogy, but a sustainably-designed feature is kind of like a skyscraper (work with me). It is built with the aim of staying in-tact even if even one of its many levels has an issue.
In real-world terms, think of it as a navigation menu that doesn’t get overwhelmed when a new item is added. Or a column that doesn’t overrun its boundaries because it contains an extra sentence or two more than you anticipated.
That’s the essence of resiliency. It’s the practice of considering how a feature may be used (or abused). It’s realizing that there may be some uses you can’t anticipate. Then, it’s a matter of designing and building in a way that can withstand just about any scenario.
Of course, that doesn’t mean something is completely bulletproof. But it does eliminate the most likely breaking points. This allows a website to flourish long after its launch.
The Challenges
This all sounds wonderful, right? We work hard to create something that doesn’t wilt under pressure. But, like most things, it’s easier said than done.
There are many challenges involved in the process. The first comes in the form of having an eye for what will work and what won’t. The second is when a client asks for something that isn’t really sustainable. Let’s tackle them, one at a time:
Determining What Is Resilient
One of the best ways to determine what is and isn’t resilient in your designs is experimentation. You design and build something in the best way you know how, test it, then see how it plays out over time. The experience can prove invaluable as you move on to new projects.
Beyond experience alone, another way to figure things out is by using the house of cards analogy mentioned earlier. If something you create is so heavily-dependent on one aspect – a CSS class being in a specific place, an empty div or some other lynchpin – it’s probably not resilient.
The great aspect of this is that mistakes serve as learning opportunities. The more you learn, the better you’ll become at building resiliency into your projects.
Educating Clients
Clients often come to us with ambitious plans. This is especially so when your client is a designer who provides you with a mockup to build off of. They might send you a Photoshop, Sketch or XD file that includes some challenging aspects. Or, a client may see a visually-appealing feature on another website and ask you to replicate it.
It’s a tough situation. These items may be possible with some CSS magic. You might even get it to work in all the major browsers (IE included!) – but at what cost?
Well, when your client makes a change a few months later, the feature that took you weeks of testing to get just right breaks like a twig.
Sometimes, part of the process of implementing a resilient feature is convincing clients of its value. Maybe something doesn’t look exactly like that cool feature from the other site, but will be easier (thus, cheaper) to maintain down the road.
Resiliency Starts from Scratch
Mocking up a website can be a fun experience. It’s a place to let your creativity loose and (hopefully) impress your clients with the results.
It’s also a time when we as designers can get ourselves into trouble. Ambition in design is often a positive, but it can also lead to that proverbial house of cards. Trying to get too cute with an element may pin you into a corner when it’s time to build.
That’s why it’s important to think about resiliency from the moment you open up your design app. Consider the consequences of each design decision you make. Ask yourself what will happen if an element doesn’t contain that exact amount of characters or is viewed on a small screen.
Take care of those concerns from the very beginning. It may just save you from receiving a message from a panicked client that the layout is broken or other assorted chaos. That alone makes it worth the effort.
Related Topics
Top