Look around you right now; how many different screens do you see? Probably more than you’d think – although normally, you probably don’t spend your time thinking about such silly things.
So how many did you count? One? Five? ...20?
Chances are… most of them were different sizes as well.
Today we are surrounded by screens – our phones, TVs, computer monitors, tablets, laptops, smart watches… the list goes on. Heck, your refrigerator may even have a display on the front.
So how do we make sure the content you want to consume is easy to read, makes no compromises and works on whatever device you’re using? Responsive design.
In the old days
Let’s take a journey back to (relatively) simpler times…
For a majority of the internet’s history, websites have been viewed on desktop computers with monitors that were pretty consistently sized; commonly 800 or 1024 pixels wide. Because of this, web designers had no problem ensuring their websites looked the same, no matter what computer they were being viewed on. They slept easy knowing the bright pink, scrolling marquee they had spent so much effort on would be in the same place on every monitor. (Oh, the horror...)
Well, one morning someone pulled his new mobile device out of his pocket to check the news. He opened up the website, waited for things to load and chaos ensued! Okay, maybe a bit of an exaggeration, but the point remains. Everything was tiny, images were out of proportion and some elements of the website seemed to completely disappear off the edge of the screen.
What’s going on here?
Connected on-the-go
Mobile devices have been around for a while. They were certainly around when web designers were making websites that fit on every screen. However, mobile devices back then weren’t capable of rendering websites in any meaningful way. They were ignored when considering the design of a website, and for good reason!
Eventually things changed…
As adoption of the internet grew, so did the adoption of mobile devices. Website visitors coming from mobile devices began to increase exponentially.
The problem, and solution
There is a problem when a significant number of visitors to your website cannot properly use it because the website wasn’t designed for their screen. It’s frustrating for users and can be devestating for businesses, such as online stores, dependent on selling their products over the internet. It’s devestating because analytics show (in most cases) that if a visitor lands on your website, using a mobile device, and they cannot use it… they do not cater to the business by finding a desktop computer and trying again. They will simply move on to the next store that has what they want, that DOES work on their mobile device.
So wait… why would another website be any different?
Because they already solved this problem – by using responsive design.
Without going into all the technical details, responsive design is the idea that all elements on a website should be fluid and respond to the screen size they are being displayed on. This means some elements may expand to fill the entire viewport on a small device, while being in a traditional column-style layout on larger screens. Some non-important elements may be hidden all together on smaller screens as to not take up precious screen real estate.
Each website is different and there is not a one-size-fits-all solution with responsive design, so it does mean more work for the designer or developer building your website and this can often translate into spending more money for modern websites.
But the extra work ultimately results in happier visitors to your website, happier customers and helps shape the evolution of the internet that we all know and love.
So now that you know a little bit more about responsive design, have some fun with it. Test out your favorite websites on different devices you have to see how they respond.
Thanks so much for reading!