Michael Sunarlim

Web Developer, Producer and Internet Marketer

Quick Recap of 2011

The final days of the year have finally come. Not to be shy, but I feel 2011 is a very productive year and the team. Let me do a quick recap:

Bluelounge

We launched 7 products this year, should be more if we consider the soft goods as multiple items! All of them are amazing too, but MiniDock and Milo got the most attention. In case you have not heard of them, then you should check them out. My personal favorite is the Bonobo iPad Sleeve. Here are the complete list:

On top of those awesome products, we also launched EU Web Store. I cannot really provide you the link as it was designed to automatically detect your IP address and direct you to the correct store based on the region you are in. You can switch between stores from this page. Our EU Store only ships to 36 countries within Europe, while the US and Global customers will still be shipped from our LA warehouse.

Web Projects

Outside of Bluelounge, I was also given the opportunities to work on few exciting projects:

Sorry to keep this short in the end. Many stuff could be talked about here, but since this is the last day of the year I should enjoy it more instead of still stuck in front of my laptop. Next year I will try to post more often, the determination from a year before which I totally failed :) Happy New Year!

Measuring Your Web Campaign Performance

Whether your doing Adwords campaign, email blast, or online media partnership, you need to know if the time and money you have spent will give the results that you are expecting. The type of results may vary, depending on your objectives. Some want to get direct conversions to their online stores, others are happy to get a spike in their websites traffic and brand recognition.

Preparations

Whatever your target is, you need to make sure that you have prepared most of the aspects so you can measure or benchmark the campaign performance. Here are a few tips I can share in order to do so:

Prepare your analytics code

Google Analytics Logo

In this case and most of my posts, I am going to refer to Google Analytics since it is the most popular analytics tool and free. I am not going to explain the steps as I am sure most of you already know how, but make sure you have set the following settings correctly:

  • time zone
  • e-commerce and currency
  • default page

Those settings are to make sure you will get the most accurate data when Google is collecting your visitors’ information.

Set your analytics goals

Within your Analytics panel, set your goals and test to make sure they work and trackable. If you run and online store, make sure the analytics code is working so you can track the transactions accurately. Most modern shopping cart systems have modules that are optimized to integrate nicely with Google Analytics.

If possible, create custom links for your campaign

You can track the source of traffic in most cases within needing any additional preparations, but you will have more advantages if you can set unique links used within your campaign. In case the system you use does not support auto-URL generation for this purpose, you can always use Google Analytics’s URL Builder Tool to generate them manually.

Getting the results

Once you are done with the preparations, then you are good to go with your campaign. Schedule the most effective time, get it started, then sit down and wait. I would suggest to wait at least 24 hours after the campaign has ended before checking on the results, unless you do not need the most accurate data yet.

So what are the things that we need to look at?

Increase in traffic

Your campaign would be considered a total failure if you do not get any extra number of visits during your campaign period. If you run it with a web marketing partner, you may want to compare the traffic they promised to drive with the actual one you are getting. Let’s say they claimed to reach 100,000 users, then you should expect at least to get additional 5,000 new visitors (5% click-through rate) from their network.

Google Analytics graph

Checking the number of visits is not enough though. The following dimensions are also important to measure if you have reached to the right market:

  • Pages/Visit – indicates the level of interest to your company/brand/website
  • Average Time on Site – shows the level of interest to your specific product/page
  • Bounce Rate – lower means a good thing

Number of transactions and revenue

If you run an online store, this is most likely the most important–if not the only–thing that counts and you would expect to get as high of numbers as possible here. A successful e-commerce campaign means you gain more in revenue than what you spent, although it is not always the case. More interesting details can quickly be drawn from these values:

  • Conversion Rate – high conversion rate means you are hitting the right market
  • Average Transaction Value – are you getting higher or lower average transaction compared to your regular traffic?
  • Average Number of Products per Transaction – good to know if your products can encourage sale between each other

For those of you who offer a special coupon code for the campaign, that can be the easiest and more “real time” method to measure the results. Just look from your shopping cart system for orders that use XXXX code, those are conversion from your campaign.

Check the results from other goals/targets

Getting direct web sales are not the only score you can use, you might not even have an online store to begin with. So what else to check, what are the valuable items can be extracted? Well here are few, just to give you an idea:

  • Newsletter sign up – consider visitors who sign up to your newletter as your “warm prospect”; they are definitely interested with what you are selling, but maybe the timing is just not right
  • Social media sharing – this actually can generate more traffic if your visitors decide to share the link to whatever social platform they like, whether it be Twitter, Facebook, Reddit, etc
  • Contact you – if you are offering a service instead of product, then getting contacted denotes a successful conversion; even if you are selling a product, a potential customer inquiry is a very positive thing

There are still many things to talk about based on this topic and have probably been covered by many blogs and books. I am just writing the short and practical version for small-medium business. I think I am going to update this post often, should I get many interests from you.

Favorite Safari Extensions

