There are three states of matter known to be found on Earth. These states of course being 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.

Your Web Designer Toolbox

Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets
Starting at only $16.50/month!


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 web design blog post? And how can knowing this honestly improve my responsive design skills?

Liquid: The Responsive State

For the sake of the article, the matter state of liquid will now be referred to as water.

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

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 allows 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.

This post may contain affiliate links. See our disclosure about affiliate links here.