Fluid layouts are often compared to water, but water isn’t always fluid. H2O has three different states, and depending on the temperature can be a solid, liquid, or gas, transitioning seamlessly from one to another at specific points (0ºC, 100ºC). An infinite grid also has multiple states (single column, multi-column, etc.), and should transition as seamlessly as possible between them at specific breakpoints as well. For example, just as ice is an appropriate state for water when the temperature is low, a single-column layout may be the appropriate state for an infinite grid on smaller devices. Water’s state change is caused by the rearrangement of its molecules. When an infinite grid changes state, we rearrange its components.

Each state in a responsive layout tends to be made up of the same components, such as an image gallery or navigation menu. However, as Ethan Marcotte recently outlined, the form these components take can vary dramatically between one state and another, usually involving a change in one or more of the following attributes: Hierarchy: What’s its order and prominence in the layout? Density: How much detail do you show? Interaction: Should it be a list of links or a dropdown? A carousel or a group of images? Width: Is it fixed (a specific width), flexible (set with max-width), or fractional (set with percentages)?

Pixels size an element relative to a particular resolution Ems size an element relative to its font size; large rems size it relative to the document’s base font size Percentages size an element relative to its container VH and VW units size an element relative to the viewport

Absolute units like pixels effectively give a layout a sell-by date, locking it to a finite resolution range in which it will “work.” Proportional units (ems, rems, and percentages) enable you to define the important relationships between elements, and are a crucial first step on the road to resolution independence.

lets say my largest state is 75em wide (any larger and the white space starts to dwarf the content), and my smallest is 34em (any smaller and the measure is less than optimal). In the largest state it makes sense for my navigation to be a horizontal list (interaction) at the top (hierarchy), but in the smallest state it might make more sense to move it to the bottom of the layout (hierarchy), or collapse it into a show/hide list (interaction). Designing these independently of one another helps you be more objective about what is best for each state, rather than stretching a one-size-fits-all solution across every state.

Just like water changes to steam when its molecules get too far apart, one state should change to another when the relationships between its components begin to break down, such as when the measure is getting too wide, or the left-aligned logo is getting so far from the right-aligned menu that the visual connection between them is broken.

The number of states you require will depend on how much your layout changes from one extreme to the other. For example, my smallest state has a single column with a collapsed menu, and my largest state has three columns and an expanded menu. However neither state looks quite right between 34em and 53em, so I’ve added an “in-between” state which maintains the smallest state’s single column article, but expands the menu and divides the footer into three columns to make the most of the space available. This smooths out the transition from one extreme to another quite nicely.

With each state change, remember to reconsider the hierarchy, density, interaction, and width of each component

the goal is to make the most of the space available, relative to your content, to maximize readability and presentation.

focus around content and avoid the pitfalls that certain aspects of websites can create.

Being human in social media, then, involves identifying all aspects of that personality — even the less obvious or less corporate ones — and embracing them as a whole. From there, the surface symptoms we referenced at the beginning of the column — tone, language, aesthetics — will be easier to define.

Designing for our readers requires us to understand the information that they will find useful and relevant and then shape that content into a beautiful experience.

Internet ad revenues in the U.S. increased by 15% in 2012 to $36.6 billion, driven by significant year-over-year increases in revenue for mobile, search and digital video ads,

I propose we use cultural variables to show the appropriate content for specific groups of users in the same way that we use media queries to show content according to viewports or breakpoints.

Slow Messaging cultures are more easygoing about the speed at which messages and information travel. Fast Messaging cultures demand that information travels quickly and efficiently.

High Power Distance societies tolerate a high level of authority in their leaders, and their orders are often unquestioned. Symbols of this power are important. On the other hand, Low Power Distance societies have bosses that are much closer to their employees in power levels, and instructions can be debated or challenged.

How do we make our fellow humans comfortable with our interfaces and site? Start using cultural queries in our designs.