Create YouTube-like adaptable view using CSS and jQuery

Besides Turn off the lights feature I explained earlier, YouTube has more great stuff. I believe that you noticed “change view” feature which allows you to switch between normal and wide mode and thus expand/shrink movie area. I like this feature because in different circumstances, I need a different view. But the thing I like the most is that, although layout changes, it is done seamingly and all the information remains easily accessible.

Download source (29kb) View demo

****************************************************

Wireframes above shows what happens when you change the view. By changing to wide view sidebar goes down and content stretches fully. Creating this is very simple. The trick is in properly defined structure and a bit of jQuery.

Structure

This is the most important part of the story. In order to simulate YouTube structure we will define five sections: header, content, comments, sidebar and footer. The structure we need is quite simple:

<div id="header"></div>
<div id="main">
    <div id="content"></div>
    <div id="sidebar"></div>
    <div id="comments"></div>
</div>
<div id="footer"></div>

The key is in CSS – content and comment areas will float to the left, while sidebar will float to the right. This will allow for sidebar to go down when content streches without disturbing the layout. They will be placed inside container “main” that will clear all floats. There won’t be any special styling for header and footer.

#header, #content, #comments, #sidebar, #footer { margin:10px 0px; padding:30px;}
#header { width:900px; margin:0px auto;}
#main {width:960px; margin:0px auto; overflow:hidden;}
#content { width:540px; float:left;}
#comments { width:540px; float:left;}
#sidebar { width:280px; margin-left:20px; float:right;}
#footer { width:900px; margin:0px auto;}

Initially, content will be 600px wide (including paddings). When user changes to wide view it will stretch to 960px. To achieve this we will place a command link somewhere on the page, let’s say inside the content area. I used CSS Sprites for the command link in demo, but you can create a simple textual link as the one below.

<a id="wideView" href="#">Change View</a>

Interaction

Next we will add a simle jQuery function that will toggle CSS class named “wide”. This class will determine the look of content section in wide mode.

$(document).ready(function() {
    $("#wideView").click(function() {
        $("#content").toggleClass("wide");
    });
});

So “wide” CSS class wouldn’t contain nothing more than width property set to 900px (with paddings it will be 960px total, which is the with of out sample website).

#content.wide { width:900px;}

The only thing you need to do next is to check the demo and try clicking on “wide view” button ot go direclty to YouTube – Projcet Home page and try playing with the layout. You can even watch that fantastic movie and see what we, humans, did to our planet.

Conclusion

I really like adaptable views. In one of my previous articles, Adaptable View – how do they do it I explained two great examples of this UI pattern. YouTube example is also a great solution that could could be very useful. Additionaly, you can remember users’ choices and show wide view whenever they come to your site (or as long they have your cookie). Would you use this feature somewhere?