Time to Read: ~4 minIf you are tenured professional or somebody just getting started off with web design or development, a little context can go a long way. Jeremy's book does a wonderful job giving the historical context of the web. He wrote Resilient Web Design over the course of 14 months. In the true spirit of the Internet, he is sharing it with everybody -- for free. Even the web site it is hosted on is open: he put all of the files on Github. In mid-December, I put the book on my Kindle using the .mobi version he published. Knowing I’d have some swaths of time while ferrying the kids to and from ski training and races, I was excited to have the book along for the ride. I finished it during weekend training on Sunday, and it made me smile in so many places. You can read it at https://adactio.com/journal/11608.
Resilient Web Design: Post-Read Reflections
Jeremy rolled his first HTML in 1997. That year was my second on the job at Citibank. I had started working in HTML in 1996 during my graduate year at Cornell. So, we were both working in this medium from very close to the beginning. It was simpler then. I remember seeing Amazon.com’s first homepage, not knowing the impact it would have -- and evolution it would undergo -- over time. I remember when using different colors of beveled bullet images was en vogue. As a designer and developer in 2017, I’m concerned with so much: browser compatibility, performance, responsiveness, information architecture and the subjectivities of design. When Jeremy wrote that "the web is a hot mess” he wasn’t kidding.
Web design is one of those pursuits that, if you do your job well enough, people won’t notice. They won’t appreciate the amount of work that you put into the project to make the experience as seamless as possible. There are so many disciplines and skills that must conspire to achieve this result. I think that’s why I enjoy working on web projects so much! The goal is to thrill and delight the user with the fact that their experience matches with their expectations.
Jeremy has a great discourse on the use of tables as a layout mechanism. I remember this vividly, how you could achieve myriad layouts by using a table, along with 1x1 transparent GIF images to force table columns and rows to specific heights and widths. He talks about how we should avoid the deception of using one material as a substitute for another. It’s a metaphor that goes far beyond the browser page, but is a direct nod to the availability of layout techniques using CSS, leaving the "table" tag to fulfill its destiny and display tabular data only.
In talking about browser widths and designer consensus on a proper viewport width to universally target, Jeremy had a great quote: “There's a great comfort to be had in believing a reassuring fiction, especially when it confers the illusion of control.” The quote really resonated with me. It transcends the web and has meaning in other parts of my life. In short, we as designers thought we were doing the “right thing” by believing this fiction that by designing for a commonly-accepted width, we’d be doing our users a favor while conforming to a falsehood. This is no longer the prevailing wisdom. The only thing you can count on is that there will not be uniformity in how people experience your web site. Their technology, their environment, their cognitive backgrounds and their goals and motivations will all vary so much.
I remember when I was working at Citibank, I’d intensely focus on taking a designer’s work and replicating it in a browser with pixel perfection. Those days are definitely over! I shudder when I see someone use the term “pixel perfection” in a resume. Websites look different in different browsers, and today on different devices people will see some things in some places differently than others. And that's totally okay and expected.
In my current job, I’ve had great success designing in the browser. Continuing the thread of pixel perfection, one of the drawbacks of using Photoshop was the very first step: determining the dimensions. I use a mobile-first framework like Bootstrap to help speed in-browser design. Jeremy is correct to note that in-browser design is seen by pundits as too constraining, and I’d agree to a point. However, it is priceless to be able to quickly iterate and get feedback in close to real time from my business partners. I emphasize that I start in analog with pencil and paper for all but the simplest of design work. This frees me from the constraints of HTML and CSS to set an unconstrained design direction. It’s proven to be a good idea to validate the information architecture and broad page layouts before going to digital.
Jeremy wrote about the BBC News web development team and their approach to building, called “cutting the mustard.” It’s named so because they start with a core experience contingent on the barest of technical requirements. Then, as they detect that a browser is capable of doing something more sophisticated (ie. “cutting the mustard”) they enrich that core experience. Users without those advanced capabilities are not left out in the proverbial cold.
The increasing popularity of mobile web browsing, and the availability of responsive web design has forced my team to refactor how we think a modern webpage should be built. Our product is the future of BBC News online. It’s responsive, works on everything, looks great and is very fast. – BBC News developers at responsivenews.co.uk
Backwards clock
Grace Hopper, the inventor of the first compiler, famously said “Humans are allergic to change.” There’s a comfort in doing things the way we’ve always done, because it “just works.” My wife and I have been a part of several organizations that just refused to change, and so we left to expend our efforts elsewhere. There’s a huge danger in not evolving, in being complacent with things as they are. Change for change’s sake is not the answer, but all change is not bad. The ability to recognize the need to change and evolve is what helps organizations – and technologies – level up. Grace’s clock that runs counter-clockwise is a reminder to fight this aversion to change.
Inspired by Resilient Web Design
This book has inspired me to approach web site building in a new way. By focusing on the core functionality and expanding it based on available features, I’ll ensure the most accessible site I can. Resilient web sites can give a core experience that’s meaningful, but progressively enhance that experience based on technical capabilities. Gone are the days of trying to shoehorn something I’ve built to be able to work in Internet Explorer 8. I’m using this approach on a project I have in the pipeline. I cannot wait to show you all.
Thank you for the inspiration, Jeremy!
- Read Resilient Web Design
- Find Jeremy on Twitter @adactio