Responsible Web Design

In many ways responsive web design has dragged the old debate of fixed-width vs. fluid design from 10 years ago back to the forefront.

This time though the question is one of adaptive vs. responsive design. And once again, each has its place.

Tables

In the olden times, while web design itself was still young, tables were about the only method of placing content on a page. They worked because they're all we had.

Style sheets were still new and it was the time of the browser wars. Vendors couldn't agree on how to make HTML itself compatible, much less something as new and revolutionary as CSS.

With tables, like many other things, there was more than one way to do it. The widths of columns could be sized either to a certain number of pixels or to a percentage of screen width.

And thus began the age-old debate of how to best deal with varying screen sizes.

Fixed-Width

Fixed-width layouts attempted to cope by designing to a certain minimum pixel width and floating everything to the center, which worked well while the world was full of 600-pixel and larger monitors.

Nobody cared much about the vast acres of empty space on either side. They were a necessary evil.

Fluid

On the other hand, fluid design dealt with the problem by making everything elastic. Table columns were sized based on percentage of screen width and would shrink or stretch to fit.

This also worked well on both larger and smaller screens, up to a point. Once a table cell became smaller than its contents however, things got weird.

And once again nobody cared much because screens were still expanding and the small viewports got left in the dust.

The Debate

Users with smaller screens (think laptops) would see some clunky effects on fluid sites. The same users on fixed-width sites would get the dreaded bottom scroll bar.

Neither was a great alternative, but both were considered acceptable since the world was still largely monitor-based. The debate really amounted to which school of thought to subscribe to.

Adaptive vs. Responsive

As laptops started getting cheaper, screens started getting smaller. And with the explosion of mobile devices that trend accelerated.

Both previous schools of thought had to accept their limitations and adapt, which they did through the use of CSS media queries.

Adaptive

The fixed-width camp, refusing to die, came up with adaptive design where layouts are based on available screen size. Large screens will see one layout while smaller screens will see another.

How many sizes are available is simply a matter of how much time or money the owner wants to spend.

Responsive

Responsive design borrows the flexible grid from the fluid camp and adds media queries.

Images resize themselves and text just flows to where it's supposed to go, resulting in a site that looks good at an infinite number of sizes.

The Best of Both

The biggest argument against purely responsive design now is that it's only responsive to screen size. Bandwidth isn't a consideration, so users with less available bandwidth are still served the same huge images as users with mega-pixel monitors.

The answer to this is to use adaptive-style breakpoints to serve smaller images to the smaller devices on the theory that the smaller screen also has less bandwidth. Technically speaking, this is still responsive design, but it's also responsible design.

Sure, responsible web design does require a bit more work, but which would you rather do: resize a few images and tweak your style sheet; redesign the whole site for another width; or, lose users?

Camp under whichever flag you want, but be responsible about it. Save some bandwidth, speed up your users experience, and make that cell tower available for the next poor slob. Everybody wins.