Responsive Ronin

New technology meets ancient wisdom.

Laozi. Confucius. Sun Tzu. No, they’re not a team of crime fighting, Kung Fu super heroes, but ancient philosophers and authors whose works run the gamut from spirituality, to religion, to military strategy. The texts and writings of these great minds of history, although being thousands of years old (give or take) have stood the test of time, the grind of new industry and development of modern technologies. Laozi’s ‘Tao Te ching’ (translation: ‘the Way’) dates to as early as the 6th century BC, but remains to this day as one of the most translated and commonly read texts in world literature. Sun Tzu’s masterpiece ‘The Art of War’, although born out of physical, military conflict, presents a philosophy of strategy that is easily applied to all walks of life. Even today, some 2500 years after its much debated origins, ‘The Art of War’ is still a source of inspiration in modern politics, business and entrepreneurship.

Recently, I’ve been reading the works of the infamous Japanese Ronin, Miyamoto Musashi. Musashi became renown during the 1500–1600’s for his mastery of swordsmanship and martial combat. Musashi was much more than this though — he was an accomplished artist, sculptor and calligrapher. He studied such a wide range of subjects, from the brutal art of using two swords in combat, to the refined and docile tea ceremonies. His great text ‘The Book of Five Rings’, whilst perhaps is at its most basic level a reflection on his mastery of combat, extends much further than this. Like the works of his predecessors, it presents a philosophy and approach to situations and challenges from all aspects of life, both ancient and modern.

My time spent reading these works, like all great philosophical texts should, got me thinking. Can we apply these words to today’s climate? More specifically, can we apply them to the ever evolving technologies that have become such a key part of modern humanity? I believe we can. One of the most challenging subsets of technology that I have been trying to grasp recently is that of responsive web design and development, and how to formulate a cohesive process and workflow when developing responsive sites.

Responsive web design, a term coined by Ethan Marcotte in 2010, describes the approach of designing and developing a single website that responds and adapts to a wide range of devices, from mobiles, to tablets and desktop computers. With the explosion of such technology, responsive design is fast becoming mandatory — not a positive embellishment, but an expected feature. So what can an ancient Japanese swordsman teach us about such technologies? Well, the specific technologies, not so much. Miyamoto lived long before the terms pixels and resolution were coined. But the philosophies, mindset and approach to problem solving presented in his text ‘The Book of Five Rings’ give us an interesting perspective on the underlying concepts of responsive design, and what it aims to achieve. Let’s have a bit of fun and examine some of his work, see what we can learn and how we can apply it to the process of responsive design and development.

“Do nothing that is of no use”

Responsive websites need to be lean, agile and flexible. Having a complex site, loaded with high quality imagery, complex and varied interactivity and navigation states can create an immersive and rewarding experience for the end user. Delivering this same experience to a user accessing your site from a mobile device can have the complete opposite effect. Mobile or wireless connections are often slower than their desktop siblings, so forcing your user to download large, high quality images or other large files — such as JavaScript — can prevent your user from getting to the information they’re seeking quickly and easily. Consider your mobile audience, and why they’re accessing your site. Do they simply want to find the location of your offices? Contact details? Pricing information? If so, don’t bog them down with excessive, experiential content. Consider the imagery you’re using, and how it will apply to a mobile user. Serving a large images might work on a desktop, but a mobile user will only get frustrated with excessive load times and ultimately might not get any benefit from such imagery. The above quote from Musashi epitomises this fully, and applies not only to interface design and user experience, but also to content. If a feature you’re designing or developing serves no real purpose, consider removing it. Consider each and every aspect of your responsive site — if it is of no use, consider removing it, or alternatively use tools to deliver it only under the appropriate circumstances.

“You must understand that there is more than one path to the top of the mountain”

Whilst responsive design is a relative young subset of the wider web design world, it’s growing at a rate of knots. The massive boom in mobile technologies fuels this growth even more. It’s fast becoming an expected feature, not a nice cherry on the top of an otherwise solid piece of work. As such, agencies all over the world are striving to answer the question — ‘how do we do it’? Everyone has a different response — run a quick search and you’ll find a plethora of articles and documents outlining how to integrate responsive design into an organizations existing processes. But the underlying message from the majority of these articles is the same — do what works for you. Again, this echoes Musashi’s thinking’s — there is more than one path to the top of the mountain. Each organization must find their own path. It’s important to take learnings from other professionals only when they suit your existing process and company structure. Is it best to integrate responsive design at the very start of a project? Can you achieve your goals using a common process of ‘in browser design?’ Are finished designs needed for every page, at every possible layout? Experiment with your team and client, find what process works best within your organization. Don’t be too rigid in your approach. Additionally, your approach itself needs to be flexible. A process that works for one client or project might not work for the next. Consider the requirements of each individual project and be prepared to adapt the process to fit that project. Just like the sites you are trying to create, your team needs to be fluid and flexible. In the words of another great philosopher; ‘Be water, my friend’.

