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() {
    $("#list").removeClass("compact");
});
$("#compactswitch").click(function() {
    $("#list").addClass("compact");
});

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">
    <li>
        <strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</strong>
        <span class="url"><a href="#">http://www.jankoatwarpspeed.com/wp-content/uploads/examples/adaptableview/example2.html</a></span>
        <span class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dignissim dolor sit amet lectus venenatis egestas.</span>
    </li>
    <li>
        ...
    </li>
</ul>

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?

Let's discuss this on twitter.

Before you leave