Mountain America Jerky Redesign Launched

Mountain America Jerky Redesign

I’m happy to announce that today the new Mountain America Jerky website launched. Check out the site and try some of their crazy-good Garlic Black Pepper Beef Jerky. One perk of working with a nice client who sells beef jerky is getting samples of the product! Seriously, though, it’s the best jerky I’ve ever had.

I started working with Mountain America Jerky as a SEO. Jerky is a competitive field, and they wanted to improve their ranking. After working with Chuck on the website’s optimization, he told me he wanted to go big and rebrand the site. The result is a rustic, functional, beautiful website.

Developing with Cufón

Making text look nice is now a joy.

When creating a visually rich site, there is often a tradeoff between aesthetics and functionality. That is especially true when you’re trying to make sure the site is SEO-friendly.

When creating the design for the site, I wanted to keep the nice fonts I was using, and I had just heard of Cufón text replacement, an alternative to using images or Flash for text. Little did I know that I would end up using Cufón for the entire site’s content…and that it would look great.

Cufón is not without issues

There were a few issues I encountered while developing the website:

1. If there was white space around a tag or in between tags, Cufón creates additional canvas blocks that would completely screw up the layout.
2. No CSS word-spacing property support
3. JavaScript size of the font files

1. Removing white space for Cufón

Instead of coding without any line breaks, or tabs, I used PHP gzip functionality to save the HTML as a variable, then strip out all the line breaks. That means by the time Cufón touches it, the white space is gone and the problem solved.

Add the following code to the top of your site’s PHP files (may not work on your server, but something similar should. Taken from  this WebsiteTips.com article):

ob_start ("ob_gzhandler"); // Initialize ob_gzhandler to send and compress data
ob_start("compress"); // Call the function 'compress'
header("Content-type: text/html;charset: UTF-8");
function compress($buffer) {
/* remove comments */
$buffer = preg_replace('!/*[^*]**+([^/][^*]**+)*/!', '', $buffer);
/* remove tabs, spaces, new lines, etc. */
$buffer = str_replace(array("rn", "r", "n", "t"), '', $buffer);
/* remove unnecessary spaces */
$buffer = str_replace(array('   ', '  ','  '), ' ', $buffer);
$buffer = str_replace('{ ', '{', $buffer);
$buffer = str_replace(' }', '}', $buffer);
$buffer = str_replace('; ', '; ', $buffer);
$buffer = str_replace(', ', ', ', $buffer);
$buffer = str_replace(' {', '{', $buffer);
$buffer = str_replace('} ', '}', $buffer);
$buffer = str_replace(': ', ': ', $buffer);
$buffer = str_replace(' ,', ' ,', $buffer);
$buffer = str_replace(' ;', ';', $buffer);
$buffer = str_replace('. ', '. ', $buffer);
return $buffer;
}
Once that’s added to your site, the output should be super-condensed (view the page source), and the Cufón additional layout issues should be fixed.

2. Word Spacing for Cufón

There are more technical ways to do what I did to solve this issue, but here’s what I did: I enclosed the spaces that were too large with , and gave .smallspace a font-size:.35em;. You’ll want to play with the size a bit; the font I was using had spaces that were way too big.

So, instead of the headline code being <h1>Beef Jerky</h1>, it became <h1>Beef<span class="smallspace"> </span>Jerky</h1>

. That made the word spacing much better for the longer headlines on the site.

3. Reducing the size of the font files

The fonts were the largest file in the whole site, but I really wanted to use them! So, what I did was:

• Combine the three fonts into one Javascript file
• Put the code at the bottom of the page (which makes the content show up unstyled for a moment, but it saves people from slower connections from a long-ass wait). Load speed improved noticeably.
• Used the great SmartOptimizer to automatically implement many load speed best practices, including caching, far-future expires, and more. Check out both SmartOptimizer and YSlow for more information, it’s GREAT; you won’t regret it!

So the home page went from 830Kb to 675Kb (still large, but much better), and after the first page load, a huge amount of the site’s resources are cached, resulting in load times of under 1 second.

Summary

Working with Cufón was great, and it is definitely on the top of my list for neat tools. It would have been SO easy just to replace the headlines, but having replaced almost all the site’s text, I can say that it’s possible, and not too hard.

Any questions about Cufón, the process, or thoughts about the website?