Resize Videos Proportionally with Intrinsic Ratios

Ever wanted to resize videos while keeping the same aspect ratio in your responsive designs? Check out this easy to implement, CSS only technique that allows videos to be resized on the fly!

Ever wanted to resize videos while keeping the same aspect ratio in your responsive designs? Check out this easy to implement, CSS only technique that allows videos to be resized on the fly!

I recently came across a great CSS technique to scale videos like you would images. As the width of the video decreases, the height of the video changes accordingly to keep to same aspect ratio. Currently, this is difficult to do when just setting the width to 100% due to the height remaining constant. Using the intrinsic ratio technique allows the browser to determine video dimensions based on the width of the parent container.

With intrinsic dimensions, a new width triggers a new height calculation, allowing videos to resize and giving them the ability to scale the same way images do. See example one.

CSS Intrinsic Ratio Technique

To accomplish this little piece of CSS magic, we’ll create a box with the proper aspect ratio (4:3, 16:9, etc.), then make the video inside that box stretch to fit the dimensions of the box. Simple stuff!

Where the magic happens…

padding is the secret to the intrinsic ratio technique. To accomplish, we’ll set the bottom padding of the parent container to a percentage based on it’s width. To create this “magic wrapper”—a container that proportionally resizes itself, check out the code below:

How it Works

First, let’s break down the .video-container rule:

position: relative
Declaring position: relative makes all child elements position themself in relation to this container.

padding-bottom: 20%
This is where the real magic happens. It gives the container box a specific format. Using 20% for padding makes the height of the box equal to 20% of its width. You’ll have to adjust this accordingly to match your videos aspect ratio.

[message type=”info”]Why use padding-bottom instead of padding-top? Simple answer, IE. IE5 removes the “space” created via padding-top—yeah, IE is a little slow.[/message]

height: 0
This gives the element “layout” so that slow IE5 and IE6 will render the dimension of the inner container properly.

[message type=”info”]Again, since IE is a little slow, you should not use width: 100% as a layout trigger. This will cause the box to expand to fill it’s container rather than respect the width we set for the parent container.[/message]

Now, let’s look at the .video rule:

position: absolute
This frees the video from the height boundary of its parent and allows the it to be positioned over the “padding area”.

top: 0
Positions the video at the top of it’s parent container.

left: 0
Positions the video on the left side of it’s parent container.

width: 100%
This makes the video stretch to fill the height of its parent container.

height: 100%
This makes the video stretch to fill the height of its parent container.

That’s it! Now you’ll have a video that keeps it’s aspect ratio our responsive designs.


Learn more about the CSS intrinsic ratio technique:

Making Your Site Rich, With Rich Snippets!

If you haven’t already heard of rich snippets or incorporated them in your site, you’re lagging behind. These delicious little bits of code are like candy for search engines. Adding them to your site can help your SEO, boost your CTR, and enhance the appearance of your listings in search engines. Best of all, it’s a cinch to do. With just a little HTML knowledge and this guide, you’ll be on your way to catching up with the latest web trend—one that’s here to stay.

If you haven’t already heard of rich snippets or incorporated them in your site, you’re lagging behind. These delicious little bits of code are like candy for search engines. Adding them to your site can help your SEO, boost your CTR, and enhance the appearance of your listings in search engines. Best of all, it’s a cinch to do. With just a little HTML knowledge and this guide, you’ll be on your way to catching up with the latest web trend—one that’s here to stay.

Rich Snippets: The What & Why

Back in 2009, Google introduced rich snipplets. They’ve become hugely popular mainly because they help search engines display what you want with extra features, like ratings, author photos, and much more!

What are rich snippets?

Rich snippets are designed to summarize the content of a page in a way that makes it even easier for users to understand what the page is about in our search results.

Recipe Rich Snippet
This is what a recipe rich snippet looks like.

Rich snippets are a type of page mark-up made up of extra bits of code. You can think of them like bacon bits—because who doesn’t like bacon! They’re the extra pop of flavor that makes a plain baked potato into a loaded one. I’m sure you’ve seen the results of these wonderful snippets when digging around in Google. They are the result of the extra bits of content that appear under search results.

Why use rich snippets?

Rich snippets are seen everywhere in the SERPs with some verticals like recipe and blog sites having more than others. These rich snippets help searchers find exactly what they’re looking for and can help your site by:

  • breaking up standard wall-of-text search results
  • calls significant attention to your result
  • provides instant information related to the user’s query
  • increases CTRs and decreases bounce rates
  • leads to more qualified traffic
  • can establish AuthorRank for the author & builds search trust
  • allows readers to get to know you and trust your contributions to the web