“You should not have any special fondness for a particular weapon, or anything else, for that matter. Too much is the same as not enough. Without imitating anyone else, you should have as much weaponry as suits you.”

With the rise of any technology, comes the rise of tools to and techniques to utilize and further develop that technology. A classic chicken and the egg scenario, the two form a symbiotic relationship; the tools push the technology and the technology grows the tools. This is no different in the case of responsive web development. The number of development techniques and frameworks to assist with responsive web design seems to be growing exponentially every day. Foundation, Bootstrap, Gumby, Skeleton, SASS, LESS are but a handful. These tools will be of great help when developing a responsive site. Yet again, Musashi’s words ring true — ‘too much is the same as not enough’. By all means, use the freely available tools and teachings of others (and I’d suggest you do), but only use that which helps achieve your goal. Do not pollute your codebase with multiple frameworks or different techniques that essentially achieve the same thing. Explore them, by all means, but only use those which serve a purpose and help you achieve your goals, and most importantly those which suit your organization and existing processes.

“Perceive that which cannot be seen with the eye.”

A core tenet of any responsive design approach is adaptability. Indeed, it is at the very core of the philosophy behind the responsive web. Not only is the aim of responsive design to allow websites to adapt and respond to devices that audiences are using now, but also into the future. Technology is changing at a rate that I doubt even a mind as sharp as Musashi’s could anticipate, but the underlying theme of this quote still holds true.

Responsive design is almost as much ‘anticipative design’ and it is important to at least have some insights into not only where the technology is moving, but also your target audience will be engaging with your site. A common technological component of responsive design as it is today is the use of fluid, percentage based layouts, whereby page elements (navigations, side bars, footers etc.) are all developed as having percentage based dimensions, rather than fixed pixel values. Whilst it’s not entirely foolproof, techniques such as this allow developers and designers the ability to, to an extent, develop with future devices in mind. Like a swordsman anticipating his opponents strike, by building upon a strong foundation developers can build a site that should be able to safely adapt to the next the latest and greatest mobile phone or tablet whenever it is released. It is important that throughout the entire process of any responsive web development project, an eye is kept on the horizon at all times.

Although one of Musashi’s more esoteric and philosophical quotes, the above can be interpreted more literally within the context of modern technology. Responsive design aims to deliver content to users on a variety of devices, with access to a variety of input devices and methods of engagement. The potential differences between navigating a site with a mouse and a touch screen cannot be understated — both lend a quite different experience and what ‘feels’ right on one device, might not on the other. By definition, a touch screen device is an almost entirely tactile experience. Like Musashi says, ‘perceive that which cannot be seen with the eye’. All web users are now engaging with a variety of senses; sight, sound, touch, maybe soon, smell. Whilst this needs to be considered at the onset of a responsive design project, it is more important during the testing phases. It is important to get ‘hands on’ during testing, and test on a variety of tablets and phones. Engage with the content as your users would — don’t rely solely on browser emulation. Get your site up and running on a phone, and test it with your fingers. It’s only then that the ethereal, often indescribable concept of the ‘feeling’ of interactivity and functionality can be tested.

“Know the smallest things and the biggest things, the shallowest things and the deepest things. From one thing, know ten thousand things.”

Throughout his text ‘The Book of Five Rings’, Musashi advocates simplicity. He also suggests a fluid approach and a flexible mindset. Although his book outlines attitudes and techniques born out of battle in a time quite different from today, I believe the undercurrent of his teachings is just as relevant now as it was then. In building the responsive web, we need to be open to change, we need to be flexible and fluid, not just in our technical development but in all discussions and decisions. If we’re going to make the web responsive, we too need to be responsive. But perhaps the greatest learnings that the philosophy of Musashi and his great predecessors and contemporaries Sun Tzu, Laozi and others leave their students, is that those learnings apply not just to martial combat, or calligraphy, or spirituality, but to all aspects of life. So on that note, I’ll leave you with one final quote:

“The true science of martial arts means practicing them in such a way that they will be useful at any time, and to teach them in such a way that they will be useful in all things.”
A single golf clap? Or a long standing ovation?

By clapping more or less, you can signal to us which stories really stand out.