UnCSS – Slim Down Your CSS

UnCSS is a tool that removes unused CSS from your stylesheets. It works across multiple files and supports Javascript-injected CSS.

Looking for big optimization gains on your site? There’s nothing better than removing stuff you don’t need! Whether it’s code, images or dependencies, getting rid of the stale code is like the first beer after a long stressful day. When it comes to CSS, there’s no better tool for optimazation than UnCSS. It’s a powerful NodeJS powered utility that removes unused CSS from your stylesheets. Continue reading “UnCSS – Slim Down Your CSS”

What Are Webfonts? — for Clients

The concept of webfonts, their different versions and how they render differently across different browsers, versions, devices and operating systems can be hard to explain to client. This will make it easy!

“Webfont… what’s that and why do I need them?” Trying to explain to a non-technical client the what, why and which webfonts are needed can be like having a conversation with a 2 year old in the ‘but why?’ stage.

What are webfonts?

Here’s a quick break down of the 3 W’s to help keep clients from doing a @font-face-palm! Continue reading “What Are Webfonts? — for Clients”

Automating Styleguides with Styleguide-Driven Development

In the past four years there has been an explosion of new technologies in front-end development. We are inundated with new projects like Bower, Cucumber, Behat and KSS. It is a lot to take in. At the past two Drupalcons there have been sessions about this overload, My Brain is Full: The state of Front-end developement. Essentially those sessions are asking “What the hell is going on?”

Continue reading “Automating Styleguides with Styleguide-Driven Development”

Responsive IFrames — The Right Way!

Building responsive IFrames can be frustrating. Don’t let an IFrame break your beautifully laid out responsive site. Learn how to build responsive IFrames the right way with just a few lines of CSS.

You’ve spent countless hours designing and building the perfect responsive site. One problem — iframes. Proportionally resizing these pesky little windows to another world can be frustrating. It’s easy enough to make an iframe’s width span 100% of its container. Rather, making the height resize accordingly can be tricky.

So how do you keep from blowing your top trying to make responsive iframes?

Responsive IFrames

Most implementations I’ve seen require the use of JS, like Pym.js. This can cause unexpected behavior depending on the device and browser version — Pym.js only goes back to IE9. Wouldn’t it be nice if there was a way to make responsive iframes without using a dirty little code snippet? There is! It’s name is the CSS intrinsic ratio technique — or what I like to call, ‘Magic iframes!’. Continue reading “Responsive IFrames — The Right Way!”

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. Learn more “On having layout.“.

[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