Impatient? Here’s the demo.

Step 1: Put stuff in the Head

Per the requirements of Video.js, this stuff must be in the head so that it will continue to function on older IEs. You can self-host the files or use their CDN.

<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>

Step 2: Add Some CSS

This step isn’t actually necessary, just helpful if Video.js doesn’t fire.

video {
    max-width: 100%;
    height: auto;
}

Step 3: Remove height and width

You only need to make a minor edit to the video tag² from the Video.js example, simply delete the height and width attributes attribute.

<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}">
  <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
  <track kind="captions" src="captions.vtt" srclang="en" label="English" />
</video>

Notice the explicit ID, you’re gonna need that later. You’ll have to modify the following if you have multiple videos on one page.

Step 4: A little window.resize() magic

Just before your </body> tag add:

<script type="text/javascript">
    // Once the video is ready
    _V_("example_video_1").ready(function(){  

        var myPlayer = this;  // Store the video object
        var aspectRatio = 9/16; // Make up an aspect ratio

        function resizeVideoJS(){
              // Get the parent element's actual width
              var width = document.getElementById(myPlayer.id).parentElement.offsetWidth;
              myPlayer.width(width).height( width * aspectRatio ); // Set width to fill parent element, Set height
        }

        resizeVideoJS(); // Initialize resizeVideoJS()
        window.onresize = resizeVideoJS; // Call resizeVideoJS() on window.resize();
    });
</script>

View the demo

The code should read fine, but you’re probably asking yourself “Why not use the Video.js API’s built-in myPlayer.width()?” Well, smarty, turns out that myPlayer.width() will return 100 (pixels) becuase our width is set to 100%. So we simply ask the DOM for our video’s current rendered width.

If window.resize() isn’t your thing or you have performance concerns, I found an intrinsic ratio version of Video.js, which is the same principle as FitVids, after the javascript fires it’s CSS all the way down. I tend to steer clear of core-hack forks and it had a jQuery dependency, so it’s not for me on this project, but it’s an awesome solution.

Anyhow, I hope that help you. Good luck, citizens!

How to use Uncle Dave’s Ol’ Padded Box

Inspired by Elliot Jay Stocks’ article “Better Background Images for RWD” and comments therein, I combined 2 of my favorite concepts for great success: background-size: cover and Thierry Koblentz’ Intrinsic Ratios.

<!-- http://yaccessibilityblog.com/library/aria-fix-non-standard-images.html -->
<div id="meowmeow" role="img" aria-label="Kitty Cats"></div>

<style>
  #meowmeow {
        background: url(http://placekitten.com/720/405/) no-repeat center center;
        background-size: cover;
        height: 0;
        padding-bottom: 56.25%; /* 16:9 */
    }
</style>

In its simplest form, it’s an empty DIV¹ with a standard background-image, except that it has a height of zero and a padding-bottom of 56.25%. Similar to how FitVids.js works, percentage-based padding is based on the width of the viewport, so it creates a block that maintains its aspect ratio. Then, because it’s a normal DIV, you have the option of dropping in a layer of text or whatever you want into it.

Flexible Implementation

Responsive Images are a bit of a deal, but becuase Uncle Dave’s Ol’ Padded Box is just CSS… you can sorta make this thing do whatever you want. I’d stay away from targeting specific devices, but for example:

<style>
    /* What if someone visits using an iPad? */
    @media screen and (min-width: 768px) {
        #meowmeow {
            background-image: url(cat-using-iPad.gif);
        }
    }
    /* ZOMG! WUT ABOUT RETINAZ D00D!?? */
    @media screen and (min-width: 768px) and (min-device-pixel-ratio: 1.5) {
        #meowmeow {
            background-image: url(cat-using-iPad.gif@2x.gif);
        }
    }
</style>

Advanced Usage: Change the Aspect Ratio

Now! Witness the raw power of Uncle Dave’s Padded Box Technique! If things get weird or you need to pay attention to hierarchy, you can change the aspect-ratio/auto-cropping of the image with just a little CSS:

