Denver SEO Blog » Web Design Portfolio

Mountain America Jerky Redesign Launched

Zack Katz — Fri, 10 Jul 2009 19:45:35 +0000

Mountain America Jerky Redesign

Mountain America Jerky - Before and After 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:

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.
No CSS word-spacing property support
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("\r\n", "\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

`Beef Jerky`

, it became Beef Jerky

. 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?

Career-Magic.com Launched

Zack Katz — Fri, 27 Feb 2009 19:21:12 +0000

An updated website for a Denver career coach

CAREERMagic came to Katz Web Design to give their website some fresh blood.

When Career-Magic.com was last updated, I was in high school. Yes, it’s true — and I said it. The website not only needed updating visually, but there were a lot of parts of the website that needed to be better integrated with how the business ran. The new Career-Magic.com website launched last night.

Here are a few of the ways KWD improved the CAREERMagic website:

An usable shopping cart, please!

CAREERMagic offers many services, and were processing all their transactions using a hand-operated credit card machine. They wanted their process to be streamlined, for their own sake, and also for their customers.

Don’t you want control over content?

Since the previous site was built using static HTML pages, every time Tracy wanted to update the website with a new article or content, she had to manually make edits to code, add the link on the articles page, rename the page, etc…It was a hassle.

The new website is built using WordPress as a CMS (Content Management System), and allows her to update every page’s content, add new blog posts, and change the banner image and text on her own.

Custom post types for testimonials

Using the More Fields plugin, KWD set it up so that when Tracy wants to add a new testimonial, she won’t have to think about it: instead of going to Posts, selecting a category, and formatting the testimonial properly, she simply clicks Testimonials, and the Reference Name, Reference Location, and Quote fields are ready for her.

Once she adds a testimonial, it’s added to the Testimonials page, and not shown in the blog.

SEO sure would be nice…

The new website is super SEO-friendly. A few obvious (to SEOs) yet notable features of the site:

The logo uses image-replacement and is a headline on the home page, and a paragraph link on other pages, allowing each page to have the most content value for their own keywords.
Each page has multiple customizable SEO-valuable variables, allowing a rich mixture of optimized keywords the client can use:
- Custom page title (in the navigation)
- Custom headline
- Custom title tag (what Google will display)
- Custom banner image & text — have a different banner message for each page

2002 is a long time to wait for a redesign

The old CAREERMagic website looked great in 2002, which was the last time it had been refreshed. It was also a solid design launching pad for the new look and feel, but it had to go:

All in all, this website was a smooth development process, and I’m glad that it’s up and running. What do you think of it?

Denver Roofing Company – Website Launched!

Zack Katz — Thu, 15 Jan 2009 23:15:46 +0000

Katz Web Design has completed a website for Mountain High Roofing, Inc., a Denver roofing company.

The Mountain High Roofing website is built on WordPress. It’s what I would consider to be a medium level of customization; the website is a custom website design with a few plugin customization options. It allows Mountain High to easily update their own content, and add articles to their blog. The code is well-structured for really good SEO results.

The project went quite smoothly; the copywriting was done by The Write Touch, and the previous website was easy to redirect: it had only been 4 pages.

Incorporating ServiceMagic.com ratings

One of the interesting things developing this site was trying to incorporate the company’s ServiceMagic.com rating. ServiceMagic is the 800 pound gorilla on the web for the service industry. My customers often love the website because it sends them lots of leads, but it charges a lot. One client told me that ServiceMagic charges $55.00 for every lead.

I hoped, since they charge so much, that the website would at least offer a quality API so that I could pull Mountain High’s ratings from their website using PHP or Javascript. I was hoping for a ServiceMagic API with a JSON feed of testimonials and ratings. Instead, there was nothing. I called their support team, and they confirmed no options for incorporating.

A sneaky CSS trick to get around ServiceMagic

Service Magic doesn’t allow access to their pages using techniques such as cURL, which would be easily manipulated and added to the website. I tried all sorts of better options before realizing I’d have to go old-school!

ServiceMagic gets a new header using CSS

Since there was no way to create an RSS feed using some RSS feed creation services, I had to resort to CSS trickery. I used an old-school iFrame that pulled in their rating summary pop-up, and then used css to add a header to the sidebar iFrame using absolute positioning. I added an invisible link that covers the entire iFrame and goes to the company’s full reviews. Voila, an external iFrame that is styled just like the company’s website. The end result I think looks great and serves its purpose.

SteveSpangler.com Web Design Launched

Zack Katz — Tue, 04 Nov 2008 18:25:10 +0000

Visit Katz Web Design-developed SteveSpangler.com

As announced in August, Steve Spangler chose Katz Web Design to develop their blog. Their previous blog was aging and didn’t provide the functionality they needed. I was provided with a design by Blake Sumrall (at Steve Spangler, Inc.) and was tasked with converting it to a website.

The development of this site required lots of tricks that convert WordPress into more of a CMS (Content Management System). Read on to learn some of the WordPress customization.

Multiple Sidebars

Green areas can be modified per page. Blue items are site-wide sidebars.

Each page has its own sidebar, including the home page. This allow each page to be configured differently; the Media page, for example, may have links to downloads.

Multiple inline sidebars on each page allows for site-wide messages. For example, the site currently has a message on every page asking users to report any site bugs. This is achieved using a sidebar that appears above the content area. There is also a sidebar below the content, above the sidebar and below the sidebar, and defining the footer text of each page

Customized Threaded Comments

I customized Brian’s Threaded Comments (BTC is a WordPress plugin) to look better, work in concert with Live Comment Preview, and be more semantic by removing some inline javascript and replacing it with some jQuery.

BTC had some issues as well, including when you minimize a comment, it still shows the avatar (the user’s image), so I made some CSS upgrades as well.

The nicest-functioning threaded comments I've seen -- with live comment preview!

Custom Fields Galore

I really went wild with Custom Fields using the More Fields plugin. Each post and page can have it’s own unique header image, background image, above-content box, below-content box, above-sidebar box, below-sidebar box, and Related Products that link to SteveSpanglerScience.com. Each post can also be featured in a home page content slider with a defined image, tab title, and excerpt.

Category Customization

Each category can have its own background and header image as well, and the category description is displayed as HTML (using this tip and a modified Category Icons plugin) This allows further customization of Categories, which are limited in terms of Custom Fields.

CSS Sprite Use

Many elements of the website are taken from one GIF image.

This site uses CSS sprites to achieve fast load time. There is some more improvement to be made (the post ratings stars, comment icon, and printer icon can be easily added), but as you see, lots of the UI elements are drawn from this one image.

This also allows for simple updates to many key components in the design.

Blog Pages

Using a Page Template, each page can be both a page and a blog category (see a live example). This allows all the benefits of having a page, while allowing multiple categories to be displayed under it. The Experiments page is currently drawing posts from over 4 different categories, defined by the custom fields.

Functions.php to the Rescue

Many WordPress functions were almost what I wanted, but didn’t offer something like rel="nofollow" option. The solution is to simply copy the original function into your theme’s functions.php file, and update it as you want. I did this with many WP functions, and it allowed me to not use a plugin or modify WP core, while providing the added functionality I needed.

I’ve used functions.php in other projects, but never so often. It’s a lifesaver.

Lots of work…and fun

It was great working with Steve Spangler, and all of the people at Steve Spangler Science, including Jeff Brooks, Alyssa, and Blake Sumrall (who designed the site).

This project had me customizing LOTS of elements of WordPress, and I learned some great tricks I will be sharing with readers here. Do you have any questions about the site development?

MomJobSeeker.com launched!

Zack Katz — Thu, 07 Aug 2008 20:28:17 +0000

Visit MomJobSeeker.com

Mom Job Seeker prepares mothers re-entering the workplace after their kids have grown up a bit. April Stensgard, owner, contacted Katz Web Design with the goal of having a business blog that would facilitate online event registration.

Faced with this task, I took WordPress, added the eShop plugin, and Event Calendar and Event Manager (now defunct) and rolled it into a custom event management solution.

Custom online business solutions

One reason I’m pleased with this website is that I’ve extended WordPress functionality to be a full-featured event registration solution. It’s simple for the administrator to add a new event, set up the location, and have everything all set up. Before the event, the admin can download a list of all participants with their sign-up information as an Excel spreadsheet. Very handy.

I would love to create a custom solution for your business that is easy to use and cost-effective. Let me know if you have a project you’re getting started on!

What do you think?

Let me know what you think of the website. I’d love to hear your feedback.

Tableless, accessible, nearly validating osCommerce — Rewriting the beast

Zack Katz — Thu, 29 May 2008 14:37:22 +0000

osCommerce accessibility stinks

ArrayosCommerce default installation is a huge mess for accessibility. Every piece of code that the platform spits out has endless tables and poorly coded HTML — finding your way through the code is like trying to clear brush.

The simple solution to osCommerce accessibility is to install the Simple Template System and put together a XHTML/CSS’ed out template. That only solves one part of the problem, however, because your wonderful template is going to be wrapping around a whole slew of undesirable code.

Over a year ago, a client of mine wanted an osCommerce website. I wanted to create a masterpiece of accessibility. I tackled osCommerce head-on and re-wrote most of the code that creates the HTML. It was a nightmare, but I created a nearly validating eCommerce website with osCommerce.

The experience was so scarring that I haven’t yet written about it Nearly every file was affected, so upgrading it would be a nightmare, but it’s truly an effort of love.

KWD presents: a nearly validating, tableless osCommerce website

Looking at this site after so long, it’s pretty crazy the amount of work I put into it. And get this: for the complete website (including design, breakdown, and customization of osCommerce), I only charged $2,000. Those were the days

Most of the products are default osCommerce, so the images look really small. Check out the Keyboards category for a few I added.

This project involved so many changes to the core that it’s pretty silly when looking back on it.

Some of the major changes I made:

Improved the checkout process and user account page design & flow
Lightbox integration (some image paths don’t work on this mirror site)
Integrated product reviews on the product page, rather on its own page
Created breadcrumbs and page titles that are SEO friendly and actually reflect where you are
Created unordered list navigation that shows category children — the same code creates the drop-down navigation and the sidebar nav
Rewrote the checkout process and account registration HTML (try signing up for an account!)
Rewrote the pagination code to include more information through title tags, ie: “Displaying Results 1-6″ and “Results 7-10″ and “Previous 6 Results”

It’s still got some minor code issues before it fully validates (I was close on the live site — only one issue — but on the mirror site there are a few). If anyone knows how to modify the BASE tag in osCommerce, please let me know — I couldn’t find where it was generating!

If you’re interested in any of the files, let me know. Please leave your feedback, comments, criticism…I’d love to know what you think!

Denver Real Estate Website – Blue Sky Development Group

Zack Katz — Wed, 28 May 2008 17:58:13 +0000

In anticipation of a magazine ad in Denver magazine 5280, we launched two static web pages featuring properties.

2250 South Marion Street
2372 South Humboldt Street

These websites are no longer active.

These pages are a preview to the WordPress real estate website I’ve been working on. The complete site will be coming soon, including some nifty features that someone should turn into plugins!

Landing page design – Dish Network

Zack Katz — Mon, 10 Mar 2008 17:17:32 +0000

Katz Web Design has just completed a landing page for Dish Network (a Fortune 300 company) to help them streamline their hiring process.

(By the way, if you’re looking for a sales job near Denver, Colorado [in Littleton], check out Dish. They’ve got great packages for sales representatives.)

The purpose of a landing page (or “Squeeze page,” “Funnel page”, or “Lead capture page”) is to keep the user focused on only what you want them to do. In this case, Dish wanted users to:

Fill out a form to start their job application process
Become informed of the job benefits
Get directions to the application location

The landing page design is done in PHP, allowing for future expandability. This allows the text and images to be swapped out dynamically. The one landing page design can be used for many different job positions and locations, even different languages.

I will be writing articles based on the research and results from the landing page design in the near future, including A/B testing, dynamic content with PHP, Google Analytics & Adwords tracking, and more.

What would you like to know about landing page web design?

Ignite Matchmaking Complete

Zack Katz — Thu, 24 Jan 2008 16:11:27 +0000

Ignite Matchmaking is a professional matchmaker in Denver, Colorado. Sheryl Williams, President of Ignite asked Katz Web Design to increase the effectiveness of her website. The Previous Ignite Matchmaking Homepage was not visually interesting, had little information about the matchmaking process, and was not well constructed (using XHTML and CSS).

The new home page has a graphic that outlines the five steps and calls users to action with a simple choice: I am a Man or I am a Woman. The site now has a blog that will entice visitors to stay longer.