What is responsive web design?

Ever since carrying a cell phone became as important as carrying a wallet, the mobile version of a website has been a critical part of web design. You might not know this, but nearly half of a website's traffic is mobile traffic. So it isn't all that surprising that web developers and designers are always talking about responsive web design.

So.... what is it?

If you're like most people, you access websites across multiple devices -- a desktop, iPad, Kindle, cell phones, etc., and each device has a different screen size. Responsive web design is the task of making sure that the website your browsing is able to respond to each of those devices' screen size on the fly.

Flexible Grids

One of the most common ways developers accomplish this is through the use of flexible grids. A flexible grid is a series of code that makes a website shift and scale the stuff on the website automatically. What's shifted and scaled includes the layout, images, text sizes, and the general position of things. It's done with CSS media queries.

The meta-concept of responsive web design

People often credit Ethan Marcotte for the concept of Responsive Web Design. In May 2010, he published an article titled, Responsive Web Design. In it, he drew a parallel between web design and responsive architectural design. You see, one problem many buildings have is space. Build a room too small, and large groups of people won't fit comfortably. Build a room too large, and small groups of people won't fit comfortably. The solution was to move the walls. Some buildings use partitions; others use machines to move the walls mechanically. Problem solved. Ethan argued that web developers could use the same principle in web design. By using code (CSS media queries), we could adjust the web site's content to flex to the devices' screen size.

The affect CSS media queries had within web development can't be overstated. It's arguably one of the best solutions we have to answer the compatibility demands our innumerable devices and their respective screen sizes place on web designers. And this demand is so vast that some business models entirely revolve around designing plugins that allow code illiterate people to create responsive websites. It's that important.

And this sparked an entirely new way of thinking about web design.

There are a lot of screen resolutions

New mobile devices are created every year. And more devices equal additional screen resolutions, which also include orientations (portrait and landscape). Given the rising popularity and capability of smartphones, how is someone able to design for all these ever-evolving situations?

We make everything flexible

Flexible layouts were a “luxury add-on” for websites a few years ago. And things weren't THAT flexible. Back then, the only things that were flexible were the layout columns (i.e., structural elements) and the text. Images more often than not break the layout as it resized, and even flexible structural elements broke down when sized down small enough.

Today, things are much more flexible. Images can be coded to adjust automatically, and we have workarounds to prevent layouts from entirely breaking down (although they may become squished and illegible in the process). While it’s not a total fix, the solutions we have today give us far more options. Added bonus: today's flexibility's perfect for devices that switch from portrait to landscape or for when users switch from a large computer screen to an iPad.

Conclusion

I hope this brief article helps you better understand what a responsive website is. While there is a ton more information out there about this, this should be enough to help you understand what this all is. So you're aware, there are limitations to CSS Media queries and flexible/fluid grids we haven't talked about. Maybe I'll write something about that in the future. But for now, responsive websites provide you, the user, a custom website designed for you without the developer having to spend too much time coding every single screen size. I call that a win-win.