Bootstrap - Responsive layout vs Fluid layout

Question

I would like to build single web page with the same layout as: http://instatrip.it
Using bootstrap.
In the bootstrap tutorial page http://twitter.github.io/bootstrap/scaffolding.html#layouts
There is a demo of Responsive layout and Fluid layout.
What is the differences between the two approaches?
To get the same layout as instatrip, what layout should I use?
Thank you!

Frydman

Answer 1

Fluid layout adapts itself to different browser window sizes : all the values used are calculated proportionally to the viewport size, so when resizing, all the columns are resized, but the general layout stays the same.

Responsive layout is able to adapt itself to different sizes as well, but when resizing, the number of columns changes according to the available space. You could think of, for example, you website being resized to one column only on a smartphone.

To get the same layout as instatrip, you'll need to combine fixed layout with fluid layout at least. But there are many ways to do it, I think you should try to understand what is exactly the purpose of each type of layout, and figure out a specific solution for your needs. Here is some reading :

http://radiatingstar.com/make-a-layout-with-fluid-and-fixed-size-columns http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

EDIT : Here is a simple example of a fixed + fluid layout. Found here. I post the code below in case the link goes dead.

HTML :

<div id="page"> 
    <header id="sidebar"> 
        //SIDEBAR CONTENT HERE
    </header> 

    <article id="contentWrapper"> 
        <section id="content"> 
            //CONTENT HERE
        </section> 
    </article> 
</div>

CSS :

html {
    overflow: hidden;
}

#sidebar { 
    background: #eee;
    float: left;
    left: 300px;
    margin-left: -300px;
    position: relative;
    width: 300px;
    overflow-y: auto;
}

#contentWrapper { 
    float: left;
    width: 100%;
}

#content {
    background: #ccc;
    margin-left: 300px;
    overflow-y: auto;
}

Javascript :

$(document).ready(function() {

    //GET BROWSER WINDOW HEIGHT
    var currHeight = $(window).height();
    //SET HEIGHT OF SIDEBAR AND CONTENT ELEMENTS
    $('#sidebar, #content').css('height', currHeight);

    //ON RESIZE OF WINDOW
    $(window).resize(function() {

        //GET NEW HEIGHT
        var currHeight = $(window).height();    
        //RESIZE BOTH ELEMENTS TO NEW HEIGHT
        $('#sidebar, #content').css('height', currHeight);

    });

});

Zippel

Oh and by the way, smashingmagazine is an excellent implementation of a fixed, responsive and elastic layout. Try resizing your browser window on their website :) – Zippel

Yeah sure, you can find many examples with a quick google search. I posted one in the edit. – Zippel

Answer 2

Fluid Layout is grid built with percentage, nothing is taken as fix grid the layout is fluid.

Responsive layout is the combination of Fluid layout + Media Queries where media specific css are defined for certain browser resolutions.

So if you are gonna use fluid layout, u might as well as use Responsive layout to have a better control over your layout.

Chevet