Recently, Aaron Tolley and I launched a little project called Design + Hype which showcases only the best creative design from across the web. Side projects are the best place to experiment, push the boundaries and most importantly, to try new techniques which are not quite ready for client projects. Design + Hype was a perfect project to use the new semantic elements which were added in HTML5, experiment a little with media queries and CSS animations.

Fixed Sidebars — A Responsive Enhancement

The design called for a fixed sidebar, something that I’m not a fan of because of potential issues with small browser sizes. However, after reading Trent Walton’s article Vertical Media Queries & Wide Sites, I found a solution to the issue.

By default the sidebar is full height but moves when the browser is scrolled. Now, by adding a simple vertical media query, when the browser window is higher than a certain value — the height of the content within the sidebar — then the position value is changed to fixed and the sidebar stays in place when the browser is scrolled. The code is surprisingly simple, see the basic example below:

aside {
    float: left;
}

@media screen and (min-height:675px) {
    aside {
        position: fixed; top: 0; left: 0;
    }
}

An Animated Shrinking Header

When the browser is scrolled passed a certain point, the header and navigation is reduced in height which gives more room for the primary content. This behaviour is achieved by a combination of JavaScript events, DOM manipulation and CSS, with a sprinkling of CSS3 animation. The basic premise uses the JavaScript scroll event and if the scrollTop distance is greater than a defined value, then it adds a class to the body, if it is less than the defined value, this class is removed. You can then leverage this class in your CSS to make any amends you like. On the Design + Hype website the header and navigation change height, and if CSS3 animations are supported, then the change is animated.

I implemented the JavaScript using jQuery (1.7). The example below toggles the class scrolled when the distance 100px is passed. (Note, the distance is hard coded in the JavaScript, but could be queried using a HTML5 data attribute, eg. data-distance="100")

var $document   = $(document),
    $window     = $(window),
    distance    = 100,
    className   = 'scrolled';

$document.on('scroll', function (event) {
    if (parseInt($window.scrollTop(), 10) > distance) {
        $body.addClass(className);
    } else {
        $body.removeClass(className);
    }
}

The CSS below shows the change in height of the header when the class of scrolled is appended to the body. The default state contains the CSS3 transition declaration for multiple vendors (Mozilla, Webkit, Opera and Microsoft) as well as the non-prefixed version for future compatibility.

header {
    height: 100px;

    // vendor-specific and general transition CSS
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
body.scrolled header {
    height: 50px;
}

You can see the effect on Design + Hype when you scroll down.

Both of these techniques are great examples of progressive enhancement, by using modern techniques to improve user experience. I hope these two examples are useful and can inspire other techniques.