Transforming a Fixed Width Grid to a Flexible Grid

Responsive web design is continuing to grow as a web designer’s first choice when tackling mobile design. The first step to understanding responsive web design is by looking into the flexible grid and how it works. The problem with most traditional websites is that they were designed using pixels. While this was fine before the emergence of the mobile web, mobile users are now tasked with tedious zooming and scrolling when visiting sites designed this way and intended for large screen devices. Luckily, transforming your website’s layout to a responsive and flexible grid isn’t as hard as you think.

The key to taking your website from unresponsive to responsive is by first getting rid of those pesky pixels in your div elements and replacing them with percents. The key to converting from pixels to percents is by calculating what percent of the parent element your current element is. In order to this you must divide the number of pixels of your target element by the number of pixels of its’ parent element. Multiply this number by 100 and you have a nice and responsive percent. Who would have thought web design would ever involve any math?

Keep in mind that your first div will become a percent of the screen size. Now that you have the basic concept down, go get rid of all your nasty pixels on the page and replace them with your responsive percents. Once all of your grid elements have been converted you will have a basic responsive grid that will respond to varying screen sizes and give mobile users a much better user experience.

While designing a responsive grid is only the first step in becoming responsive it is one of the most important. Much of what you learned in converting from pixels to percents can be applied to the other steps in becoming responsive. So what are you waiting for? Go get started on transforming your fixed-width grid to a responsive one.

About The Author:
Matt Lenhard is a web designer for Shine Mobile. Besides making websites more mobile friendly he enjoys watching football and is a huge Philadelphia sports fan. When he’s not watching football you can find him playing basketball with friends.

Leave a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>