There was a time when houses had one computer, one phone line, 10 channels, and no Candy Crush Saga. When the Internet was but a little baby, the job of web designers was simple: develop a website for an Internet browser (probably Internet Explorer), and make it friendly to the keyboard and mouse interface. Bandwidth was low, so graphic assets were small and text design was about as simple as it could get.
The Case for Responsive Web Design: Why It’s Important
Fast forward to late 2013. The Internet is everywhere. Beautiful web pages are more dynamic and interactive than ever. Javascript, HTML5, CSS3, Ruby, Python, and the imagination are the tools of the developer and their capabilities are nearly limitless. But there's a problem. Creativity has its place, but trying to load a full-screen "catch-the-candy" promotional game for Hershey's onto one of the hundreds of Internet enabled devices in our society takes a heaping helping of flexibility.
In its infancy, the mobile web could more appropriately be called the "big web crammed on to little devices". Pinch and spread interfaces made large-format web pages accessible, but only just. Eventually, developers moved to dedicated mobile websites. Unfortunately, this solution also had its shortcomings. With the arduous task of maintaining to separate sets of code, CSS, and assets, a lack of shared indexation and search rank meant that mobile users may not even be able to find the mobile counterpart to an otherwise popular web destination.
With devices changing and developing every day, it became clear that web design needed a more elegant, intelligent, and flexible solution. From this, "responsive web design" was born. By utilizing some intuitive tools, adapting to the changing hardware landscape, and aspiring to find the most thoughtful and capable solution, responsive web design has risen above the rest as the solution du jour.
"Platform Agnosticism"
The principle challenge of the responsive web lies in adapting code to the myriad contexts in which it might appear. Apple and Android phones, iPads, computer monitors both large and small, and even eReaders present different screen resolutions and navigation capabilities to web developers aiming at a coherent experience across all formats. Responsive web design considers this problem and solves it at its root.
Through a series of Javascript queries the responsive web looks at the resolution and screen dimensions of devices servicing inbound connections and delivers a format optimized for the platform in question. By querying dimensions like screen width and screen resolution (including specific queries for retina displays), a single body of HTML code can serve separate assets such as headers and footers. Even navigation can be adjusted from the mouse-and-keyboard format of a desktop computer to the touch screen format of a smartphone.
In doing so, responsive web eschews specific considerations like device model and operating system and seeks intuitive solutions. Desktop sites can still be designed with large-format photography in the background and spacious typogaphy, while mobile devices can leverage simpler navigation and appropriate text size for easier reading. In doing so, the responsive web finds an elegant balance between sharing elements and code across all formats and making accommodations for unique design contexts.
Future/Fool-Proof
As our understanding of the evolving needs of users changes, so too can responsive web design. As mentioned, mobile phone screens require special, larger-format navigation menus in order to make movement easier for less-precise fingers. But the potential benefit of responsive web design is the potentially "future-proof" nature of the solution and the technical benefits of its implementation.
Take a ride on a metropolitan subway and you are likely to see as many devices accessing the Internet as you are people. This diversification is good, since the needs of no two users are exactly alike. What's so astounding about responsive web design is that it not only works with those myriad platforms, but can be easily developed to fit newer devices with higher resolution, larger format screens, and different input methods. Through the same media queries in ubiquitous use today, responsive web design provides a path for adaptation in the rapidly changing technological landscape.
And the net result is ease for both users and developers. Aside from the stated benefits of a single body of HTML code, maintenance and consistency between mobile and desktop formats of all shapes and sizes is easier than ever. By utilizing common CSS and visual assets, as well as URL indexation and search rank, updating one or two items applies the change to all formats without requiring copious re-crawling by popular search engines.
With the many benefits of responsive web design solving so many problems easier and cheaper than before, it's no wonder why the movement has found a foothold. And the model is accessible and attainable; savvy web developers and small businesses can utilize the solution today to the benefit of customers and the bottom line. By making special consolations for a diverse user-base, both viewers and designers are headed for an era of reduced headaches, load-times, and confusion that will ultimately see the Internet into a friendlier, more intuitive place.