<style>
    /* The place where every responsive design gets a little weird */
    @media screen and (min-width: 480px) and (max-width: 700px) {
        #meowmeow {
            padding-bottom: 75%; /* 4:3, Dribbble-style */
        }
    }
</style>

Isn’t that handy? You gain a bit more flexibility when using a background-image rather than an IMG tag. I realize an empty DIV isn’t ideal for every situation, but I’ve got a few more advanced usage techniques I’ll show in later posts that might convince ya.

Limitations

The obvious limitation is the dependency on background-size: cover. Great news is background-size is supported in all modern browsers and matches media query support exactly. The only place you might experience problems is using a media query polyfill for older browsers.

Image Height == Image Importance

Our design employed a ~3:1 hero image with three ~4:3 thumbs below it. At full width it posessed the proper hierarchy: Biggest == Most Important. However, when resized and folded into a single column, the 3:1 image appears to be about ½ the height of the 4:3 images below it.

Narrow your browser width to see the visual hierarchy breakdown:

View “BEFORE” on JSBin

Pretty unacceptable to lose hierarchy on such a major feature of the site – especially when e-commerce and products are involved. We had to come up with a solution.

Uncle Dave’s Squeeze n’ Crop Method

We wanted stop the image from scaling once it reached a certain height. Here’s what we did:

<div class="banner-item">
<!-- Using a 2:1 image because the cat picture is better :) -->
    <img src="http://placekitten.com/1200/600" />
</div>

First wrap the image in a DIV, this will act as an image-mask of sorts. Then apply some min-height + max-heightheight + overflow: hidden magic to lock the image and hide the overflow:

.banner-item {
  overflow: hidden;
  min-height: 300px; /* 300px is arbitrary. */
}
.banner-item img {
  width: 100%;
}

/* 600px is about the width "locked in" at */
@media screen and (max-width: 700px) {
  .banner-item img {
    width: auto;
    max-width: none;
    height: 300px;
  }
}

The image hugs the left of the wrapper. Auto-cropping is never perfect, but if you want to adjust the focal point of the image, you can do that with position:relative:

/* OPTIONAL: Use to shift left as necessary */
@media screen and (max-width: 480px) {
  .banner-item img {
   position: relative;
   left: -40%
  }
}

Results

View “AFTER” on JSBin

There’s a lot of playing around with what “feels good”. Adjust the breakpoint of your media query to where it feels like your image locks-in to the desired height. There might be some “Math” [/quotehands] based off of a conch shell that can help you with this, but I just go with my gut.

Good luck and let us know if you use this technique and/or can make it better.

I’d pay well for a video service that made embedding fluid/responsive videos the right way easy. It’s way more difficult that you’d think.

August 31, 2011 12:35 pm via Twitter for MacReplyRetweetFavorite

@TrentWalton

Trent Walton

Trent is right. It’s deceptively difficult to make videos fluid and responsive. I almost lost all my hair getting it to work on Do Lectures. On one hand, the HTML5 video element is super easy to make responsive: video { max-width: 100%; height: auto; }. On the other hand, if you want to do something basic like embed a video from YouTube or Vimeo (that has a flash fallback) you can set the width: 100%; but the height stays the same breaking the aspect ratio… until now.

After some interstate brainstorming and coding with Chris Coyier, we came up with a solution. Mr. Walton, we’re here for our check.

Introducing FitVids

FitVids is a lightweight, easy-to-use jQuery plugin for fluid width video embeds. It currently supports the major video vendors: YouTube, Vimeo, Blip.tv, and a couple outliers.

How it works

