Custom post types add a level of flexibility to WordPress that makes this open-source Web development platform more useful on many levels. Whenever I have been faced with a Web-based task, especially one that involves organizing information, the first thing I do is examine WordPress to determine if it can handle the job. It usually can.

Image Source

As an Internet marketer and analyst, I need to be able to organize online marketing campaigns in a way that is trackable in Google Analytics. This is the perfect task for WordPress custom post types.

In this article, we’ll explain how to create a WordPress plugin that enables you to organize Internet marketing campaigns using trackable URLs, shortened versions of those URLs, and trackable QR codes that you can also use for offline marketing activities.

We’ll show you how to create this plugin in a way that maximizes ease of use and functionality. If you have other methods that you have found useful, please share them in the comments. Also, let’s remember that we are standing on the shoulders of WordPress developers who have laid the foundation for easier coding.

Here are the criteria for our custom post type plugin:

• It must provide a form in which users can specify a landing page to be tracked, the anchor text or content, the term (if this link is a PPC ad), and any additional information about this link.
• It must provide three custom taxonomy types, so that users can select the URL variables for source, medium and campaign name. This is a taxonomy type because they will be reusable across campaigns and posts.
• It must be organizable in the admin area and be displayed in the user interface.
• The output must include a Google Analytics campaign-trackable URL, the information about the URL in human-readable format, a shortened version of the URL using a URL shortener, and a QR code of the shortened URL.

The File Structure

This plugin will use three files. To set up the structure, create a plugin folder named campaign-tracker. Inside the campaign-tracker folder, create the following three PHP files:

• campaign-tracker.php
• ga-functions.php
• campaign-template.php

After you have created the files, we are ready to start adding the code.

The Plugin File

The main plugin file will be campaign-tracker.php. The content of this file will begin the standard way, by providing WordPress with the information that it needs to recognize it is as plugin. We then dive into setting up the CampaignTracker10 class and functions. We will set up our campaign custom post type and register the taxonomies that we will need. We will also initiate our admin interface.

   <?php
   /*
   Plugin Name: Campaign Tracking 1.0
   Plugin URI: http://www.convergeconsulting.org
   Description: Google Analytics Campaign Tracking system for WordPress 3.0 and above.
   Author: Joshua Dodson
   Version: 1.0
   Author URI: http://www.convergeconsulting.org
   */

   // Include the ga-functions.php helper functions
   include_once('ga-functions.php');

   if(!class_exists('CampaignTracker10'))
   {

      class CampaignTracker10 {

         var $meta_fields = array("gaca10-gaurl","gaca10-gaterm","gaca10-gacontent","gaca10-gadescription");

         // This function will create the custom post type. Thanks to Konstantin Kovshenin's example for additional examples of how to construct custom post types (http://kovshenin.com/2010/03/custom-post-types-in-wordpress-3-0-2089/), which inspired much of this.
         function __construct(){
            // Register custom post types
            register_post_type('campaign', array(
            'label' => _x('Campaigns','campaigns label'), // We're labeling the custom posts as Campaigns and also accounting for gettext appropriately
            'singular_label' => _x('Campaign','campaign singular label'), // Each post will be called a Campaign
            'public' => true, // These will be public
            'show_ui' => true, // Show the UI in admin panel
            '_builtin' => false, // This is a custom post type, not a built in post type
            '_edit_link' => 'post.php?post=%d',
            'capability_type' => 'post',
            'hierarchical' => false,
            'rewrite' => array("slug" => "campaign"), // This is for the permalinks
            'query_var' => "campaign", // This goes to the WP_Query schema
            'supports' => array('title'/* We only need the default title field, but we could use others such as 'author', 'excerpt', 'editor' ,'custom-fields'*/)
            ));

            add_filter("manage_edit-campaign_columns", array(&$this, "edit_columns"));
            add_action("manage_posts_custom_column", array(&$this, "custom_columns"));

            // Register custom taxonomies gasource (for the Campaign Source), gamedium (for the Campaign Medium), and ganame (for Campaign Name)
            // Campaign Source
            register_taxonomy("gasource", array("campaign"), array("hierarchical" => true, "label" => _x( 'Campaign Sources', 'campaign sources taxonomy label' ), "singular_label" => "Campaign Source", "rewrite" => true));
            // Campaign Medium
            register_taxonomy("gamedium", array("campaign"), array("hierarchical" => true, "label" => _x( 'Campaign Mediums', 'campaign mediums taxonomy label' ), "singular_label" => "Campaign Medium", "rewrite" => true));
            // Campaign Name
            register_taxonomy("ganame", array("campaign"), array("hierarchical" => true, "label" => _x( 'Campaign Names', 'campaign names taxonomy label' ), "singular_label" => "Campaign Name", "rewrite" => true));

            add_action("admin_init", array(&$this, "admin_init"));
            add_action("template_redirect", array(&$this, 'template_redirect'));

            add_action("wp_insert_post", array(&$this, "wp_insert_post"), 10, 2);

         }

Let’s give the columns on the admin screen some headings:

   function edit_columns($columns)
   {
      $columns = array(
      'cb' => '<input type="checkbox" />',
      'title' => _x('Campaign Title','campaign title label for edit columns'),
      'gaca10_ganame' => _x('Campaign Name','campaign name label for edit columns'),
      'gaca10_gasources' => _x('Campaign Source','campaign source label for edit columns'),
      'gaca10_gasmedium' => _x('Campaign Medium','campaign medium label for edit columns'),
      );
      return $columns;
   }

Let’s specify which columns we would like to show up on the admin screen for this custom post type. We’ll have columns for campaign source, medium and name, in addition to the post’s title.

   function custom_columns($column)
   {
      global $post;
      switch ($column)
      {
         // The campaign source
         case "gaca10_gasources":
         $gasources = get_the_terms(0, "gasource");
         if ( $gasources && ! is_wp_error( $gasources ) ) :
         $gasources_html = array();
         foreach ($gasources as $gasource)
         array_push($gasources_html, '<a href="' . get_term_link($gasource->slug, "gasource") . '">' . $gasource->name . '</a>');

         echo implode($gasources_html, ", ");
         endif;
         break;

         // The campaign medium
         case "gaca10_gasmedium":
         $gamediums = get_the_terms(0, "gamedium");
         if ( $gamediums && ! is_wp_error( $gamediums ) ) :
         $gamediums_html = array();
         foreach ($gamediums as $gamedium)
         array_push($gamediums_html, '<a href="' . get_term_link($gamedium->slug, "gamedium") . '">' . $gamedium->name . '</a>');

         echo implode($gamediums_html, ", ");
         endif;
         break;

         // The campaign name
         case "gaca10_ganame":
         $ganames = get_the_terms(0, "ganame");
         if ( $ganames && ! is_wp_error( $ganames ) ) :
         $ganames_html = array();
         foreach ($ganames as $ganame)
         array_push($ganames_html, '<a href="' . get_term_link($ganame->slug, "ganame") . '">' . $ganame->name . '</a>');

         echo implode($ganames_html, ", ");
         endif;
         break;
      }
   }

Once our columns are set up appropriately, we should see the following columns (note that this example is with one campaign already added):

The next section enables us to specify which template we would like to use to display this custom post type. We will be using the campaign-template.php template:

   function template_redirect()
   {
      global $wp;

      // If the post type is set and is campaign…
      if (isset($wp->query_vars["post_type"])) {
         if ($wp->query_vars["post_type"] == "campaign")
         {
            // Then use the campaign-template.php file from this plugin directory
            include WP_PLUGIN_DIR.'/campaign-tracker/campaign-template.php';
            die();
         }
      }
   }

If a post is inserted or updated, then loop through the array and update or add the post’s meta data.

   function wp_insert_post($post_id, $post = null)
   {
      if ($post->post_type == "campaign")
      {
         foreach ($this->meta_fields as $key)
         {
            $value = $_POST[$key];
            if (empty($value))
            {
               delete_post_meta($post_id, $key);
               continue;
            }

            if (!is_array($value))
            {
               if (!update_post_meta($post_id, $key, $value))
               {
                  add_post_meta($post_id, $key, $value);
               }
            }
            else
            {
               delete_post_meta($post_id, $key);

               foreach ($value as $entry){
                  add_post_meta($post_id, $key, $entry);
               }
            }
         }
      }
   }

With the following function, we can add custom meta boxes for the admin screen where we edit the campaign:

   function admin_init()
   {
      // Add custom meta boxes for the edit campaign screen
      add_meta_box("gaca10-meta", "Campaign Information", array(&$this, "meta_options"), "campaign", "normal", "core");
   }

The following function is for the admin post meta contents. This lets us create the form in which we specify some of the variables for our trackable URL (except for the taxonomies). It also provides a read-only field that shows the shortened URL after the URL variables have been saved.

   function meta_options()
   {
      global $post;
      $custom = get_post_custom($post->ID);
      if($custom["gaca10-gaurl"][0]){
         $gaurl = $custom["gaca10-gaurl"][0];
      }
      else{ $gaurl = ''; }
      if($custom["gaca10-gaterm"][0]) {
         $gaterm = $custom["gaca10-gaterm"][0];
      }
      else { $gaterm = ''; }
      if ($custom["gaca10-gacontent"][0]) {
         $gacontent = $custom["gaca10-gacontent"][0];
      }
      else { $gacontent = ''; }
      if ($custom["gaca10-gadescription"][0]) {
         $gadescription = $custom["gaca10-gadescription"][0];
      }
      else { $gadescription = ''; }

      $url = trackable_url();
      if ($custom["campaign_tinyurl"][0]) {
         if($gaurl == '') { $shortenedurl = ''; }
         else{ $shortenedurl = create_tiny_url($url); }
      }

      ?>
      <label><?php _ex('Website URL:','website url label'); ?></label><input name="gaca10-gaurl" value="<?php echo $gaurl; ?>" /><br />
      <em><?php _ex('(e.g., http://www.google.com)','website url example'); ?></em><br /><br />

      <label><?php _ex('Campaign Term:','campaign term label'); ?></label><input name="gaca10-gaterm" value="<?php echo $gaterm; ?>" /><br />
      <em><?php _ex('(identify the paid keywords)','campaign term information'); ?></em><br /><br />
      <label><?php _ex('Campaign Content:','campaign content label'); ?></label><input name="gaca10-gacontent" value="<?php echo $gacontent; ?>" /><br />
      <em><?php _ex('(use to differentiate ads)','campaign content information'); ?></em><br /><br />

      <label><?php _ex('Campaign Description:','campaign description label'); ?></label><input name="gaca10-gadescription" value="<?php echo $gadescription; ?>" /><br />
      <em><?php _ex('(use to remind yourself about this specific link)','campaign description information'); ?></em><br /><br />

      <label><?php _ex('Shortened URL:','shortened URL label'); ?></label><input name="gaca10-gashortened-url" value="<?php echo $shortenedurl; ?>" readonly="readonly" /><br />

      <?php
   }
}

}

