No one can legitimately debate that the web is going everywhere nowadays. Devices of all sizes and stripes are equipped with web browsers. The internet has never before been this accessible to this many people…and it’s only spreading. More devices with a larger variation of screen sizes and browsers – sounds like a nightmare to manage it all, right? Enter responsive design!
Responsive web design (and web development) is the way in which web pages are developed that allows the same code to render differently based on a particular screen size and the device’s available feature set. The concept was first mentioned publicly in an article on A List Apart written in May of 2010 by Ethan Marcotte. Allowing pages to be styled differently based on screen width had previously been a pipe dream. But with the support for media queries made available in CSS3, it had turned into a reality.
Since the rise in popularity of smartphones, companies have seen the huge need to create web pages that render well on these smaller screens. As such there was a need to develop WAP sites to cater to these lowest common denominators. However, smart phones got smarter and increased in their resolution, DPI, and capabilities. Then Apple created the iPad beginning yet another standard to which developer needed to conform. Seeing the big market in larger handheld devices, various companies began making tablet PCs powered by Android OS. In recent years we’ve also seen the rise of browser-powered TVs, adding yet another larger screen to consider when developing websites. And by sometime in 2014 it is expected that mobile traffic will outpace the traditional desktop/laptop traffic, leaving little room to doubt whether something needs to be done now in order to create some semblance of order in the chaos of trying to cater to all these various types of devices.
In its early days the web was viewed on a traditional screen with a tremendously low resolution. And this was the case for quite a bit of its relatively short history. But what started out as a fairly straightforward, though often somewhat challenging task, of designing and developing websites for the typical screens, has now been turned into a frenzy with so many different devices and their various screen widths to account for, that one wonders if it may just be simpler to send people the printed information of the web page.
What responsive design offers is a one-time development of a web page that will look amazing on any currently existing device and any device that may be introduced in the future. Since the device width flexibility is built into the page, the pages that are built are more or less future-proof solving the problem of the rapid device and platform fragmentation.
Now, such a wonderful solution to such a difficult problem is not without its challenges. There are some performance obstacles that must be scaled, not the least of which is having the ability to serve the right image for the right device. I must admit that these were some of the same things that bugged me about this approach of building web pages. But these challenges are minimal and various solutions are being worked on. Compared to what stands to be gained from its use, the challenges more or less fade into the background. Expect to see responsive design being employed on more and more websites.