In November 2010, Apple officially introduced extensions to their popular browser Safari. It was one of the most requested features and with the release of version 5 of the browser, customers were finally able to add functionalities to their favorite browser. Apple provides Safari Extensions Gallery for users to browse  extensions which can be easily installed in a few clicks.

Here are my top 5 extensions that I use regularly:

Delicious

Delicious

If you use Delicious bookmarking service, then you need to install this immediately. This plugin by jeveaux.com will add a button on your toolbar and with a single click, you can save web page you want to bookmark. This plugin is hosted on Github and can be downloaded here.

ScribeFire

ScribeFire

ScribeFire is an extension for the Mozilla Firefox Web browser, Google Chrome Web browser, Opera Web Browser, and Apple Safari Web browser that allows you to easily post to all of your blogs. Once you have set up your blog properly, you can will be able to start writing and posting right on your browser without requiring to open and login to your blog admin panel. Pretty cool.

Awesome Screenshot

Awesome Screenshot

With Firefox, you can find dozens of web capture plugins. In Safari, Awesome Screenshot is one of the best and most simple one. It also gives you extra features like to annotate and share.

1Password

1Password

While it does not fall as a pure Safari extension, it is only one of the so many awesome features from 1Password, it is almost impossible to pass a single day without using it. 1Password itself is a cross-platform password manager and generator. Currently it is available for Mac, PC, iOS and Android. It also works with DropBox to make it super easy for you to sync across different machines.

ScribeFire: Fire up your blogging

The year is coming to an end. How many real posts I published in 2010? Only about ten, and the last one was almost 7 months ago. Where is my motivation to publish more stuff? Well now I just found a new web service / browser extension called Scribefire. The Idea is I can publish post more easily right from my browser and start writing right that minute. Will this encourage me to post more often? We’ll see….

By the way, ScribeFire works in Firefox, Chrome and Safari.

My Favorite Coda Plug-Ins

Coda

Panic Coda

I have to admit it, Coda by Panic is really one of the best Mac apps ever. Not only it has finally given me the better direction in developing HTML/CSS correctly, it also makes it more fun! It is quite a shame that Panic has not been updating it for a few months now, but that does not make it less powerful.

Why? Because Coda supports third-party plug-ins to enable you add more functions on top on the ones that come with the application itself. No, those plug-ins will not automatically create a website for you.. Consider them like as WordPress plug-ins or widgets, simple and small functions but if collected and used properly can save you hours of development time.

You can get a long list of the officially supported plugin-ins on Panic’s Developer section. To help you in choosing the right ones, here are my favorites:

  • Lorem Ipsum
    Generate 1 to 5 paragraphs of Lorem Ipsum placeholder text.
  • Remove Trailing Whitespace
    Trims whitespace from the ends of lines.
  • Replace Special Characters
    Converts almost all special symbols and characters into HTML entities.
  • TEA for Coda (not listed on Panic’s website)
    Text Editor Actions for Coda (formerly “Textmate Emulation Actions”, and always TEA for short) is a plugin that emulates some of my favorite Textmate HTML.bundle actions.
  • CSS Tools
    Performs automatic reformatting of CSS.

If you have your own favorites, please feel free to share them below.

Tools to Build Your Contact Form in Less Than 5 Minutes

When you go to a really cool website and want to contact the person or company who runs it, what is your most preferred method? Email, instant message, social media (Twitter, Facebook), or via the contact form? Either one is good, but for most people contact form would probably the most convenient one.

Few web developers hesitate to include one because they think it will take too much time or effort to make it work, specially if they do not have any server-side programming basics. That is no longer the case, these tools will help you build nice contact form for any project quickly:

Contactable

Contactable is a jQuery plugin designed to make contact/feedback forms simpler and more accessible. This plugin will enable you to create a contact form on any page of a site with minimal effort. I also made a small modification of this great plugin to appear on the right side of the page instead the left, you can check it here.

Wufoo

Wufoo is one of the easiest form builder around. It helps you create contact forms, online surveys, and invitations so you can collect the data, registrations and online payments you need without writing a single line of code. Its free account is more than enough to create basic online forms, but you can easily upgrade to premium plans to fit your needs.

pForm

Similar with Wufoo, pForm comes with an online form builder with simple interface that will help you build forms of any kind. Integration with your existing web page might be a bit more complicated than Wufoo, but still more simple than building a custom form yourself.

MachForm

MachForm is developed by the same company as pForm. It is the server installable version. You have more options like: receive submission and save to database, send entries to email, send autoresponder email, validate inputs, and lot more.

Introducing yomire

yomire

Yomire builds useful components and templates exclusively on the envato network based on beautiful and functional designs, implemented with great care to optimise efficiency and usability.

Our Aim