Here is how the “Add/Edit Campaign” screen will appear:

If CampaignTracker10 exists, then we initiate the plugin:

   if(class_exists('CampaignTracker10')){

      // Initiate the plugin
      add_action("init", "CampaignTracker10Init");

      function CampaignTracker10Init() {
         global $gaca10;
         $gaca10 = new CampaignTracker10();

      }
   }

Combine these functions into the campaign-tracker.php file.

The following taxonomy examples should also be on the “Add/Edit Campaign” screen after everything has been added. Here is the “Campaign Names” taxonomy:

Here is the “Campaign Mediums” taxonomy:

Here is the “Campaign Sources” taxonomy:

Similar to how traditional post categories are set up, you can create new categories or select previous categories.

A note on usage: When you begin to use the system, try to select only one category each from name, source and medium. One category per taxonomy type will prove to be most useful in your actual analysis in Google Analytics. So, as a general rule: one name, one source and one medium per URL.

The Helpful Display Functions

Each of the functions in this section is part of the ga-functions.php file. The functions have been separated from the other functions in order to keep the display functions together.

Our file will begin with the formatted_utm_taxonomy_terms function, which will display a URL-friendly version of the taxonomy terms:

   <?php
   /* Some Helpful Display Functions */

   function formatted_utm_taxonomy_terms($the_term) {
      global $post;
      $post_terms = get_the_terms( $post->ID, $the_term );
      if ( $post_terms && ! is_wp_error( $post_terms ) ) :
      $encoded_terms = array();
      foreach ($post_terms as $term ) {
         if(!$encoded_terms[] = $term->slug){
            $encoded_terms[] = urlencode($term->name);
         }
      }
      $return_terms = implode('+',$encoded_terms);
      return $return_terms;
      endif;
   }

The trackable_url function generates the trackable URL from the fields on the admin screen as well as the taxonomies. This appends the appropriate tracking criteria to the URL so that Google Analytics can use the variables and provide information based on these specific variables. To do this, we will use the add_query_arg WordPress function.

   function trackable_url() {
      global $post;
      $custom = get_post_custom($post->ID);

      // the url
      if ($custom["gaca10-gaurl"][0]) {
         $gaurl = $custom["gaca10-gaurl"][0];
      }
      else { $gaurl = ''; }

      // the term(s)
      if ($gaterm = $custom["gaca10-gaterm"][0]) {
         $gaterm = $custom["gaca10-gaterm"][0];
         $gaterm = urlencode($gaterm);
      }
      else { $gaterm = ''; }

      // the content(s)
      if ($custom["gaca10-gacontent"][0]) {
         $gacontent = $custom["gaca10-gacontent"][0];
         $gacontent = urlencode($gacontent);
      }
      else { $gacontent = ''; }
      $arr_params = array ( 'utm_campaign' => formatted_utm_taxonomy_terms('ganame'), 'utm_source' => formatted_utm_taxonomy_terms('gasource'), 'utm_medium' => formatted_utm_taxonomy_terms('gamedium'), 'utm_term' => $gaterm, 'utm_content' => $gacontent);
      return add_query_arg( $arr_params, $gaurl );

   }

The following functions take the campaign-trackable URL and shortens it with TinyURL. This method uses wp_remote_get to generate the shortened URL. It then saves the shortened URL to the post’s meta data when a post is saved. The trackable_url_tiny function enables us to retrieve the shortened URL in the template.

   // Save the shortened trackable URL to the post meta
   function save_shortened_meta($post_ID) {
      $url = trackable_url();
      $shortened_url = create_tiny_url($url);
      update_post_meta($post_ID, "campaign_tinyurl", $shortened_url);
      return $post_ID;
   }

   // Add an action to save it when the post is saved.
   add_action('save_post', 'save_shortened_meta');

   // Retrieve the shortened URL from post meta
   function trackable_url_tiny($url = null, $post_ID) {
      global $post;
      $custom_fields = get_post_custom($post->ID);
      $campaign_tinyurl = $custom_fields['campaign_tinyurl'][0];
      return $campaign_tinyurl;

      return $post_ID;
   }

   // Create shortened trackable URL through the wp_remote_get function
   function create_tiny_url($strURL) {
      $tinyurl = wp_remote_get( 'http://tinyurl.com/api-create.php?url='.$strURL );
      if( is_wp_error( $response ) ) {
         return 'Something went wrong!';
      } else {
         return $tinyurl['body'];

      }
   }

