Category Archive: Design Tips

Poor Image Quality Fix for Magento

Magento

Magento

It’s been a long time since my last post.  In fact, I haven’t updated this site in a year or so.  I had planned on adding many more pages and updating the blog regularly, but soon after I made this site I decided to pursue two new pretty big projects.  One of them is an e-commerce site that I’m just finishing up.  As these two projects get rolling, I’ll have more time for this site, and I’d like to keep it current and add more pages and posts regularly.  For now though, a relatively short post on a Magento fix, which I’ve recently implemented in my new e-commerce project.

First, Magento is an awesome shopping cart.  I’ve used several, and Magento just blows them all out of the water.  And, the community edition is free.  It took me a while to give it a go, because I read and heard so many people talk about how difficult it was to wrap your head around, how it was a beast, how the learning curve was steep, etc.  Having used it now for several months, I disagree.  I’ve found Magento to be fairly intuitive, and very easy/quick to learn.  There are some issues, as with everything, but a quick search almost always turns up a quick and relatively easy fix.  However…

Magento Product Images Suck!

For some strange reason, Magento has decided to compress uploaded product images in a way that results in very poor quality images.  Even if you upload an image that is the appropriate size, Magento will compress it.  Product image quality is one of the most important components of an e-commerce site, for obvious reasons, and this is a serious flaw.

This Magento thread goes on for 11 pages (so far), from 2008 to 2013, with numerous possible ways to fix the product image quality problem.  I believe I tried all of the solutions in that thread, but none of them resulted in perfect quality images.  In addition, many of the listed fixes would break when a new update would be released.  So I came up with my own method, which allows you to use any image you create with no compression at all.

How to Get Uncompressed, Perfect Product Images

When you upload a product image, Magento creates a compressed copy.  When you load a page on your site in your browser (front end) with a different size of that image, Magento then creates a compressed version of that sized image too.  It may end up creating as many as 4 different variations: the full sized image, a thumbnail for the “cart”, a medium sized image for the product listing/category page, and a larger version for the product page itself.

The solution is simple.  You simply replace the compressed images with perfect images, via FTP.  It’s not ideal.  And it would be a serious pain if you’ve already got hundreds or thousands of products on your site.  (Although, any solution will require you to upload all new images, anyway.)  But it does work, and it will stick even when Magneto is updated.

  1. First, upload your image(s).
  2. Second, go to your front end and load each page that is going to display a variation of the uploaded image(s).  If your products are already live, you can skip those two steps.
  3. Right click on your product image on the front end of your site, and view the file info to find the location of the image in your file system.
  4. FTP into your file system and replace the Magento generated images with your own perfect images.

You’ll see that Magneto places different sized variations in parent folders that are named based on the pixel size, and uses standard naming conventions.  So an image named “image-name_1.jpg” might be located in a parent folder named “450″ for example.  That’s going to be the 450 pixel version of your image, compressed by Magento.  You can create your own 450px sized images, name them the way Magento names them, and simply drag them into the folder to replace the Magento generated/poorly compressed images.  Presto.  You’ve got perfect images now.

Again, it’s not an ideal solution, as it would be best if Magento would automatically create perfect images, or give you the option of using uncompressed images!  But I have yet to find a way to get it to do so.  At least this fix works, isn’t difficult, and won’t break with the next update.

 

Interactive Content: Four Easy Ways to Increase User Engagement

Over the last couple of years, Google has made it substantially more difficult to game their search results and rank artificially high.  Buying loads of cheap links is more likely to get your site penalized than to increase your rankings and traffic.

These days, visitor engagement is the key to success.  Engagement ensures that visitors who arrive on your site will stay there, a positive quality signal for Google, and that they’ll be more likely to share your content with their friends, creating natural links, and indirectly increasing your rankings and traffic.

One of the best ways to increase the amount of time visitors spend on your website, and the chance they’ll share your site with their friends, is to create valuable interactive content.  And it’s not as hard as you may think.  Here are four easy ways to do so:

Online Calculators

Calculators aren’t just useful for boring mathematical tasks.  If you think outside the box, there are few websites that couldn’t benefit from a fun, valuable, interactive calculator.  With financial sites, weight loss sites, and fitness sites, there are tons of obvious applications.  But what about other sites?  On this site, for example, I’ve created a custom calculator that estimates website revenue.  For a site about dogs?  Create a calculator that estimates the amount of food a dog should eat with various levels of weight, exercise, and age.  How about a travel site?  Create a calculator that provides the amount of vacation days a visitor needs to stay sane.

The calculator(s) can be useful, fun, or both, and in any case, visitors will appreciate them, they’ll stay on your site longer, and if you make a really cool one, they may link to it or share it with their friends.  If you don’t know how to make a calculator, I’ve created a very simple tutorial here, with copy-and-paste code you can use.  So you’ve got no excuse!  Come up with a cool calculator idea or two, and add one to your site today.

Online Quizzes

