What is Responsive Web Design?

No longer just a buzz phrase, Responsive Web Design is now an essential skill for every web designer and developer. Learn responsive techniques to make your designs look magnificent on any device, future proof them, and reduce development time and budget. RWD (Responsive Web Design) helps you deal with the very real problem of not knowing where and how your application will be used. With these skills you’ll effortlessly win new clients. Now is the time to embrace RWD.

The longer you spend working with the Web, the more you come to realize the truth in the adage that change is the only constant. We’ve seen changes in our programming languages, design patterns, and browser popularity; more recently, the devices that connect to the Web and our applications have evolved. And it’s this last change that has caused the need for Responsive Web Design (RWD)—an approach to web design that places the user firmly as the focus.

Responsive web design is a series of techniques and technologies that are combined to make delivering a single application across a range of devices as practical as possible. And it’s not just web professionals who have seen the need; large and small businesses are seeking ways to make their web content work, regardless of where a user might encounter it.

Changes in devices aren’t new, of course; it’s the pace and breadth of the change that’s new. It was only a short time ago that our biggest challenge was whether our sites should make what seemed the giant leap from 800px to 1024px wide. Making the change, we thought we’d bought ourselves some time and that technology shifts would be slow, but technology knew better. As monitors and screens continued to grow, our challenge was in deciding how much of the full screen we should design for as devices also increased in pixel resolution. And higher pixel counts are not restricted to larger screens either; the rise of mobile devices means that screens are also shrinking.

You now have mobiles in portrait and landscape mode, tablets in portrait and landscape mode, laptops, desktops, monitors, and even televisions to contend with. What we needed was an approach that allowed us to have our designs respond to any device they found themselves on, which is just the tip of the iceberg. And so responsive web design was born.

In addition to changes in the device sizes that applications can appear on, there are also changes to how users interact with your applications. The interface between the user and the application is becoming more invisible, more natural. While accessibility experts were rallying for better keyboard and mouse support, your application now has to contend with touch and gesture events, and game controllers as input devices. More recently, the rise of Apple’s Siri and changes to Google TV mean that voice control is no longer the stuff of science fiction.

Reacting to the Responsive Movement

The tools and techniques that come under the banner of responsive web design have always been staples of the development community—and will continue to thrive as the practice of RWD breathes new life into them. The pillars of RWD provide a set of techniques that can be applied singularly or collectively to help position your users as the application’s focus. The combination of fluid grids, dynamic images, media queries, and responsive content provide the opportunity to cater to the array of devices your application will feature on. Best of all, this is just the beginning… bet you can’t wait to see what lies ahead!

This is an excerpt from Jump Start Responsive Web Design, by Craig Sharkie and Andrew Fisher.

Learn HTML5 Online

Get all SitePoint books and courses with a Learnable membership. Start building future-proof websites that are faster, more powerful, and easier to maintain.