The trackable_url_report function is what provides the human-readable version of the variables. These are broken out by each section. The landing page, campaign name, source, medium, terms and content are all separated and displayed individually if they exist.

   function trackable_url_report() {
      global $post;
      $custom = get_post_custom($post->ID);

      // get the url
      if ($custom["gaca10-gaurl"][0]) {
         $gaurl = $custom["gaca10-gaurl"][0];
      }
      else { $gaurl = ''; }
      // get the term(s)
      if ($gaterm = $custom["gaca10-gaterm"][0]) {
         $gaterm = $custom["gaca10-gaterm"][0];
      }
      else { $gaterm = ''; }

      // get the content(s)
      if ($custom["gaca10-gacontent"][0]) {
         $gacontent = $custom["gaca10-gacontent"][0];
      }
      else { $gacontent = ''; }

      // The Landing page
      $url_info ='';
      $url_info.= "<strong>". _x( 'Landing Page:','landing page label') . "</strong> ";
      $url_info.= $gaurl;
      $url_info.= "<br />";

      // The campaign name
      $url_info.= "<strong>". _x( 'Campaign:','campaign label') . "</strong> ";
      $url_info.= formatted_utm_taxonomy_terms('ganame');
      $url_info.= "<br />";

      // The Source
      $url_info.= "<strong>". _x( 'Source:','source label') . "</strong> ";
      $url_info.= formatted_utm_taxonomy_terms('gasource');
      $url_info.= "<br />";

      // The medium
      $url_info.= "<strong>". _x( 'Medium:','medium label') . "</strong> ";
      $url_info.= formatted_utm_taxonomy_terms('gamedium');
      $url_info.= "<br />";

      // The term
      $url_info.= "<strong>". _x( 'Term:','term label') . "</strong> ";
      $url_info.= $gaterm;
      $url_info.= "<br />";

      // The content
      $url_info.= "<strong>". _x( 'Content:','content label') . "</strong> ";
      $url_info.= $gacontent;
      $url_info.= "<br />";

      return $url_info;
   }

The display_description function displays the description of the URL. We’ve broken this part out here in order to keep all of the pieces that are specific to the URL together. This is also the last function in the ga-functions.php file.

   function display_description(){
      global $post;
      $custom = get_post_custom($post->ID);
      $description = $custom["gaca10-gadescription"][0];
      return $description;
   }

   ?>

Combine these functions into the ga-functions.php file, and then we can move onto creating the template file.

The Template File

The final file that we will use to generate the view of the trackable URL is campaign-template.php. You will remember from the campaign-tracker.php file that we have a call in the template_redirect() function to redirect users to this template when viewing the custom post type of campaigns.

For display purposes, we will use the single.php file from the current default WordPress theme, TwentyEleven. You can, of course, use another theme and different styles.

First, we include the ga-functions.php file so that we can use some of our display functions. The campaign template also uses the Google Charts API to generate the QR code.

The following code will do all of the heavy lifting to display our campaign-trackable URL, the information about the URL, the shortened URL and the QR code. It will also allow us to edit the post if we need to change a variable. Simply drop this code into the loop.

   <h1 class="entry-title"><?php the_title() ?></h1><br />

   <?php
   echo "<strong>". _x( 'Description:','description label') . "</strong> ";
   echo display_description();
   echo "<br />";
   echo trackable_url_report();
   echo "<br />";
   echo "<strong>". _x('Trackable URL:','trackable URL label') . "</strong> ";
   echo "<a href=".trackable_url()." target='_blank'>".trackable_url()."</a><br />";

   echo "<strong>" . _x('Shortened Trackable URL:','shortened trackable URL label') . "</strong> ";
   echo "<a href=".trackable_url_tiny()." target='_blank'>".trackable_url_tiny()."</a><br />";
   ?>

   <br />
   <img src="https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl=<?php trackable_url_tiny(); ?>" /><br />
   <?php edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '</span>' ); ?>

