1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
---
title: Why Responsive Design, or How to Build Websites Like Bruce Lee
pub_date: 2014-03-04 12:04:25
slug: /blog/2014/03/how-to-build-responsive-websites-like-bruce-lee
metadesc: Embracing the fluid nature of responsive web design means you can start building websites like Bruce Lee.
tags: Responsive Web Design
---
[*Note: This is an excerpt from my book, [Build a Better Web With Responsive Web Design](https://longhandpixels.net/books/responsive-web-design). If you like what you read here, pick up a copy of the book and be sure to sign up for the newsletter over there in the sidebar.*]
Spend enough time emersed in the world of web development and you may notice that the phrase ***responsive web design*** has taken on an almost religious status.
I grew believing that you should question everything, especially your unchallenged premises. So, why is responsive design a good idea?
There are many reasons, but to me the most compelling is also the simplest -- the web already is responsive.
Every time you build a website that is not fluid by nature, with content that flows gracefully onto any screen, you are fighting the essential nature of the web. That fighting is going to make your life as a developer more difficult, as anyone who's ever tried to achieve pixel-perfect precision across browsers can attest.
The web is naturally fluid. To show you what I mean, let's play with an example page.
Head to the `sample_files` folder that came with this book and open up the folder `responsive basics`. Now open the file basic.html in your favorite web browser. Pretty boring right? Just some black text on a white background. The text isn't even centered or constrained at all, just long lines stretching across the screen. But let's play with this most basic of web pages for a minute. Grab the right edge of your browser window and resize it, making it narrower. What happens? The text re-wraps and re-flows to fit the new window size.
Hmm, so the page responded to our input (resizing the screen). That's responsive design in a nutshell. And yes, the web is responsive right out of the box. Now no one but web developers ever drags their window around to watch how designs reflow, so don't get hung up on that. The point isn't that text re-flows as you drag, but that the text can flow onto any screen.
If you've ever built a fixed-width website (960px wide by chance?) you've broken one of the web's greatest features -- it's naturally fluid. Web browsers have always enabled nearly everything now labeled "responsive design" right out of the box, including the most fundamental element you're looking at here -- fluid layouts.
Okay, sweet, done.
Well, there is a little more to it, but this really is the core and I find it helpful to frame the question "why responsive design?" this way because it gets to the basic truth of the web -- everything is flexible, everything is fluid. When we embrace the web's inherent fluidity we're actually freeing ourselves from our own constraints. I find that a very liberating feeling, one that has implications well beyond just the web.
Kung Fu legend Bruce Lee's teacher once said to him. "Preserve yourself by following the natural bends of things and don't interfere." Lee meditated on this idea and eventually came up with his now famous quote that he must have "a mind like water".
>"Don't get set into one form, adapt it and build your own, and let it grow, be like water. Empty your mind, be formless, shapeless -- like water. Now you put water in a cup, it becomes the cup; You put water into a bottle it becomes the bottle; You put it in a teapot it becomes the teapot." -- Bruce Lee
Lee's metaphor works for nearly anything, but it's especially apt for anyone building responsive websites. It perfectly captures what we're striving for -- content and design that flow like water from one screen to the next -- as well as the approach we need to take -- keeping an open mind, letting go of our preconceptions and learning to embrace the flow of the web.
If all that sounds a little hokey to you, consider another thought, equally rooted in Asian philosophy, but a little more concrete, John Allsopp's *[A Dao of Web Design](http://alistapart.com/article/dao)*.
Allsopp's famous article is perhaps the best thing ever written about web development. What's perhaps most astounding about *A Dao of Web Design* is that it was written not last year, not even right after the iPhone was released and changed the mobile device landscape forever, but way back in 2000 when the web development community was still trying to sort out how to separate form and function with cascading stylesheets.
Before iPads, before Google Glasses, before there even was a mobile web, Allsopp hit the nail on the head: "It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all."
I highly recommend you read [the entire article](http://alistapart.com/article/dao). Go ahead, I'll wait.
Sure, some of Allsopp's examples are a bit outdated, like his argument against the font tag. No developer worth their salt would even think to use a font tag these days. In fact, that's one of the upsides of the web today -- much of Allsopp's advice in the article has since become part of most web developer's best practices, part of the standard web developer toolkit. For example, avoiding HTML for presentation and using relative font sizing (percentages or ems) to ensure pages scale properly.
But sadly most of us did not heed Allsopp's bigger-picture advice to embrace the inherently flexible nature of the web. Here's Allsopp's original suggestion for working with the flexibility of the web rather than fighting it:
>Make pages which are accessible, regardless of the browser, platform or screen that your reader chooses or must use to access your pages. This means pages which are legible regardless of screen resolution or size, or number of colors (and remember too that pages may be printed, or read aloud by reading software, or read using braille browsers). This means pages which adapt to the needs of a reader, whose eyesight is less than perfect, and who wishes to read pages with a very large font size.
Unfortunately Allsopp's advice was largely ignored, even by some of the best known developers on the web. Regrettably, we at Webmonkey did not start embracing responsive development best practices until the second round of interest, when, like everyone else, the iPhone and other mobile devices forced us to rethink our designs.
That's okay though, it's never too late to embrace something new.
|