Be the best seller on the envato network by:

  • timely response to user comments and questions.
  • putting up all of our items’ documentations online as well as offline to allow buyers easy reference to them at all times. Potential customers will also no doubt find this feature useful as they will be able to familiarize themselves with an item’s customisation potential prior to committing to buy.
  • actively update the FAQ section for all our items based on real user comments and questions, whenever appropriate.
  • introduce a section that will always be present in each items’ documentation: Version History. The Version History section will document updates and what each one entail.
  • build a blog containing all new updates of existing items and new item releases.
  • be an active participant in social network sites that we are a member of. Currently, this includes twitter and facebook.

Design Style

  • clean & sophisticated.
  • neutral – We want users to be able to incorporate our components into their exisiting websites or suit their company with very minimal customisation possible.

Coding and Development

  • asset-free – When we create flash components for activeden, we always try not to use assets whenever possible. For buyers, this means more flexible customisation from XML , light resulting SWF file and easier further customisation through the use of actionscript, if required.
  • OOP (Object Oriented Programming) using classes which means highly organised source codes and easy updating.
  • efficient and re-usable classes; in most cases buyers can take our custom utility classes, like scrollers, simple shapes drawing, etc, from our templates and incorporate them into their own projects.

Check out our profile on ActiveDen.

Contactable jQuery Plugin on The Right Side of Page

Contactable is a great jQuery plugin by Philip Beel to include a nice sliding contact form, even if you only understand a tiny bit of jQuery and PHP.

I needed to use this plugin for one of my project, but I want it to be on the right side of the page instead of left. In order to do this, you need to change a small portion of the CSS and JS files. No special skills required. Still, you can save your time since you can download it directly below:

» click here to download Contactable on right side of page «

All credits go to Philip Beel. Instructions and demo can be checked directly on this plugin’s homepage.

Upgrading Interspire Shopping Cart Using SSH

Interspire Shopping Cart (ISC) is one of the best self-hosted e-commerce system in the market. It has most of the features that you will ever need. Another big plus with ISC is it is still actively developed. Interspire regularly releases minor updates every few months to fix some bugs and a major one in 6-12 months.

One inconvenient thing that might prevent you to do an update immediately is it cannot auto-update (WordPress style), so you need to manually reupload the necessary files. Official documentation from Interspire to upgrade your ISC installation can be found here.

Following the instructions there is the safest method for sure. But if you do not have the super fast connection via FTP to your server, overwriting the files one by one might take at least a few hours. So I tried to find with a faster way with the help of SSH. Let’s start.

Preparation

Make sure you have done the followings:

  1. Backup your store’s database and files.
  2. Read the changelog.txt file from the latest update to know which template files that need to be updated.
  3. If you changed or customized the system files, you might want to reprogrammed some of the files first.

Step 1: Rename your current ISC folder

By default, the store folder is named ‘shoppingcart’. You can rename it to ‘shoppingcart-old’. If it is on your root folder, you can create a new folder and move everything there.

Step 2: Upload and unzip the update file

You can use FTP to do this. Then using SSH, unzip the file:

unzip Interspire_Shopping_Cart_(Edition)-5.x.x.zip

The folder can be renamed after unzipped.

Step 3: Copy product images folder

This folder contains all the product images that you have uploaded, so it is very important to keep it intact. First you need to rename the ‘product_images’ folder from the new system folder. Then go to your old store folder and copy the ‘product_images’ folder:

cp -r product_images ../shoppingcart/

Step 4: Copy the template folder (if you use custom theme)

Go to ‘templates’ subfolder, find your custom template name:

cp -r CustomThemeFolder ../../shoppingcart/templates/

Step 5: Finalize the upgrade

From here, ISC upgrade script will take care of the rest. Just open your ISC admin URL, then it will do the database upgrade and all necessary steps.

Done.

Online Portfolio Applications

Either you work in creative or multimedia industry, you probably want to showcase your work online. If not, then I suggest you to. You usually get discouraged when you need to set up the website for it, you would feel that you need to spend a lot of money to have someone to build or design it for you. That is if you are not familiar with web development.

Luckily many free or premium applications are now available for you to choose to quickly create your online portfolio and resume, with easy-to-use interface to manage and regularly update them. Here is a shortlist of ones that I found to be really nice and are packed with features that you will mostly need:

Carbonmade

Carbonmade is one of the most popular online portfolio services with many features. You can create a free account for up to 5 projects with 35 images. Whoo! pro plan is available for $12/month, where you get 50 projects with up to 500 hi-res images and 10 high quality videos.

Carbonmade website

Coroflot

Coroflot is focused for creative industry with a very active job board. Based on their About page, it is hosting portfolios of over 150,000 creative professionals and students.

Coroflot website

Raveal

Raveal is another one that you can consider. It is oriented on the social media and search engines parts to make your names easily heard by the rest of the world. Its Free plan gives 100MB of storage, while the Professional plan provides 1GB storage with some additional features.

Raveal website

Need more functions or different look? Then installing WordPress with a theme optimized for portfolio might be the best and easiest solution. I will save that for different post.