When we combine the code, the campaign template will be as follows:

   <?php
   /**
   * The Template for displaying all single posts.
   *
   * @package WordPress
   * @subpackage Twenty_Eleven
   * @since Twenty Eleven 1.0
   */

   // Include the ga-functions.php file so that we can easily display the results
   include_once('ga-functions.php');

   get_header(); ?>

   <div id="primary">
   <div id="content" role="main">

   <?php while ( have_posts() ) : the_post(); ?>

   <nav id="nav-single">
   <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3>
   <span class="nav-previous"><?php previous_post_link( '%link', __( '<span class="meta-nav">&larr;</span> Previous', 'twentyeleven' ) ); ?></span>
   <span class="nav-next"><?php next_post_link( '%link', __( 'Next <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?></span>
   </nav><!-- #nav-single -->

   <h1 class="entry-title"><?php the_title() ?></h1><br />

   <?php
   echo "<strong>". _x( 'Description:','description label') . "</strong> ";
   echo display_description();
   echo "<br />";
   echo trackable_url_report();
   echo "<br />";
   echo "<strong>". _x('Trackable URL:','trackable URL label') . "</strong> ";
   echo "<a href=".trackable_url()." target='_blank'>".trackable_url()."</a><br />";

   echo "<strong>" . _x('Shortened Trackable URL:','shortened trackable URL label') . "</strong> ";
   echo "<a href=".trackable_url_tiny()." target='_blank'>".trackable_url_tiny()."</a><br />";
   ?>

   <br />
   <img src="https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl=<?php trackable_url_tiny(); ?>" /><br />
   <?php edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '</span>' ); ?>

   <?php comments_template( '', true ); ?>

   <?php endwhile; // end of the loop. ?>

   </div><!-- #content -->
   </div><!-- #primary -->

   <?php get_footer(); ?>

When the template is set up and a campaign has been added, then it should display the following page:

In Conclusion

By using WordPress custom post types in the method described, it is possible to organize marketing campaigns with the relevant Google Analytics campaign-tracking URL, shortened URL and QR code. This makes organizing marketing campaigns much simpler and more effective.

Custom post types make it very easy to set up a system by which to organize content. And we can get creative in how we use custom post types. They can be very useful when organizing content outside of the normal structure of WordPress and other content management systems (i.e. posts, pages, etc.).

Other possible uses of custom post types include the following:

• Manage client contacts,
• Create an employee directory,
• Keep an inventory of items,
• Organize other data.

Resources

You may be interested in the following resources and articles:

• “Custom Post Types in WordPress 3.0,” Konstantin Kovshenin
• “Custom Post Types in WordPress,” Justin Tadlock
• “Creating a TinyURL With TinyURL’s API,” Richard Castera
• “Getting Started With Infographics” (QR Codes with the Google Charts API), Google Code
• “Post Types,” WordPress Codex
• URL Builder tool Google Analytics
• “IQ Lessons,” Google Analytics

(al)

© Joshua Dodson for Smashing Magazine, 2012.

Smashing Magazine Feed

 



 

Part 1 of “Improving the Online Shopping Experience” focused on the upper part of the purchase funnel and on ways to get customers to your website and to find your products. Today, we move down the funnel, looking at ways to enable customers to make the decision to buy and to guide them through the check-out process.

Ways to improve the online shopping experience and to reduce the drop in the purchase funnel. Part 1 covered points 1 to 3.

Enable The Customer To Decide

Inform and reinforce the customer’s buying decisions by offering in-depth product information. The content on product pages should be relevant and should give the customer a virtual feel for the product. Ensure that your website addresses the key elements of a product page, listed below.

• Product name
  Product names should contain relevant keywords to help customers find and identify the right product. For a product such as a book, information about the author and edition is required.
• Images
  Use clear product images, with alternate views. Where appropriate, allow customers to zoom in, see different color swatches, or spin the product around with a 360° view. The product page for a book could get away with an image or two, but apparel should offer most of these options.
• Video
  Static images are not always sufficient to present a product. Video is a good way to showcase complex products that need detailed explanation or a “how to” demonstration.
• Pricing and availability
  Clearly list the price and availability. When products have variations (for example, different capacities for a hard drive, or different colors for shoes), make it easy for users to identify size and color combinations that are in stock (see the screenshot for Kohl’s below). And provide sizing charts to avoid surprises and returns later. If your business also has brick-and-mortar stores, allow users to check in-store availability online.
• Description
  Give customers a clear understanding of your products by providing detailed descriptions, with text and multimedia. Descriptions should be simple, clear and jargon-free. Consider tablet and mobile users by providing alternatives to Flash and Java content, and don’t require mouse hovering to access essential information.
• Customer ratings and reviews
  Unbiased and unedited ratings and reviews by customers will help visitors make up their minds about products that they may not be familiar with (for example, customer reviews suggesting to buy half a shoe size larger for a better fit will help others not make the same mistake). Many users look up ratings and reviews when they are in stores, not only at their desk, so make ratings and reviews easily accessible from mobile devices.
• Suggestions of related products
  These could be complementary products (for example, a USB power adapter when the customer is buying an iPod Touch), alternative products (different styles, models or versions) or recommendations based on other people’s purchases (“Customers who bought this also bought…”). Whatever their nature, they should be relevant and valuable to the user, not just an attempt to sell more.
• Tools
  Give users ways to save and share pages on the website. Businesses commonly do this through wish lists, “Email this page” features, and social sharing and bookmarking. Speaking of social, companies such as Buy.com (see screenshot below) and Wet Seal are experimenting with social shopping, allowing users to shop with their Facebook friends.
• Contact information
  Make it easy for customers to reach you when they need help.
• “Add to cart”
  Last but not least, make the call to action clear and prominent, to ensure that customers know how to check out.

The key elements of product pages on Zappos.com are highlighted.

Kohl’s offers a visual way to identify color and size combinations that are in stock.

Social shopping on Buy.com includes: (1) friends who are currently shopping together, (2) a chat window.

Reduce Shopping-Cart Abandonment

Customers abandon their shopping carts for numerous reasons, many of which can be prevented by improving the experience.

• Make the shopping cart always visible and accessible, and display a summary of items in the cart, keeping check-out a click away. As basic as this sounds, some websites still don’t enable customers to get to their shopping cart without adding something else to their order.
  
  Deal Genius offers no visible way to get to one’s shopping cart.
• A persistent shopping cart is important. Users who leave the website without completing their purchase should see their items in the cart when they return. If the user is logged in, the cart should also persist across devices, allowing them to seamlessly continue shopping anywhere and anytime.
• Using the customer’s address or ZIP code, show taxes, shipping options and costs, delivery estimates, and the total cost, thus avoiding last-minute “cart shock.”
• Give users the ability to update their shopping cart without having to go back to the product page.
• If you offer promotional discounts or coupons, give users the option to redeem them without making others feel like they are missing out on savings. Let users know how they can get these discounts (“Sign up for our weekly newsletter to get a discount on your next purchase!”).
• Offer contextual support to answer questions that shoppers may have regarding when their items will arrive, your return policy, and how to contact live help through a phone number, call-back or chat. Display this information in a sidebar, on the shopping-cart page or in a small pop-up window, so that users do not lose the context of where they are.
  
  Office Depot’s shopping cart features: (1) a persistent shopping cart, which shows the total cost and expands on hover to show its items; (2) the estimated total; (3) options to update the cart; (4) discounts, if applicable; (5) help options.

Keep Registration Short And Optional

Make the registration process optional and short; forcing registration is one of the main reasons why users don’t complete purchases. If you still need convincing, “The 0 Million Button” should drive the point home.

• When the check-out process starts, allow registered customers to log in, and provide easy ways for them to recover forgotten account information.
• Allow new customers to check out without registering. At the end of the check-out process, give them the option to register and save their information for future use. By this time, they will be motivated to simply create a password in order to avoid typing all of that information the next time.
  
  Sears has simple check-out options, allowing new users to register after checking out.
• Simplify and minimize the information required during the check-out and registration processes, by logically grouping the most important information first, and putting optional information towards the end. Some retailers, like Adorama, have got their check-out process down to one page.

Streamline Check-Out

Streamline the check-out process with relevant recommendations, a progress indicator, an order summary and confirmation.

• Relevant recommendations can be a valuable reminder to customers as they check out. Like product suggestions, recommendations at check-out should be relevant and useful to the customer, instead of a way to try to sell anything and everything. Buying the same noise-cancelling headphones from Buy.com and Amazon resulted in very different recommendations, as shown below.
  
  Very different recommendations from Buy.com (above) and Amazon (below).
• “Enclose” the check-out process by removing the header, navigation and footer. This will minimize distractions and guide the customer through the last few steps to complete their purchase.
• Use a progress indicator to show customers where they are in the process. “Three steps completed. Just one more to go!”
• Give users a choice of payment methods. If users prefer not to give their credit-card information, allow them to pay by PayPal, Google Checkout or another trusted local payment option. Make sure the third party displays the total amount to be charged before asking for any payment information.
• Link to your policies in context: link to the privacy policy when asking for an email address, and a link to the security policy near the credit-card fields. This relieves users from having to hunt for these policies and also instills confidence.
• When displaying the summary page of their order, allow customers to verify (and change, if necessary) the details before confirming the order. This is also a good place to restate the estimated delivery dates so that they can change the shipping method if desired.
• The final call to action that directs users to complete their purchase (“Place order”) should be prominent. Don’t lose customers at this stage by presenting other options to them.
  
  The check-out process on Adorama has been streamlined to a single page: (1) progress indicator; (2) multiple payment options; (3) contextual policies; (4) option to make changes; (5) prominent final call to action.
• Once the order has been placed, display a confirmation page, with the order number, saving and printing functionality, and a summary of the customer’s next steps or options. The order confirmation page for Shutterfly, a photo publishing website, not only tells users what their next steps are, but also displays timelines for the fulfillment of their order and contextual links to the next steps.
  
  Shutterfly’s order confirmation page informs users what to expect next, using contextual links.
• If your website allows new customers to check out without registering (as suggested above), then that would be a good time to ask them whether they would like to select a password to create an account and save their information for next time. Highlight some of the benefits of creating an account, so that registering at this stage becomes a no-brainer.

Take Action

Congratulations on making it through the 50 techniques in this two-part series. But this is just the beginning. If you kept your users in mind as you read through this article, you may have already identified areas in your online shopping experience that could be improved. Some of these, like presenting contextual links, are quick fixes, while others, like improving findability, will take weeks or months to implement.

When making changes, measure the impact of the changes using analytics, multivariate or A/B testing, and usability testing (see the further reading below). Improving the online shopping experience not only will make it easier for users and satisfy them more, but will increase your bottom line!

Further Reading

• Web Form Design: Filling in the Blanks, Luke Wroblewski
• “Stopping Shopping-Cart Abandonment,” Erin Jo Richey, UX Booth
• “Multivariate Testing 101: A Scientific Method of Optimizing Design,” Paras Chopra, Smashing Magazine
• “The Ultimate Guide to A/B Testing,” Paras Chopra, Smashing Magazine

(al)

© Lyndon Cerejo for Smashing Magazine, 2011.

Smashing Magazine Feed

  

Throughout the creative fields, like with art and design, getting your work out there for an audience to find and connect with is essential. Taking your work online is a major outlet that many designers and artists opt for, especially given the versatility that the web offers. With so many options for displaying their work, the internet has a bevvy of brilliantly designed and developed portfolios that we can sort through for inspiration.

But what is more, is that we can also look through them to gain some hints on what works and what doesn’t for those times when we have to put together a portfolio for ourselves or our clients. There are not many tricks to remember that go beyond the usual ones we apply when designing. One that does stick out is to not allow the design to steal focus from the work it is meant to be highlighting.

Below we have gathered a mere handful of the online portfolios that are available fodder for this type of showcase, and presented them here with a slight breakdown of the designs. Take a look down through them and see the highlights that we have offered before you check out the portfolios for yourselves to see just what exactly we are talking about here.

Daarken

The portfolio of fantasy artist, Daarken is filled breathtaking works, and are arranged and highlighted wonderfully by the site’s design. With large previews of the work, and a java based side scrolling setup, the site is very simple and throws all the focus on the work. However, the scrolling could cover more ground with each click. As it stands, the scrolling only moves through a couple of images at a time which gives it somewhat of a jumpy sort of feel.

Lesly Garreau

Lesly Garreau’s web design portfolio site is graphically great, and nicely compact. The small previews of Lesly’s designs being taped up to the page work well to compliment the site and the whimsical nature of his work. The site itself further acts as an extension of the portfolio, which is one of the rare occasions when the site can steal focus from the work and not have it become a portfolio no-no.

Micah Lidberg

Micah Lidberg’s illustrations and other works are the main highlight of this very minimalistic site, just as they should be. The navigation is very understated which works for the most part, but as it follows you down the page, it easily becomes lost in the works scrolling behind it. When you click on the previews and go into the deeper pages, there is a largely exaggerated and unnecessary gap at the bottom of the page. This makes it feel like there should be more on the pages than there is.

Dropr

Dropr is a relatively new service for creatives that is still in beta, but still worth checking out. Very much in the style of Behance, this network is easy to use, and promises to be more powerful than most. The design is both stylish and imaginative, and on the main page, does stand in the spotlight which should be falling on the work. In fact the works being showcased are somewhat buried at the bottom of the page below the bells and whistles of the main site header. Unlike other portfolio communities which always seem to be highlighting the work, Dropr takes the center stage when you first arrive. The inner pages which display the work are much simpler and do not take the attention off of the work like the main page.

Zuttoworld

Russian illustrator Zutto’s portfolio is another fantastically minimal site design which lets the artists work do most of the heavy lifting. The large bold font on the plain, expansive background make the site feel open and comfortable for the viewer. The pieces drop down below the titles when you click on them, and the images remain open until you click on another title. The one flaw here is that you cannot click on the same title to close the image once it is opened. Clicking on the title of the open piece causes a jumpy effect as the piece effectively re-opens over the top of itself, rather than just closing the preview.

Made By Water

Made By Water is the online portfolio of designer and digital artist Jordan Vitanov. With big, bold typography filling the screen in the header, the site gives the impression of a large scope portfolio, which it is. Sort of. With a few pages of design previews to cycle through, the work feels somewhat slighted by keeping it in such a small display window. Clicking on the pictures, simply brings up the next preview image for the project, but never do you get a larger presentation of each piece. This kind of breaks from the inferences that can be drawn from the over sizing of the other site elements.

Beaver Lab

Beaver Lab is a colorfully illustrated site that takes great advantage of the whitespace going for an extremely simple approach. The javascript navigation is smooth and overall, the site stands as a fine example of their web design work for the portfolio. Which is good, because the websites in their portfolio actually take you offsite and to their clients page. And as long as the client keeps the design Beaver Lab made them, the links are not that bad. But given that the rest of their work comes up in a nice shadow box on their site, it seems that they could have done the same for the websites with a images of the page rather than sending them elsewhere. The links for the work in their portfolio are also a bit too small and could stand to a size or two larger for the benefit of the user.

Checkland Kindleysides

Checkland Kindleysides is an extremely elegant and imaginative portfolio. The site is wonderfully built, very sharp and clean which compliments the teams style and image. This is another example where the entire page stands as a much more shining example of their work, with its imaginative carved paper cutout elements, than the pieces that sit somewhat lifelessly in their gallery.

Beastman

Australian artist Beastman has such an intricate and detailed style, and the site is very plain as to offset this characteristic of his work. The images are setup in large enough previews that the detail in the pieces comes out, without having to enlarge the images in any way. Overall the site perfectly contrasts the artists voice, and allows it to speak out through the gallery.

Online Portfolio of Sander Schuurman

The online portfolio of Sander Schuurman looks to be a very simple design, when in reality, it is anything but. This minimally styled portfolio has an interesting javascript presentation that allows the user to virtually flip through the various preview images contained under each project heading. The only somewhat cumbersome element of the site is the flash intro which the site could easily do without and still remain as impressive.

Square Circle

The design team over at Square Circle certainly let their skills take center stage when they crafted their site. This is an impressive and very original design for sure, and serves as an outstanding portfolio for the most part. However, part of what makes it great, is also part of its biggest flaw. As imaginative as it is, it is also very resource heavy. Not to mention that it takes over sound immediately upon entering which tends to turn a lot of users off.

Grzegorz Kozak

Grzegorz Kozak’s portfolio is another site where the fun, and whimsical nature of the page actually stand out more so than the works in the gallery. Which can have its downsides. However this is slightly offset by the large lightbox that opens up to display the work once you click on the previews. This does bring the focus and attention back to the work quite well.

Paul Noble

When it comes to portfolios that place the focus specifically on the work, the site of interactive designer Paul Noble shines. This is a near flawless design, both in form and in function. Putting the work at the forefront. With an interesting navigational system built around displaying the portfolio pieces, the site has a very sleek and professional feel to it. Though the small navigation bar that shows the arrangement of the gallery, and even displays a thumbnail of each piece when you click on its corresponding bar, does not automatically shift the gallery over to that project. This feels like an oversight or worse a malfunction.

Carl Warner

The portfolio of photographer and artist Carl Warner looks amazing on the surface. But the beauty does not go much deeper than that. Do not get us wrong, the flash based site is actually very unique and sleek. However, there is a huge problem with the functionality of the site, which spells trouble for his portfolio. Once you click on a preview image in one of the galleries and it takes you into the full image, there is no way back out. The back button in the browser is not applicable as you have not left the page, just gone deeper into the flash. There are no navigational elements present or any other ways to exit out. Also, this site does resize your browser, which gets under some users skin.

Anna Anjos

The portfolio of Anna Anjos is another fine example of the design freeing up the space to let the work speak for itself. Anna’s irreverent style and artistic voice is so unique that the design just steps aside brilliantly, with its complete minimal approach, and lets the work shine through. The navigation sits unobtrusively at the side, leaving the wide expanse of space to display the work. However, the nav elements are very light and overall subtle. Perhaps a bit too much so. Maybe a larger font or even just a bolder one would make it stand out a little more.

Fernando Volken Togni

Illustrator Fernando Volken Togni is another fantastic artist with a minimal portfolio design to allow for the work to take the proverbial center stage. Just like the last site, the simple site navigation stays off to the side, keeping the user’s eyes where they should be, on the preview images. Clicking on a preview not only opens a large version of the project, but it also provides you with a fullscreen viewing option which few portfolios have offered. The neatest part of the large view opening, is that though it seems like a new page has opened, the rest of the portfolio previews have simply moved below the large project image so that there is no need for the user to have to retrace their steps by going back.

Jeremy Geddes

Jeremy Geddes is a magnificent painter, whose portfolio site wonderfully captures the tone and feel of his work. With a simple compact page design, Jeremy’s work remains always remains the center of attention, having at least one large close up acting as a sort of header image as you browse the gallery of works. However, at first glance, and probably to some user’s confusion, the header like preview image is not clickable at all. Instead the user has to click on the small thumbnail preview, which then, instead of taking the header position, opens the image in full size in a new browser window.

Piipe

Piipe serves as the portfolio of graphic designer and illustrator Felipe Barriga. This is a very colorful and compact site which stands out more so than most of the work that sits in the portfolio. Giving the visitor a sense of Felipe’s humor and style right off the bat, but again, in a much stronger dose than is found in the works being displayed. The window that opens up allows the user to scroll through the portfolio while still keeping the overall site compact, and from pouring down below the fold.

Roya Hamburger

Roya Hamburger is a freelance illustrator and designer whose colorful, abstract works are wonderfully complimented by yet another very minimal design that overly embraces the whitespace at its disposal. Though again, this is another site where their attempt to make the navigation unobtrusive borders on too good. The small text and subtle coloring makes the navigation at times a little difficult to read.

Aleksandra Wolska

Aleksandra Wolska is a photographer and web and graphic designer with an extremely sleek and professional portfolio design that places the right amount of focus just where it is needed. On the work. Offering the viewer various options to allow them to wade through the massive gallery sorted to their preference. Each of the previews opens up into a large, widescreen lightbox to display Aleksandra’s work in all its glory.

Identity Withheld

Identity Withheld is the portfolio of designer Temi Adeniyi, whose style and work fit together with the design of the site in a very complimentary fashion. The oversized header makes the site a little bulkier than most of the others we have featured, but with her style it really does work well. It sets the tone for the work to come. The deeper pages that display and explain the various portfolio projects keep the header, which put the majority of the work below the fold. This might feel like more of a slight to the work than it does feel like complimenting it to some.

Dan Witz

Artist Dan Witz has a subtle, yet sleek portfolio that more plays into his traditional oil preferences than his often times semi punk-rock nature. The galleries are arranged by categories and presentation, with the deeper pages and previews arranged in thumbnail galleries. The full window lightbox that the larger previews open up in, is equally sleek and professional.

Bright Bulb Design Studio

Bright Bulb Design Studio is an extremely fun site the overflows with whimsy, and even the design boldness to use Comic Sans. Though given the old school comic book style and nature of the site, believe it or not, the Comic Sans font works, which a lot of designers would consider an impossible sin. Though the site does stand out so much more than most of the work as we have seen with a few others we have featured. This is also a case where the site style and nature does not really mesh well with the work it is displaying. This is handled nicely by a completely unobtrusive lightbox effect with the tiniest of this style bleeding over with the inclusion of the close button.

Molecube

Molecube is the portfolio of a mobile game development team that fits perfectly with the playful nature that you would expect from their work. However, as far as portfolios go, there is very little featuring of their work. Given that they only have one title completed and released and one on the way, there is not much to expect, but some screenshots would be nice. Something other than the explanation and a small sample image like you would expect to be on the cover of any packaging. So though the site gives you a hint as to the nature of their work, they give you little else to showcase it.

Artsybury

Artsybury is the portfolio of a designer and artist from London, whose style and sense of whimsy come through in his uniquely presented work. The shelves and photographs that hold Bradbury’s work compliment the artist and his voice, while also giving the viewer a different sort of experience than most portfolio sites offer. While the site does stand out quite noticeably, the work it displays does still rise to that same level, so the site does not overshadow the work as we have seen in others.

That is All, Folks

That wraps up this showcase. Hopefully you found some inspiring approaches that you can apply to your own work in this arena. Also, given the breakdowns, we further hope that this post can be beneficial in taking your portfolio designs to the proverbial next level. Feel free to leave your thoughts on the showcase, or on what makes or breaks them in the comment section below.

Consider Some of Our Previous Posts

• 10 Steps To The Perfect Portfolio Website is a post from the Smashing archives that goes over the ways to putting together a successful online portfolio.
• SimpleFolio: A Free Clean Portfolio WordPress Theme is another post from the ghost of Smashing past where you can score a minimalistic portfolio theme for your WordPress needs.

(rb)

Noupe Design Blog

  

Charts and graphs are the most effective ways to show the relationship between two different and interlinked entities. On a web page, a comprehensively designed flowchart, diagram or graph can be worth a thousand words. Creating such charts that inform your visitors about all the necessary details is a daunting task, and many designers find creating charts, diagram and graphs a difficult job to accomplish.

Here, you will discover some of the best available free web services that let you create copious amounts of charts, diagrams and graphs. A majority of these services are easy to use; and will produce results that will be comparable to what you saw on the screen. Enjoy!

The Showcase

ChartDemo
If you need to create a stacked area chart along with complete labels and legends, then ChartDemo is for you.

Flowchart
This tool not only lets you create charts and diagrams but also provides you a platform to collaborate with your colleagues. This does not require you to download any software rather it works in your internet browser.

Track-n-graph
An easy to use web based tool for friends, family and colleagues to track and graph information

Barchart
This online tool allows you to create bar charts without the need of an applet bar graph creator. An absolute must have tool for those who want to create bar graphs.

Bubbl
Create multicolored mind maps online, share and work on them with friends. With this tool, you can embed your mind map in your blog or website, can email it or have it in printed form.

ChartGizmo
A free web based application that lets you create charts for your websites, blogs and even for social network profiles.

CreateAGraph
CreateAGraph gives you five different types of graphs and charts that you can consider for your use. With this tool, you can work online right from your browser.

DrawAnywhere
As the name suggests, draw anywhere you like. You can create flowcharts, diagrams, organizational charts and on top of that you can export your charts and diagrams as an image file (jpg, png, pdf, etc).

Fooplot
Fooplot is an online tool that lets you create charts & diagrams.

FusionCharts Google Gadget
Another useful web based tool to draw charts and diagrams with ease and comfort.

Gliffy
It is online diagramming software that allows you to create professional looking flowcharts, diagrams, floor plans, technical drawings, and more!

Mindomo
A versatile Web-based mind mapping tool for creating, editing and sharing mind maps. It offers the capabilities of desktop mind mapping software in an internet browser with no installation and maintenance required.

Mindmeister
This tool comes with all the customary features of a typical mind mapping tool with as many concurrent users as you like.

MGraph
MGraph is an online tool with which you can plot simple graphs.

Plotr
Draw simple charts with this lightweight charting framework which is based on Plot Kit. No use of Flash and no other interactive elements as you don’t always need them.

PlotKit
A comprehensive chart and graph plotting library for Javascript that comes with HTML Canvas, native browser and SVG support via SVG viewer.

Rich Chart Live
Use your web browser to create enjoyable and enchanting flash charts. High-impact charts can also be created with this absolutely free online tool.

SimpleSeating
This is an invaluable tool for those who are responsible for planning an analyst event which can be a major time sink and massive pain without it.

Online Chart Generator
With this online tool, you can create amazing 3D graphs instantaneously.

DIY Chart
DIY (Do it yourself) Chart is an easy to use, simple yet powerful online tool that can be used to create interactive graphs and charts using static or dynamic data.

Chartle.net
This tool offers simplicity, ubiquity and interactivity to online visualizations, and tears down the complexity so that novices can also use it.

ChartGo
ChartGo permits users to generate charts online rapidly. Simply paste your data in the chart data area and hit the create chart button. It’s that easy.

JS Charts
A JavaScript chart generator that lets you create charts in different templates. It is an easy to use tool that requires little or no coding.

Pie Chart Tool
A simple and easy Pie Chart creator that creates pie charts based on the data that you provide. Simply type in your data and the name of the categories.

Piecolor
Piecolor is an online tool to create colorful pie chart with ease.

Hohli Charts
Hohli Charts lets you animatedly create charts.

CSS Chart Generator
Generate your charts on the fly with CSS Chart Generator.

CHARTPART
This is a simple and straightforward online tool for creating charts.

Google Chart Tools
The Google Chart Tools facilitate adding live charts to any web page.

amCharts Visual Editor
You can use amChats as a web service through this editor. Configuring the chart and pasting the generated HTML code to your HTML page is all you need.

Pie Chart Maker
The Pie Chart Maker lets you generate your own customizable pie charts. You can save your pie charts as an image on your computer as well.

Online Chart Tool
This online tool allows you to design and share your own graphs absolutely for free.

OWTChart Generator
The OWTChart Generator is yet another useful online tool that can produce charts. It displays a GIF image of the chart on the screen

Chart Maker
Chart Maker allows users to easily create charts according to their individual needs.

Highcharts
It is a JavaScript library for creating different types of charts including line, spline, area, areaspline, column, bar, pie and scatter charts. It offers an easy way to add interactive charts to your websites and even web applications.

Google Chart Generator
This tool creates a Google chart in seconds!

JGraphpad
It is a feature-rich, online, standards-compliant and open source graph component available for Java that includes Process diagrams, workflow and BPM visualization, flowcharts, even traffic or water flow etc.

yEd Graph Editor
Another Java based graph editor that lets you generate drawings quickly and effectively. With this tool, you can implement automatic layouts to a wide range of different diagrams and networks.

Graphviz
Graphviz is an open source graph visualization software that presents structural information as diagrams of abstract graphs and networks. You can employ this tool in networking, bioinformatics, software engineering, database and web design, machine learning, and in visual interfaces for other technical domains.

XML/SWF Charts
A simple yet powerful online tool that allows you to create beautiful web charts and graphs from dynamic XML data. You can either manually prepare the XML source or can generate it via any scripting language such as PHP, ASP, CFML, Perl, etc.

(rb)

Noupe Design Blog

  

We are on a constant hunt to find some cool and useful tools for our readers all the time. In this endeavor today we have collected some interesting apps as well as websites and services which will suit all your needs as a web developer, designer, project leader, or even the end customer. And the plus side of this collection is that all of the resources we have found are all free for personal use.

So you can now actively keep your employees productive, trace your lost laptop, protect your privacy and get rid of unwanted mails and much more. With how much of our daily professional lives revolve around the internet, we felt that anything we could do to help make that time a little bit easier and more productive would be a worthwhile pursuit. Some of these tools you may already be familiar with, and some you may not. However, we hope that you will find some value in the collection below, and that a few of these apps will be the game changer that you have been looking for to make your life a little bit easier and at times a bit more fun. Take a gander and grab a few tools before you go.

The Game Changers

World Broadband Ratings on Google Maps
This is a wonderful site based on Google Maps to track the websites, mashups and tools being influenced by Google Maps. Although its not affiliated with Google, you can fetch data regarding most things here as well.

IconFinder
Designers and developers are among some of the most avid icon hunters online. And that hunt has just gotten simpler with IconFinder, the icon search engine with a huge selection for all of your needs.

Woopra
For anyone who needs real time web analytics for their site, Woopra is the perfect compliment to your current analytics tracker. You can easily check on what is happening right now on your site, and what your users are doing.

Monkey On Your Back
Have trouble keeping your team or employees on track and productive? Then let the Monkey help. With Monkey On Your Back, you can create a todo list and send the various tasks to whomever you want to complete them.

CSS3 Playground
Starting off from a playful place, the CSS3 Playground is an excellent online source where you can experiment with all kinds of CSS tricks and then simply grab the code for the end product.

Readability
Given the amount of time we spend online, Readability may be just the tool for you to make your experience as comfortable for you as visually possible, by simply stripping down the site’s style for a softer visual presentation.

SunlitGreen Photo Manager
Now organize, tag and browse your photos, make and create photo groups and search through them fast as you can type. Essential for anyone who has lots of images to keep managed and maintained.

Trendsmap.com
Now you can mapp Twitter trends across the globe in real time. You can track them via name, area or country.

Domain Name Speed Benchmark
As the website says, you can’t optimize your DNS until you can evaluate it. Domain Name Speed Benchmark ascertains the exact performance of local and remote DNS nameservers.

Mozilla Firefox, Portable Edition
So many of us in the online community love Firefox being that it is such a powerful browser, but the problem arrises when you have to work from some other system. However, with this Portable Edition you can now take all your bookmarks, passwords and extentions with you.

Snipplr
Snipplr is a fantastic resource for developers where they can store and search for code snippets online.

Convert PDF to Word
One of the things we come across a lot when working with clients is the request to send them files as a Word document. With this site you can take your PDF’s and easily convert them into Word docs. Their sister sites can also prove useful!

HootSuite Social Media Dashboard
HootSuite can bring all of your social media networks into one place so that you can easily keep track of all your feeds in one convenient dashboard.

10 Minute Mail
A disposable mail service to help you get only the necessary emails by getting alternate and temporary email ids for Ten minutes. You can always extend the time if required.

UNDELET 360
Suppose you were in a hurry and you permanently deleted a file before its time. Now you can restore files accidentally deleted from your computer, digi-cam, or pen drive.

SnoopFree Software
If you don’t want to be prey to some spy software which might be giving all of your important information to some unsolicited person, than you might want to think about installing SnoopFree on your system to prevent it.

The Email Game
Getting overwhelmed by your inbox? Need a little assistance in getting motivated to tackle your mounting emails, then the Email Game app can help. Email is fun again.

SlimTimer
Time tracking without the timesheet is how SlimTimer bills itself. A comprehensive time management tool is how we would describe this useful tracker.

wridea
For anyone working in a creative arena especially, wridea is something of a must, but it can work for any number of online professionals. This is an idea management service complete with a collection of brainstorming tools right at your disposal.

Adeona
None of us could imagine parting with our laptops. But are you prepared to track your laptop if its misplaced, stolen or lost. If not, try Adeona.

Comodo SecureEmail
Comodo SecureEmail is a smart and simple way to send encrypted emails so that no one is able to intercept and alter your private secure messages. By making this one time cumbersome process a breeze to use, your email could be more secure in a matter of minutes.

Whats My IP Address
There are many reasons that we might need to or want to change our IP address as we surf and browse the web, but how do we make sure that our IP masking is working? There are also times we just need to know what our IP address is. Now just go to this website and it will show you what your current IP address is reading as.

BugMeNot
Do you hate registering in to websites just to read and check some sort of information? Well you can always use a shared, predefined set of login information collected for various sites that force users to register, by heading over to BugMeNot.

Left Logic – Specialist Web Development
Coders will more than likely be flipping over Left Logic, and they may not be alone in their celebrations. This is an HTML entity character lookup that is both quick and easy to use.

Todo.ly
When it comes to keeping yourself productive while online, Todo.ly, the simple online todo list can help.

CushyCMS
Whether you are a designer or an content editor, CushyCMS is for you where you as a designer define the editable content area and as a content editor, make required changes in editable sections without having to first master your programming skills.

Tor
Free software that is helpful in maintaining your online privacy, confidentiality and traffic analysis through its built in privacy features. If you are looking for a way to stay anonymous as you surf, then Tor can help you out.

Tweepi
Tweepi is a useful tool for any professional whose online existence relies heavily on their Twitter interactions. With both free and paid elements to the service, this tool can improve your Twitter experience.

Launchlist Lite
Launchlist Lite is prefect for web developers and designers who are looking for a virtual checklist that provides a comprehensive list helping you to ensure that your site is ready for launch.

x Paranoia mod 0.6.7
Once you have finished checking out all of that useful stuff, and you don’t want to share with your colleagues or anyone else sharing the system, this Firefox extension comes in handy. It clears all of your history, cookies, passwords and any other saved information with a few simple clicks.

(rb)

Noupe Design Blog

I’m pretty new to Photoshop. I have the Adobe Photoshop CS3 version and was wondering if anyone might know of any good tutorials for beginners?

Any help would be much appreciated.

Thanks in advance!

Best answer:

Answer by cool77889
try youtube..google videos…stuff like that…usually there r tutorials on them

Add your own answer in the comments!

Related Blogs

• Bank of America online banking down for 4 hours – The Associated …
• 45+ Incredible Vector Tutorials for Graphic Designers | Multy Shades
• Mozilla Releases Firefox 4 version of Fennec | ConceivablyTech
• Blogging Innovation » The Big Small Question
• Truth On Call: Doctors Answer Questions via Text « ScienceRoll
• Asked Online « oboeinsight
• QUESTION: Do you think Michael Bloomberg has now completely …
• Does Anyone Really Know The Size Of The Greek 2009 Deficit? | afoe …
• The Handy History Answer Book, Second Edition
• 6 Amazing DVDs for Learning Adobe Photoshop from Essential to …
• Blog of Dale Anne Potter » Blog Archive » Friday Tutorials….
• Bowling (Green), anyone? « WVU Sports with Mike Casazza
• 40 New JavaScript Tutorials with Helping Techniques | Tutorial Lounge
• The Strategy Guaranteed to Transform Online Green Marketing …
• 200bhp With 62 mpg Anyone? | The Truth About Cars
• Bank of America Mortgage Help | What is a best mortgage.
• Wall St cares but does anyone else? | The Big Picture
• Lisa Murkowski, Please Answer this Really Simple Question | RedState
• The Friday Question « Pratt Street Ale House
• Sprint EVO 4G (Froyo version) rooted

PC Corrections Illustrated Guide
The PC Corrections Illustrated Guide not only tells you how to speed up your slow computer, but shows you how with illustrations. There is no guessing about what to do, because you are shown how with illustrations of actual screen shots.
PC Corrections Illustrated Guide

Related Blogs

• NYSE technology sector corrections: (VG, UMC, ALU, LSI, S) | Penny …
• Greece : Tourist Information Guide | Christian Little
• Karoshi Ethos » Smarty base href Modifier
• Diabolical Masquerade – Nightwork (1998) Re-release 2007 …
• Watch Denmark Vs Germany Online | FootyBlog.net
• Soccer World Cup 2010 Travel Guide eBook to South Africa | Fifa …
• Government Fears Bungled Crisis Might Traumatize Children | The …
• President hmuah dan tur rel « ZawlaiDi
• The Watoto Children's Choir visited Yahoo! Singapore and sang us a …
• Heartea Interactive Beverage Mug by Sangmin Bae, ID+IM Design Lab …
• All My Children WEDNESDAY AUG 11 Video | US Post Today.
• US ex rel. Lemmon v. Envirocare of Utah, Inc., No. 09-4079
• NoFollow Importance | The IT Chronicle
• How To Find Coupon Codes Online
• <a href="http://www.thebaseballopinion.com/"><img src="http://www …
• <a href="http://www.thebaseballopinion.com/"><img src="http://www …
• <a href="http://www.thebaseballopinion.com/"><img src="http://www …
• <a href="http://www.thebaseballopinion.com/"><img src="http://www …
• In Defense of Having Children – The Awl
• Sports Illustrated | Rugby | Argentina Prep For The Rugby World Cup

Free Online Resources For Photoshop Tutorials

Photoshopping is more than just a neologism. It has become an industry all on its own. From doctored pictures to special effects to stunning works of art, Photoshop has let itself be known and while there have been many imitators, Photoshop remains the premier image editing software trusted by millions. If you want to get into the action, learn Photoshop using free tutorials online. Here’s how:

Free online tutorials
Go to the main men themselves at http://Adobe.com. Photoshop is one of Adobe’s most recognizable and popular products other than Adobe Acrobat. This is also the site you should go to if you want to learn more about the features and functions offered with every Photoshop version. Every time a new version comes out, http://Adobe.com not only publishes valuable information about it, they also update their tutorials page.

Simply go to this page and find the tutorials appropriate for your particular Photoshop version. This is a veritable fiesta of free Photoshop tutorials, offered buffet-style. Simply pick which ones interest you and start learning. However, if you’ve never used Photoshop before, take advantage of the free tutorials and spend some time with the basics. You’ll be glad you did, especially later when you’ll be taking up the more advanced lessons.

Adobe.com has enough free Photoshop tutorials to keep you busy, but there are other sites you can check out for other tricks. Check out http://Tutorialized.com. This is a site that provides free tutorials for every sort of lesson you’ve been dreaming about. They have nearly 6,000 free Photoshop tutorials that will let you in on the secrets to creating spectacular digital art and amazing special effects.

You can click on any of the 19 categories to choose what you want to learn or check out the newest offerings recommended on the site. You can also get in touch with other Photoshop users through the site by joining the discussion forum. If there is a Photoshop problem you can’t seem to solve, you can ask any of the users online or post a message to get an answer to your inquiry.

Another site worth checking is http://IntelligentEdu.com. If you have a specific Photoshop tutorial in mind, try using this site, a free training blog for various software such as Photoshop, Dreamweaver, FrontPage, Flash and other Adobe Macromedia applications. It’s also a great resource page for books on various computer subjects.

Go to http://SketchPad.net. The free tutorials are outlined on the page, allowing you to choose from the most basic features to the most advanced. Learn about paths, custom textures, layers and effects in simple and clear instructions. You can also jump forward to the free photo-retouching tutorials or learn the vector principle through their tutorials on the special Photoshop project.

Another site that offers great Photoshop tutorials for free is http://PhotoshopTutorials.com. This is actually a directory that offers a listing of quality Photoshop lessons, although there are some really great sample tutorials you can try from the site, courtesy of other sites such as http://NewTutorials.com, http://Depiction.Net and http://PhotoshopLab.com. Simply click on the link to Adobe Photoshop Tutorials to access the page or start with the featured tutorials immediately. You might want to explore a little bit, though because the site has a lot to offer.

Looking for free Photoshop tutorials are not that difficult because there are literally tens of thousands you can use online, not to mention the dozens of tutorials offered through CDs and DVDs. If you want to learn Photoshop, start now and check out the sites. The earlier you learn, the faster you’ll be able to use Photoshop with confidence.

Related Blogs

• This Week in Review: A mobile aggregation dustup, journalists and …
• NoFollow Link Checker « Free Download Soft
• Rel Power agrees to acquire three coal mines of Sugico Group …
• Highlights: Safari JavaScript Alza 5 Show | Browser Default
• Black Jewelry: A Fashion 'Do'
• Nofollow Outbound Hyperlinks To Gain Greater Page Rank | Publisher …
• Life Styles » The Power Of The nofollow Tag
• Dr. ATM – Your ATM Treatment Options – invisalign braces | IT Jobs …
• Betting Hockey Coaching Club » Florida Panthers: Blackhawks …
• Betting Hockey Coaching Club » http://bit.ly/a5cXsz new york rangers
• Betting Hockey Coaching Club » Awesome for Chicago! Someday, we …
• Tampa Bay Lightning add Pat Verbeek to Pro Scouting Staff http …
• SB Nation Detroit is a go! http://ffd.me/a9EQFC #redwings
• Betting Hockey Coaching Club » #Senators Spezza trade talk could …
• NHL jerseys Minnesota Wild 10# GABORIK white http://surl.name/2ph7 …
• SeeIT Consult » Blog Archive » PHP: The include() include_once …
• Can Technology Forge a New Rel… » @arkarthick's TwitLog
• REL Stapleton REL100020 Foldable Topside Creeper-Retail $392.57 …
• JavaScript – Ticking Clock | Xhanch Studio
• Photoshop Beginners Video Tutorials | Webmaster 9