Responsive Web Design: Fluid Grids

3d illustration: Mobile technology. mobile phoneTraditionally, websites have been built for one type of screen: the desktop or laptop screen. Today, though, we visit sites via a number of different devices, from a 15 inch desktop to a 3 or 4 inch smartphone. That’s a whole lot less real estate than developers have previously been able to fill. Rather than designing and building separate websites for each screen size possible, which would be a herculean task, or designing apps for the various app stores, many webmasters are opting for responsive web design. What is it, and how does it work?

Responsive web design ensures that your site responds to the screen environment. The design uses media queries, or modules that allow the site to figure out how to respond optimally to screen size and resolution of a particular device. Content is then formatted to fit. Ethan Marcotte, author of Responsive Web Design, says, “Responsive web design offers us a way forward, finally allowing us to ‘design for the ebb and flow of things.” With thousands of device options, having a site that fluidly responds to user needs is critical.

Responsive design begins with a fluid grid. Rather than having a fixed grid, developers define a maximum layout size and divide the grid into columns. This ensures the layout is clear and, well, responsive. Each element is designed with proportional heights and widths. With fixed design or adaptive design, it was based on pixels, which did not change when the screen changed. With responsive design, elements actually adjust their heights and widths.  This means content is viewable, regardless of the screen.

Creating fluid grids is time- and labor-intensive. A forgivable “cheat” is using an existing framework or generator tool on which you will build your layout. This will cut down on the work and give you a great platform. Another benefit is that, if you are new to this, you can use a generator, learn the basics, and then try your hand at building the next one from the ground up.

Some terrific fluid grid tools include:

Remember, creating the fluid grid is an essential part of creating a responsive website – but it is not the only component. Next time, we’ll talk about media queries to ensure users can view and interact with content on smaller screens.

Leave a Comment