Web Jeet Kune Do

What Bruce Lee can teach us about web design.

“Empty your mind, be formless. Shapeless, like water. If you put water into a cup, it becomes the cup. You put water into a bottle and it becomes the bottle. You put it in a teapot it becomes the teapot. Now, water can flow or it can crash. Be water my friend.” – Bruce Lee

This one quote contains all the wisdom we need to approach our web projects in a way that helps us survive in an unpredictable and ever changing industry. Let’s face it, there are times were it can feel like we’re doing battle as we work on some projects. Battling with clients, stakeholders, designers, developers and everyone else that’s involved throughout the process. So what better way to face these challenges then armed with an attitude that is adaptive, flexible and fluid.

For those that aren’t familiar, Jeet Kune Do (JKD for short) is the form of martial arts created by the late, great Bruce Lee. But Bruce didn’t develop just another way to fight, he developed a philosophy by which to live life. This philosophy is the foundation on which his martial art was built and the principles it embodies can help us as web designers not only survive but succeed as designers.

Remaining flexible and fluid and being able to quickly adapt to changing situations are core to the way of JKD. These same principles are the ones we need to employ today as we find ourselves in the most unsettle point in our industry. Jeet Kune Do gives us many insights into how to handle these challenges.

Design Jeet Kune Do

“The highest technique is to have no technique. My technique is a result of your technique; my movement is a result of your movement.” – Bruce Lee

It’s as if he knew what we’d be up against as web designers today. There seems to be no end to the ways that people arrive at our content these days and it appears that those ways will only increase over time. In my own practice I’ve seen over a 1700% increase in the number display resolutions by visitors in just the last 4 years. Add to that the number browsers and their various levels of capabilities on an increasing number platforms and the challenge grows exponentially.

For so long we have fought against the very essence of what the web is as John Allsopp pointed out in his article The Dao of Web Design over a decade ago. We need to stop trying to do “Desktop Publishing for the Web”, relinquish our need for control and just start publishing great content to the web.

“You could say it’s the art of fighting without fighting.” – Bruce Lee

An idea worth embracing. Rather then battle our foes head-on trying to attain unattainable pixel perfection across all devices, browsers, displays and so on it would be more advantageous to respond to their movements. A strategy of working from the content outmobile first and applying progressive enhancement is the perfect fighting without fighting technique.

Responsiveadaptive web design is one approach that when done correctly is Web Jeet Kune Do at it highest. The fluid nature of responsive helps ensure that the content fills any space in the most appropriate manner. Adapting content through techniques like conditional loading means no wasted motion on our part and no unnecessary burden for the user. This is content out, mobile first and progressive enhancement fully realized.

Development Jeet Kune Do

Sorry, no quotes that really captured the essence of what JKD means to us as developers. So we’ll need to learn the other lessons that JKD has to teach us. Anyone that practices JKD, or any martial art for that matter, quickly learns the importance mastering the basics. JKD also teaches the importance of not wasting motion and that each motion has purpose. Using these principle to guide how we approach our development leads to lean, efficient code that enhance the user experience through performance and meaning.

Look no farther the clean semantic markup of HTML to illustrate the notion that every movement has meaning. Using semantic class names and landmark roles on our HTML communicates meaning about the intended use of the tags.

We can look at the DRY method (Don’t Repeat Yourself) of CSS coding as an example of not wasting motion. Creating lean CSS code as well as our HTML, JavaScript and optimizing images and other media reduces file size improving performance when delivering our content.

Content Jeet Kune Do

“Be like water making its way through cracks. Do not be assertive, but adjust to the object, and you shall find a way round or through it. If nothing within you stays rigid, outward things will disclose themselves.” – Bruce Lee

A Web-JKD approach to content suggests to us that rather than assert our own will we should allow people to find the desires hidden within themselves. Proceeding in this manner allows people to reach the higher levels on Maslow’s Hierarchy of Needs in turn building a better emotional connection to us and our products.

Great content is not dependent on presentation to communicate its message but it is dependent on a solid content strategy to create, organize and manage it. By separating the content from its presentational state we can quickly adapt it as needed and offer the most appropriate experience when requested. This separation affords the greatest accessibility to the content whether it’s being accessed from smart-phone while at the mall, a desktop at the office or by a person who’s visually impair using a TTY screen reader to hear what you have to say. Make it worth hearing.

“Release emotional content.” – Bruce Lee

We can’t ignore that along with the challenges that have arisen for visual design there has been a shift in what people are looking for in their content. It’s no longer a simple matter of putting out marketing prose and an endless list of features and benefits if we want to get the job done. Social media has changed people expectations of content and our content needs to me those new expectations.

People want to connect to people. As we move into an age where a person’s main point of contact often occurs in the digital world our need to connect on a more personal level as reached a new high. Reveal who you are through your content and design​. Don’t be afraid to be real. People connect to things they can relate to not abstract ideas or inanimate objects. Be authentic.

Process Jeet Kune Do

“I have not invented a “new style,” composite, modified or otherwise that is set within distinct form as apart from “this” method or “that” method. On the contrary, I hope to free my followers from clinging to styles, patterns, or molds.” – Bruce Lee

Bruce frequently spoke of letting go of the past and being present in the moment. Holding on to processes and design methods like religious dogma, never reevaluating their value or validity is all too common. It’s understandable. It’s difficult to choose to step out our comfort zone and even harder to convince others to do it.

As our design needs change so to should our processes. Not unlike the challenges face by business as they moved into the industrial era were people watched over machines that were now doing the job they once did by hand. We find ourselves challenged with finding new ways to design and develop that allow us to communicate these new fluid ideas quickly and easily.

“In combat, spontaneity rules; rote performance of technique perishes.” – Bruce Lee

As individuals and organizations it can be easy to fall back on methods and processes that we’ve used time and again if for no other reason than comfort. But we all know this isn’t always what’s best. The challenges that face us today in designing rich user experiences on the web are unlike anything we’ve faced before. Why then should we expect the old process to be adequate for these new challenges.

Moving from static fixed-sized comps to prototypes that can reflow and demonstrate interactions requires a radical shift in the way we think about the design process and how we do it. Beyond that it means that we need to change the expectations of those that we do it for. Reluctance to change is a universal problem. Clients are often not eager to step away from what they know and to have to learn a whole new process. Especially when they can’t perceive the benefits or value.

Web Jeet Kune Do

“Knowing is not enough; we must apply. Willingness is not enough; we must do.” – Bruce Lee

Uncertainty is the only certainty in web design today. Practicing good Web Jeet Kune Do means we’ll be prepared for any situation. Regardless of what new devices show up tomorrow or what new design or development techniques are thought up, remaining adaptive, flexible and fluid is key not to surviving but to success.​

Additional Reading

Every one of these books is great on its own, but in combination with all the other makes for a great foundation to apply our Web Jeet Kune Do to.

Update 2/16/2014:

Just came across this great article that speaks to using Bruce Lee’s teachings to create a better UX and thought is was worth adding the link here.

Updated: Aug. 8th, 2013 – Found several typo’s and grammatical errors in need of corrections. I also added a Meta Description and tags to the article.

Published by

Mike Donahue

Just a guy that's passionate about creating useful, usable and desirable experiences for all humans. I love nature and wildlife photography, it's my source of artistic expression and inner peace. I live and play in South Florida with my wife Nikki and our girls (dogs) Layla and Cassidy.

Leave a Reply

Your email address will not be published. Required fields are marked *