Responsive layout overview

If there's one thing you need to embrace to become a successful web designer it's that the web is a constantly evolving place, and you're going to need to evolve right along with it. While a few years ago, we were arguing over the merits of fixed layouts versus flexible layouts, a very odd thing happened. People began using the web in a way that made this argument moot. Now over the past few years, the explosion of smartphones and tablets means that your content is now consumed by a wider array of screen sizes, resolutions, and browser types than ever before.

As a designer, that means you have to decide whether you're going to target one view over any other possible views, design a flexible layout that has to have the ability to grow from one extreme to another, or whether you are going to build a layout that is responsive. So what's a responsible layout? Well, responsive layouts do just that; they respond to the environment in which they're viewed. On desktops, the design could be enhanced for the larger screen, with increased graphics size and layouts that target wider aspect ratios. On a tablet, they could change layout and functionality based on the device type or the orientation of the device.

On smartphones, they could again change layout based on smaller size, hide some elements, and even take advantage of smartphone features like geolocation and messaging. And if you're wondering, all three of the layouts that I just showed you are the exact same page, just viewed at different sizes. Now if it sounds like I'm describing multiple layouts, you're not too far from the truth. Now responsive layouts typically use a combination of layout techniques and multiple layout types to serve the proper layout to the proper screen or device. Now with that in mind, here are few pros and cons to consider when thinking about using responsible layout.

Now the biggest reason to use them of course is that it allows you to control how users experience your content, based on the device or screen size. This allows you to create unique experiences for every device type or screen size that consumes your content. You can also use this as a way of reorganizing or even eliminating content based on the context. Mobile users can experience a site that's tailored for the mobile experience, while desktop users can interact with a site designed around that context. It also means that in many cases you don't have to create separate sites for mobile devices or redirect them to mobile-specific pages.

Now the downside to responsive layouts is that they require much more work, in terms of planning and executing the designs. You are essentially designing around multiple contexts all at the same time, and that requires you to be much more rigorous about how you build your site. Failure to plan one aspect properly can cascade into having to rework multiple areas of your site, as they are all tied into one another. You also have to rely on newer features. So in the short term you are going to need to expend a great deal of energy into providing fallback features for browsers or devices that don't have the support needed for your responsive layout.

Also, to take advantage of things like certain mobile-specific features and to adequately serve alternate content, you're going to need to go beyond just using CSS into at least moderate JavaScripting and using JavaScript libraries like modernizer that are designed to help you create responsive designs. Now my own personal feelings are that as designers, if we don't design for all the ways that people can consume or interact with our content, we are failing to address a significant amount of our audience. In terms of smartphones and tablet, I feel that we've reached a point where those audiences are just too big to ignore anymore.

So even if you want to take things slowly and not try to master responsive layouts right off the bat, at least understand the concepts and how the techniques of fixed and fluid layouts are used to help create more responsive designs. In a few years, my guess is we are going to be looking at layouts that aren't responsive, and wondering, how in the world we ever got away with it.