The plugin is based on Chris’ pre-exising work on fluid videos and the Intrinsic Ratio method suggested by Thierry Koblentz (ALA #284). With these gems of knowledge combined with my ability to only make tiny jQuery plugins, getting your videos do aspect ratio-based resizing is now as easy as targeting your .container, .post, etc. with FitVids.

$("#thing-with-videos").fitVids();

It’s that easy! Best part, there’s very little Javascript happening. After the initial setup, it’s all percentage based resizing with just CSS.

You can fork it on Github to dig in deeper into how it works. We’d love your feedback.

FitVids happily joins the Paravel family of easy-to-use tools for radical web: Lettering.js and FitText. If you use FitVids or any of these plugins on a something, let us know! We love to seeing this stuff in action.

Updates: Plugins and Modules

Absolutely amazed that people are taking this and running with it. Thanks, y’all.

• FitVids WordPress Plugin by Kevin Dees
• FitVids Drupal Module by Derek Ahmedzai

Also, we’ve made some updates to FitVids and you can add your own custom video vendors and test out other players. If this interests you, read more here.

The Buildout

The site itself is a simple 3 column responsive gallery with a few special ingredients:

• Foldy960, our homegrown not-a-framework, for the responsive base of the site. It’s lightweight and great for customization.
• FitText for some subtle title resizing.
• Blueberry, a responsive image slider. I was sad my trusty jQuery.cycle doesn’t work on fluid images, but I’m glad I found Blueberry. Highly Recommend++!!

For the homepage feature we settled on a sliding background image that correlates your browser’s window width, even though we weren’t sure it was possible. After building a quick prototype to test that interaction, it was easier than we thought. Then it was simply a matter of applying the final copy, textures, and images.

As we were wrapping up, MIX’s Nishant Kothary asked us if we’d be interested in making a sample app for launch day…

Introducing Colorrrs

Colorrrs is 7,085 bytes (zipped) of random inspiration. We decided to isolate Dribbble’s awesome Browse By Color feature, make it ajaxy, and add a “Random” button for funsies. The heart of the app is a simple YQL query to get data from Dribbble, then some jQuery to stitch it all together.

I’m finding Colorrrs to be a great way to explore Dribbble. I’ve been exposed to some sweet shots way outside the range of my daily browsing habits – and I enjoy that.

Coming up with a sample app for launch day and subjecting myself to the 10K limit was as fun as it was challenging. You have to think and choose your codes carefully. Now, knowing firsthand what goes into making such a tiny app, I’m even more excited to see what the world comes up with. Good luck, everyone!

Further Reading

• MIX Online announcing 10K Apart – Responsive Edition
• Reagan Ray on Designing the 2011 10K Apart Contest
• Trent Walton on 10K Apart: The Responsive Edition
• Nishant Kothary on Back to the Future of Wireframes

Better Browsers, Better Devices, New Interactions

Browser improvements aren’t just limited to graphics and animations. We can now tap into the hardware capabilities of various devices: geolocation, orientation¹, notifications, multitouch, etc. These capabilities create brand new avenues of physical interaction we’ve never had access to before.

How can we use these new features for more meaningful interactions? How can we use them responsibly? Here are a few rules I live by:

• Don’t repeat the sins of Flash.
• Don’t make users wait.
• Make it non-essential.
• Make it delightful.

Stick to these rules and you’ll be able to surprise users with simple, joyful interactions (and should keep the luddites at bay).

The tools for the job.

Interaction Design is still tough. Aside from sliding around paper cutouts on a flat surface, I haven’t come across a tool greater than HTML for mocking up interaction².

I’m not naive enough to say, “Thou Shalt Only Design in Browser.” Though, in the near future I’m sure we’ll all spend more and more time mocking up working interaction prototypes in browser. We’ll all need HTML/CSS labs to test clicks, fonts, swipes, flips, orientations, squeeziness™, and more on multiple devices.

We’re in hyper-futuristic times if you consider the browsers and devices we use each day. It’s a new frontier and there’s never been a bigger space for exploration. Go forth and make awesome.

If you zoom in, you’ll see the lines are actually two tone: a main color and a highlight color.

Typically, we’d use a 1x2px image based approach -either background-images on nested DIVs (CSS2) or multiple background-images (CSS3)- to accomplish this effect. Challenging ourselves to reduce HTTP Requests, we came up with a simple solution to get the job done.

<style>
    body { background: url(noise.jpg) repeat; }
    #blog {
        border-top: 1px solid #fff;
        box-shadow: 0 -1px 0 #cdd4b4;
        /* you'll need all the vendor prefixes for `box-shadow` */
    }