Sites that leverage content strategies can especially benefit from these little pieces of bacon bits. With the emergence of AuthorRank, a “know” based query (informational search) displays an author with a photo, name, and links to other articles they’re written. This creates a feeling of trust and authority on the subject matter their writing about. It also encourages click-through to other articles the author has written.

Author Rich Snippet
This is what a author rich snippet looks like.

Another example is, “do” based queries, such as going to a concert or event. Information for purchasing tickets can help show immediate information on prices, maps, and directions.

Types of Rich Snippets

There’s quite a few types of rich snippets you can use. Some search engines support more than others, but adding them will never hurt your site. Here’s the types of rich snippets Google supports:

  • Restaurants: Average review, number of stars & price range
  • Authors: Author photo, name & link to articles
  • People: Phone number & photos
  • Products: Ratings, picture & price
  • Businesses & Organizations: Location & customer review
  • Recipes: Photo, recipe, rating & time required
  • Events: Event date, location & time
  • Music:Lyrics & link to play

Google also recognizes markup for video content and uses it to improve our search results.

Integrating Rich Snippets

Integrating rich snippets in your site is a cinch. I found that initially is was a little confusing only because of the different types of rich snippets that are out there. Google suggests using microdata as outlined at schema.org, but any of the three formats below are acceptable.

Types of Rich Snippets

Don’t forget to test!

As with all development, it’s important to test your rich snippets once you’ve added them to your site. Luckily Google makes this easy with their structured data testing tool.

If the tool correctly renders a rich snippet for your pages, they’re eligible to be shown with rich snippets! If rich snippets aren’t appearing in the rich snippets testing tool, refer to our Google’s troubleshooting guide.

Once you’ve correctly implemented and tested your markup, it may take some time for rich snippets to appear in search results as we crawl and process the pages. If rich snippets are not appearing in Google’s search results after a few weeks, refer to Google’s troubleshooting guide as well as ensuring you’re following Google’s design and quality guidelines.

Rich Snippet Examples

Here’s a couple of handy examples when trying to integrate rich snippets on your site. If you don’t find one for your situation, comment below and I’ll be happy to help you out.

Rich Snippet Example 1

Original HTML:

With Schema.org:

Rich Snippet Example 2

Original HTML:

With Schema.org:

Rich Snippet Example 3

Original HTML:

With Schema.org:


Learn More About Rich Snippets

Retina Favicon: Learn How to Create & Add Them to Your Sites

Ever wonder how to create and add a retina favicon to your site? So are more and more developers as retina screens and other high-resolution devices continue to grow in popularity. Since September 2012, Google Trends has showed a huge increase for the search term, retina favicon.

Ever wonder how to create and add a retina favicon to your site? So are more and more developers as retina screens and other high-resolution devices continue to grow in popularity. Since September 2012, Google Trends has showed a huge increase for the search term, retina favicon.

It’s not surprising with the number of these sweet-looking devices popping up all over and not only Apple devices. With this huge demand comes the need for web developers to move to the next generation of favicons. Let’s take a look on how you can easily create and add retina favicons to your site.

How to Create a Retina Favicon

It requires a little extra work to create and add retina favicons, but a cinch to do. In order to create cross-browser retina favicons, including IE, you’ll need to stick with the .ICO file format. Retina graphics are essentially images that are double the actual size of the rendered image. For retina icons, you’ll normally create two sizes: 16px by 16px for non-retina devices and 32px by 32px for retina screens. Instead, I’m going to show you an easier way with the X-Icon Editor.

Start by creating your icon with an image editor like Photoshop. Save it as an 8-bit PNG with an alpha channel.

Photoshop Favicon

Once you’ve got your icon created and saved, head over to X-Icon Editor. Import your image and be sure to check all available sizes: 64px by 64px, 32px by 32px, 24px by 24px and 16px by 16px. Granted, you really only need the 32px by 32px and 16px by 16px, but having the extra sizes doesn’t hurt.

X-Icon Editor Import

Keep in mind since you can provide two different sizes, you could potentially create two different images in-case your icon is too detailed to be sized down to 16px by 16px. Doing this would require you convert the two images separately into the .ICO format, but the X-Icon Editor makes that a cinch. Once you’ve got your icon imported, you can make tweaks to it if needed.

X-Icon Editor Import

After you’ve made your tweaks, export it and you’ll have your new retina favicon.

Add a Retina Favicon to Your Website

Now that you’ve got your favicon created, the next step takes 2 seconds: adding it to your website. Jump into your site head and add the following code, making sure you update the path to reflect where the favicon sits:

That’s it! Now when you load your site, you’ll see your new slick-looking retina favicon.


Articles on Retina Devices & Favicons:

CSS Print Stylesheet Tips & Tricks

