By Matt Carver
When I was in my early 20s, I took a part-time job selling cellphones at a kiosk in a department store. I was given a standard Nokia flip phone and told that one of the biggest selling features of the phone was its ability to connect to the Internet. This was the first time I had used something other than a traditional desktop computer to browse the Web, and my mind reeled at the possibilities. I got home and activated my new phone; to call the experience disappointing is an understatement. Sites were stripped down to their bare bones, and navigating with a number pad was a nightmare. Just Googling something became an ordeal, and the phone was quickly relegated to something I used only in times of utter boredom.
Even to the tech-savvy like myself, it wasn’t until the release of the first iPhone and iPod touch that an alternative to the standard browsing experience was something accessible. Apple’s new phone and MP3 player boasted a “full web experience,” and it delivered on its promise. Small talk was finally the open-book test I had always dreamed it could be. Checking sports scores in the bathroom while out on a date was a breeze. It was a glorious time for people as married to the Internet as I am, but it was quickly tainted.
It wasn’t long until the mobile redirect reared its head in my portable browser. Suddenly, this “full web experience” was being relegated and compartmentalized into quarantined URLs marked with an m.sitename.com or sitename.com/mobile. Web designers and developers, being forced to strip Flash content and streamline UI, started segregating their mobile traffic from the full versions of their sites. The community at large decided that slower download speeds and a smaller screen required sites to be redesigned and developed to accommodate the seemingly crippled devices. The practice of compartmentalizing the Internet started with mobile, but soon it carried onto tablets and other unconventional browsers. The new generation of web-enabled devices became the lepers of the web development community, but one small feature of the CSS3 specifications changed all that.
What Is Responsive Design?
Responsive web design is an emerging discipline in web design and development that takes a holistic approach to building sites that perform on mobile, tablet and desktop within a single experience. In a site built on the principals of the responsive web, the layout is framed within the context of the user’s viewable area and elements are intuitively refactored to meet the shifting user interface demands. To put it plainly, the responsive web is one that responds to the visitor’s web browser and device and serves an experience geared to their needs without having to redirect traffic to a different site entirely.
On May 25, 2010, Ethan Marcotte wrote an article for A List Apart entitled “Responsive Web Design”1 and it instantly became the buzz of every web designer’s Twitter feed. Almost immediately, people started emulating the practice Ethan advocated, most notably on Hicksdesign.2
In the year that followed, the “responsive web” blew up. Mediaqueri.es3 launched as a collection of the best examples of sites using the discipline. Ethan Marcotte published a book on the subject, also titled Responsive Web Design.
Media Queries: The Hero of the Responsive Web
Being able to use alternative layouts for devices and browsers is nothing inherently new. Front-end developers had been using separate layouts and styles for printers or Internet Explorer variations for years prior to the release of CSS3, but it was the ability to serve specific rules based on a browser’s size that was the real game changer in CSS3. Using media queries, developers no longer had to isolate mobile browsers and could apply specific rules to a site based on the resolution of the visitor’s viewable area. Whether this viewable area was defined as a small-screen device or merely a browser window tucked away in the corner of a larger screen, the developer could adjust accordingly. Media queries quickly became a powerful tool in the front-end developer’s toolbox.
Mobile: The Canary in the Coal Mine
It’s difficult to talk about the responsive web without discussing mobile, because mobile handsets were the first case in which casual consumers began exploring the Internet outside their desktop or laptop computers. Mobile certainly is a big part of the practice, but, ultimately, the goal of the responsive web is much more ambitious. To put it simply, the objective of designing and developing a responsive web is to create an Internet that works regardless of the user’s chosen platform or device. Since the early days online, the Web’s pioneers have seen the Internet as a repository of information that is potentially accessible by anyone, from anywhere, and the responsive web is the fruition of this promise.
One of my favorite browsers isn’t available on a desktop or a mobile handset; it’s on a video game console. The Nintendo Wii had an update shortly after its release that introduced users to “The Internet Channel,” where users could navigate the Internet through an Opera-based browser by using their controller. It was a really fun browsing experience, and Nintendo seeks to improve upon it with their next console, the Wii U, this time implementing touchscreen browsing capabilities. As a developer, I find this to be an exciting innovation, as it bridges the gap between desktop browsing and tablet browsing. But how do we react to innovations like this? How do we design and develop sites that have varying screen widths in the same experience? What about accommodating devices like the Kindle Fire or the Nook? As a mouse and keyboard become increasingly antiquated, being abandoned for multitouch, gesture and even voice-based input devices, how do we adapt our user interfaces?
Getting Started
When you’re finally ready to take the plunge into building a responsive site, there’s a lot to keep in mind. First and foremost, you need a general understanding of the ebb and flow of a responsive site. The responsive web demands a holistic approach and interdisciplinary communication. Currently, those who are most successful in the practice are those who can both design and code themselves, because the original intent of each element within a site can be interpreted as the developer sees fit. Success in the responsive web doesn’t have to come at the cost of good design, though. Nor does it require an art director creating three versions of the same site. In fact, this approach is the polar opposite of the core purpose of the responsive web.
To successfully design for responsiveness, the art director has to approach the layout as a series of parts contributing to the whole of a design. Elements are designed as individual pieces, fitting comfortably into one another, yet they do not depend upon one another. Headers, footers, theater space and copy blocks all need to have a sense of fluidity that feeds into the brand and brings the site to life.
Another key element is the adherence to a grid. This gives the developer a set of units and provides him or her with a bit of malleability between the core elements on a page. Grids bring a sense of compartmentalization to a site, which the practice almost demands.
Device Agnosticism and Future-Proofing: Why Responsive Matters
The responsive web marks the beginning of an exciting time for web professionals. Since the “Web 2.0” trend, starting around 2002, the Internet has evolved into a wholly different landscape. Before the start of Web 2.0, there was no iPhone. Facebook, YouTube, Twitter and Reddit hadn’t been launched yet, and Wikipedia was in its infancy (all are now among Alexa’s4 top-ranked sites). In just 10 years, the Web completely changed, and the responsive web marks another evolutionary milestone in Internet technology.
Device agnosticism is one of the principal benefits of developing responsive sites. Visitors are going to browse the Web in new and exciting ways in the years to come, and they will expect each site to work, no matter how we built it. Developing native applications for every new device isn’t efficient, and redirecting users onto compartmentalized variations of sites would be a nightmare to maintain. The truth is that the responsive web is a necessity to build an Internet that meets the needs of those using it. It’s not simply an issue of technology or having the latest and greatest in programming practices. The responsive web is the answer to the constantly evolving web user interface, and it offers a relatively future-proof approach to a constantly growing and evolving medium.
The Web isn’t known for standing still. Constant advancement is inherent, so changes cannot be attended to individually. Instead, adaptation must happen automatically. The responsive web demands that web professionals from every discipline, from design to development and beyond, be prepared not for where the technology is, but for where it’s going. It’s a practice of architecting while looking forward. If the Internet is the printing press of our age, the responsive web is the next leap forward. As web technologists, we stand on the precipice of advances in our industry unlike any before, and the responsive web marks the beginning of an exciting period for everyone involved.