Quizzes are another great option for interactive content.  Again, there are few sites that wouldn’t benefit from a quiz or two.  You can choose to make your quizzes a serious test of knowledge, a fun break, or any combination in between.  It’s unlikely your competitors are using quizzes on their sites, so adding one to yours is not only a great way to increase user engagement, but will also create a point of differentiation.  If you don’t know how to make a quiz, here’s another easy tutorial, with free files you can download and use today.

Make sure you promote your quizzes (or any new content for that matter) on pages that get a lot of traffic, and to influential people in your industry that may be willing to spread them.

Free Downloads

In many industries, free electronic downloads can be valuable.  On this site for example, I’ve created a free website template and WordPress theme.  Excel files are another great option.  On a weight loss site you might offer a free excel file that helps users track their caloric intake and calories burned.  On a finance site you could offer a free financial planning worksheet.  And on many sites, a free, small downloadable e-book can work.  Again, thinking outside of the box is often most useful.

Most sites don’t offer free downloads.  By offering them on your site, assuming you do create something of value, you also increase the value of your site and the chances that others will promote it for you.

Free Videos

Lots of sites nowadays do have video, so much so that many visitors will be looking for it.  Adding videos to your site is an excellent way to keep people on it for an extended period, and if the videos are good and you add them regularly, they’ll keep returning for more.

The easiest way to add videos to your site is via YouTube.  If you use YouTube, you won’t have to bother with hosting your videos or figuring out how to integrate it on your page…which can be way more trouble than you might imagine.  Ideally, you should use a high quality camera, but depending on the type of video you’re making, even an iPhone video uploaded to YouTube and shared on your site can work.

The downside to using YouTube videos is that visitors may click off to YouTube.  So I’d recommend disabling additional videos from showing up at the end of yours.  And make sure you’ve got complimentary, interesting and engaging content near the video, so that after someone watches it they’ll be even more likely to get further engaged in your site.

Do It Now!

Making a video will likely be the most difficult of the above 4 methods, but once you get going, you’ll see that it’s actually pretty easy.  Using my free tutorials you should be able to create a cool calculator and/or quiz, and add them to your site in as little as a couple of hours.  So do it now, add links to your new interactive content to your highest traffic pages, and email a few people in your industry!

How a Panda Penalty and 60% Traffic Drop Nearly Doubled Our Sales

A while back I posted about my e-commerce site recovering from Panda. In that post I mentioned that the site suffered a 60% drop in traffic. What I didn’t mention is that despite the massive drop in traffic our sales nearly doubled that year (2011). We didn’t expect it, and it wasn’t directly due to the change in traffic. The sales increase was caused by our efforts to increase our conversion rate to offset the traffic loss.

Here’s How We Did It

We read a book called The E-Myth Revisited. If you’re running a website or business, I very highly recommend reading it. Some aspects of the book come across as rather elementary, and there were sections that could have been left out. However, the substance of the book was excellent, and it caused us to change the way we looked at and ran our business, including our e-commerce site. I’ll only describe here what applies to our increase in conversions and sales, but there are other great and beneficial reasons to read the book.

Although customers loved our site and it had a very professional design, we had never put an overall vision for it into words. It was really just a site selling products, along with useful information for our customers + excellent customer service. One of the steps in “The E-Myth Revisited” is to write down a vision for your business…what you want your business or site to convey…what you want people to feel when they land on your site for the first time or walk in your door.

A Unified Vision

Actually coming up with a single sentence for our vision wasn’t easy, but once we did it we felt we had a real purpose. We had a single goal or vision that every page on the site should attempt to achieve…a single unified feeling for every aspect of the site. So we got to work on making that happen. We made relatively simple changes to the design…a color here…a message there. But the impact was amazing. The day we made the first changes, our bounce rate was cut in half and average time on site nearly doubled. Conversions more than doubled, and sales went up by almost 100% for the year.

So despite losing 60% of our traffic from Feb. to the end of the year due to Panda, our sales were about doubled compared to the previous year. And it wasn’t due to a change in search traffic or the terms people searched for to arrive on our site. The data was consistent across all traffic sources…not only Google, but also Yahoo and Bing where we had not been penalized.

One Change, Not Many

In every previous year we attempted to maximize our sales and conversion rate. We made numerous changes to every element of our site, but each one either had very little impact or none at all. It wasn’t until we changed one thing that we saw a huge and instant impact…the vision. And that vision was based on feeling instead of product specs or direct benefits.

Why Feeling Beats Logic

When a customer arrives on your site, they’re going to instantly feel a certain way about it. If they’re looking to purchase something, they may very well decide to make that purchase or not within a couple of seconds, without even having read anything about your products. Most of them will use thinking and logic after, to support the decision they’ve already made based on how they feel about your business.

What’s more important than anything else, is that your website conveys a feeling that puts your customer in the mood to do whatever it is you want them to do.

Product specifications, direct and indirect benefits, price, etc…it all matters.  But it’s all secondary to the way someone feels when they land on your web page. If they don’t get a good feeling, if you don’t put them in the mood to buy, it doesn’t matter how good your product or sales copy is…most customers aren’t going to buy from you.

