Adaptable view – how do they do it?

July 7, 2009

Adaptable view is a user interface design pattern which you can use to allow users to manually change visual appearance of content in order to fit their needs. This is usually done by switching styles (in web sites and applications). This way you provide your users with more control over the appearance of content which improves user experience.

Adaptable view can be used to enable users to increase/decrease font size, change background color, darken background for higher contrast, switch between different site versions or to change the layout of the site or any part of it. To learn more about this pattern check out Adaptable View design pattern on UI Patterns. You will find a strange implementation of this pattern where complete header is being hidden – including the logo.

In this tutorial, I will focus on explaining how to manually change the layout and show you two great examples and “how did they do it”.

Example on Smashing Magazine

While browsing one of the categories on Smashing Magazine site users can choose between two views: single-column and two-column view. The image below shows how single-column view looks like. It’s a simple unordered list where each list item is shown in a single row. Each list item contains a thumbnail image, title and other details.

In order to achieve this we need to make styles for unordered list. First, we will define styles for single view.

#list { width:500px; margin:0px; padding:0px;}
#list li { list-style:none; display:block; width:480px; background-color:#D7D3E0; padding:5px; margin:5px;}

Image below shows how that would look like (500px in our case is 100%)


When users switch to two-column view, we need to change only a few things. Each list item floats to the left and gets to 50% of the width. To create this, we will define another CSS class:

#list.compact li { float:left; width:230px;}

And the list should look like the one shown in the image below.

Now we need to add some simple functionality. We will create two jQuery functions that will add/remove “compact” class and make switching possible.

$("#fullswitch").click(function() {
$("#compactswitch").click(function() {

View demo

Example on Delicious

Delicious has another interesting implementation of Adaptable View. Users are able to choose how many details they want in lists. If you take a look at my bookmarks you will notice three icons in the top left corner of the list. Each one of those icons shows a different view: single, compact or full. The structure is similar to the previous example:

<ul id="list">
        <strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</strong>
        <span class="url"><a href="#"></a></span>
        <span class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dignissim dolor sit amet lectus venenatis egestas.</span>

Each list item consists of text and two spans – one containing sample URL and one containing sample description. In single mode view only text is visible. In compact view, text and URL are visible and in full view all spans are visible. The image below shows how this should look like.

Adding functionality is as simple as in the previous example. We will have three switch links, and each one of them will show/hide necessary spans.

$("#singleswitch").click(function() {
    $("#list li .url").hide();
    $("#list li .desc").hide();
$("#compactswitch").click(function() {
    $("#list li .url").show();
    $("#list li .desc").hide();
$("#fullswitch").click(function() {
    $("#list li .url").show();
    $("#list li .desc").show();

View demo

Adaptable view can be very useful if used properly. I especially like clever solutions when users are able to change layout like in the examples shown in this tutorial. Do you know some other interesting implementations?

I discuss these topics on twitter too. If you feel nostalgic, my RSS feed is still working.


  • Max Stanworth (July 7, 2009)

    Love it!, i can think of a few places that this could enhance a design / users experience.

    For the first example to display properly in IE 6 i think you need a display:inline; other wise it will be a block element.

    #list.compact li { float:left; width:230px; display:inline;}

  • Xavier (July 7, 2009)

    It’s a comprehensible and useful tutorial! Thanks Janko!

  • matt (July 7, 2009)

    Nice tut Janko! You should combine the 2 demos, so you can show only the title and change the layout.

  • Dave (July 7, 2009)

    nice tutorial.

  • Elad Ossadon (July 7, 2009)


    A little enhancement for the second example: instead of using JS in order to find and hide/show child elements, you could change the class of the container, and write a CSS rule for handling the child elements of a certain view.

    For example:

    css –

    .compact li .url { display:none; }
    .full li .url { display:block; }

    Then just switch the class of the container:

    <ul id="container" class="compact">
    <li>… <span class="url">…</span></li>
    <li>… <span class="url">…</span></li>

    From ‘compact’ to ‘full’, and the urls will be shown.

  • Davide Espertini (July 7, 2009)

    UHU!! Really like smashing magazine!! Cool! Well done Janko! :D

  • Janko (July 8, 2009)

    Max: Thanks for the comment and IE6 tip!!

    Xavier, Matt, Dave, Davide: Thanks!

    Elad: Thanks for the suggestion, I like it because you can easily extend css classes if there is a need for that and leave a single line of code for switching.

  • Adam (July 8, 2009)

    Very nice and useful tutorial :)

  • Raymond Selda (July 9, 2009)

    This is a very nice and unique tutorial! Thanks for sharing.

  • Sagar Ranpise (August 4, 2009)

    Awesome work !!! Really great tutorial for someone like me who is beginner in jQuery,
    Thanks and Keep Rocking!!!

  • Tom Boyce (August 4, 2009)

    I’m just wondering if this would work the same with attached style sheets? Without any modifications. Brilliant article been wanting to do this for a while.

  • Kaelig (August 4, 2009)

    I think that this post is a good example of the wrong way to implement a view switcher with jQuery.

    Simply toggleClass(‘compact’) on #container and then with CSS, set the li’s styles (what is visible and what is hidden) according to the ul’s class.

    Btw, you don’t actually need a .full class, since this is the default state.

    With some more training, your jQuery knowledge will improve and you’ll be able to do things waaaaay simplier ;)

  • Janko (August 4, 2009)

    Tom: Yes, it will work. I always keep styles with HTML in demos, it’s easier to see the entire code.

    Kaelig: I guess your comment is related to other comments on this tut. Thanks for wise words :)

  • Bradford Sherrill (August 4, 2009)

    Great post, enhancing the user’s experience

  • Kaelig (August 4, 2009)

    Yes sorry about not explaining the #container thingy, you should wrap #commands and #list in it.

  • Benga (August 28, 2009)

    Speaking from a user’s perspective, this give the users more than one options to view the site in, and thus makes their experience a little bit more memorably. I will be using this idea in my next project.

    Keep up the good work. Benga creative

  • Steven T (September 11, 2009)

    nice tutorial~ thanks~

  • Alexander (November 13, 2009)

    Example with a »cookie« function would be nice ;)

  • Dedew (January 21, 2010)

    It’s a comprehensible and useful tutorial! Keep up the good work.

  • Scott Petrovic (February 18, 2010)

    Nice. I love it. CSS and jQuery can do so much together.

  • wptidbits (February 19, 2010)

    Does this function works with wordpress? Because i am currently using themeswitcher to change my display type. It seems like this feature might be usable to replace my current method. Can you rectify this? Thanks!

  • Ayda (February 22, 2010)

    everytime the user clicks on the icons (the second example) the page auto-scrolls all the way to top. if this code is in the middle or towards the bottom of the window, then it becomes quite annoying for the user. any thoughts around how to address that?

  • Ayda (February 22, 2010)

    @Ayda: OK, I resolved my own issue :)

    make sure that the icon links are not href="#"…. "#" directly takes you to the top, make sure to use a tag that is not utilized on the page, such as href="#none"