This is a live redesign, and most things are unfinished. Nearly there.

Preface for Hardboiled Web Design

Every web designer harbours tales of frustration, limitation and despair.

Ours is a visually creative discipline, yet it requires skills or knowledge beyond mere manipulation of form, shape, language, colour, message and meaning.

Our work has an underbelly, where there is complex decision-making to be made. Often, what users don’t see is just as important as what they do see. We have to think about moving parts and engineering solutions; we consider language, metadata, journeys, deep user relationships and experiences, and so much more. Whether we work alone or in teams, for ourselves or for clients, we need to follow rules, constantly extend our skill set, and even predict the future.

Each year, a wealth of unexpected possibilities come our way, increasing user and client expectations. We’ve seen the birth of social networks, web apps, microformats, geolocation, magical new devices and augmented realities. Our work goes beyond borders, accessible at any time from any location, on any number of browsers and devices, at varying speeds, on multiple resolutions, and is consumed by humans, each with a brain a little different from the next.

We know one thing for sure. There will never be a day where the rules of the web landscape are cast firm in a law of concrete. Technology evolves, and battles over minutiae will rage publicly, whilst also causing us private headaches that keep us awake at night. There will always be misunderstanding, there will always be contention, and there will always be limits.

As individuals, our immediate remits will always be open to question, and the pile marked “things to learn” will grow beyond our ability to cope with it. What programming languages and tools do I use? Am I up to date with accessibility and usability best practice? Do I know enough about the various specifications? Should I learn that new method everyone is talking about? Should I narrow my specialisms? Will I ever understand JavaScript? There’s a lot for us to navigate, and we all do our best.

We were given this fantastic opportunity with the web, but from the outset, we made the same mistakes that every new industry makes. Specifically, we ran before we could walk, and forgot to take notice of the lessons learned by those that came before. An infinite number of monkeys with an infinite number of computers, we started building things without any thought for the future; no accountability, no standards. Every industry needs to be accountable. Every industry needs standards. Eventually, users demand better, and we’re forced to catch up.

Still, we have a lot to be proud of. Take web standards for example. It’s incredible that so early on we as a community embraced the right path. We understood the legacy of the content we create; that it should be well-formed and scalable; and that our presentation and behavioural layers should remain separate and not sully the core content. For certain, our front-end building blocks—HTML, CSS, JavaScript—will be around in various forms for as long as we are.

Many bloody battles continue. Most notably, we’ve fought with browsers for well over a decade, and despite our widespread adoption of web standards, we’ve continuously battled with the very agents by which our work is delivered to the world. The perplexing and confusing anomalies of browser-rendering engines have lost many of us plenty of sleep, not least in our never-ending trench warfare with the much vilified Internet Explorer, once the best browser of them all. Our desire to deliver the exact same details to every user via every browser has shackled us throughout our journey, and it’s often robbed us of our opportunity to create truly spectacular experiences on the web.

So, is our industry really all that bad? Well, no; no it isn’t. It’s incredible, but we often lose sight of that. We need to accept that what makes the web so unique—so special—is this constant flux. We are working in by far the most pioneering creative medium at this point in time, and it’s undeniably exciting. Your toddler, your Grandmother, the chap on the TV who says “log on” - they all know that everything happens on the web now, and we’re the people making it happen. Sure, this requires us to constantly read, test, learn and evaluate. None of us will ever master all the aspects of web design we’d like, and I can tell you that nobody I know is managing this weight of information any better than you. That said, the smartest ones look at it more positively, learning to embrace this ebb and flow in our industry, and seek to manipulate it where they can.

Beyond the dawn of web standards, we learned to leverage ideas and principles from the print world. This isn’t always worthwhile, but in many cases, it’s been vital. A key principle has been to adopt the idea of formulaic layout, grids, typographic rhythm, and begin to break away from the rigorous “templated” web that CMSs gave us. We’re now learning to think about more creative approaches to content delivery, with methods like editorial design. We’re learning to build more responsive layouts, automatically adapting our page content depending on the device used. We consider designing for mobile, and the order in which we should design for various devices. These methods are giving us rich foundations upon which to build.

As Andy himself said at @Media in 2009 “we don’t design pages, we design systems“. He’s right, of course. What we build is rarely finished. We build systems that flex and grow with the client, the business, the organisation, the community, and the availability of new devices. Once we have systems we understand, we can then learn to break their rules and be truly creative. We’re beginning to think about the “systems” we use as more holistic, made up of much more than just mathematical foundations, but also the flexibility of colour, type families, use of whitespace, light and shade, form and shape. By better understanding the possibilities of HTML and CSS, our ability to be creative and bold with systems increases significantly.

So, we have web standards. We have HTML, CSS, JavaScript, fancy CMSs, myriad programming languages, and homegrown systems.These are what I refer to as “enablers”. Sometimes I consider them hindrances. They give us the platform to express our ideas and communicate with our audience, but being adept at these things does not automatically bring about great design. Let's not forget our primary motivation as web designers. We design to communicate, whether it is an idea, a message, or a mental model or map to communicate what to do, how to engage with something or make it function. Whether it be colour or code, chances are there will be several right answers, and it’s our job to go with the best of these answers.

Our role as designers is to take ideas, concepts, text and images, and present them in a visually engaging form. We impose order and structure to raw content in order to ease its communication to the largest possible audience. This is the conscious manipulation of all that is available to us. We enable others to get things done, and we sometimes create philosophical, emotional and sensory experiences. To allow the perceived limitations or possibilities of our core tools to compromise what we design is not acceptable. We have to be smarter than that.

The most successful web designers will combine a deep ongoing knowledge of HTML, CSS and other tools with a solid understanding of visual theory and design principles, and importantly a hunger and ambitious desire to break with convention; to challenge, explore, innovate, and never compromise. The smartest know when to listen, when to act, when to adopt; and crucially, when to be progressive, and follow the courage of their own convictions.

By retaining our integrity, being forward-thinking, and challenging the accepted beliefs, we can hopefully communicate ideas, relay information, elicit emotion and encourage actions in a more thoughtful, more successful way in our output.

There is tangible craftsmanship at the heart of everything we create, and we seek elegance at every turn. We’re aware that every line of code and every decision is open to scrutiny. We prove our mettle as web designers through our ability to adapt to and overcome any challenge, delivering engaging experiences without compromising our own integrity or our will to do what is right for the end user.

In this constantly shifting landscape, this ability to adapt and use common sense marks the great from the good. Our processes are transparent thanks to “View Source”. When you solve a problem with elegance—and without compromise—others will go under the hood to see how you did it, or look for errors. If you can make those curious or sceptical interrogators go “Whoa!” you’re probably great.

To strive for better, to never deviate from what you believe to be right, to seek to inspire and delight, and to avoid compromise–no matter what the obstacles or limitations—that’s all possible. That’s happening right now. That’s being hardboiled. Let Andy show you how.

I was commissioned to write this preface for the book Hardboiled Web Design, published by Five Simple Steps.