CSS print stylesheets often get put on the back burner, if they ever get made at all. Most front-end developers and designers out there are more obsessed with pixels than printers. This can cause a gap in your site’s consistency when users attempt to print pages on your site. Often times, what get’s printed and what they see on the screen are two completely different things. From images wrapping in odd places to pages getting cut off on the sides, printing webpages can sometimes be a big headache for users.

CSS print stylesheets often get put on the back burner, if they ever get made at all. Most front-end developers and designers out there are more obsessed with pixels than printers. This can cause a gap in your site’s consistency when users attempt to print pages on your site. Often times, what get’s printed and what they see on the screen are two completely different things. From images wrapping in odd places to pages getting cut off on the sides, printing webpages can sometimes be a big headache for users.

Coding CSS print stylesheets doesn’t have to be a monumental task. Let’s go through some simple tips and tricks that can save you both time and headaches.

Place styles in a print media query.

Remember, you don’t need to recreate your entire CSS. Most all styles are inherited by the print query, only the differences should be defined.

Make color changes explicit.

Most browsers will automatically reverse colors to save toner ink. This can sometimes cause problems with the quality of the printed page. For best results, make color changes explicit.

Remove unneeded page elements.

Generally, the goal for printed pages isn’t to provide an exact screenshot of what’s seen on the screen. Instead, to provide a well-designed print version of it. Elements like navigation bars and search forms aren’t needed on printed versions, so remove those to save both room and ink.

Set page width & margins.

Make sure your content is getting printed edge to edge by setting the body width to 100% and defining the page margin. I’ve seen some sites that go a little further and provide users some extra space for handwritten notes on the page.

Avoid odd page breaks.

Make sure your content doesn’t get spilt up across multiple pages at odd points. This can sometimes be the biggest headache when creating print stylesheets.

Force background images & colors.

Some pages require background images and colors to appear correctly. You can force these colors to show when printed in color with WebKit browsers (Chrome or Safari) using a separate media query. Unfortunately, at the time of writing this article, there’s no equivalent for Firefox, Opera or Internet Explorer (no big surprise there).

Display link URLs.

Remember, this is a printed version of the page so users have no way to access links without knowing the URL of those links. Providing a reference to the linked URLs tell’s users where those links go to. Take a look at the HTML code below:

Here’s the printed result of the code above:

With the holidays coming around the corner, many people are looking for unique gift ideas < http://www.knowgifts.com > to surprise their loved ones.

One problem with the code above is that both anchor links and linked images will also get expanded. We can fix that with a countermand CSS rule:

Selecting links around images can be more difficult since CSS doesn’t currently allow for selections of elements based on its children. This get’s remedied with the CSS4 parent selector:

CSS4 also makes expanding external links easier:

Provide QR codes for easy URL references.

Using Google’s Chart API, you can provide users a QR code on printed pages. There’s a downside to this approach, because you have to define the URL in the style. If you’re running PHP or another dynamic scripting language, this can be fixed by providing the URL automatically:


Worth-while CSS Print Articles & Tutorials

Check out these other great articles and tutorials regarding CSS printing:

Quick Code: jQuery Sticky Navigation When User Scrolls

Sticky navigation is being used more and more on sites and there’s a good reason why. It improves the UX by making the menu available no matter where the user is on the page. Learn how to create a simple, light-weight jQuery sticky navigation below. Best of all, it’s easy to implement on existing site’s without having to change any existing HTML code!

Sticky navigation is being used more and more on sites and there’s a good reason why. It improves the UX by making the menu available no matter where the user is on the page. Learn how to create a simple, light-weight jQuery sticky navigation below. Best of all, it’s easy to implement on existing site’s without having to change any existing HTML code!

jQuery Sticky Navigation Effect

Without further adieu, let’s jump into the code.

The JavaScript

jQuery(function(){
  var menuOffset = jQuery('#site-navigation')[0].offsetTop;
  jQuery(document).bind('ready scroll',function() {
    var docScroll = jQuery(document).scrollTop();
    if(docScroll &gt;= menuOffset) {
      jQuery('#site-navigation').addClass('fixed').css('width',jQuery('#masthead').width());
    } else {
      jQuery('#site-navigation').removeClass('fixed').removeAttr(&quot;width&quot;);
    }
   });
});

Fairly basic jQuery code. It will add a class to the navigation when a user scrolls beyond it. Only thing you’ll need to change here is the navigation selector, #site-navigation. Also, you may want to remove .css('width',jQuery('#masthead').width()). That part of the code is more specific to this site.

The CSS

#site-navigation.fixed{
  position:fixed;
  z-index: 9999;
  top:0;
}

Simple stuff! If you’ve got any questions or need help customizing it to meet your needs feel free to shoot me a line below.