Web Interactivity and Engagement

Grid Layouts

One of the things we’ve focused on thus far in Web Interactivity and Engagement this semester are grid layouts. Initially, a grid seems as if it would be in a fixed state, similar to the tables of web design past. But with the various environments that users visit any given web page in, designers can not think of grids as fixed points, or even separate fixed stages to accommodate a mobile or desktop visitor if they want visitors to enjoy time spent on their sites.

As The Infinite Grid article from A List Apart states, “we need to create a grid system that embraces the medium’s lack of fixed dimensions, resulting in a single layout with multiple states that transition seamlessly from one to another, and bring structure to our content whatever the screen size.”

While utilizing grids, one needs to think of them more fluidly than fixed to provide a better experience for our visitors, regardless of the dimensions of whatever device they are using. Keeping the various sizes in mind from the very beginning of designing and developing any web site will not only make the process easier on the design team, but also ensure that any potential sizes will be covered.

The Infinite Grid puts it excellently, comparing a grid layout to the various states of water (liquid, solid, gas with seamless transitions between them) “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.”