RWD (Part 1): How to Create a Flexible Layout
How to Create a Flexible Layout
To demonstrate a flexible layout and how it’s built, we’ll take an existing web page and make it flexible.
In the tutorial below, we’ll take a HTML5 Two Column Layout and turn the web page into a flexible layout. This is the first step to making a layout responsive.
Demo page: http://www.everythingaboutweb.com/classes/examples/html5-two-column-style-flexible/
But first,
What does it take to create a responsive design?
Three core ingredients:
1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries
Flexible images
img { max-width: 100%; }
The max-width: 100%
the max-width: 100% rule can also apply to most fixed-width elements, like video and other rich media
img, embed, object, video { max-width: 100%; }
Media queries
And, the last step is adding media queries. We’ll cover this in Part 2.
Make it Flexible
1. Change all font sizes to ems
target ÷ context = result
By default, 16px = 1em
For example: 24px ÷ 16px = 1.5em
2. Change the width of all divs to percentages
960px = 90%
target ÷ context = result
#wrapper { width: 90%; background-color: #FFF; margin-left:auto; margin-right:auto; } nav { width:100%; }
Content div
For example: 580 ÷ 960 = result
#content { width: 60.416666%; /* 580 / 960 */ }
#rightcol { width: 27.083333%; /* 260 / 960 */ }
3. Add flexible margins and padding to all divs
target ÷ context = result
When setting flexible margins and padding on an element, your context is the width of the element’s container.
#content { width: 60.416666%; /* 580 / 960 */ float: left; padding-left: 4.166666666667%; /* 40 / 960 */ padding-right: 4.166666666667%; /* 40 / 960 */ padding-bottom: 20px; } #content h1{ font-size: 1.5em; /* 24px; */ padding-top: 25px; } #content h2 { font-size: 1.125em; /* 18px; */ padding-top: 25px; font-weight: 200; } #content p{ font-size: .75em; /* 12px; */ padding-top:15px; line-height:16px; } #rightcol { width: 27.083333%; /* 260 / 960 */ float: left; padding-left: 4.166666666667%; /* 40 / 960 */ } #rightcol h2 { font-size: 1.125em; /* 18px; */ padding-top: 25px; font-weight: 400; } #rightcol h3 { font-size: 1em; /* 16px; */ padding-top: 25px; font-weight: 200; } #rightcol p { font-size: .75em; /* 12px; */ } footer { clear:both; } footer p { font-size: .6875em; /* 11px; */ color:#333; padding-left: 4.166666666667%; /* 40 / 960 */ } footer a { color:#333; text-decoration:none; } nav ul li a { font-size: 1em; padding: 10px 1.666666666667%; /* 16 / 960 */ background-color: #209a9b; color: #FFF; text-decoration: none; float: left; border-right: 1px solid #fff; }