</style>
<body>
    <p id="blog">This is my content</p>
</body>

Bingo Bango! It works, is future proof, and degrades nicely. View the Demo

Double-Double Borders

What if you need two-tone lines on the top and the bottom of a element? That’s easy as well.

#blog {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #cdd4b4;
    box-shadow: 0 -1px 0 #cdd4b4, 0 1px 0 #fff;
}

UPDATED: Divya Manian and Felix Niklas were quick to point out a better way for multiple borders using multiple box shadows. Updated code, but view the e-solution here!.

Bonus Sass Mixin

If you’re going to do this a lot, with all the vendor prefixes needed it makes sense to use Sass. Here’s a free Sass mixin to get the job done:

@mixin doubleborder($side, $innerColor, $outerColor) {
    $shadow: "0 0 0";
    border-#{$side}: 1px solid $innerColor;
    @if ($side == "top") { $shadow: 0 -1px 0; }
    @if ($side == "right") { $shadow: 1px 0 0; }
    @if ($side == "bottom") { $shadow: 0 1px 0; }
    @if ($side == "left") { $shadow: -1px 0 0; }
    -webkit-box-shadow: $shadow $outerColor;
    -moz-box-shadow: $shadow $outerColor;
    -o-box-shadow: $shadow $outerColor;
    box-shadow: $shadow $outerColor;
}

#blog {
    @include doubleborder(top, #fff, #cdd4b4);
}

Here are the slides that are available for download on Slideshare (and hopefully soon at Note & Point). Also, don’t forget to re-look at the ever growing gallery of real-world examples over at LetteringJS.com.

Bonus PowerPoint!!

Because I know you like PowerPoints, here are some slides on Webkit Transitions and the accompanying demos I did for a talk at Refresh Austin last year.

Also worth checking out: Trent Walton and I co-wrote an article for a Summer 2010 issue of NetMag (Issue 205 – Out of Print) that features similar, less-copyright-infringing, demos along with a simple walkthrough explanation of CSS transitions and animations.

In order to quantify the benefits side projects, I decided to take note of at least 40 different skills and technologies I’ve learned this year solely through side projects. The bulk of my work at Paravel is still in PHP and since clients aren’t paying me to be totally confused for hours on end, I had to hone these new skills in my spare time.

Paravel has just wrapped up an exciting secret project with three of the web’s most talented designers: Jason Santa Maria, Frank Chimero, and Naz Hamid. These designs are epic, like 18,123px epic. Working with these guys was a complete joy. There were a few fun development challenges and – as you might expect from these gentlemen – a lot of fancy typography work in the delivered PSDs.

Before Trent and I marked up the designs, we noticed that in many instances we would need to style individual letters. We decided we’d need a system to keep our markup maintainable. Something agile enough that a text change wouldn’t ruin us. Our solution was to call upon the power of Javascript to insert some easy to remember span tags.

Individual Letter Control with Lettering.js

We developed a really simple, lightweight, easy to use jQuery plugin, we’re calling it “Lettering Dot JS”, and we’re releasing it today for free over on Github. Let me demo it for you: </stevejobs>

We’ll start with some really basic markup:

<h1 class="fancy_title">Some Title</h1>

After including jQuery, download and include the minified version of Lettering.js, then a script block:

<script src="path/to/jquery-1.4.2.min.js"></script>
<script src="path/to/jquery.lettering.min.js"></script>
<script>
$(document).ready(function() {
  $(".fancy_title").lettering();
});
</script>

The resulting code will churn your .fancy_title and output the following:

