As understood from Marcotte’s seminal article and book, Responsive Web Design is a flexible, adaptive approach to the display of web content, achieved via technologies that rearrange, resize, add or subtract content. Marcotte’s Responsive Design serves a more legible, usable web page to an array of devices with varying screen resolutions and download speeds.

The popularity of Marcotte’s responsive web design will likely result in better content consumption experiences for a lot of websites, for a lot of people. However, by focusing our conversation on the optimization of visual presentation, we’ve placed just one of what I hope will be the three pillars of responsive web design: content, presentation and interface. By broadening the definition, we will allow responsive web design to better support the way people experience the web today and will experience it tomorrow.

In this essay, we explore ways in which the first pillar, content, might become responsive. But before we begin, let’s first examine the role physical devices can play in making these experiences possible, especially the mobile devices which initially inspired the responsive web design movement…

Some interesting comments on hover menus and usability vs. click menus. With the explosion of mobile devices (which don’t have hover states) this may all be one level more relevant, too. The comments have an interesting discussion with a variety of points of view so be sure to read through them as well.

Many design­ers seem to believe that when their menus open on hover, they’re faster and eas­ier for most users to use. It cer­tainly might seem this way at first, but when you look deeper you’ll notice that the oppo­site is true. Hover menus are actu­ally slower and harder for most users to use. Menus that open on hover do save users a click, but that first click is nec­es­sary in let­ting the web­site know that the user wants a menu to open and is ready for it. It also con­firms to the user that some­thing is hap­pening as a result of their click. This behav­ior matches the user’s men­tal model of how most web­sites work. Click­ing for some­thing you want has never been an issue for users. What’s an issue for users is get­ting some­thing you don’t want or don’t expect sim­ply on hover…

Just a few years ago, creating a fixed-width design and the coding to stick to that width was practical, as long as it could accommodate a wide range of users. However, just a few years ago, having the Internet on a cell phone was a luxury, netbooks were rare, and the convenient tablet device, such as an iPad, didn’t even exist. Now, a fixed-width design is almost inconvenient.

Mobile web designs began gaining momentum within the last few years, but often times they were just mobile stylesheets for very small devices, that accompanied the default, fixed-width stylesheet. Beyond this, truly flexible web designs have been few and far between. Ideally, a flexible web design should be fully proportional from the smallest to the largest device, without those proportions straining. After widths or heights hit a certain point (e.g. becomes too small for a computer screen), a design would then change stylesheets to alter content availability, layout structure, and more.

It’s easy to see the advantage of flexible layouts, but there are still many advantages of fixed-width layouts as well: they’re easy to create, faster to create, the layouts don’t break, and content doesn’t overflow to create a messy and unusable look. In other words, a fixed-width layout can be far more usable than any flexible layout if that flexible layout is implemented incorrectly. In this article, we’ll discuss the basic pros and cons of each type of layout, and why flexible layouts, despite past drawbacks, will be gaining a competitive edge in the next several years over the once popular fixed-width choice. 

(See also: Responsive Web Design)

By default, an image element that’s sized at, say, 500px doesn’t exactly play nicely with an container that can be as large as 800px, but as small as 100px. What’s a designer to do?