The Future of Web Design
Responsive web design has really become a hot topic lately and with good reason; it is a damn good idea. The concept is based on responsive architecture and was first mentioned by Ethan Marcotte way back in 2010. While some people might not think two years ago is ‘way back’, when you are talking in internet years (which are like dog years) that is ages ago.
Responsive architecture is the idea of how physical spaces can respond to the presence of people passing through them. Marcotte took this idea towards web design in regards to web pages and how people view them. He had met with companies that requested ‘an iPhone’ website as part of project. But with the variety of devices used to view the internet expanding, he wondered in the future how many websites would he need to create to keep pace with the ways people view them?
So to overcome that issue he worked with techniques and ideas that when combined together allow a website to be scalable to the source viewing it.
It’s Not Our Problem
As devices are created their purpose is to capture the interest of a market based on outperforming another device. Samsung’s Galaxy SIII is trying to be better than the iPhone, the Kindle and Nook are trying to be better than the iPad. But while these devices compete amongst each other and keep changing their damn screen sizes, do any of them really care how that affects your business on the web?
Of course not! That is pretty selfish if you ask me. So as all of these devices from X-Boxes to tablets and smartphones to computers access the internet, people are left with the difficult prospect of making sure that no matter how their customers want to look them up, that they like what they see.
“Yeah that design looks great on my 22” widescreen at work but how will it look when I want to check in from my Samsung refrigerator? (No, I’m not kidding. Samsung has an app enabled wi-fi refrigerator)
How it Works
In a nutshell the way it works is by using a fluid grid that can easily expand or contract based on viewing size. The concept is similar to a liquid layout but can go just a little bit further. The fluid grids combine with media queries, which allow you to gather data about the site visitor which in turn allows a conditional CSS style to be applied to that viewer. What this means is that your content will adjust to the person looking at it. The base layout with remain the same but it can elongate as the viewing width narrows without losing the overall style you have.
If you have ever viewed a responsive web page it is pretty slick. As you adjust the browser width the page just flows with it instead of needing a bottom scrolling bar or just lost content.
The Bottom Line
Mobile browsing will have completely outpaced desktop browsing in the next couple of years. It is just an inevitable fact. On top of that, as people use other odd devices to access the web it becomes more and more difficult to cater to each individual one. Instead of getting caught up in the race to have a mobile phone site, a tablet site, and a desktop site you should instead be looking at creating a responsive website that can do it all no matter what the size. Most sites can use a nice face-lift as it is if they are a few years old anyway; what is that, 14 or 21 years in dog years?