The things that stood the test of time had a solid clear foundation than we could later build or improve upon. They strived to make the least amount of assumptions. This approach allowed for future ideas that no one would be able to predict, to still connect with the solid base. 

Resilient Web Design strives to provide just that: a set of guiding principles to create web designs that will still work even if we don’t know how the screen of the future will look like. 

We used to have small desktop screens, then bigger ones, and now huge ones. Then all of a sudden, in came the mobile devices, then tablet devices. 

We are clueless

You have to embrace the idea that you have no clue what kind of screen size will be used to consume your content. 

And this is what Resilient Web Design is all about. 

You no longer design for a specific target screen size and “(kind of) fix it” for the rest. 

Your first media query is no media query. Your HTML content is responsive by default, with no need for CSS. This responsiveness has always been there, but the power of this feature is only now becoming evident. 

We have been designing the web “backward” making arbitrary assumptions about the browser’s viewport size. This way of design is the bias we have been dragging around from the design on paper, and it is so ingrained that we don’t see it. The new reality is that you can no longer know ahead of time the width and the height of the canvas used to present your content. 

That can be scary, but also freeing. And as a creative, it is a problem that can be solved by design and that, I imagine, should excite you!

For a long time, I thought that because browsers are so forgiving with the HTML and CSS syntax, they encouraged poor code and allowed both developers and designs not to use standards. I wanted the browser to cry foul and reject any page that errors in the code. This behavior would force the creators of that page to fix it! And “get it right!” 

I see now that browsers being so forgiving allowed for massive innovation and flexibility. By being lax with errors, old browsers would not choke on new features being added later on in the future. This approach has allowed the web to grow as innovative and fast as we see today. And perhaps we should adopt a similar mindset in all the systems we design. Like Poste’s Law:

“Be conservative in what you send; be liberal in what you accept.”

Converting your content into a web app, which requires Javascript, may also not be a good idea, as it departs from the lax treatment of errors. If your Jave Script code does not load or execute for any of the many reasons, your users will look at a blank page. 

The solution that Resilient Web Design proposed to this is “Progressive enhancement.”

With this concept you provide a minimum viable experience, that you will build upon (enhance) using feature detection (NOT browser detection) and the lax way that browsers treat new code, to improve the experience that the end-user is having. 

Using feature detection means that your design will NOT look the same for everyone. I cringe and this thought, but relinquishing control enables everyone to consume the content, and enables some to take advantage of brand new browsers and features. It is a win-win situation. You don’t design for IE6 only because some of your userbases may still be using. Yet, at the same time, you don’t ignore that audience by assuming that everyone is running the latest version of your favorite browser. 

“If a website looks the same on a ten‐year old browser as it does in the newest devices, then it probably isn’t taking advantage of the great flexibility that the web offers.” (Resilient Web Design)

If this way of thinking inspires you, then you should read: Resilient Web Design and deeply ponder how you can implement the principles in that book into your systems. If you already used this in your design, I’d love to see it applied. Please post a link in the comments.