CSS Case Study – fixed elements

One of the “special” effect abilities of CSS is the ability to have an element be “fixed” on the page (when you scroll, the element remains stationary) either through positioning or by fixing a background.

The ability to keep items static has a profound visual effect on a designs. With frames falling out of popularity before the year 2000, people have become accustom to the idea that a standard page “scrolls.” Further, many people mentally connect a web page to a piece of paper. This is one of the reasons why design elements that give a sense of depth are so striking.

However, when items on the page don’t move it gives the page a “feeling” or “behavior” different than any graphical design element can achieve.

Fixed Elements, Position: Fixed

The most obvious and evident of fixed elements is through using the css attribute is “position:fixed.” Now supported by all modern browsers (and compatible with older browsers through the use of javascript). There are a hand full of usages methods to add another dimension to your designs.

Simulating Frames

The most common usage I see is simulating frames. The benefit over traditional frames is with CSS it is actually accessible and search engine friendly! Woohoo!

There are also several potential usability benefits to keeping some elements fixed on a page. Studies show that users tend to get disoriented the more that they scroll. This is due to breadcrumbs, navigation, page indicators and titles that are at the top are wiped from the screen quickly. By keeping the navigation bar static they are always presented with navigation options and indicators.

You could also use fixed elements to increase a branding presence, keeping the header, logo, and tag line visible on the screen at all times reminding the users where they are and burning the site into memory.

The (potential?) drawbacks however, are that dependent on the resolution, and number of fixed elements, it can really give a very constrained and constricted feeling. Almost the opposite of whitespace in some light. Because the elements never leave the screen it gives the illusion and feeling that the actual page is smaller. The frames taking on the exact meaning of the word, acting a visual frames and the page itself is the small section left that scrolls. Even if the design is such that the content wouldn’t get any wider as you scroll, the lack of negative space gives a sense of constriction.

examples

Nice Design is a beautifully designed site, with two fixed elements. The header/navigation and the side bar with the tag line/description. This is great for keeping users informed on where they are in the site, and it really promotes branding. Resizing the browser to 800×600 however – makes the site feel very close in quarters, and the “actual” page feels like it is only half the screen. At higher resolutions the long column of content reduces this feeling.

Unspace (screenshot) a very nice and clean design keeps one element fixed on the left, the navigation/logo. Again this leaves indicators for the users location on the site, and it improves branding. There is plenty of whitespace with the column to the right being wide and spanning from top to the bottom. Even with resizing the browser it doesn’t give a feeling of constriction. However the site is not designed to be viewed at resolutions below 1024×768 so that might be a factor.

NorthTemple is a very unique site, that essentially has the header on the bottom. Since it is black, and spans the whole bottom it almost feels like a letterbox – creating a very widescreen whitespace. Even though it slices the site almost in half at lower resolutions, the black footer/header is semi transparent and the site is so minimal in general it doesn’t create much of a constriction. In addition the use of a slight transparent white fade at the bottom and the “temple” logo it almost feels as if the content is rising out of the ground, into the sky. Very impressive.

Single Fixed Elements

The other common usage is to have a non-column fixed element on the page. Frames style fixed elements span the entire page, almost sectioning it off. This is to have a design element that doesn’t move, but doesn’t span the whole page.

Examples

Beware of CSS has a giant dog that looks over the text and headings of this Zen Garden submission. It gives the page a sense of depth by appearing above the text itself.

Zen City Morning, another design from the Zen Garden. The designer used a fixed element of semi transparent clouds to remain towards the top. Transparent enough to read and possibly ignore once you are ready to read through the content. It gives you a very lofty “sky” feeling, even if you browse at 800×600 cutting off the building background and leaving very few visual hints for the sky.

Background-position: fixed

Using fixed backgrounds can be a very subtle almost unnoticeable design elements, or a dramatic method of creating a visual feeling.

Examples

Screenfluent uses a fixed positioned background aligned at the bottom to give the main column of content a shadow creating a 3D effect. Unlike a fixed position element, it doesn’t cover up any content at any time. Interestingly enough even though it doesn’t cover up any content (unspace) it does still make the page seem smaller. Instead of feeling like you are scanning a page by starting at the top and scanning to the bottom it feels as if the page is being dragged across your peripheral vision.

Larissa Meek’s site uses a fixed background to create an illusion of floating. Because the ornate background stays stationary and the “tablet” looking content scrolls, it feels as if it is floating above the background itself. Such a very subtle difference that gives a whole new feel to the site.

Cameron Moll uses a fixed background, but you can barely tell due to it’s light contrast and elements on the page that do scroll. Even though you are not directly noticing it, it does prevent any distraction cause by scrolling repeat ornate elements. Sometimes the refresh right of monitors is not fast enough to keep up and cause background patterns to chop, becoming a distraction.