Up until just a few years ago websites for the most part were designed at a “fixed” size. Website designers in simplest terms created a box and inserted text and images into it. The average size of the box got larger over the years as monitors grew in size but it was a fixed sized box nonetheless.
Smart phones exploded into the marketplace and made designers have to rethink some things. While that box looked great on desktops and laptops it became very small when trying to view that same box on the tiny screen of a mobile device. Users had to zoom in an out constantly while viewing the website, in order to go from seeing the entire website at once, to then being able to zoom in and read the tiny paragraphs of text. At the time mobile users were thrilled just to be able to see a website at all on their mobile phones but it quickly became tedious to browse the web this way.
Web designers then decided to make a much smaller box that would properly fit on a mobile without having to zoom in and out and the “mobile website” was born. Building a completely separate mobile website suddenly allowed designers to make websites that looked great on mobiles which was a huge accomplishment. The only problem was that they didn’t also look good on desktop computers and vice versa. Desktop and mobile sites had to be two separate entities and each were specifically created for one device or the other. Not only did website owners have to update two separate websites, but detection scripts had to be used to first identify which of the two devices it was being viewed on, and then send out whichever website was the better fit. This worked quite well for a while but then something happened that really complicated things.
Apple invented the iPad and it completely turned the website design world on its head. Web designers not only had to design for desktops and mobiles… but now they had to factor for yet another third possible screen size which was right in the middle of the two. Designing two separate websites was hard enough. Having to design three separate websites and maintain them all independently simply wasn’t an option so we were all left scrambling to figure out what to do next. In the meantime people began viewing the web on 70 inch televisions, GPS units in their cars, and even inside of their glasses with the invent of Google Goggles. It suddenly became obvious that the very foundation of how websites should be constructed needed to be rethought and reworked from the ground up.
There are now literally thousands of devices in all different shapes and sizes and that number is growing by the minute. Having a website for each and every one of them simply isn’t an option. And having a website that only fits one device isn’t the best idea either. You should have ONE website that fits EVERY device regardless of whether it’s being viewed on a Jumbotron or a wristwatch. Responsive website design was invented out of necessity to accomplish just that.
In simplest terms, responsive website designers now create a flexible box and put their text and images into it. Once it shrinks below certain widths, it then re-sorts the text and images within it, by dropping the items down below to the next line. So no matter how narrow you make the screen everything just drops down. Not only that, but certain portions your web page content can also be hidden or revealed at different widths. This makes it possible to have a lot of content on your desktop website for instance, that can disappear completely when being viewed on a mobile to keep it more streamlined, yet it is all the same website. It just displays whatever looks best automatically. Pretty cool stuff.
So there you have it. Responsive website designers build one website, which automatically responds by adjusting both its size and its content, to whatever makes the most sense for the device that it’s being viewed on.
To see a responsive website design in action simply drag your browser window’s width while viewing this website and you will see everything readjust. Or, visit this site from your computer and then from your mobile. It should make perfect sense once you see it in action. Many design agencies are still not utilizing this approach because building websites this way requires additional understanding, extra steps and more time. We believe that every website owner should have one so we provide them to all of our clients by default.
We encourage you to contact us if you are interested in learning more.
This article was written by AB Interfaces
"We specialize in Responsive WordPress Website Design & Development and are based out of Williamsburg, VA. Our websites are unique, attractive and enhance how your business is able to operate. We take pride in our work, truly care about your success and deliver a polished finished product with a purpose."