Share via

Script Junkie: Fluid Grids for Flexible Web Sites

  • Article

MSDN Magazine recently welcomed to its Web site the popular Script Junkie tutorial site, which offers useful tutorials for Web developers working with HTML, CSS and JavaScript. Veteran Script Junkie author Emily Lewis just published to the site her latest feature, titled Flexibility: A Foundation for Responsive Design, which explores how to develop a site so that it can adapt and respond to different devices and resolutions.

This is an issue gaining urgency, as more and more Web sites are accessed from mobile handsets and tablets, as well as from traditional desktop and laptop PCs. Lewis’ solution? Eschew a fixed-width design for a layout based on proportional values that allow the presentation to scale gracefully to the target device. A fluid grid.

There is a little math involved, as Emily warns, but the payoff is a fluid grid that provides impressive flexibility to your Web sites.  As she writes, the layouts “resize with the browser window because width, margin and padding elements (even fonts and images) are specified with proportional values like percentages and ems. As the resolution changes, the layout adjusts proportionally. And all without a single media query.”

Sounds good to me. Check out the entire article here.

Comments

  • Anonymous
    April 02, 2012
    Good one.

  • Anonymous
    April 02, 2012
    I was wondering when would MSDN incorporate Javascript, CSS and other client side technologies that move the "Web World" already for a good bit of time.. Excellent move, i'm looking forward for more articles! C:Marius