The modern web environment comes with many screen sizes and resolutions that have made fixed width designs a bit cumbersome to deal with. Building sites that stick to the 960 rule are out of place due to the mobile internet boom. Websites now need to close the deal on many devices instead of a specific target resolution.

One answer to the issue is to build flexible layouts that change with the screen size of the device. It seems like a lot more work, but there isn’t that much difference in reality.

body{
	font: 100%/1.4 Verdana, Arial;
	background: #42413C;
	margin: 0;
	padding: 0;
	color: black;
}

#wrapper {
	width: 960px ;
	background-color: #f8f8f8;
	margin: auto;
}
 
#main_content {
      width: 70.8333333% ;
}

#header{
	width: 680px;
	height: 100px;
	background-color: #ddfffc;
	margin: 8px;
	padding: 8px;
}
 
#side_bar {
	float: right;
	width: 220px;
	background-color: #adffce;
	min-height: 400px;
	margin: 8px;
	padding: 8px;
}

#main_content{
	width: 680px;
	min-height: 450px;
	background-color: #ddd;
	margin: 8px;
	padding: 8px;
}

The first thing that must be done is to exchange text sizes from pixels to ems. The shift to ems is to move away from looking at elements according to their size. Now the idea is to view the size of an element in relation to its container. This means that every element that is sized in pixels must be converted to ems.

SmartGrid1

Font size is expressed as a percentage (100%), which normally means that the default text size is 16 pixels. Since browsers cannot resize text that is sized in pixels, they have to be converted to ems. The formula is fairly simple in that 1em = 16px. This means that if there is a heading on the page that needs to be resized to 24px, all that is required is to divide 24 by 16. The new header size becomes 1.5em and now changes with the global font-size. This will tie in with another topic below.

Next in line to modify are any and all containers on the page. This includes the header, sidebar, main content box, navigation, etc. This is done by changing container widths to percentages. This example has an outside wrapper with a width of 960px that can be easily converted by changing it to a percentage width such as 80%. That modification will make the page flexible and maintain some margin on the sides of the page.

Now it is time to tackle the columns or grid of the site and make them flexible while maintaining proportion with the original width of 960px. If the main content is 670px wide, it can easily be calculated by dividing 680 by 960 and that equals .708333333 (70.8333333%). Doing the same for the sidebar yields a width of .229166666 (22.9166666%). Enter the full numbers for the width and let the browser do the rounding.

#wrapper {
    width: 80% ;
}

#main_content {
    width: 70.8333333% ;
}

#side_bar {
    width: 22.9166666% ;
}
SmartGrid3

Now the layout resizes itself according to the screen size. Seeing the effect is easy and can be viewed by dragging a browser window to various sizes and watching the results.

What becomes noticeable is how images, video, and objects do not behave very well at this point. Fixing this can be accomplished in a number of different ways, but using nothing but CSS seems ideal as well as a simple solution.

A fast fix is to assign different classes to images as desired for the template so that they do not exceed their boundaries. An image in the header could be in a class with a width of 100% so that it always spans the entire container of the template. In contrast, a feature image may only need to span 25%, have a border, and be repeatable throughout the design.

Now things start working fairly well at various screen sizes, but there are still some issues to take into consideration. The text eventually gets really big as the window size decreases, and there is an issue with wide screens that allow images to become too large. Also, some elements such as navigation may need attention at certain screen sizes. This is where CSS3 comes in handy by providing a nice solution with media queries.

Media queries allow developers to check the device and provide alternate CSS styles according to the specific screen size. For example, let’s say that the page text becomes too large as the width gets down to around 640px and begins to lose visual appeal. All that is needed is to add a media query and change the font-size at the desired width. Here is the code sample to do just that:

@media screen and (max-width: 640px) {
	body {
		font-size: 70%;
	}
}

Now at 640px and under the font-size will reduce to 70%. Additionally, anything else that can be accomplished with CSS can be included at this resolution as well. This allows for some serious modifications to flexible layouts. The options with this are amazing.

Websites can now be more dynamic than ever by offering optimized views for a multitude of screen sizes simply by using CSS transformations. The days of clients with old monitors asking why there is a scroll bar across the bottom of the page may well be over.



author's photo

Author : Keith

Keith studied web design at FHSU in Hays, KS as well as electronic engineering in Hutchinson, KS. After working for many years as a maintenance electrician, he has decided to take those troubleshooting skills to the internet. Website : Online Digital Junkie

COMMENTS
blog comments powered by Disqus
Contributors