What If Responsive Web Design Was a Chameleon? Essay

Have you come across a chameleon? One moment it is the color of the green leaves around it, and the next, it looks completely different.

The way we would love for our websites to act like chameleons is through responsive web design.

We open up a website on our laptop and everything is as expected, but when we open the site up on our phone, everything changes and adapts to fit our smaller screen.

No important information is lost or hidden, but instead, the website has changed to fit our screen size so the text is still readable, the text boxes and buttons still pressable, and the images still viewable.

Responsive web design is essentially a website that can adapt to its environment.

Now, how could a digital website mirror a live chameleon? Let's take a peek under the hood.

A Website That Can Adapt

Imagine we have a chameleon sitting on a tree branch.

Depending on its environment and health, it may be able to alter its coloration.

A responsive website has the ability to change how its content is structured and laid out, but it does not actually change the content itself.

So, if we were to view a website that uses responsive web design on a laptop versus a smart phone, the actual content will stay the same. The change will be seen in the layout of the information.

Content such as having several columns of text may be seen side by side on a large laptop screen, but stack vertically on a small phone screen to make the information easier to read and navigate. How can a website be able to do this? The secret lies in development.

There are many tools that a developer may use to give a website its responsive powers.

1. CSS Media Queries - Eyes on the Environment

A chameleon may have special powers, but it cannot see what is around it without eyes.

CSS media queries give a website "eyes" so it can see the environment around it, such as the width of the screen. Developers can use this information to create a layout that best fits the space.

For instance, a menu bar may be structured horizontally on a larger laptop screen, but must change and possibly become a collapsable button on a smaller phone screen.

The actual content of the menu bar does not change, only how it is structured.

2. Flexible Layouts - Stretching Its Branches

A chameleon may stretch itself from branch to branch. Responsive websites may need to do something similar.

Similar to how a chameleon stretches itself from branch to branch, websites using responsive web design may need to "stretch" the layout to fit the environment. This can be achieved by utilizing CSS Flexbox and CSS Grid.

These powerful tools in CSS give websites the power to move and position items in a way that fits the available space.

3. Responsive Images - Scaling Photographs

A chameleon may find itself trying to fit on the smallest of branches. Responsive websites may try to do the same.

Images on a responsive website may need to "shrink" to fit the available space.

This can be accomplished by telling the image how to scale itself. There may also come a time when developers need to supply alternate images to scale for different screen sizes.

This could be for aesthetics and performance. The larger an image is, the more data needs to be transferred for the image to appear on a screen.

By supplying a smaller image, the time it takes for the image to appear can be drastically reduced.

What Happens When a Website Can't Adapt?

What if our chameleon loses its special powers and cannot adapt to its environment anymore?

A website without a responsive web design suffers the same fate.

A visitor comes to the website with a smaller screen and is left struggling with trying to read smaller text, trying to press buttons that are too small and spaced too far apart, or having images run off the edge of the screen.

If a visitor comes to an e-commerce store and has to zoom in on every image to see what they are purchasing, would they continue to visit the store? Or would they leave and go to a competitor's website that has everything a visitor needs to see right on their screen? Visitors expect a website to fit their screen, and anything less than that can cause frustration and push them away from the website.

Who Would You Rather Hire?

Let us imagine a scenario in which two businesses are essentially the same. One however, has a website that looks nice on a desktop screen, but struggles on a mobile device. The other has a responsively-designed website that automatically makes changes to fit any screen.

Who would you rather visit and spend your hard-earned cash with?

We would all rather visit the business that has made visiting their website easier. Responsive web design can help make your business a desirable candidate when someone is trying to research products and services.

Responsive web design also helps with search engine optimization.

Google mainly crawls the mobile version of a website, which means mobile responsive sites tend to rank better. That being said, a website still has to be optimized for content and performance. A responsively-designed website can provide a solid base to build your website on.

Can a Responsive Website Adapt to Everything?

Our chameleon may be able to adapt to its surroundings, but there are still limitations. A responsive website may suffer the same fate. A website may look great on a desktop screen and a mobile phone, but then encounter an unusual screen size and break.

Developers have to account for every device by testing responsive websites on different viewport sizes.

Developers also have to understand that there are different ways people interact with a website. Someone viewing a website on a desktop may use a mouse to click and navigate around, but someone on a mobile phone will most likely use their fingers to pinch, zoom, and swipe.

The buttons on a website or application need to be large enough to be pressed by a finger, but small enough to be accurately clicked by a cursor. Responsive web design enables a website to be used by a wider audience.

Building From the Smallest Branch

Our young chameleon may have learned to navigate through smaller branches first. Developers have also been doing a similar task.

The practice of building a responsively-designed website is usually done by starting with the smallest screen first and working up to the larger screens.

This is called mobile first development.

Instead of focusing on the larger desktop monitors first and then trying to make adjustments for smaller screens, developers begin with smaller screens and then add more information and style as the screen gets bigger. The goal of this approach is to focus only on what is important and leave out any fluff or fat.

There are other benefits to this method, but developers need to be aware that it may not always result in the best performance without extra optimization.

The Future of Websites That Can Adapt

Technology will only keep evolving and new ways of interacting with the internet will be discovered.

From phones, to tablets, to newer larger laptop displays, websites need to keep adapting.

Responsive web design helps developers prepare for this future.

Modern CSS has more tricks and tools to help websites adapt to their environments. There was a time where websites had to be built specifically for every device, but that is no longer the case.

With containers coming soon, websites can continue to be more adaptive and flexible.

Websites do not need to account for every possible device out there, but they do need to be ready to change and adapt when their environment does. Any company that wants to invest in professional website development services should be prepared to be adaptable from the beginning.

Final Thoughts

A chameleon can adapt to its environment which makes it one of the most interesting creatures in the animal kingdom.

Responsive web design helps websites do the same.

A good website should not force a visitor to have to constantly adjust their device to fit on a website, but instead should be able to adjust to fit the visitor.

Whether someone is using their computer, smart phone, or tablet to view a responsively-designed website, the information should always be clearly presented and easy to navigate. And although a chameleon may change color, it will still remain a chameleon. Similarly, although a responsively-designed website may change its layout, it will still remain the same website no matter what device is used to view it. After all, a visitor with a larger screen should not be forced to use a smaller screen, but instead the smaller screen should be able to adapt to the larger one.