Design Focus

Friday Focus 04/13/12: Video Backgrounds

We’ve featured moving backgrounds using native HTML/CSS/JS animation before, but using video in backgrounds is quite the challenge given how it eats up more resources. Let’s see how effective these websites use this feature in this week’s Friday Focus.

Designs of the Week

Get solid WordPress themes, plugins, and web design training from iThemes.

Kolonien website


Like the two other sites, the video background appears only in the homepage. The overall look here is warm, earthy, handcrafted—mixing two “scratchy” typefaces and a vintage color palette. Everything looks customized, even the music page uses play/pause control buttons that blend in.

Weathery for iPhone website

Weathery for iPhone

The video background runs a shorter loop than the other too, so that’s something to consider when using such a thing, although I’m afraid the quality suffers a bit. This one page site doesn’t need much else to its design, either, because it’s the design of its product, an iPhone app, that will grab your attention.

Voice website


There’s a purplish/pinkish hue to the video on the homepage that regrettably disappears in the other pages, where brown dominates. I do like the page transitions and other animations though, all carried out in a slanted fashion. There’s also a neat slideshow technique in the Virksomhet page.

Social Media Weekly

Make Headway, make intuitive layouts, make it your WordPress theme of choice!

Mobile Web DesignNielsen is wrong on mobile | Designers respond to Nielsen on mobile | Nielsen responds to mobile criticism

Responsive Web DesignResponsive web design: a project-management perspective
“This is where many people stop. After all, many of the challenges with responsive design are fairly similar, regardless of project size and budget. There are, however, additional challenges to consider on large projects, which are too rarely addressed: this article will aim to address those.”

FormsThe Current State of HTML5 Forms
“HTML5 has many new features intended to make creating websites easier and people’s experience in using those websites better. Among those features are many enhancements to web forms.”

  1. By css gallery posted on April 16, 2012 at 7:46 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Excellent collection, i digg it

  2. By Alex R. posted on May 4, 2012 at 5:53 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Great read! I currently use iThemes and have bought some great design themes from there. I went to that Kolonien site you put up, thinking I’d see a moving background video but didn’t?

  3. By Sophia Lucero posted on May 11, 2012 at 7:36 am
    Want an avatar? Get a gravatar! • You can link to this comment

    @Alex: It might be a browser incompatibility, or it hasn’t finished loading yet. I just visited it again and it loaded for me.

  4. Trackback