It’s early morning, you just woke up, and now you want to read the news. You get your coffee and open a new web page to start scrolling.
You like an article and save it for later. Three hours later, while working on the next business project, you open the same article on your laptop.
This time, the article is bigger but adjusted to the screen size.
The layout is the same, the text fits perfectly, and it is much easier to read.
This feels like the text has magically started fitting in the screen. You are now wondering how this is happening.
Well, to answer your question, this is called a responsive web design. It’s literally adjusted as per the size of your screen, so you don’t have to think twice.
And yes, it is a marvel of modern web design.
So, if you want to know how we get here, then let’s dive into it.
The Age of Static Mobile Screen Internet
Most of us think that designs were always responsive.
We would open the same thing on phone, laptop, or tablet, and they would fit magically.
Right?
Well, things were not the same. Before responsive designs, nearly every design was built for big screens. The web pages would only fit on desktop computers, and if you wanted to open the website on a flip phone or a smartphone, you had to manually adjust the screen.
How?
Well, you would have to hold and pinch it with two fingers, move it around, and zoom it. This was exhausting, and most of the time, the text would either get blurry or too small.
Reading a single sentence would take a few minutes, which means reading a static page was out of the question.
Then came the Internet revolution. Wi-Fi became common, and good residential internet services in the US like Xfinity Internet helped internet users to stay connected regardless of the place, time, or destination.
Now that most people have started using smartphones as their default screen, websites have had to shift to a mobile version. You literally had to design a screen with different dimensions to fit mobile, desktop, tablet, etc.
So, if the dimensions of the screen were different, you would get a cropped web page. For web developers and designers, managing the dimensions manually was another headache.
The Era of Shape-Shifter Web Page Designs
In 2010, when most people started using the internet on their smartphones, a web designer, Ethan Marcotte, came up with the idea of dynamic and responsive pages. He suggested that web pages need to be built with a single web dimension. However, the frame behind these pages would change and rearrange dynamically.
So, instead of just using 800-pixel-wide design screens, web designers started using percentages. This helps them design web frames to fit any space or screen.
So, if you pick a percentage, it would suggest something like “50% of screen coverage”.
To achieve these, the designer had to ensure three basic parameters:
The pages were designed on a fluid grid. This means the elements of the page had to shrink or expand as per the screen measurement.
Moreover, each photo or media file used on the page would never get cropped on the edge of the screen. Instead, it would adjust as per the size of the screen.
Finally, designers had to ensure Media Queries. This was a simple code line that would eventually ask the device for a measurement. Eventually, the design would adjust as per the device’s answer.
This covers the basics of responsive design, but it changes the web design game for good.
So, what are a few of the magic tricks you need to look for to understand the dynamic web theme?
Top 3 Things to Notice for a Good Responsive Design
Now, if you open a responsive website on your phone, here are some of the things that you can notice to understand the shape-shifting trick:
1. Hamburg Menu
When you open the web page, you will see a navigation bar on your desktop. This navigation bar includes basic pages like home, about, service, contact, products, etc. However, when you open the same page on a phone, this will turn into a hamburger menu where all these options are stacked as a small icon on the right, left, or footer of the page to save space.
2. Column Adjustment
When you open a web page with a table that has three columns with pictures and text. On opening the same page on your mobile, you will see that the three columns will be stacked on top of each other. This will give you room to naturally scroll via your thumb.
3. Button Adjustment
On the desktop, the buttons are designed to be easily clickable. So, you can direct your mouse and click it. However, if you open it on a phone, you will notice that the buttons will get larger with better spacing, so you can easily click on it via thumb.
Simply put, web designs have come a long way. We now have responsive themes, personalized designs, and adjustable page options. This helps the user to enjoy seamless navigation that is easy for the eyes and hands.