Total Followers 132,503
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?
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.
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.
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.
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.
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.
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.
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.
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.
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.
Get The Only Freelancer crash course you will ever need to read!
Jamal is a young freelance web designer, web developer, writer, and blogger based in Atlanta, Ga. His work can be found at his online identity Five Alarm Interactive(FAI). He is a college student and philosophical poet by day, and passionate professional by night. You can keep up with him on Twitter @5alarmint.
Sunday, March 25th, 2012 15:29
Thanks for this poetic approach. Very smart, simple and highly pertinent.
Sunday, March 11th, 2012 17:42
Really interesting post and well written. Thanks for sharing your ideas!
Wednesday, March 7th, 2012 00:55
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.
Tuesday, March 6th, 2012 23:26
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.”
Wednesday, March 7th, 2012 18:00
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 :)
Tuesday, March 6th, 2012 16:41
The responsive state of water is a very beautiful in form, process, and identity.
Tuesday, March 6th, 2012 12:34
Wow! Very smart and informative article. Thanks Jamal.
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Abdelhadi Touil
Tuesday, March 6th, 2012 12:34
Wow! Very smart and informative article. Thanks Jamal.
Jamal
Wednesday, March 7th, 2012 18:00
Thank You, very much appreciated Abdelhadi :)
Tyler
Tuesday, March 6th, 2012 23:26
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.”
Jamal
Wednesday, March 7th, 2012 18:00
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 :)
azaza
Tuesday, March 6th, 2012 16:41
The responsive state of water is a very beautiful in form, process, and identity.
Michael
Wednesday, March 7th, 2012 00:55
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.
Philippe Reidmoreau
Sunday, March 25th, 2012 15:29
Thanks for this poetic approach. Very smart, simple and highly pertinent.
Warren
Sunday, March 11th, 2012 17:42
Really interesting post and well written. Thanks for sharing your ideas!