Responsive website design is continuing to grow as a web designer’s secret weapon when designing for mobile devices. If you are still stuck with an outdated fixed width layout then now is the time to finally get your website up to date. When mobile viewers are presented with an unresponsive website they have to constantly scroll and zoom in order to find what they came for. Responsive website design simplifies this by adapting to various screen sizes to give your user a pleasant mobile web experience. Today we’ll talk about the flexible grid and how you can build a basic responsive website.
The first step is designing your flexible grid that will adapt to different screen sizes. In order to do this you must change all of your tags width from pixels to percents. So how exactly do you figure out what percent to use for your div element? The process is actually a lot easier than you would think, you simply have to divide the number of pixels in the div you want to make flexible by it’s parent. For example look at the image below. If you have a 500px wide blog and inside of this blog you have a 400px wide post area you would simply divide 400/500 to get .8 and then multiply by 100 to get 80%. Now that you know how to resize your div tags go through and change all of your pixels to percents.
Your next step in building your responsive website is to change your text to something flexible. Just like with your elements the goal is to get rid of pixels, but instead of replacing with percents you are going to use em. So for example if you have a 32px header and you would like to change it from px to em you simply divide the 32px/ base font size for body elements (usually 16px ). This same process works for all text, so your next step is to go get rid of those awful pixels and add in your new ems.
So know that you know how to fix your text and div elements what is next. Well assuming you don’t want everything squished together, you are going to want to add some padding and margins as well. Just like with divs you use the same formula to determine the percent. There is one small difference between margins and padding when going responsive and that is when setting flexible margins your denominator corresponds to the elements container while when setting flexible padding the denominator is the width of the element itself. With this in mind go through and fix all of your padding and margins.
Once you have changed all of your basic layout elements into a responsive measuring unit you will have a basic responsive website. There’s still a lot of work to be done (like images ) and we haven’t even begun to breach the possibilities of responsive web design (like media queries) . Next time we’ll talk about how to implement flexible images into your responsive website.