Great service for VHS Conversion

Recently we needed to convert VHS to DVD. We found a used a VHS to DVD conversion company called DVDYourMemories. They have a few locations, were quick and affordable. Very happy with their service and would be happy to use them again.

Posted in Misc | Leave a comment

New Mashup Site for Freelancers

Just started an internal project a few days ago that is a cool new way to mashup freelance projects. It pulls from 5 sites currently, including Authentic Jobs, Elance, Guru, iFreelance and Freelance.

My hope is that this site will save a lot of freelancers time in finding gigs they can get paid for. I have a lot of ideas that I think will be really helpful that are soon to come. For now, you can see the work in progress at freelance mashup.

Posted in Misc | Leave a comment

Speaking at SMX West 2010

I am speaking at SMX West

I guess this is my official announcement that I will be speaking at SMX West 2010. Currently, I will be speaking on 3 different panels:

I am looking forward to meeting the other members of my panels and networking, especially with people interested in the Real-time Analytics world or in the Automotive Dealership Tools world.

Posted in Misc | Leave a comment

Showroom Logic Expansion

It’s been an exciting last couple weeks for Showroom Logic. Through partnerships and a great sales team we have been able to expand our reach and market share. Here are some of the latest sites we have launched:

If you are a dealer looking to rank your inventory organically and dominate your area with some great PPC tools, you should consider Showroom Logic.

Posted in Misc | Leave a comment

Speed up your website and increase conversions

Something I have been thinking a lot about lately is website speed. The load times for one of my largest clients, OverstockDrugstore, were getting worse by the day. It was due to an increased amount of traffic coming to a website that wasn’t properly tuned. After taking a very aggressive approach to decrease load times, conversions (sales) increased by 1-1.5% on days following. It blew my mind (and others at the company) that load times would have a direct impact on conversions.

If you think about it. it makes sense. 75% of their website visitors are new. So, they are visiting and experiencing the website for the first time. Also, many of them are coming from price engines. Most likely when they do a search on an engine, they go down the list clicking on each link. If the page loads slower than the other sites, they may either loose confidence or at least get a little impatient, which would cause them to choose someone else.

So, I thought I would share some of the things I did. Hopefully it will help you increase your overall website speed and in turn increase your conversions (whatever they may be). And if we all work together on implementing these techniques, and maybe even standardizing them, we could make the internet faster, and greener (saving energy). The following only applies to a Linux Server running PHP.

BENCHMARKING

It’s important before you begin, to get an idea of how your website is performing before you try to make it faster. This will give you an idea first of what to focus on and also a benchmark to compare and look back on. First, I would recommend downloading these add-ons for Firefox:

  1. Web Developer
  2. Firebug
  3. YSlow

The first thing to do in order to simulate a first-time visitor, who we will mainly focus on, is to disable cacheing. The Web Developer toolbar makes this really easy. On the very left of the toolbar, there is a disable button. Click on it, and select the first option: “Disable Cache”. This will cause every element of a page to be loaded from the server each time you visit the website… exactly what happens when you visit a site for the first time.

The next thing to do is use Yahoo!’s tool, YSlow. It only works if firebug is already installed. But basically, you will see the icon in the bottom right corner of firefox. Load your page, and take note of the amount of seconds it takes to load the page. I would refresh 3-4 times and take an average number to get a good idea of what your load time for a first-time visitor is.

Next, use YSlow’s Performance analyzer to see in what types of areas you can improve. It gives you an overall grade, along with a grade for each area. I am not going to get into each one, since if you click on the name it will open up to a detailed explanation from Yahoo!. They don’t do a great job in explaining HOW to fix the problem though. Also, keep in mind the grade isn’t an end all – be all. Overstockdrugstore is graded a D overall. It’s a bit misleading, since the items may not apply to you at all or be possible for your organization.

MAKE FEWER HTTP REQUESTS is one of the most important things to look at when it comes to speed. Basically, your browser has to send a request for each separate element (image, js/css file, flash etc). The more elements you have, the more requests have to line up and be processed. The number of requests decreases dramatically with Browser-side cacheing, however that doesn’t help first time visitors. So, it’s important to try and cut this number down. A real easy way, is combining all of your CSS into one file, and all of your js code in a single file. For a lot of coders, this can seem a bit dirt but it is a really easy way to start cutting back on the number of GET requests your browser has to make. If you are a seasoned CSS coder, you could also create a CSS sprite. The benefit is having the user only have to download one large image. CSS is then used to show which region of the image is shown.

Expert Note: What I actually do with Overstockdrugstore is use PHP combine all of the js and css files at runtime and cache the result. My script then checks to see if any of the individual files have changed. If not, it uses the cache. If so, it rebuilds the single file. So, I am able to keep files separate for organization as a coding, but combine them into one for the end user. If you haven’t yet, take a look at Minify.

USE A CDN : A CDN or Content Delivery Network, is a server designed especially for delivering content. Amazon has one called CloudFront which is very affordable. The idea behind this is the content you put on your CDN is delivered to the user simulatenously as your page is loading. Your browser can only send two parallel requests per hostname at a time. But it can load content from multiple domains simultaneously. Also, the CDN delivers your content from a server that is closest to the user, increasing speed. If anything, it is a great way to offset your bandwidth.

Expert Note: If a CDN isn’t a reasonable solution, you could always host your images/css/js on a subdomain and deliver the content that way. Although it will always be sent from the location of your host, it could reduce the number of GET requests and organize your static content.

ADD AN EXPIRES HEADER : This has no impact on first-time visitors but can have a huge impact on subsequent page views. Basically, you need to tell your the Browser when the various elements on your page expire. Yahoo! talks about using a future expires header, which basically means saying an element doesn’t expire for 10 years or so. This wasn’t a practical approach for us, since it would cause you to change the filename of the element each time for the browser to download it. With making changes to our javascript/css all the time, this wouldn’t work.

However, putting an expires header of 600 seconds for each element did make since. Looking at our analytics, I realized that a visitor on average would visit the site for around 10 minutes. Because we change images and update products all the time, I figured it would be best to cache things only for around 10 minutes. I figured as well that if someone was comfortable enough to spend 10 minutes on the site, they would unlikely exit due to a sudden page load of a few more seconds (when the cache expired and they had to re-download elements). This number could be different for you, but using some of the logic I laid out you can find a balance.

An easy way to add an expires header to each element is using your htaccess file. Here is what I use for many of my websites:

<FilesMatch “\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|js|css)$”>
Header set Cache-Control “max-age=600, public”
</FilesMatch>

Basically, any element that matches (css/img/js/swf etc) will have an expires header of 600 seconds added to it before it is sent to the browser. Note, this snippet may not do what it is supposed to. Many shared hosts remove the ability to turn this on using htaccess. So, check with your host if it doesn’t seem to do the trick. How do you know if it’s working? Run YSlow Performance again and click on the Components tab. It will list every element and whether there is an expire time associated with it.

GZIP COMPONENTS: This will have an impact on first time visitors. Most browsers have the ability to uncompress files sent to them in a Zipped (compressed) format. This decreases the length of each GET request, since each element is compressed. The browser then uncompresses it and sends it to your screen. Using htaccess it is really easy to apply a rule that will apply to all the elements you want to be sent using GZip:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/x-javascript text/css text/html text/xml text/javascript
</IfModule>

Using GZip on text files will have the greatest impact. Since images and PDF’s for example are already compressed, it’s a waste of CPU power to compress them as well.

PUT CSS AT THE TOP: I am not sure why any of you reading this wouldn’t be in the habit of putting CSS between the <HEAD> tags at the top of your page. But I guess a good reminder.

PUT JAVASCRIPT AT THE BOTTOM: Depending on what you are using javascript for, this may not be possible. However, any javascript that you can put at the bottom that won’t affect page rendering should. If you have a big js file at the top that has to load, that will plug up your HTTP requests, and could slow down the browser from downloading images/logos etc. Basically a page is loaded from top to bottom, so moving things to the bottom that may stop visual things from loading, which intern act as a progress bar, can hinder users from sticking around.

AVOID CSS EXPRESSIONS: Just click on the link within your YSlow to learn more about this one. My guess is it affects very few of you.

MAKE JAVASCRIPT AND CSS EXTERNAL: Putting all of your CSS and Javascript in external files doesn’t only follow web standards, but it allows the individual files to be cached. Inline javascript or CSS is read every time the page is loaded. By having them in separate files, you can have them cache individually. Keep in mind the comment above, that you should combine all of your javascript and css into a single file (if possible) to also reduce your amount of GET requests.

REDUCE DNS LOOKUPS: This one is a bit touchy, since above I was saying how it’s better to spread your requests across different hostnames. Well, if you get too carried away, your browser has to resolve each individual hostname which could I guess slow things down. Although, DNS requests are generally very fast so I wouldn’t worry about this one as much as looking into a CDN server or using subdomains to deliver content. I think the key is just not getting too carried away. Yahoo! recommends only having 4 hostnames at use on your site at a time.

MINIFY JAVASCRIPT: If you have ever looked at the source code of a javascript file and became upset because there was no formatting, and it was basically impossible to read, that is most likely because the host was being smart, and minifying the javascript. This approach basically cleans out a lot of whitespace javascript files can have along with any developer comments that are added. This can decrease the filesize by quite a bit. Yahoo! provides a few ways for you to get this working. I personally use a PHP app called Minify. It can minify your js and css files at runtime and cache the result for future requests.

AVOID REDIRECTS: Read more at Yahoo!

REMOVE DUPLICATE SCRIPTS: Read more at Yahoo!

CONFIGURE ETAGS: My guess is you don’t need to use Etags. They are basically a flexible way to validate entities. If you don’t have a need for them, you might as well not send them to the browser. Doing so will cut down the amount of information attached to your elements. An easy was is to add the line ” FileETag none ” to the htaccess I showed above for expiration headers:

<FilesMatch “\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|js|css)$”>
FileETag none
Header set Cache-Control “max-age=600, public”
</FilesMatch>

This will take of Etags for any of the file types mentioned.

In Yahoo!’s article, they provide a few other things you can be doing to increase website performance. There are a couple things I would like to cover that have made a huge difference.

SERVER-SIDE CACHING: One thing that can have a huge impact on the amount of time it takes for a new user to access your site is how long it takes the page to get generated. Basically, if you have a dynamic website, PHP has to run a lot of database queries in order to get the content of the page. Delivering a static HTML page doesn’t require any database queries, since the file exists it is simply sent to the browser.

I would recommend using a library like Cache Lite or Memcache. The idea here is using these libraries to reduce the amount of database queries you make in order to generate a page. You can set an expire header which will regenerate the page as frequently as you want. If you have a wordpress blog, I would highly recommend looking into Super Cache, a plugin which will allow anyone who knows how to install a wordpress plugin full server-side caching abilities.

IMAGE COMPRESSION: Please take the time to learn the types of images that are best for your project. For example, JPG images are better at compressing pictures with a lot of colors and or gradients. A PNG however would be a much better choice for images with less blending and or color blocks (like a button). Make sure you are optimizing each image on your site, by selecting the appropriate type and compressing it accordingly. It is a very easy practice that a lot of people overlook, but doing it correctly can make a huge difference for first-time load times.

Conclusion:
I personally think that Caching should be a part of web standards. Implementing proper caching isn’t only easy, it decreases the amount of wasted bandwidth and CPU power across the internet. It feel with how flexible and easy to learn certain programming languages are, programmers/coders are becoming lazy in how they write their code. Let’s work together to standardize caching to improve the speed of the internet as a whole as well as free up bandwidth being wasted on sloppy code.

Also, I must say that the things I mentioned are only a piece of the pie. There are a lot of things that can be done to “tune” your apache server or mysql database, and other techniques to decrease the actaul size of your web pages. Please add to this list.

Posted in Misc | 7 Comments

Used Car Dealership Project

About 6 months ago, me and my parter Mike Annable launched undertook a new project. It is without argument that the auto industry is in dire circumstances. Many argue that causes have to do with leaders not doing enough to provide for a green future. Although that may be true, there is a major problem with car dealerships across the country: they are way behind in optimizing their websites to achieve any exposure.

Knowing this, we undertook to create a software solution with certain goals in mind. For one, we wanted to help out smaller dealerships, who may not have the money or know-how of ranking their sites on major search engines. Secondly, we wanted to create a new standard of web site optimization across the car industry. We found a market that was in need of a solution. A market that has been overlooked.

So, I personally took on task of creating a system that could scale as big as our dream. A system that would ensure dealerships exposure on the web, with a management system that would only require little or no training. About 2 weeks ago, I finished the project, and we launched our first website in a target city in Florida. The site lists all the dealers with Used Cars in Lakeland Florida. The site itself provides a really simple experience for the car buyer. They can easily view the dealers in that area, view inventory and specials, and easily get in contact with the various dealerships. We now also have used cars in orlando florida. used cars in California, and used cars in Utah.

Our hope is that we can start partnering with others to bring these websites to other cities across the nation. We are open for discussion with dealerships and individuals who may be interested in pursuing this opportunity with us.

Posted in Code, Corporate News, Featured | Tagged , , | 1 Comment

Speaking at SMX West 09

SMX West Speaker

I am excited for the opportunity to be speaking at SMX West this year, in Santa Clarita, California. I will be speaking the first day (Feb 10th, 2009) and first session on “Technical Issues for SEO Developers”. I have heard great things from past conferences, and I am looking forward to meeting other industry professionals and making new contacts.

If you are thinking about going, make sure to sign up before Feb 9th to save some money. And if you do come, make sure to say hi.

Posted in Corporate News, Featured | Tagged , | Leave a comment

Used Cars Project

For about 6 months now, I have been working hard to create an SEO-friendly website that will give more exposure to car dealerships’ inventory. I can’t give all of my secrets here, as the automotive industry is a very fierce and competitive market.

I am not doing any tricky or that hasn’t been done before. I am simply following strict guidelines to make the internal link structure clean and symantic, to optimize the site to it’s fullest. Recently we redesigned it, and are hoping to launch the official site for Orlando florida next week. For updates and news, you can check out the official Orlando Florida Used Cars Blog, which will be updated constantly as we approach. We are looking to launch these sites in key areas across the US, and give all dealerships big and small an opportunity to list their inventory. Hopefully something like this can help an industry that’s in a lot of trouble.

Posted in Corporate News, Featured | Tagged | 1 Comment

BLVD Status update and 500 signups later

Alright, for those of you not jumping on the train it’s time. As I mentioned 2 weeks ago, BLVD Status has been launched for public BETA. We have received a great response, and at this point have over 500 accounts already!

People are finding out why BLVD is so special. And to help convince you as well, take a look at some of the buzz we have been receiving:

Continue reading

Posted in Featured | Tagged , | Leave a comment

BLVD Status Analytics

I have been keeping very busy with some internal projects. One such project is a new web analytics tool that we launched today, called BLVD Status. We teamed up with Chris Bennett, of 97th Floor about 7 months ago. It’s been a long time in the making, and it’s a big relief that we finished today. I would like to personally thank my lead developer, Charles Berube, who is the best programmer I know. Without him, our vision would never have come this far.

SO WHAT’S DIFFERENT ABOUT IT?
Well, the whole reason we decided to undertake this project was the fact that we felt other analytic tools were too technical, too hard to setup, or too difficult to understand for most users. We wanted to make a tool that accomplished the following goals:

  1. Live stats
  2. Simple User Interface
  3. Less than 5 minutes to setup
  4. Had detailed and intuitive reporting
  5. Focused on conversions.

I am happy to say that we accomplished those goals. Here is a bit more information about what we did to accomplish it:

Live Stats
One analytics program we love is Mint. It has to be installed on the users server with a PHP/MySQL setup. Because of this, we were able to see our stats live. Google Analytics and others have a 24 hour delay. We understand it’s necessary to help with server load, but we are trying to stay “live” as long as we can. Our main dashboard for BLVD has 6 boxes, which shows you quickly and effortlessly what is happening with Conversions, Keywords, Referrers, Site Urls, Outgoing Links, and general Traffic. You can drag the boxes to the order of your liking, as well as set a refresh rate to give you fresh look. Needless to say, I keep my browser stats open all day.

Simple User Interface
One thing I loved about this project, was that I was able to design all the user interfaces and logic without having a client breathing down my neck. I tried to come up with a way that would connect all the pieces to give a nice understanding of what’s happening. I feel with too many analytics programs they try to show how cool they are by throwing in google maps, charts, etc… without a real clear understanding of how they should be interpreted. I decided then, to focus more on the individual users coming to the site. I am happy with where it’s at, and already have ideas of where to improve.