<h1 class="fancy_title">
  <span class="char1">S</span>
  <span class="char2">o</span>
  <span class="char3">m</span>
  <span class="char4">e</span>
  <span class="char5"></span>
  <span class="char6">T</span>
  <span class="char7">i</span>
  <span class="char8">t</span>
  <span class="char9">l</span>
  <span class="char10">e</span>
</h1>

Magical. Now the text is easy to manipulate in your CSS using an ordinal .char# pattern. This plugin assumes basic counting skills, but it’s a pretty fast and easy way to get control over every letter.

As you can imagine, it would be a pain in the ass to have all those spans littering your markup and a nightmare to maintain. If the client came by the next day and said that the SEO Expert demands that you have to change the title to “Cool Title”, it’d just be a matter of changing the original clean markup to:

<h1 class="fancy_title">Cool Title</h1>

It also plays nicely with CMSs like WordPress or Expression Engine and art direction plugins.

Wrap Words with Lettering.js

Once we developed this e-solution and played with it, we found it useful enough to broaden the scope so that we could break apart and wrap words in a sentence in a span tag.

Here’s an example of the .lettering(‘words’) method:

<p class="word_split">Don't break my heart.</p>

<script>
$(document).ready(function() {
  $(".word_split").lettering('words');
});
</script>

Which will generate:

<p class="word_split">
  <span class="word1">Don't</span>
  <span class="word2">break</span>
  <span class="word3">my</span>
  <span class="word4">heart.</span>
</p>

You can then style each word using the .word# class.

Wrap Lines with Lettering.js

Once word wrapping was complete, noticed the need for yet another method, one that would break lines up mid-sentence. We struggled for a semantic way to do this, but then remembered <br> tag which a semantic way to say “break this line”. Similar to the above examples where lines of text are broken up by either non-breaking spaces or individual letters, the lettering('lines') method will create breakpoints at <br> tags:

<p class="line_split">Are you<br/> ready to<br/> RUMmMmMMBBLE!</p>

<script>
$(document).ready(function() {
  $(".line_split").lettering('lines');
});
</script>

Resulting code:

<p class="line_split">
  <span class="line1">Are you</span>
  <span class="line2">ready to</span>
  <span class="line3">RUMmMmMMBBLE!</span>
</p>

Kern Well

If you’re going through the trouble to load a fancy font and that word or phrase is the largest on the site, then it’s important for it to be kerned well. With Lettering.js, kerning is a breeze. You can simply use $("#id-of-what-i-want-to-kern").lettering(); and then on each .char#, you can set relative position or left/right margin. Works like a charm.

Best Practices

We’ve found this to be a pretty quick and elegant solution to create typographical CSS3 posters. It’s also a great solution for really custom type headings, while keeping the text selectable.

Be smart and use sparingly. You’ll probably break your browser if you try to tried to do wrap every letter on your page in a span tag, so don’t do that. Look to use this in your Headings, Blockquotes, Asides, etc.

Non-Javascript Fallback

As with any kind of Javascript, have a fall back plan in case the user doesn’t have javascript enabled. The bottom line is up to you, my bottom line would be “legible and on the screen”. Also, use lettering.min.js: Download the minified version of Lettering.js here.

Performance Anti-Pattern

Web performance patterns advise that you put Javascripts at the bottom of your page before your </body> tag. There is an unfortunate side effect where you may experience a FOUT (Flash of Unstyled Text) when you’re manipulating your text after the DOM has loaded. Unfortunately, we found the best solution to avoid/minimize the FOUT caused by this plugin is to put your scripts (jQuery, Lettering.js) in the document <head>. On the one hand, your page will load slower. On the other hand, a flash/restyling makes your site feel slow. Users might ultimately feel the site is faster if they don’t see the FOUT.

Download, Fork, Commit, Please.

We really want Lettering.js to be a quality helper for web typography. If you have any feedback or suggestions, please leave those over on the Github. We’re excited about typography on the web and want to help make it print quality.

Download the Plugin here.

Thanks to Paul Irish for code review!