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

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: