Course notes 6
syllabus | schedule | exercises | assignments | class notes | resources | students | ARTC courses

Reaching Towards Responsive Design - Fluid Layouts

In order to appeal to a mobile experience, we must meet the needs of multiple, diverse screen sizes. The most direct solution to the issue would be to simply build separate sites for each target size. We could then detect the user agents, and redirect the viewer to the correct site. Ignoring the performance issues, this would quickly become a daunting task. First comes an iPhone site, then a Nokia site, a Droid site, a few sites for legacy browsers; it would never end.

Instead, we should create a flexible, fluid, design which can adapt to the different screen sizes as they change.

A fluid layout works by approaching the size and positioning of a web page's content in reference to the total area available.

To achieve this type of relationship, we need a relative form of measure, like percentages.

If instead of pixels, we base our content on the percentage of its container, the entire layout will begin to respond to the changes in size.
Examine the following:

	<style>
    .block {
        margin-left:3%;
        width:30%;
        background-color:red;
        text-align:center;
        float:left
    }
	</style>
    
   

	<div class='block'>.block</div>
	<div class='block'>.block</div>
	<div class='block'>.block</div>
    
    
.block
.block
.block


The example above sets each of the three box's widths to 30% of their parent element, in this case the page itself, and as the total width of the page changes, so does the respective width of each of the boxes. The page and the content scale, but the layout remains intact.

The basics of this approach can be applied to almost all aspects of a typical page, even images.

	<style>
	.container {
		width:80%;
		margin:0 auto;
		border:1px dotted red;
		padding:5px;
	}
	.container img {
		width:50%;
	}
	</style>
    
   

	<div class='container'>
		<img/>
	</div>
    
    


Although, as is apparent, this quickly leads to distorted images. To alleviate this, we instead use another CSS declaration, max-width.

This allows us to set the maximum dimensions to which the image can expand within the parent object. If the image doesnt have the dimensions to expand to the max-width, it will simply stop when it reaches its natural size.

Continuing the fluid approach, we can apply a percentage value to max-width and it will effect the display width relative to the parent's size. To this, we can set max-width:50% and the image will never scale beyond its natural size, nor beyond half the width of its container. Max-width is not limited to images, but can be used to create flexible dimensions on any element that you would assign a width. Here is the same example with max-width:50% instead of width:50% added to the img :

	<style>
	.container2 {
		width:80%;
		margin:0 auto;
		border:1px dotted red;
		padding:5px;
	}
	.container2 img {
		max-width:50%
	}
	</style>
    
   

	<div class='container'>
		<img/>
	</div>
    
    



Utilizing fluid layouts is a great first step in a design which gracefully transitions between devices and screens. However, relying solely on relative sizes is often not possible, or produces less than desirable results. In addition to a flexible layout, we need to be able to delegate positioning and size specifications directly to certain screen sizes. We need to incorporate Media Queries.