This year we focused on reducing the amount of product specification and benefit language in our marketing, and focused instead on the feeling people will have when they use our products. And our conversions are up nearly 30% over last year.

For us, getting hit by Panda and losing 60% of our traffic caused us to try to improve the aspects of our business we could improve. And it worked, extremely well. Whether your site has been penalized or not, make sure you’ve got a written vision based on what you want your customers to feel, and make every page of your site convey that feeling. You’ll be glad you did.

A Final Note

Despite our substantial increase in visitor engagement signals, our e-commerce site was hit again by Panda 20 (what most SEOs are calling the latest one) after having recovered this past March from Panda 1.0. This is yet another indication to me that Panda is not primarily concerned with what’s good for visitors. Our bounce rate is just under 20%, with ~6 pages viewed per visitor, and just over a 4 minute time-on-site average. This highlights the need for multiple traffic sources and promotional methods even for high quality businesses, in addition to keeping fixed expenses as low as possible.

How To Add an RSS Feed Page To WordPress

Here’s a simple tutorial on creating a page where your visitors can subscribe to your blog via email or feed readers, like this.

If you’ve got a WordPress site, you’ve already got RSS functionality built in.  However, it’s probably not set up so people can easily subscribe via their favorite feed reader, and definitely not set up to allow visitors to subscribe via email.  To create your own page with options, first, set up or log into your Google account on their FeedBurner page:

FeedBurner

After you’ve added your feed URL, which with WordPress should be http://www.yoursite.com/blog/feed/, you’ll be taken to a page with tabs at the top.  Click on the Optimize tab, and then on the SmartFeed link:

SmartFeed

Go ahead and activate that, as it will properly format your feed. Do the same for the BrowserFriendly and FeedFlare sections, adding social networking links with FeedFlare.

Now click on the Publicize tab, and Email Subscriptions in the left sidebar. This is what you’ll get:

Feedburner Email Subscribe

The code you see in the box right above this text is what you’ll need to copy and paste into your new WordPress Feed page. That will create the form where visitors can enter their email address to subscribe to your feed.  Go ahead and copy that code and paste it into a Notepad or TextEdit page to use in just a moment.

Click on the Publicize tab again, and then click on the friendly graphic link in the middle of the page. Here’s where you’ll end up:

Feedburner Subscription Options

Notice I’ve got the radio button next to the Google Reader option selected.  The HTML code is displayed at the bottom of the page, so insert that image and link so visitors can subscribe with Google Reader.  Select each of the options you’d like to offer on your feed page, copy the code, and paste it below the code for the email subscribe box in your Notepad or TextEdit document.

Making Your Page

Now it’s time to make your page.  In the WordPress admin area, create a new page.  I’ve named mine “Subscribe to the Hungry Piranha Blog”.  Click on the HTML tab and paste in the code you copied from Google’s FeedBurner pages.  Add a couple of headings like I did on my page, a bit of explanation, and your page is ready to go.

Adding Your Link

Depending on where you’ve got your subscribe link, you’ll want to change it to your new page rather than the default WordPress link to YourSite.com/blog/feed/.  My link is in the header.php file, so I simply went in and changed it to the newly created page.

Using Image Sliders to Improve Design & Conversions

Just a short post here on something I’ve been working on recently: clickable image sliders. These are images, usually in the form of banners, that change or rotate either automatically or when a visitor clicks a button to advance, go back, or select an image/banner. Many big brand sites use image sliders to showcase product classes, new items, and promotions. I’ve never used them before, but decided to give them a go on a new site. After using them on one site, I’ve decided to add them to several of our sites. They really are a fantastic way to highlight different content, products, or promotions all on the same page. Often times your visitors will arrive on a page looking for something slightly different. Rather than having some of them click back and leave, these sliders offer a way to appeal to different needs without the user having to scroll down or search through your menus. They also make your site appear more professional.

To see an example implementation, take a look at our home page where I’ve just added 3 image slider banners. Notice the images are clickable, so visitors can go right to the content they find most appealing.

There are plenty image slider plugins for WordPress, but since I prefer to use static sites whenever possible, it was a bit of a chore to find an easy to implement solution. But I did find a really good one, and it’s extremely easy to implement. I’m using code provided by slidesjs.com.  For the home page of this site I chose the ‘standard’ version. The only real modification I made was to remove the forward and back buttons. I prefer to have the images take up the full width of the center content area, set them to advance automatically, and allow visitors to move back and forth via the little bubbles beneath the images.

All you need to do to get the sliders up and running is copy and paste the html code on the page you’d like the slider to appear on, put necessary CSS code (again you can simply copy and paste this) in your style sheet, and reference the javascript files in the head section of your page code. I copied the js files and am hosting them myself, as I feel that’s safer than assuming they’re going to stay where they’re referenced on the slidesjs.com site.

Image sliders make sense for a great variety of sites, from info sites where you’d like to highlight useful pages or featured content, to e-commerce sites where you may want to direct a visitor to a product class or catalog for download. And although they’re typically used with images only, you can use any HTML code, so it’s no problem to have text or text + images instead.

Hopefully you’ll find them as useful as I have.  :)