Less than 5 minutes to setup
One thing that is so rad about BLVD is you can literally signup for an account, put the tracking script on your website, and see your stats within 5 minutes. And with that, you can track more difficult things like RSS subscriptions, form submissions etc… with ease. Many analytics programs make you have to alter html code in order to track outgoing links and such. Our goal was to keep everything within the dashboard. That way, a user simply has to install the script on their site, configure their conversions, and they are off to the races. This will allow users of all different skill levels to track things once believed as complicated.

Detailed and intuitive reporting
As I mentioned earlier, we had the frustration that many analytics programs provide good data, but simply don’t present it in a way where it can benefit your website. I wanted to create an analytics program, where after looking at the data I could see what is working as far as design, referrals, advertising, keywords etc… Our reporting options at this point aren’t complete… but let’s just say they are going to blow any other analytics reporting out of the water, simply because once again we put the user in the captain’s chair.

Focused on Conversions
Every website needs a purpose. For example, my website is to promote my business in order to get more leads through my contact forms. One purpose of my blog is to get more subscribers to my RSS feed. Well, shouldn’t an analytics program then allow you to track where someone came from before they filled out your contact form or purchased your product? Or which keyword they typed in Google before subscribing to your RSS feed? Well, ours does. This is what we call Micro Conversions, and it’s freakin bad. When someone makes a conversion (you tell the system what a conversion is), you can look back at where they came from, which pages they visited before making the conversion, how long they were on each page, and how long the conversion took. This allows me to quickly see visitors actions before they do what I want them to do. This helps me think of ways to make the site more sticky or see which keywords/referrers are bringing the highest conversion rate.

We took it a step further too, for you social media junkies. You can use our code to place a “Digg This” button on your site, which will act as a conversion. That way you can track which keywords/referrers bring the most Digg clicks etc… It’s pretty cool.

We also allow you to see the current ranking of your keyword, as well as it’s average over a period of time. You can look at each page on your site and see which keywords/referrers led people to that page…. there is so much to learn.

I guess the next step is for you to get an account and try it out for yourself. There are so many other features I could go over, but it’s best you play with it yourself. We are working on some other nice features too, so stay tuned!

The link again: http://www.blvdstatus.com

And of course… let me know what you think!

Posted in Misc | 1 Comment

Modern Blue v3

My site was due for a makeover. I actually created 2 new designs, and would love to know which one you like more.

The live version I definitely like. My idea here was to focus on my recent work, and most importantly give a clean and modern feel. I like the overall tone, and feel it goes with my name and brand.

The first version I actually like a lot too. This one I had been working on for a while. However, I still felt it was missing something, and could feature my work a little better.

I think the main thing with both of these versions, is keeping things simple and clean. That’s what I am all about. Also, don’t think you can steal the second design since I am not currently using it… I most likely will work it into a future client. Or who knows, maybe a do an A/B test using both designs.

For those of you who would like to know, I used Spry to handle the animations. I created my own function that handles the timer to make it move on it’s own, as well as highlight the current number. Also, I used a simple function to pull my latest WP blog posts. The blog and portfolio are currently being redesigned. In the meantime, let’s get some feedback.

Posted in Corporate News, Design Strategies | Tagged | 3 Comments

WordPress tips and the functions file

I think it’s time I focus a bit on WordPress, a terrific blogging platform. It’s what I use for all of my clients’ sites because of it’s compatibility, flexibility, and nice admin. I have a lot of experience creating custom themes for WordPress. This is actually pretty easy. When I recently designed 5ones.com , one thing we really wanted was to show recent posts from each category. In the industries 5ones covers, media-rich content is very important. So, we wanted to take these excerpts one step further however, and extract the first image of a post, and convert it to a cropped thumbnail to keep things uniform. I am very pleased with the result.

A word on WordPress Themes:
One very important file when creating a WordPress theme, is the “functions.php” file. This works like the plugin section in WordPress. Basically, when your template is loaded, so are these functions. It’s a great way to create specific functions you can use in your template files, without having to create a plugin for each one. And sense the “functions.php” file is only connected to that specific template, you can choose a different template, and those functions will no longer be loaded.

Ok, so how did you do it?
The first step was to show the post title as a link, the author, and then a small except WITHOUT an image. If the author put an image at the top of their post, I didn’t want this to show up. So, in my index.php file, which acts as the home page, I put in this code:


<?php
//get the latest 3 posts for surfing
query_posts('category_name=Surfing&showposts=3');
while (have_posts()) :
the_post();
//execute the output function
show_post($post);
endwhile;
?>

WordPress has a lot of functions built in. So I used their “query_posts” function to get the latest 3 posts in the category “Surfing” (I repeated this later on for Skating and Snow). Then, in the famous WordPress “while loop”, I execute the function “show_post($post)”. The “$post” variable comes again from wordpress, which is actually a post object, containing all the post info (ie content, author, date, permalink, etc…). So, then in my “functions.php” file, I have my “show_post()” function:


//show the post
function show_post($post) {
echo "<div class=\"post\">\n";
echo "<div class=\"img\">\n";
//checks for image
getImage($post->post_content);
echo "</div>\n";
echo "<div class=\"body\">\n";
echo "\t<h3><a href=\"".$post->guid."\">".$post->post_title."</a> - <small>By ".author($post->post_author)."</small></h3>\n";
echo "\t<p>".summary($post->post_content)."<a href=\"".$post->guid."\">Read Full</a></p>";
echo "</div>\n";
echo "<div class=\"date\">".dateFormat($post->post_date)."<br /><br />";
echo "<br /><a href=\"".$post->guid."#respond\">(".$post->comment_count.") Comments</a></div>\n";
echo "</div>\n";
}

For the most part, I didn’t have to do anything new here. I basically used WordPress’s $post object to access specific information I wanted, and put then put it exactly where I wanted it in my XHTML. There are only 4 functions being called that I had to create.

The being called is “getImage()”. This is the function I use to display the small thumbnail next to the post. Here is the function:


//checks to see if there is an image in the post
// if yes, it displays the image in a box
function getImage ($hay) {
$path = explode("<img",$hay);
if(sizeof($path) > 1) {
$src = explode("alt",$path[1]);
$file = explode("src=",$src[0]);
$url = str_replace('"','',$file[1]);
$url = str_replace("'",' ',$url);
$link = explode("/uploads/",$url);
echo "<img src=\"http://5ones.com/dev/wp-content/themes/5ones-v2/gen_thumb.php?x=62&y=39&src=".$link[1]."\" />\n";
}
}

I am not saying this is the easiest, nor best way to do this part. However, it works great for my purposes. Anyways, here is what is going on. I use the variable $hay to hold the actual post content (which I passed in my show_post() function. I then used the explode function to separate any possible image tags in a post. Then, I am able to check the size of the array created, and if it’s large than zero, I know an image exists and continue on with the function. All I am trying to do, is get the path for the image in the post. So, I do a series of explodes and string replaces to isolate the path. Then, I pass the image path I finally get to my image resizing script (maybe I will share later), that crops the image and outputs it. Beauty.

The next function I use is “summary()” which takes the content, strips out html tags and image tags, truncates the length, and then returns the result. It looks like this:


//returns a summary of the content and strips html tags
function summary($copy) {
$new = strip_tags($copy);
ereg_replace("<img[^>]*>", "", $new);
$new = substr($new,0,200);
$new .= "...";
return $new;
}

The last function I use returns the name of the author. Since the post only gives the id of the author, I do a simple DB query to get the authors’ name:

//returns the name of the author based on id
function author($id) {
$sql = "SELECT display_name FROM wp_users
WHERE ID = '$id'";
$q = mysql_query($sql);
$r = mysql_fetch_array($q);
return $r["display_name"];
}

These are the functions I use to create the home page you see on 5ones. Hopefully these functions can be beneficial to someone trying to create the same thing.

Posted in Code, Featured | Tagged , , | 6 Comments

5ones Redesign

Just wanted to put a word out for a new redesign I did for an action action sports news and information site , 5ones, recently redesigned and launched. I must say again, WordPress is so easy to use. I created a theme and used the mighty functions.php file to create the cool things you see, like parsing a post for images and showing them on the home page, and the way I set up the whole home page for that matter. I am very pleased with the way it turned out. Hopefully this will inspire some of you. If you want to know how I managed to do anything via wordpress you see, don’t be afraid to post.

Posted in Design Strategies, Featured | Tagged , , | 3 Comments