How Responsive Design is Like Water

There are three states of matter known to be found on Earth. These states of course being that of solid, liquid, and gas. Taking into account that these three states are distinctly different, it is easy to assume that they each have a unique form. Solids are rigid and tightly packed molecules , gases are hyperactive molecules that are always just bouncing around everywhere, and liquids are closely connected molecules that have no true form.

Before steering away from this post because of the brief refresher on some chemistry notes, which may or may not have triggered haunting blocked out memories, take some time to consider something. Why would any professional creative ever be daft enough to mention anything relating to science subjects like chemistry in a blog post? And how can knowing this honestly improve my responsive design skills?

Liquid: The Responsive State


*Image Credit: mloge

For the sake of the article, the matter state of liquid will now be referred to as water. Everyone in every part of the world can tell you what water looks like, but have you really noticed it? With all the discussion arising due to responsive design going mainstream, its troubling to see the original responsive design go unnoticed. Let’s take a look at a few examples, while also explaining how they relate to responsive design.

Example 1: Water has no True Form

As aforementioned the state of water is the only one to be fully visible, yet have no exact form. The loosely connected molecules of this state bond together to take the shape of whatever container they are in. In responsive design, the website is meant not to have any true form. Its form depends on the device it is being viewed on, or containing it.

Example 2: When Pressure is Added, Water can be Dangerous

The phrase speed over power never becomes clearer then when dealing with water. Normally, water is in a very nice refreshing state with no harm coming from touching it. However, that can easily change once the right level of pressure is added. Once the right pressure level has been reached, the safe water state quickly turns into a blade sharp enough to cut through almost anything.

In responsive design, the pressure level relates to the use of space on the viewing device . The higher level of space used then what would be considered acceptable, the higher chance the pressure to find the message in said viewing device grows.

Example 3: Water Easily Separates, Without Losing its Identity

The beauty that truly is found in water is that no matter how you try to break it up, whenever it is viewed, water will still be easily recognized as being water. With responsive design as screen resolutions go down in size, parts of the website will not be seen. It is important to make sure that no matter the screen resolution that the site is still easily recognizable and leaves no question about its purpose.

Applying Traits of Water To Your Designs


*Image Credit: ceNineJon

Hopefully now you see the benefits of taking a closer look at water when creating a responsive website, if not go ahead and start over from the top one or more times. Chances are, something was skipped or you just breezed through too fast. Next up is learning how to apply certain traits of water to responsive design that will allow the most to be obtained from your site.

Use Screen Dimensions as a Guide, Not a Sole Determining Factor

The common thought on responsive design is that you design your site differently based on the usual screen resolutions of the device power trio (phones, tablets, desktops/notebooks) and work from there. This may work to  some degree, but it defeats the purpose of pursuing a website that is responsive. For such a case, the website would best be described as being adaptable for the screen resolutions mentioned. What should be done instead of this, is understanding the different resolutions and coming up with a framework, or editing a pre-built one, to the point where how it responds with different screen sizes matches up well with your websites design and layout.

Understanding how Much your Viewer can Take

Imagine a scenario where you have an adult and a young child, both are thirsty and are about to get a drink to quench said thirst. Does the adult and the child have the same size drink? Of course not, the child would be overwhelmed by such a size and might have a negative impact from taking in more than allotted for their size. When dealing with what content should stay, and which should go, with smaller screen resolutions it’s all in a matter of a few determining factors: what type of content does your site have, what are the reading habits of your visitors, what areas are needed to maintain the message, and what would go unnoticed missing.

Forming a Bond between Independence and Cohesiveness

The most beautiful thing about water is that every one of its molecules is completely independent of one another, but when combined with another water molecule, a cohesive bond is formed. This bond allowing for each one to stay independent, and able to detach from one another, and allowing for a greater amount of water to be formed without conflict. This may be a general practice for any website built, but it’s way more important when dealing with one that is responsive. The goal here is to find a way where all aspects are independent enough to stand alone on their designated resolutions without an issue, and be able to come together when that time is called like they belong with each other.

In Conclusion

The responsive state of water is a very beautiful in form, process, and identity. By taking a closer look at how it acts and responds to different situations, can give quite the amount of good insight into how to better a responsive website. The main thing to take away from this article is that responsiveness is not the same as being adaptable to certain screen resolutions. Being truly responsive is about growing, shrinking, or whatever else to adjust to the screen dimensions of the device that is doing the viewing.

What have You Noticed about Water that You would like to Add?

Jamal

I code, write, and stuff at Five Alarm Interactive. Tweet me: @5alarmint.

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. Philippe Reidmoreau says

    Thanks for this poetic approach. Very smart, simple and highly pertinent.

  2. Michael says

    I really liked the comparison you made between design and water, I think you’re right, because both are closely related in many variants, where stands the ability to adapt to the desired environment.

  3. azaza says

    The responsive state of water is a very beautiful in form, process, and identity.

  4. says

    I’ve always compared web design / development to kung fu, and this post reminds me of something Bruce Lee said:

    “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.
    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.”

    • says

      Hey Tyler,

      Funny you should mention Bruce Lee, I’ve actually spent more than half of my 19 years of life studying Tae Kwan Do Ji Do Kwan in a very traditional school. Bruce Lee is also someone I feel has brought some of the best modern day philosophies to the world. I guess with those two things in mind, it is quite obvious how you can see one of Bruce’s ideologies in my article. Glad you picked up on it :)