wait until responsive resize finishes redrawing the page

The idea is that as the mobile market makes browser window widths more and more inconsistent, the need for our layouts to be fluid and adapt to different widths is increasingly vital. If I had to name this layout technique myself, I would call it the Omnipotent Mercury Morphing Methodology, but that’s probably why I didn’t come up with it. Rather than repeat the entire article here, I highly recommend that you check it out. The article was titled “Responsive Web Design” and it was written by Ethan Marcotte. On A List Apart article, though, introduced a novel layout type that I think we’ll be seeing a lot more of. For the purpose of this chapter, however, most of those could be categorized as either fixed or fluid. I’ve seen articles recently that list up to ten different layout types. That’s usually true in the web world, and designers have come up with many variants and hybrids of fixed-width and fluid-width layout structures. It’s been said that for every rule, there’s an exception. The pros and cons of each layout type are fairly well-defined, as the table below outlines: Ultimately, though, the decision to use one type of layout over the other should really be determined by the target audience, and the accessibility goals of each individual website. There are several resources available for designing fluid layouts on a grid, including a fluid adaptation of the 960 Grid System. One reason some designers reject fluid layouts is because they think it impedes them using a grid to create their designs. Typically, fluid layouts take advantage of the min-width and max-width properties of CSS, ensuring the container doesn’t become ridiculously narrow or wide. Sometimes pixel-width columns are mixed with percentage-based columns in a fluid layout, but the idea is to show the user as much horizontal content as will fit on their screen. These take more thought to plan, as you have to foresee problems that might occur at every possible width. A fluid or liquid layout is designed with percentage-based widths, so that the container stretches when you resize the browser window.

Wait until responsive resize finishes redrawing the page