When it comes to designing customized layouts and complex content-rich pages, few Drupal modules can match the flexibility of Panels. It shatters Drupal's traditional "Region/Content/Blocks" divide, giving site managers the ability to build custom layouts and enforce consistency across different types of pages.

Unfortunately, the "variations" system that Panels and its companion module Page Manager use can be cumbersome; developers and advanced site builders can master it, but managing huge numbers of different layouts can be a pain. This is particularly noticeable when each individual node on a site, or even of a particular content type, needs to have its own special layout or mix of page content. Wouldn't it be great if there were some way to give some editors and content creators control over the Panel layouts for just the nodes they create? That's exactly what the Panelizer module does.

SugarCRM sweetened things up a bit with today’s release of version 6.3. The latest iteration of the customer relationship management platform demonstrates deeper integration with third party apps, faster feedback for real-time collaboration and tighter admin control.

Read full story...



Follow us on Twitter

Join free newsletter

View upcoming events

Find a new job

Advertise here with BSA

Firebug — an open source web development tool extension for the Mozilla Firefox web browser — is incredibly powerful, with a wide range of super useful and practical features that would benefit any web designer or developer.

In fact, this browser extension (also available in other web browsers with limited functionality) is so useful and popular that it has browser extensions of its own.

This real-time coding tool reduces the guesswork out of debugging web pages, among many other things such web page layout inspection/testing and web performance profiling, to speed up your workflow.

Whether you’re building a web page, adding new CSS for a responsive web design, troubleshooting web layout issues, or inspecting how other websites are built, Firebug is going to be a valuable tool in your arsenal.

Let’s take a closer look at how this indispensable browser extension can help web designers. We’ll only focus on certain Firebug functionalities that are especially helpful for web designers.

Getting Started with Firebug
First, you’ll need to download and install Mozilla Firefox if you don’t already have it.

Then you also need to download and install Firebug.

Once you’ve got the extension installed, you’re ready to start dissecting any website.

You can experiment with how it works just by playing around with it or you can take some time to read the official Firebug documentation (which is a wiki).

Opening the Firebug Panel
There are several ways to open the Firebug panel. When it’s open, it should look like the image below.

Opening Firebug Using a Keyboard Shortcut

Press F12, which is the keyboard shortcut to toggle Firebug on and off (see other Firebug keyboard shortcuts).

Opening Firebug in the Browser’s Context Menu

On any web page, right-click on the page or a particular HTML element (such as a hyperlink, a text heading, an image, a form button, etc.) and then choose Inspect Element from the context menu that appears.

Firebug Icon

You can also click on the Firebug icon to open the Firebug panel. Depending on your version of Firefox, it will be in the bottom status bar, or in the upper chrome to the right of the search bar.

Tip: Have Firebug in Its Own Window
Once you have Firebug open, feel free to break it out of the browser and into its own window by pressing the Open Firebug in New Window icon. This is perfect for big monitors or for multi-monitor computer set-ups.

Now you’re ready to do some damage. Next, we will talk about some useful Firebug features and techniques.

Inspecting a Web Page’s Layout and Markup
It’s the most common question you’ll ask about a web page you’re developing: "Where’s the flaw?" (or "WTF" for short). The most common use of Firebug is inspection.

Once Firebug is open, you’ll be in the HTML panel by default. This is the panel that will help you inspect and understand the web page’s HTML elements.

There are two panes in the HTML panel. Let’s briefly discuss these panes.

Node View Pane
Firstly, on the left, is the Node View pane displaying the generated source of the page you are currently on.

Node View allows you to edit HTML elements/code on the web page and then see the result on the fly.

When you mouse over the HTML markup in Node View, the browser actually highlights the element on the web page being inspected. This is incredibly helpful functionality – it shows you exactly how the browser is handling your HTML elements and where that particular element is on the actual web page. This can help you visualize margin/padding issues and float problems, for example.

When you click on an HTML element in Node View, it will show the element stacking order just above the pane. This is helpful for any CSS you have to write that needs to be more specific to prevent styling similar elements elsewhere on your site. More often than not, I’m inspecting to see what CSS rules are being inherited.

To help you quickly find HTML elements, try the search feature towards the right of the HTML panel, which will, in Node View, highlight the matched text in gray.

HTML Side Panels
The second pane, on the right, is the Side Panels. These panels give you more information on the highlighted element.

There are four side panels in the HTML panel.

Style
Computed
Layout
DOM (which stands for document object model)

The Style side panel shows you what CSS style declarations affects a particular element. It also displays which style sheet (and what line number) the style rule is in, in case you have more than one stylesheet.

The Computed side panel displays CSS properties of the HTML element such as font-size, color, text-align etc. This gives you information on how the web browser renders the element.

The Layout side panel visually shows you the box model of the element you’ve clicked on. If you’re a visual learner like me, it’s really nice to see the padding, border and margin illustrated like this. Double-clicking on the displayed values allows you to make changes and experiment in real-time.

The DOM side panel displays the document object model information of the selected element. It’s especially useful for front-end web developers working with JavaScript/client-side scripting.

Edit HTML on the Fly
There are a hundred different ways to manage your HTML workflow when you have access to files on the server or when you’re working in a local server environment using a web server stack like XAMPP or WampServer. I think most people prefer to work right in their own code editor, so code can be saved as you go whenever they can.

However, for quick in-browser tests and situations where you don’t have access to the HTML files (such as a website you don’t own or when you’re away from your dev computer), Firebug is perfect.

In Node View of the HTML panel, you can click on any HTML element and edit it. Add or remove whatever you like and then see what results your changes make to the web page.

A few common tasks I perform in this way include:

Adding/removing entire HTML elements (e.g. "What happens to the floats if I remove this div?")
Adding/removing a class or ID to elements (e.g. "Will the rendering issue get fixed if I remove this CSS class?")
Substituting longer text on titles and buttons to test line breaks
Adding temporary inline styles for quick testing using the style HTML property (e.g. "Will this hyperlink look better with style="color:#00aeef" or style="color:# 067fad"?")

Firebug doesn’t save any code you write in it; when you click a link or refresh the page, your changes are gone. (And you wouldn’t want it any other way!) So, it’s a good idea to keep a text editor handy for pasting in code you’ve tried or may want to keep.

Editing CSS on the Fly
Editing CSS within Firebug is where the real action is, at least for web designers. As has been mentioned, inspecting an HTML element on the page will reveal its inherited styles in the Node View of the HTML panel. These styles are listed alphabetically, and grouped by selector on Style side panel.

The selectors are presented in the rendered CSS order: the most recent declaration at the top (for example, something at the beginning of the style sheet will be at the bottom of the CSS pane, and inline styles would be shown at the top as element.style).

If you use multiple style sheets, it does the same thing. For example, I’ll often use Eric Meyer’s CSS reset as the first style sheet on a site, so I’ll often see a very long selector at the bottom of my Style side panel.

Firebug makes it clear which styles are actively affecting your HTML element by crossing out the CSS properties that have been superseded by another CSS property declaration. If there’s a line through it, then it means that another CSS rule has overwritten it by being declared after the former rule, or by being !important.

The great thing about the CSS in the Style side panel is that it’s editable. Want to see how the web page would look if you changed the element’s padding-top property to 22px? Click on the property value and change it. You can also change the property itself (e.g. change padding-top to padding-bottom).

You can also disable/hide a CSS property/value pair to see what the page would look like if it didn’t have that rule. This is useful for seeing unneeded CSS lines in the web page, determining if the property declaration is what’s causing rendering issues, etc.

When you’re editing CSS in the Style side panel, the Enter key will jump to the next editable cell – from property to value, and down to the next property.

When you’re at the last property of the selector, hitting Enter will give you a new line, where you can add a new CSS property/value pair.

Now if you want to add CSS to an element that doesn’t have a class or ID (and therefore won’t appear in the Style side panel), you can either add inline styles in Node View, or venture into the CSS panel.

The CSS panel shows you a page-view of the various style sheets you’ll have attached to the site.

In Source Edit mode, you are able to edit values (Similar to the HTML panel’s Style side panel we discussed earlier). In Source Edit mode, you can actually type freely as if you were working on your site’s style sheet in a code editor.

Editing via the CSS panel.

Firebug Quirks and Limitations
Even Firebug has its quirks, but with the insane release schedule Firefox is under lately, who can blame it?

Here are a few issues that cause occasional hiccups when using Firebug for debugging, as well as some limitations you will have when working with it. Let’s just talk about a few of them.

HTML Elements with Hover Properties
It can be hard to troubleshoot elements that have CSS :hover rules or JavaScript hover events, like fly-out drop-down menus because the Node View updates the markup when you mouse out of the element. So one issue is that i[…]

Nowadays, content must be developed to be viewed and interacted with across a range of screen sizes, from smartphones to the widest flat-screens. With devices becoming increasingly abundant in our daily lives, people are shifting from device to device, and they expect their products and services to shift with them. Regardless of what size screen your content is on, people expect a delightful experience across devices.

Here is a list of popular resolutions on various devices:
...read more
By Sachendra Yadav

Nowadays most developers already know how to quickly code a menu or a layout structure, but there’re always a great difficulty when coding a form, either contact, login, newsletter, comment etc.
Formee is nothing but a framework to help you develop and customize web based forms. works with the technique provided by Fluid 960 Grid System to compose the form’s layout, allowing total flexibility to put it in any website or web system.
The form has a structure built around percentage widths, thus allowing its inclusion in any project, adapting to the space available. Formee has its structural code independent of the style codes, facilitating the complete customization and manteinance of the form.
The form was built with care to preserve web standards and their semantic values, working with the smallest possible amount of tags and according to the W3C rules.

Requirements: - Demo: http://www.formee.org/demo/ License: GPL, MIT License
Related PostsjQuery Mobile – A Web Framework for Smartphones & Tablets
dhtmlxGantt Allows You To Create Dynamic Gantt Chart
Quickly Review Code Quality with YAML Debug Bookmarklet
jQuery Mobile Alpha 1 Released
5 Special Invitations from Dreamhost
SponsorsProfessional Web Icons for Your Websites and Applications

Social media is a powerhouse of change for several areas of customer experience. In regards to marketing,  the social web has provided a less expensive, more communicative alternative that’s poised to replace traditional methods — billboards, TV spots, etc. — altogether. The following infographic from Voltier Digital highlights how things currently stand.

Read full story...



Follow us on Twitter

Join free newsletter

View upcoming events

Find a new job

So, you’ve been testing landing pages like a good little PPC Account Manager should. Good job! But, now what? How do you tell which is doing the best? How do you present this to your boss/client? Prepare a landing page report in Excel–duh! Don’t worry, Jessica Cates is going to show you exactly how to do it. You’ll be on your way to showing the results of all your hard work with landing page testing in no time!

(psst! Don’t forget to put us in 1080 for the best view!)

Check out the rest of our video blogs for more awesome videos!

Check out The Adventures of PPC Hero: Heroic Feats of Pay Per Click Management at http://www.ppchero.com/. Copyright © 2007-2010 Hanapin Marketing, LLC.

Web development is an industry that’s in a state of constant flux with technologies and jargon changing and mutating in an endless cycle. Not to mention the sheer deluge of information one has to process everyday.

In this series, published monthly, we’ll seek to rectify this by bringing you all the important news, announcements, releases and interesting discussions within the web development industry in a concise package. Join me after the jump!

News and Releases
All of the important news in a single place: releases, announcements, companies bickering, security issues and all related hoopla.

The World Loses a Few Luminaries
October, overall, was quite a sad month for techies everywhere. In case, you missed it, here are a few of the fine people we lost over the month.

Dennis Ritchie
Dennis MacAlistair Ritchie was an American computer scientist who “helped shape the digital era”. He created the C programming language and, with long-time colleague Ken Thompson, the UNIX operating system. Everything digital probably runs on was created using the language this splendid mind created.

John McCarthy
John McCarthy was the inventor of the LISP programming language, an American computer scientist and cognitive scientist who received the Turing Award in 1971 for his major contributions to the field of Artificial Intelligence (AI). He was responsible for the coining of the term “Artificial Intelligence”.

Steve Jobs
Last, but not least, Steve Jobs passed away earlier this month. For those that have been living under a rock, Jobs was the co-founder of Apple and one of the creative minds behind a lot of the popular gadgets we use today. If you’re even the tiniest bit interested about him, I highly recommend picking up his biography — it’s an excellent read.

A moment in honor of these great men, if you will.

Google Introduces the Dart Programming Language
Google, in their quest to make development easier, released a new programming language targeted at web developers. Called Dart, this language should feel familiar to most Java/C# programmers. I’m sure you have lots more questions so feel free to hit the link below for the official announcement post.

Read more

Heroku Adopts for Python and Django
Heroku, one of the most well known platform-as-a-service providers, recently announced that they’re adding Python to their list of supported languages. The list now includes Ruby, Java, PHP, Scala and Clojure along with Python. Hit the link below to glean more on how to use Python on Heroku.

Read more

Mozilla Shows off Aurora 9
Mozilla released Aurora 9, slated to be the upcoming Firefox 9. The build includes a lot of niceties for developers including new mouse events, improved JavaScript performance as well as user oriented features such as support for ‘Do Not Track’.

Read more

Sinatra 1.3 Released
Quite probably the most fun framework ever just got updated to version 1.3. This version ships with a lot of nice new features about which you can read about in the link below.

Read more

Apache Releases Version 1.7 of Subversion
Amongst all the talk about Git, it’s easy to forget that there are plenty of similarly abled version control solutions out there. One such fine alternative is Subversion and Apache just released a bit update to the software with plenty of bug fixes, performance improvements and new features.

Read more

Google Releases the Google JS Test
Google JS Test is a JavaScript unit testing framework that runs on the V8 JavaScript Engine, the same open source project that is responsible for Google Chrome’s super-fast JS execution speed.

Read more

Google Unleashes ScriptCover
ScriptCover is a Chrome extension that provides line-by-line Javascript code coverage statistics for web pages in real time without user modification of the site. Results are collected when the page loads and continue to be updated as users interact with the page. These results can be viewed in real time through a reporting tool which highlights the executed lines of code for detailed analysis. ScriptCover is useful when performing manual and automated testing and in understanding and debugging complex code.

Read more

New Kids on the Block
As web developers, the sheer amount of resources we can tap into increases exponentially with time. Here is just a quick look at some recently created resources that deserve your attention — everything from new books to scripts and frameworks.

money.js
JavaScript currency conversion library, done right – with no dependencies, in just over 1 kb.

Read more

AliceJS
AliceJS is a micro JavaScript library focused on using hardware-accelerated capabilities (in particular CSS3 features) in modern browsers for generating high-quality, high-end visual effects.

Read more

validate.js
Lightweight JavaScript form validation library inspired by CodeIgniter.
No dependencies, just over 1kb gzipped, and customizable!

Read more

List.js
List.JS is a 7 KB cross-browser native JavaScript that makes your plain HTML lists super flexible, searchable, sortable and filterable? You can also add, edit and remove items by dead simple templating?

Read more

Tangle
Tangle is a JavaScript library for creating reactive documents. Your readers can interactively explore possibilities, play with parameters, and see the document update immediately. Tangle is super-simple and easy to learn.

Read more

JSZip
The easiest way to deliver multiple files to your users is in a zip file. Instead of wasting server resources and bandwidth you can get the client to do it for you.

Read more

Zynga Scroller
A pure logic component for scrolling/zooming. It is independent of any specific kind of rendering or event system.

Read more

Raptor
Raptor is a unique framework that’s Ruby powered, Rack compatible, controller-free amongst lot others. If you’re a Ruby-ist, I strongly recommend taking a look at the framework.

Read more

Raphael
While not really a new utility, Dmitry just pushed out a new version of his much acclaimed Raphael vector library. Make sure to check it out!

Read more

Donatello
Donatello is a pure-CSS drawing library for the browser. The API is inspired in part by Raphael.js. All graphical elements are rendered using HTML DOM and CSS. The idea came together from various code snippets I had lying around for drawing circles and lines in other projects. I decided to make an attempt at a drawing API using these ideas after using Raphael.js in my Node Knockout team project.

Read more

Best of the Internet
Often, you’re not really looking for a tutorial as much as you’re looking for a rant, an opinion or the musings of a tired developer or just something cool with absolutely zero real world use. This sections contains links to precisely those — interesting and cool stuff from the developer community.

Ryan Dahl on Software
An excellent, little rant-ish post on Unix, software development and abstraction. An excellent read indeed!

Read more

‘Algorithm’ is Not a Four Letter Word
Jamis Buck from 37Signals talk about algorithms and why they should be a part of your programming training regimen.

Read more

Node.js is Cancer
Ted Dziuba explains why he thinks Node.JS is a disaster waiting to happen. Contains a few expletives so be warned.

Read more

repl.it
repl.it is an online environment for interactively exploring programming languages. The name comes from the read-eval-print loop, the interactive toplevel used by languages like Lisp and Python. An excellent tool if you merely want to mess around with a language.

Read more

Node.js Cures Cancer
As it often happens in our field, an incendiary article often results in numerous counter articles. In this example, Brian Beck counters Ted’s post about Node.JS.

Read more

JavaScript Face Detection
Title says it all. Face detection using canvas and the video element along with a bit of JavaScript. Really cool stuff!

Read more

Noise with JavaScript
Cool little script that generates noise using the canvas element.

Read more

Wrapping Up
Well, that’s about all the major changes that happened in our industry lately. Since this is the first time we’re doing something along these lines, everything is still up in the air — future editions will be shaped by your feedback.

Do you want us to cover more standard news? A focus on upcoming scripts maybe? Or just more interesting posts and discussions from the community? Let us know in the comments and thank you so much for reading!

Shopify, the online shopping platform, has helped power more than 15,000 e-commerce store fronts including shops for Angry Birds, the Beastie Boys, General Electric and Tesla Motors. Now, the Ottawa company is announcing it’s raised $15 million in a Series B round from existing investors Bessemer Venture Partners, FirstMark Capital and Felicis Ventures along with a new investment from Georgian Partners.

The company plans to use the money to expand its team of 70 employees, explore partnerships and acquisitions and build up the number of developers who build off the Shopify platform. Shopify has about 80 apps built by developers such as QuickBooks, Mailchimp and Hubspot, who make their software available to store front owners. Now, Shopify is launching a $1 million fund called the Shopify Fund to encourage more apps on the platform. Through the fund, developers will get between $5,000 and $10,000 to help them build apps for Shopify.

Shopify was founded in 2005 as an online retailer of snowboards but became a broader platform after founders Tobias Lutke and Scott Lake saw the need for a scalable service for other entrepreneurs. The company, which has been growing quickly, raised $7 million last December.

Shopify has been actively trying to encourage entrepreneurs to build on its ecommerce platform. It’s currently in the middle of its second Build a Better Business competition, which is giving out half a million dollars in prizes and giveaways to winners. The first competition helped create 1,400 businesses and collectively raised $3.5 million in revenue over its 6-month contest period. Last year’s winner, iPad case maker DODOcase, is on an annual run rate of $4 to $5 million.

“A lot of great stores are starting and building their business on this platform,” said Harley Finkelstein, Chief Platform Officer for Shopify. “They can scale up and they don’t have to graduate off  the model.”

Shopify, however, is facing new competition from eBay, which just announced X.commerce, a one-store shopping platform, last week at its developer conference. Shopify also competes with Big Commerce and Yahoo Merchant Solutions.

Related research and analysis from GigaOM Pro:Subscriber content. Sign up for a free trial.
NewNet Q3: Facebook remakes headlines in social mediaConnected Consumer Q3: Netflix fumbles; Kindle Fire shinesDisruptapalooza 2011: how Amazon’s Kindle is changing the portable media game

Advertise here with BSA
When working on a new web project, displaying a "coming soon page" on its website is a common and good way of informing the visitors about "when it will be launched", contacts details and even the progress of the project.

Sooner or Later is an exclusive coming soon template for WebResourcesDepot readers that is designed by Viv Singh of VIVROCKS.com.

The template is simplistic, has an easy-to-update HTML code and displays a countdown timer for providing an exact launch date-time to visitors.

It makes use of the the Final Countdown plugin for jQuery and launch date can be defined very quickly.

There are also links for the most popular social networks: Facebook and Twitter, so the users can keep connected while the website is not ready.

License: Feel free to use it on any personal or commercial projects (no back links are required but please keep the attributes in the source). It is only not allowed to re-distribute template.



About the designer: Viv Singh is a freelance logo, graphics + website designer and a WordPress expert. Visit him at VIVROCKS.com for some high quality graphics design freebies and to check all the services he provides.
You can follow him @ZoneofWizards on Twitter and his Facebook page.
Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

 



 





If you’re into WordPress development, you can’t ignore hooks for long before you have to delve into them head on. Modifying WordPress core files is a big no-no, so whenever you want to change existing functionality or create new functionality, you will have to turn to hooks.

In this article, I would like to dispel some of the confusion around hooks, because not only are they the way to code in WordPress, but they also teach us a great design pattern for development in general. Explaining this in depth will take a bit of time, but bear with me: by the end, you’ll be able to jumble hooks around like a pro.

Why Hooks Exist
I think the most important step in grasping hooks is to understand the need for them. Let’s create a version of a WordPress function that already exists, and then evolve it a bit using the “hooks mindset.”

function get_excerpt($text, $length = 150) {
$excerpt = substr($text,$length)
return $excerpt;
}

This function takes two parameters: a string and the length at which we want to cut it. What happens if the user wants a 200-character excerpt instead of a 150-character one? They just modify the parameter when they use the function. No problem there.

If you use this function a lot, you will notice that the parameter for the text is usually the post’s content, and that you usually use 200 characters instead of the default 150. Wouldn’t it be nice if you could set up new defaults, so that you didn’t have to add the same parameters over and over again? Also, what happens if you want to add some more custom text to the end of the excerpt?

These are the kinds of problems that hooks solve. Let’s take a quick look at how.

function get_excerpt($text, $length = 150) {

$length = apply_filters("excerpt_length", $length);

$excerpt = substr($text,$length)
return $excerpt;
}

As you can see, the default excerpt length is still 150, but we’ve also applied some filters to it. A filter allows you to write a function that modifies the value of something — in this case, the excerpt’s length. The name (or tag) of this filter is excerpt_length, and if no functions are attached to it, then its value will remain 150. Let’s see how we can now use this to modify the default value.

function get_excerpt($text, $length = 150) {

$length = apply_filters("excerpt_length");

$excerpt = substr($text,$length)
return $excerpt;
}

function modify_excerpt_length() {
return 200;
}

add_filter("excerpt_length", "modify_excerpt_length");

First, we have defined a function that does nothing but return a number. At this point, nothing is using the function, so let’s tell WordPress that we want to hook this into the excerpt_length filter.

We’ve successfully changed the default excerpt length in WordPress, without touching the original function and without even having to write a custom excerpt function. This will be extremely useful, because if you always want excerpts that are 200 characters long, just add this as a filter and then you won’t have to specify it every time.

Suppose you want to tack on some more text, like “Read on,” to the end of the excerpt. We could modify our original function to work with a hook and then tie a function to that hook, like so:

function get_excerpt($text, $length = 150) {

$length = apply_filters("excerpt_length");

$excerpt = substr($text,$length)
return apply_filters("excerpt_content", $excerpt);
}

function modify_excerpt_content($excerpt) {
return $excerpt . "Read on…";
}
add_filter("excerpt_content", "modify_excerpt_content");

This hook is placed at the end of the function and allows us to modify its end result. This time, we’ve also passed the output that the function would normally produce as a parameter to our hook. The function that we tie to this hook will receive this parameter.

All we are doing in our function is taking the original contents of $excerpt and appending our “Read on” text to the end. But if we choose, we could also return the text “Click the title to read this article,” which would replace the whole excerpt.

While our example is a bit redundant, since WordPress already has a better function, hopefully you’ve gotten to grips with the thinking behind hooks. Let’s look more in depth at what goes on with filters, actions, priorities, arguments and the other yummy options available.

Filters And Actions
Filters and actions are two types of hooks. As you saw in the previous section, a filter modifies the value of something. An action, rather than modifying something, calls another function to run beside it.

A commonly used action hook is wp_head. Let’s see how this works. You may have noticed a function at the bottom of your website’s head section named wp_head(). Diving into the code of this function, you can see that it contains a call to do_action(). This is similar to apply_filters(); it means to run all of the functions that are tied to the wp_head tag.

Let’s put a copyright meta tag on top of each post’s page to test how this works.

add_action("wp_head", "my_copyright_meta");

function my_copyright_meta() {
if(is_singular()){
echo "";
}
}

The Workflow Of Using Hooks
While hooks are better documented nowadays, they have been neglected a bit until recently, understandably so. You can find some good pointers in the Codex, but the best thing to use is Adam Brown’s hook reference, and/or look at the source code.

Say you want to add functionality to your blog that notifies authors when their work is published. To do this, you would need to do something when a post is published. So, let’s try to find a hook related to publishing.

Can we tell whether we need an action or a filter? Sure we can! When a post is published, do we want to modify its data or do a completely separate action? The answer is the latter, so we’ll need an action. Let’s go to the action reference on Adam Brown’s website, and search for “Publish.”

The first thing you’ll find is app_publish_post. Sounds good; let’s click on it. The details page doesn’t give us a lot of info (sometimes it does), so click on the “View hook in source” link next to your version of WordPress (preferably the most recent version) in the table. This website shows only a snippet of the file, and unfortunately the beginning of the documentation is cut off, so it’s difficult to tell if this is what we need. Click on “View complete file in SVN” to go to the complete file so that we can search for our hook.

In the file I am viewing, the hook can be found in the _publish_post_hook() function, which — according to the documentation above it — is a “hook to schedule pings and enclosures when a post is published,” so this is not really what we need.

With some more research in the action list, you’ll find the publish_post hook, and this is what we need. The first thing to do is write the function that sends your email. This function will receive the post’s ID as an argument, so you can use that to pull some information into the email. The second task is to hook this function into the action. Look at the finished code below for the details.

function authorNotification($post_id) {
global $wpdb;
$post = get_post($post_id);
$author = get_userdata($post->post_author);

$message = "
Hi ".$author->display_name.",
Your post, ".$post->post_title." has just been published. Well done!
";
wp_mail($author->user_email, "Your article is online", $message);
}
add_action('publish_post', 'authorNotification');

Notice that the function we wrote is usable in its own right. It has a very specific function, but it isn’t only usable together with hooks; you could use it in your code any time. In case you’re wondering, wp_mail() is an awesome mailer function — have a look at the WordPress Codex for more information.

This process might seem a bit complicated at first, and, to be totally honest, it does require browsing a bit of documentation and source code at first, but as you become more comfortable with this system, your time spent researching what to use and when to use it will be reduced to nearly nothing.

Priorities
The third parameter when adding your actions and filters is the priority. This basically designates the order in which attached hooks should run. We haven’t covered this so far, but attaching multiple functions to a hook is, of course, possible. If you want an email to be sent to an author when their post is published and to also automatically tweet the post, these would be written in two separate functions, each tied to the same tag (publish_post).

Priorities designate which hooked function should run first. The default value is 10, but this can be changed as needed. Priorities usually don’t make a huge difference, though. Whether the email is sent to the author before the article is tweeted or vice versa won’t make a huge difference.

In rarer cases, assigning a priority could be important. You might want to overwrite the actions of other plugins (be careful, in this case), or you might want to enforce a specific order. I recently had to overwrite functionality when I was asked to optimize a website. The website had three to four plugins, with about nine JavaScript files in total. Instead of disabling these plugins, I made my own plugin that overwrote some of the JavaScript-outputting functionality of those plugins. My plugin then added the minified JavaScript code in one file. This way, if my plugin was deactivated, all of the other plugins would work as expected.

Specifying Arguments
The fourth argument when adding filters and actions specifies how many arguments the hooked function takes. This is u[…]

Advertise here with BSA
MooVES is a MooTools plugin for easing and enhancing the integration of videos from popular video sharing websites (YouTube, Vimeo, Dailymotion, Facebook, Flickr, Google Videoi etc.).

It is unobtrusive and displays the link to the video and a notice if JavaScript or Adobe Flash Player is not enabled.

The plugin works by simply mentioning the URL of the media as a link and calling the MooVES function with targeting that element.

There is no need to know the settings for each video service and a single function makes setting options (like width/height, background/foreground colors, autoplay or loop) possible.

MooVES also has support for HTML5 video tag features (in beta).

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Back in June, we announced a pilot program to allow users to surface Google Search data in Google Analytics by linking their Webmaster Tools accounts. We’ve been busy making some improvements and tweaks based on user feedback, and today we’re excited to make this set of reports available to all users.

The Webmaster Tools section contains three reports based on the Webmaster Tools data that we hope will give you a better sense of how your site performs in search results. We’ve created a new section for these reports called Search Engine Optimization that will live under the Traffic Sources section. The reports you’ll find there are:
Queries: impressions, clicks, position, and CTR info for the top 1,000 daily queries
Landing Pages: impressions, clicks, position, and CTR info for the top 1,000 daily landing pages
Geographical Summary: impressions, clicks, and CTR by country

Queries report
To start using the reports you first need to link your Google Analytics and Webmaster Tools accounts. You can get step by step instructions and additional information on the reports in this Help Center article. If you’re not already using Webmaster Tools, we highly recommend you start. It’s a free tool that helps you understand how Google sees your site. Sign up on the Google Webmaster Tools homepage. Enjoy the new reports, and let us know how they’re helping your analysis.

Posted by Kate Cushing, Associate Product Manager, Google Analytics team

 



 





It’s easy to see your top-visited pages, navigation patterns and conversion metrics using visitor-tracking tools like Google Analytics. However, this data doesn’t show the roadblocks that users typically run into on your website. Tracking and optimizing error messages will help you measurably improve your website’s user experience. We’ll walk through how to add error tracking using Google Analytics, with some code snippets. Then, we’ll assemble the data and analyze it to figure out how to improve your error message drop rates.

What To Track
The most helpful errors to track are form-field errors and 404 pages. Form-field errors can be captured after the form’s validation has run; this can be client-side or server-side, as long as you can trigger a Google Analytics event when an error message appears to a user. (We’ll be using Google Analytics in this article, but you can apply these concepts to many visitor-tracking tools, such as Omniture and Performable.)

Form-Field Errors
Forms that allow users to create an account, log in or check out are the places where most visitors will hit stumbling blocks that you are not aware of. Pick pages with forms that have high exit rates or that have high total page views but low unique page views. This could indicate that users are repeatedly trying to submit the form but are encountering problems.

The easiest way to track form-field errors with Google Analytics is to track an event each time a user sees an error message. The specification for _trackEvent is:

_trackEvent(category, action, opt_label, opt_value)
If the form is for signing in and the user submits an incorrect password, I might use the following code:

<script type='text/javascript'>
_gaq.push(['_trackEvent', 'Error', 'Sign In', 'Incorrect Password']);
</script>
If possible, store the error message’s text as a variable, and call this variable within Google Analytics’ event tracker. This way, as you change the text of the error message over time, you can measure the differences between the versions. For example, in PHP, I might write:

<?php
$message = 'Incorrect password';
if ($message) { ?>
<script type='text/javascript'>
_gaq.push(['_trackEvent', 'Error', 'Sign In', '<?php echo $message ?>']);
</script>
<?php } ?>
If it’s possible for the user to receive more than one error message on the page at a time (for example, if they’ve missed more than one field in a form), then you might want to store all of the messages in the same event tracker. Use an array, or concatenate them into the variable that you call in your event tracker. You might see that a user has attempted to skip all of the fields in a form; this could indicate that they are testing the form to see which fields are required and which are optional. You’ll notice this if you have tracked an event that includes all missing fields in the same event. However, storing all of the messages in the same event might prevent you from tracking the effects of individual error messages over time, so begin by tracking each error message separately.

404 Pages
You might already know how many times your 404 page is being viewed, but do you know which URLs the users were trying to reach, or what websites are referring to those URLs? By adding a tracking code to your 404 pages, you can see both. The following snippet will include the URL that generated the 404 error and the URL that linked to that page:

<script type="text/javascript">
_gaq.push(['_trackEvent', 'Error', '404', 'page: ' + document.location.pathname + document.location.search + ' ref: ' + document.referrer ]);
</script>
Google Analytics Reports
As you track errors as events using Google Analytics, you will find a list of them in your reports under “Event Tracking,” under the “Content” menu. Choose “Categories,” and then start drilling down through your error types.

You can save any of these graphs to your dashboard with the “Add to Dashboard” button at the top of each screen. I find it useful to list the top 404 errors on my dashboard, so that I can see whether anything new has popped up when I log in.

Google Analytics also lets you know of spikes in error messages. The “Intelligence” section allows you to set an alert for when a certain metric reaches a specified threshold. In my case, I want to know when the number of unique 404 errors has increased by more than 20% over the previous day.

In your custom alert, set the alert’s conditions to include “Event Action,” matching your error’s name exactly. In this case, the error name is “404.” Set it to alert you when the “Unique Events” percentage increases by more than 20% over the previous day. Be sure to check the box for the option to receive an email when this alert triggers!

Once you have captured enough data to analyze, start creating these dashboard widgets and alerts in Google Analytics, so that you can make informed decisions on how to improve your website.

How To Analyze Errors
Error messages will help you see in aggregate the most common stumbling blocks for users. Are a lot of users encountering errors with a particular text field? Perhaps the field for the expiration date of their credit card? Or for their email address? You might be surprised by what your users encounter.

Segmenting Data
If your website gets a lot of traffic, consider segmenting the user base to analyze the error messages. Look for groups of users who make up the majority of a certain kind of error event, because there may be something unique about that segment.

“New Visitors” are first-time visitors to your website. They are likely unfamiliar with the typical flow of your navigation and are brand new to your forms and so don’t know what fields are required. “Returning Visitors” will likely be familiar with your website, so they may not have a large impact on error rates (unless you’ve changed something that catches them by surprise).

To change the user segment that you’re looking at, go to your list of error events and click the drop-down menu next to “Advanced Segments.” By selecting “New Visitors” and then hitting “Apply,” the data will update to show only the errors that “New Visitors” have encountered.

Break down your data on error messages according to user segment in order to analyze the data more deeply.

Segmenting users by country can also give more context. I once wrestled with why so many users were triggering error messages for ZIP and postal codes in a form. After organizing the data by country, I saw a high number of errors from one country whose postal-code syntax I hadn’t accounted for in my form’s validation. I fixed the error and saw the error rate for ZIP and postal codes drop.

Check errors by country to see whether any patterns emerge in your error messages.

Referring sources for 404 pages is another way to examine the data. Use the “Filter Event Label” search bar to show errors whose referring source is a particular domain. Searching your own domain first is useful to see which incorrect URLs you can quickly fix on your own website.

Prioritize Issues
After segmenting the data, prioritize the errors that you want to fix. The top priority will be errors that affect a large group of people (i.e. ones that have a high number of unique events). Next, work on the errors that you know you can easily fix. You likely already know the cause of some errors (poor validation, unhelpful error message, etc.), so clean those up. For 404 errors, check which referring links come from your website, and fix those.

Examine 404 errors to see whether any particular referring links can be easily fixed.

Once you’ve cleaned up the errors that are easy to fix, track the new data for at least a week before doing another round of prioritization. Examine what has changed in the top errors and where they come from, and then research the cause of those errors.

Often, forms will need to be made more intuitive to help users avoid error messages. For example, if a lot of users are making mistakes when entering a date, then play with that field. Does your user base prefer drop-down menus for days, months and years? Do they make fewer errors if given a date picker? Are you giving them helpful examples of the syntax they need to follow? Track your changes and measure the rate of error events after each change to see what decreases user error.

Improve Your Error Messages
Improving the text, design and layout of your error messages could decrease the number of repeated errors by users. An error message might not be clear or might be hidden on the page; improve the user experience by testing changes to your error messages.

I prefer A/B testing to compare the effectiveness of error messages and their designs. On one form, I noticed that a number of users were skipping the phone-number field altogether, even though I’d indicated that it was required.

Some of the indicators of a required field that we tested.

After A/B testing different ways to indicate that the field was required and why it was required, we found that the combination of a link and a tooltip helped users recognize the need to fill in their phone number. This solution drastically decreased the rate of errors for this field.

On 404 pages, test out different content on users: link to your most popular pages; present a search form; try humorous content or Easter eggs to lighten the users’ spirits.

As you test different textual and design changes to your error messages, be sure to measure their effectiveness. Examine the following:

Total error events, and total events per error message;
Unique events per error message;
Exit rates on pages with forms and 404 pages.

All of these rates should drop. Ideally, your users should find the website so intuitive that your error event data will represent only […]

Advertise here with BSA
PSDblast, a website designing and publishing PSD resources freely is sharing a nice set of icons.

The set consists of 500+ items with many standard and original icons from actions to charts, media, devices or signs.

It is offered as a single and carefully-layered PSD file with each icon coming as a shape which makes resizing to any size possible.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

I’m not a fan of WordPress Multisite functionality, I’ve always found the system to be clunky, confusing for new users and constantly in need of tweaking, that’s why I was happy to test out ManageWP from developer Vlad Prelovac. Not only is the system not clunky, it makes adding new websites, managing plugins and themes and backing up a WordPress setup extremely simple, even for beginners.

Setting up ManageWP is just a matter of downloading the plugin and activating the program on your website. Once activated the plugin shows up on the left side of your admin panel under the “ManageWP” heading.

As you’ll notice below the main ManageWP section all of the websites you have managed are added for easy access. To add a new website simple load the ManageWP plugin to the new website and active the plugin, then access the “Add Website” tab and input the website URL and username to add the site.

It’s important to note that the moment you activate the plugin any other website can claim your blog until you add the site to your dashboard, if you are not ready to add a site make sure to deactivate the ManageWP plugin on that site.

Also notice that you can choose a site color for each of your blogs in order to provide a unique look.

One of my favorite aspects of ManageWP is the ability to mass upload plugins and themes to all or any of the sites I have on my platform. For example with SplashPress I can select 901am.com, applegazette.com and bloggerjobs.biz and upload the same plugin to all of those sites. If the plugin doesn’t require special setup option I can even choose the “activate plugins after upload” to mass activate the new plugin option.

Here’s a quick look at the upload interface, notice the simple grid feature for choosing sites and upload options.

You’ll also notice the ability to choose where files are uploaded from (WordPress repository, My Computer, My Favorite and even in the .ZIP format which will be unarchived during the upload and activation process.

If you’re constantly worried about losing files on your site, server crashes and other unexpected errors you’ll appreciate the ManageWP backup feature which allows you to choose between MySQL and full site + MySQL database backups. As you’ll notice in the screen grab below.

Along with backing up a single site you can once again choose “mass backups” by clicking on the “select websites” part of the backup screen and you an backup your site to alternative destinations including FTP, Amazon S3 and Dropbox.

I love the fact that not only can I back up my files in bulk using the program without having to set a Cron Job or handle other server site information, I can also choose when to backup those files and even optimize my WordPress tablets at the same time.

If you manage a network of sites where you would like to bulk upload posts or pages then you’ll also love ManageWP. Using the options to the left side of the WordPress panel users can load a new post panel and then choose sites to bulk upload.

Throw in the ability to “clone/migrate” a website which makes setting up a site with all your favorite already used plugins and themes a snap, along with the options to bulk add users and bulk add links and it’s easy to see why ManageWP makes controlling your WordPress enabled websites so easy.

The next time I start a new website network I will be sure to give ManageWP control of those websites, a move that will guarantee easier site administration and a headache free experience.

Users interested in ManageWP can check out pricing by visiting: managewp.com/plans-and-pricing. In the meantime the program

 

Adobe's cracking through its first-day Adobe Max keynote today. And while we were teased with the Photoshop Touch SDK in the spring, we're now getting down to brass tacks. The promo video above gives you an idea of what's going on. And while things are always ideally edited in promo videos, you get a sense of what's in store. We're talking full digital content creation on Android (and iOS) devices. And as we type this, we're watching a Photoshop Touch demo being done not on an iPad, but on Honeycomb. Android, folks.

Exciting times, indeed.

Source: Adobe; More Watch the keynote live

 



 





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 $300 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 […]

  


They say that ignorance is bliss and knowledge is power but somewhere between these clichés there’s a spot reserved for individuals who possess a little too much knowledge to be blissful but still only enough knowledge to be dangerous.

SEO, as an industry, is known unfortunately for the mass of rumours, myths, mistruths and unscrupulous gurus. This in part stems from the search engines’ unwillingness to discuss their algorithms (this lack of disclosure is completely understandable). This breeds a culture of myths where newbies and veterans alike get caught out by nothing more than hearsay that gains traction.

The aim of this post is to try and dispel some of the more widely held SEO myths:

#1 – Google is the Only Search Engine

Google may be the largest search engine but you shouldn’t ignore the others. Image Credit

It sounds ridiculous to say and whilst Google is the biggest of the search engines, Bing has certainly cornered a fair percentage of the market – some say as high as 30% of all US searches are powered by Bing. This means that while you should undoubtedly concentrate your SEO efforts on pandering to Google, you shouldn’t completely ignore Bing.

Many of the techniques and principles are the same across the search engines but you should also do things like register your website over at Bing’s Webmaster Center Tools.

#2 – You Need to Submit Your Website to Google
This is a myth that has been around as long as Alta Vista.

There are hundreds if not thousands of hosting companies, SEO companies and web designers offering to ‘submit’ your website to all the major search engines – and charge you for the privilege.

The fact is you just don’t need to submit your website to Google or any other search engine. Inclusion in search engines is free and usually automated. Google very often finds and indexes your website as a result of visiting a link contained on another web page.

#3 – You Can ‘SEO’ a Website Just Once
Search engine optimisation is rarely a one-time thing – we understand why people hope it is, since cash, particularly in small businesses, is precious. However, a website’s search engine performance needs regular attention.

This might sound like the plea of a salesman pitching a monthly retainer but the simple fact of the matter is that Google et al tweak their algorithms and search results constantly, not forgetting the fact that your competitors are likely to be investing in improving their websites too.

All of this can have a dramatic impact on your website’s performance in the search results. If you’re not investing in SEO on a regular basis then you’re falling behind.

#4 – You don’t need to worry about SEO
There are some people who will tell you to completely disregard SEO, saying that they’ve never given a fig about the search engines in their life and they’ve done alright.

Granted, some brands, rockstars and superstar bloggers can get away with not bothering. For everyone else however, optimising your website and working towards better search engine visibility is essential. Whilst you shouldn’t do things or make decisions solely on the basis of search engines, you should certainly contemplate them and understand how they work and what they look for because they are a truly astounding source of traffic.

#5 – Your Rankings Don’t Matter
The advent of personalised search results has reduced the importance of rankings somewhat but they aren’t obsolete by any means. They may not give you a 100% accurate picture but they are a fair indication or approximation of where your website ranks for the majority of users.

We understand why this myth came to be, and we accept that any SEO worth their salt should be focusing their attention on more than just rankings these days; overall search visibility, conversion rate and search engine traffic are core success metrics in many’s eyes.

But don’t forget that the lion-share of searchers will leave Google via the first page of results so knowing where your website sits is a very useful indicator indeed.

#6 – An XML Sitemap Will Boost Your Rankings
We imagine this started life as the perfectly legitimate advice that having a sitemap is a good idea from an SEO perspective – it certainly is a best practice.

However, whispers across forums and blogs likely transformed this into the myth that a sitemap would boost your rankings. The suggestion that a sitemap will give any page on your website a boost is pure fiction – search engines use your sitemap to learn about the structure of your site and to increase coverage of your webpages.

#7 – Keyword Domains Trump All Other Tactics

Keyword domains don’t hold the same power as they once did. In fact, the idea is somewhat dated. Image Credit

In case you are wondering, a keyword domain is a domain that includes a keyword you wish to target, for example cheapwidgets.com.

Registering a keyword domain was, at one time, a reasonable SEO strategy (not one that we favoured, but nobody can deny that it worked) however since Matt Cutts announced in 2010 that Google would be looking into why keyword domains rank so well and the search engine’s subsequent ‘tuning down’ of the power of keyword domains, this has become a far less effective strategy.

We will accept that in some markets it will still work but this isn’t going to be the case for very long since in most verticals and particularly on competitive keywords, Google has all but wiped out the keyword domains that didn’t really deserve the rankings they had suggesting they’ve gotten wise to the tactic.

If you’re looking to establish a solid foundation for your website then it is far smarter to opt for a brandable and memorable domain rather than attempting to shoehorn your target keywords into a long, often hyphenated, difficult to remember and spammy looking domain.

To be clear, if you own a keyword domain, it’s not going to count against you, you just need to embark on a proper promotional campaign including link development and social media marketing in order to build the authority and profile of the website.

#8 – Copying a Competitor = A Strategy
There is a widely held belief that firing up OpenSiteExplorer and taking a look under the hood of your competitor’s website constitutes an SEO strategy – it really doesn’t.

Replicating your competitor’s link profile or search strategy is rarely a smart move and may even count against you. This is because a technique or linking method that works for them may not work the same way for you.

There’s nothing wrong with learning from your competitors, as the old saying goes “Learn from the mistakes that other people make” and with the wealth of data available, it is a smart move to understand what your competition is doing and develop your strategy accordingly.

#9 – Meta Data is Worthless
Less important, yes. But worthless? No.

We’ve seen Google ignore meta titles and descriptions when it thinks there is a better one to use but by and large it will take your hint as to what the page is about.

Wouldn’t you much rather your preferred title and description were used rather than what Google can pull from the page itself? Meta data is your chance to convince searchers to clickthrough – it is your platform to engage and standout.

With the launch of Google+, each time a link is published on the social network, a title and description is scraped. If your website doesn’t have any data then Google will pull in whatever it can find, and your link could end up looking pretty ugly.

#10 – You Can Learn SEO by Reading Up
In every industry there are ‘gurus’ and the world of SEO is no different – wannabe experts who’ve got their website ranking for a brand term and suddenly think they’re qualified to teach others “how to get page 1 rankings”.

There are some gurus out there who spend more time theorising, pontificating and regurgitating opinions of others than they do actually SEOing, consequently their knowledge and advice often leaves a little to be desired.

Be careful who you take advice from and try to divide your time 10/90 so for every 10 minutes you spend studying SEO you should spend 90 minutes actually doing it. The best way to learn SEO is to experiment yourself.

That’s not to say that there aren’t some sharp minds out there, in fact there are many SEO blogs out there worth checking out.

With Google’s recent announcement that they will support the rel author attribute, trust and authority will start to play a bigger role in SEO in the future. This should help to increase the visibility of the true experts out there – which will be a good thing for everyone.

#11 – Google Adwords Can Hurt/Help Your Rankings
There is a definite conspiracy theory that advertising via the Google Adwords platform somehow impacts on your organic search rankings. There seems to be just as many people who believe the exact opposite. That fact alone should tell you that there is absolutely no truth to this.

Nevertheless, it is a myth that continues to spread despite the fact that Google has reiterated time and time again that “Google’s advertising programs are entirely independent of the unpaid search results.” (source)

It is understandable why some people believe this to be a fact but in reality having worked on close to 250 campaigns (which included a mix of SEO and PPC), honestly, there is no visible correlation whatsoever between Google Adwords spending and organic rankings.

#12 – Google Will Never Figure Out What I’m Up To

Be very mindful of the footprint you are leaving… Image Credit

Google is very advanced – there are undoubtedly some areas they could improve on – but by and large as each year passes their algorithm gets smarter and smarter in order to deliver better and better results for users.

Find the balance; develop a strategy that gets the results you wa[…]

There are several types of design and every web designer decides for himself which approach he takes, but today we take a look at a particular one of them, called Defensive web design. What does it mean? The defensive design is also called contingency design and refers to the idea that the interface has to be designed in such a way that potential failures will not force the user away from your webpage, but will keep him there.

The contingency design can contribute a lot to your success, because all designers know there is not a product without flaws, therefore getting the best out of these flaws will help you keep your visitors close. Contingency design is familiar to a context that happens a lot in the stores. When the client goes and asks for something that is not in stock, he will not get rejected. The shop assistant will most of the time recommend another product. The defensive design does the same thing: takes the client’s mind away from the problem and helps him with information or makes him try again.

Error pages
There are many ways of designing in a defensive manner, one of them being the 404 error pages, which are very popular. There is no internet user who never encountered a 404 error. The last thing users want is to get the default Internet Explorer 404 message, which is full of unimportant and irrelevant information that scares the visitor away. Designing the 404 error page following these tips might help:

Avoid technical jargon when composing the text. There are users that will understand it, but for most it might be scary. “Page not found” is a better title than “404 error”. Don’t forget that this type of error page targets mainly low-prepared users, because the proficient technicians can find their way back to the page easily and do not need guidelines. Design the 404 pages for beginners!
You could explain the reason behind the error. There are many problems that lead users to 404 error pages, but you can write a few lines on the most common problems. Ask the users to check the spelling of the address and maybe the problem will be solved.
You should include other resources in the error pages, such as the most read articles, the most commented and even a search box. It is likely that the person arrived on your page from another address looking for a very popular article of yours. Otherwise he can use the search box available to browse through the content.
Most users will not do it, but some of them want to report the problem to you. Therefore you have to include contact information in the error pages, so the users can easily reach you and tell you about the missing link or whatever the problem is.

The 404 Error Page of Twitter

You can follow the same tips to design the 500 error pages (internal server errors) or 502 error pages (server error) and any other pages of this kind. Just keep them simple and do not scare the user away with them.

In-line help
Another way of keeping the users on your website is to offer them help whenever they have to fill in or buy something. People do not play with their money, therefore when it comes to something involving their personal information, credit card numbers and so on, be specific and offer every information and small detail. Instead of sending them to another page, you could also have something called in-line help (see example in the image below, print screen from GoDaddy.com). When the mouse is placed over the underlined text, a tooltip box appears and offers the user a whole lot more information about the product.

Example of in-line help

Another way of helping is the contextual help. This type of help offers guidelines of the current process the user follows. WordPress offers guidelines this way to its user and does it mainly in the dashboard/administration area. They use a simple language and show the option to go into more details by accessing the forum or the documentation available.

Think of the slow connections
Even if internet speeds are incredibly fast today, there are still computers connected to slow networks. This is why defensive design has to be about them as well. Even if you use Flash animations, jQuery, JavaScript and so on, try to make the most important elements using HTML and CSS only, because this way they will load fast regardless of the type of connection. This will also ensure the users on slow connections will see the most important information, even if they will skip the eye-candy elements.

This is not only for the users accessing the web from a slow local connection, but also for the ones on public wireless networks. Don’t forget the users that access web pages from their mobile phones nowadays, so if you don’t have a version for portable devices, you can’t be sure that heavy elements will load on their devices.

Search bar
One of the first elements introduced on the web – ever – was the search bar; it is still useful today. The most successful webpages in the world have a search bar, because this got normal several years ago and stayed like that. The reason behind its popularity is because the search bar is still a useful element. A “similar to this” or “did you mean this?” option is a very good element as well, if you could have that within your search bar. You can see in the image below how useful this option can get for Amazon.

Amazon search box

Forms
The most problems users have on a webpage are caused by a poor handling and design of web forms. Whenever the user has to fill in a form and something is wrong, he has to feel safe. Don’t forget the typical, average user is not used to the web and these errors might scare him away. Telling him that he completed the form wrong in full caps lock is a bad way of dealing with such a problem. Why not tell him that there was a mistake, which is highlighted in red, and he can solve it right away. Don’t blame the user for making a mistake, not all of them are experts on the web. The errors have to be highlighted with graphics and text, so the user knows what went wrong.

One of the most annoying things are forms which, once completed right, do not keep the information stored. When you can’t complete a registration because of a small mistake, taking it all over again from zero is not cool; at all! Code the website in such a way that it preserves the information in the forms filled in with the right information, so the user will only have to change the fields where there was a mistake.

Another useful tip is to have forms in which the users have to type in DELETE in order to get unsubscribed from a service, erase personal information or e-mail accounts. It might be annoying, but it is clearly the best way of ensuring no data is erased by mistake. This is another tip for defensive web design.

Detecting problems
The best way to ensure there are no problems is to take care of them beforehand. Try to check your webpage for missing links, moved or deleted pages and so on. Google Webmaster Tools can help you look for and take care of these problems. However, you have to use Google Analytics in order to be able to access this function.

There you go, these were today’s tips on how to start thinking defensive when you design and how to avoid common mistakes non-educated designers do. Have you heard or ever used some other actions to make sure you do not scare the users away? Do you know some good examples or some bad ones?

More on this topic
Here is a list of links for further reading, if you wish to find out more about defensive web design/contingency design:

Getting Started With Defensive Web design on Smashing Magazine

Contingency Design

Tips to improve your 404 error pages on GraphicMania.net

70 Unique Examples of 404 error pages on 1stwebdesigner

Contingency Design on 37signals

DefaultIcon is a repository of elegant, visually unified, minimal icons with crystal clear clarity, based on black color. It can be used for UI design on web, portable devices (iPhone, iPad, Android compatible devices, other smartphones etc) , desktop applications, and generally any kind of electronic or mechanic machinery interface.
The set is completely customizable as it is available in eps format. The package also includes a png format , in black color, and sizes 16×16, 32×32, 48×48, 64×64, 128×128, 256×256. The icons are free for redistribution, commercial and non-commercial, as long as the license is passed along unchanged and in whole, with credit to interactivemania.

Requirements: - Demo: http://www.defaulticon.com/ License: Creative Commons 3.0 License
Related PostsFree Wireframe Toolbar Icons for Interface GUI Designer
Free Web Application Icons Set
560 Nice and Free Icons for Web Application Developers
Monofactor Released a Set of 25 Vector Icons for Free
247 Hand Drawn Web Icons Free for Download
SponsorsProfessional Web Icons for Your Websites and Applications

Advertise here with BSA
The number of iPad-specific magazines/content is increasing with a huge speed these days and you may be involved in such a project too.

If so, Magazine Grid will help a lot as it is a modern CSS framework, built specifically for iPad, which comes with common magazine design elements like pagination, gutters and a basic grid.

The framework uses HTML5 elements for structuring the magazine pages. Simply, an <article> element wraps up your page and <section>s define the portions of content.

Magazine Grid weights only 4kb and has a fallback style for devices with smaller screens.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA
Ideal Forms is a lightweight framework, built on the top of jQuery, for creating good looking and user-friendly forms.

It converts standard <input> elements into ones with rounded corners having an attractive focus effect. And, radio + checkbox elements are completely customized.

No images are used, they requires minimal HTML syntax and can be completely styled with CSS (comes with 3 themes).

The framework is unobtrusive and degrades gracefully with JavaScript disabled.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

  


Considering how many designers are self-taught, either in whole or in part, the importance of a solid foundation in graphic design theory is often overlooked. New designers often want to jump right into creating websites, rather than learning the basics of why some designs work and some don’t. But they’re putting themselves at a disadvantage to designers who do have formal training or have taken the time to learn the principles behind good design.

Below are more than 45 recent lessons in graphic design theory. Included are general theories, theories about user experience and usability, typographic theory, layout and grid theory, and color theory.

General Design Theory
The Lost Principles of Design
Covers a number of basic graphic design principles, including balance, contrast, emphasis and subordination, directional forces, proportion, scale, repetition and rhythm, and unity, all with illustrations.

Principles of Good Design: Balance
Discusses how important balance is to creating an effective design. It covers symmetrical and asymmetrical balance, as well as off-balance designs.

Web Design Tips: The Use of Balance
This covers how to create balance in your website designs. It’s a simple overview article, with a lot of practical advice in addition to theoretical discussion.

The 5 Primary Principles of Potent Web Design, Part 5: Balance
This article from The Pro Designer covers the principle of balance and how to apply it to your designs. It’s short and to the point. Be sure to check out the links at the end for the other principles in the series.

3 Graphic Design Principles for Instructional Design Success
While dealing specifically with instructional design, this article covers three important principles that can be applied regardless of the purpose of your design: using layouts to convey meaning and relationship, using pattern and repetition to organize content, and using just the right images and no more.

Elements and Principles of Design
A great primer on the basic theories of visual design. If you’re not sure where to start, this might be a good place.

In Search of Ethics in Graphic Design
Ethical considerations are all too often overlooked in the world of graphic design. This article aims to change that by discussing a designer’s responsibility to their users.

Want to Know How to Design? Learn the Basics
This article provides a great overview of basic graphic design principles, including color, line, shape, space and more. Additional resources are provided for each concept.

Elements and Principles of Design
This page offers a basic but useful overview of the elements and principles of design, with basic illustrations of each concept. It’s a great starting point and incredibly easy to understand, because it’s aimed at young students.

11 Principles of Interaction Design Explained
Veering away from strictly graphic design, this useful article covers theories related to interactive design. Included are concepts such as matching experience and expectations, consistency, and functional minimalism. Some of the concepts could be carried over to non-interactive design (such as for print media).

The Modern, No-Nonsense Guide to the Principles of Design
This covers all of the basics: balance, emphasis, movement, pattern, repetition and more, as well as six “new” principles of eBook design that are just as relevant to website and graphic design.

Grid and Layout Theory
Grid-Based Web Design, Simplified
This covers the theory of grid-based design and gives practical advice on how to create your own grids, without over-complicating things.

Grids in Modern Web Design
A slideshow that explains the theory behind using a grid for a layout. It’s a quick introduction to grid theory, with a few practical examples.

Grids: Order Out of Chaos
A short article from About.com that discusses the basics of grid systems, why you should use them and what goes into designing them. Most of the information is geared to magazine and other print media, but many of the principles apply to all types of design.

Rule of Thirds, Visual Center, Grids
Another About.com article that discusses the theories of balance in page layout. The principles could be applied to either web or print design, but the article focuses on print design.

Gestalt Principles Applied in Design
This Six Revisions post covers the six basic principles of Gestalt theory — proximity, similarity, figure-ground, symmetry, “common fate” and closure — and how to apply them to your designs.

Understanding Visual Hierarchy in Web Design
This Webdesign Tuts+ post covers the basics of visual hierarchy from a very practical standpoint. By the time you finish the article, you’ll have a grasp of not only what hierarchy is and why it’s important, but also how to effectively incorporate it in your designs.

How to Use Visual Hierarchy in Web Design
This article from Design Shack covers the principles of visual hierarchy and how to achieve it, accounting for size, color, position and visual complexity.

Grid Theory
This article covers grid theory in relation to Phi, the Rule of Thirds, and the 960 Grid system. It’s excerpted from Jason Beaird’s The Principles of Beautiful Web Design book.

Applying Divine Proportion to Your Web Designs
Discusses how to apply Phi (a ratio of roughly 1:1.618) in order to achieve more attractive and visually balanced designs. It also discusses the Rule of Thirds and has some practical advice for implementing each theory.

Usability and User Experience
5 Timeless Usability Principles for Website Designers
This post from 1st Web Designer covers five established principles of usability, including designing with a target in mind and focusing on conventions.

10 Usability Principles to Guide You Through the Web Design Maze
A quick overview of 10 usability principles. It’s short and to the point and a great place to start learning about usability.

How Cognitive Biases Shape User Experience
This slightly more advanced article covers the psychology behind why users react to design elements the way they do. It also covers the cognitive biases of those involved in crafting the user experience and how they can negatively affect the result.

Principles for Usable Design
A quick overview of some important usability principles, including consistency, simplicity and communication. It offers a handful of tips for effectively implementing each principle.

8 Design and Usability Principles You Can Apply to Your Website
This article offers some great tips that, if followed, could really improve the usability and user experience of your designs. Included are topics like designing to demographics and writing for a Web audience.

11 Quick Tips for More Usable Content
This UX Booth article has some excellent ideas on how to make your website’s content more user-friendly. Some are directly related to design, while others are more related to the content itself (which should always be considered in context of the design).

What You Need to Know About Usability
Some solid background information on website usability, including why it’s important, some information on Jakob Nielsen’s heuristics, and some best practices for usability.

Typography
A 20 Minute Intro to Typography Basics
A quick, simple guide to good typography. This is a high-level overview that covers things like typeface classifications, the anatomy of type, kerning and tracking, alignment, and ligatures, among other topics.

8 Simple Ways to Improve Typography in Your Designs
This not only teaches you the theories behind the tips, but gives you practical examples and code to get you started using the theories.

The Elements of Typographic Style Applied to the Web
One of the most thorough guides to Web typography theory out there. It covers horizontal motion, vertical motion, blocks and paragraphs, the etiquette of hyphenation and pagination, and harmony and counterpoint, all in detail.

Designing for Seniors
If you ever have to create designs for older demographics, then this is a must read. It explains numerous ways to make type more seniors-friendly, including guidelines for typographic style and size, text length, white space and more.

Typography for Children
There are also guidelines for designing typography for children. This article covers things like legibility, readability and more, all related to how children perceive and respond to designs.

Typography Is the Backbone of Good Web Design
Brian Hoff covers the techniques that he uses in his own Web typography, discussing both why they work well and how to get good results.

How to Create Great Web Typography in 10 Minutes
This article is a mix of theory and practical advice, and it covers vertical rhythm, font families, visual hierarchy and font colors, all of which are important in typography, regardless of medium.

“What Font Should I Use?”: Five Principles for Choosing and Using Typefaces
Includes some excellent guidelines for choosing fonts for your designs, including contrast, font families and appropriateness.

Eight Tips for Type on the Web
A short article from Fonts.com that covers basic guidelines for creating good Web typography. Included are things like avoiding justified text, using smart punctuation and creating a typographic hierarchy.

Type and Color
Explains how to choose the proper colors for your typography, and the rationale behind using different colors when designing type.

Typography Tuesday: Hierarchy
Hierarchy is one of the most important concepts in typographic design, because it reinforces the priority of elements. Creating a sense of hierarchy is as simple as differentiating between such elements as headlines, body copy, headings and so on. This article covers a variety of ways to do that.

Type Study: Typographic Hierarchy
Here is a great lesson in typographic theory, walking[…]

I know we’ve had a few posts about mobile campaigns here on PPC Hero, but after recently reviewing my accounts by device segmentation and rediscovering how many visitors are actually clicking my ads via mobile devices, I cannot emphasize enough the importance of paying attention to your mobile audience. Amy wrote a great post not too long ago on mobile landing page best practices, and you should also check out Abby’s post on refining mobile campaigns.

But, I’d actually like to take a step backwards and create a strong foundational argument for rethinking your account structure in terms of targeted device. My goal is for this post to necessitate you to reread Amy and Abby’s posts as you are called to action to create new mobile campaigns!

As I mentioned above, this post is inspired by my own recent account audit for a client whose product is software related. It makes sense that the bulk of people searching for these products and services would be on desktops, right? Wrong! Actually, the bulk of searches in my top two highest converting campaigns came from mobile devices with full browsers. Furthermore, almost all my conversions came from these same devices. So, even people searching for products and services related to their desktop computers are doing so on their smartphones.

I would like to clarify that when I refer to “mobile” devices I am only referring to smartphones (phones with full browsers). AdWords also gives me data for tablet computers separately from desktop and smartphone (mobile) metrics. In many campaigns in the account referenced, my tablet traffic is still higher than my desktop traffic.

As Abby touches on in her post, there are many benefits to be gained from splitting out your campaigns into mobile and desktop-specific content. Not only can you manage your spend more efficiently, but you’ll also be able to create better targeted creative in your ad text, especially if your mobile call to action is a phone call (more on this below). By creating separate mobile campaigns in the account I mentioned above, I reduced spend on the computer ads that weren’t converting, and I increased my click-through rate as it was only my account’s desktop performance that was bringing my overall metrics down.

I know that not all clients have the time and resources to develop mobile landing pages and/or separate mobile sites, but fortunately I can offer you a mobile campaign work-around for these situations. If your client doesn’t have a mobile site or landing page, you can set up your mobile campaign ads with a call extension in AdWords. When you do this, make sure you select “call-only format” (see below) to ensure that only your phone number is clickable on mobile devices. Translation: mobile clicks will generate a phone call to you or your client, and you can bypass a mobile landing page altogether.

A brief side note: if you choose this call-only format for your mobile campaign ads, and make sure you’re including your tablet audience in other campaigns. If your site is accessible via tablet devices, you could probably include this segmentation with your desktop campaigns. But if you have the data to support separate tablet campaigns, it might be worth the additional effort to have separate campaigns for  mobile, tablet and desktop devices.

To add a call extension to your mobile campaigns, click on the Ad Extensions tab in AdWords. Then you’ll just need to select the campaign you want to apply the extension to, enter your phone number and select the call-only format box if you want to only generate calls from mobile devices.

You’ll also want to be sure to check the second box for call metrics, which will track your click-to-call data.

Are you already segmenting your campaigns by device? Are you managing a PPC account whose mobile campaigns are outperforming their computer counterparts? Let us know in the comments below!

Here are some additional posts to help you on your mobile campaign way:

Make Mobile Marketing Work For You

Create Mobile Landing Pages With No Programming Knowledge, For Free!

 

Check out The Adventures of PPC Hero: Heroic Feats of Pay Per Click Management at http://www.ppchero.com/. Copyright © 2007-2010 Hanapin Marketing, LLC.

Great news came in numbers this week from the world of open source content management: Joomla! downloads surpassed the 25 million mark, while a handful of other key milestones made their way into the news: 

Read full story...



Follow us on Twitter

Join free newsletter

View upcoming events

Find a new job

So you’ve got your WordPress site set up, your theme installed, and you’re almost ready to go. But there are some interface and navigation changes that you feel would improve the place for your visitors — problem is, you don’t have the time to handcode them or you don’t have the know-how. But that’s not a problem with WordPress : for almost any need, there’s a plugin available. Here are 15 great plugins for augmenting your interface and navigation.

Below there’s a list of the most popular and commonly used interface and navigation WordPress plugins available.

1. Global TranslatorGlobal Translator is a plugin that adds automatic translation to your blog via the Google Translate API. Thanks to Google Translate, the Global Translator plugin provides one-click translation of 48 languages on your site.
2. WPtouchWPtouch is a simple way to have WordPress serve a mobile-friendly website without requiring you to create and code a mobile design for your blog.

WPtouch works with smartphones like the iPhone, Android devices, the Palm Pre, Samsung Touch and more, and uses an iPhone app-esque design.
3. Carousel GalleryCarousel Gallery uses jQuery to modify the WordPress built-in gallery function. It takes the static galleries WordPress generates and turns them into a jQuery carousel that can be flipped around.
4. jQuery Lightbox for Native GalleriesIf you’d prefer to keep the static thumbnail gallery view that WordPress provides but would prefer that the full-size images would pop up in a lightbox, jQuery Lightbox for Native Galleries is the plugin that will make it happen. A lightbox is when you click on an image thumbnail and the full image is shown as an overlay on the page.
5. GD Star RatingGD Star Rating adds functionality to your blog that allows users to rate all kinds of content, including posts and pages themselves and the comments left on them. The plugin comes with widgets for showing off the most highly rated content.
6. Dave’s WordPress Live SearchDave’s WordPress Live Search adds Google-esque live search to your blog that shifts as you type in the search box — it queries the database with each keystroke. Note that this makes the plugin resource-intensive and it should be used with care, and probably not in high-load environments.
7. Multi-level Navigation PluginMulti-level Navigation is an easy way to add dropdown and flyout menus to your blog. When you need multi-level, hierarchical navigation, this plugin takes care of the job without requiring you to learn to code.

This style of navigation is particularly useful in situations when there are more multi-level navigation options than would comfortably fit within the design and remain scannable.
8. UI LabsShake up the WordPress backend interface with John O’Nolan’s collection of UI experiments, UI Labs. It is frequently updated with new experiments and currently features color-coded post statuses so you can easily see which posts are drafts, published, stickied, pending and so on in the backend.

More recently, it has included the option to use a more traditional admin bar as opposed to the cluttered one introduced in WordPress 3.2.
9. WordPress Sphinx Search PluginWordPress has notoriously bad search even after all these years, and it is widely known that plugins are required to make search more useful to users. WordPress Sphinx Search uses the open source Sphinx Search Engine to make your WordPress search more relevant.
10. Admin Trim InterfaceSpeaking of clutter in the admin interface, here’s a plugin that helps you get rid of even more of it. From the WordPress logo at the top to the footer at the bottom, Admin Trim Interface allows you to select elements that should be removed.
11. Search EverythingAnother of WordPress search’s flaws is that it only includes a limited subset of content in its range. Search Everything is a plugin that expands that range to many more items: pages, tags, custom taxonomies, categories, comments — you can even enable the searching of drafts if for some reason you want that. It also brings search highlighting to the table.
12. Breadcrumb NavXTBreadcrumb NavXT is a great way to generate breadcrumbs on your WordPress blog and can be customized to generate plugins using structures much as how permalinks are handled. Breadcrumbs are a navigational element that shows the hierarchical trail between the current page and the homepage of a site.
13. WP-PageNaviMany people find WordPress’ default pagination to be insufficient, with only the option of “Older posts” and “Newer posts” not providing enough control and precision to the user. WP-PageNavi adds numeric pagination to WordPress, allowing users to select a page of blog posts by number.

14. WP-dTreeBefore we looked at a plugin for easily creating hover flyout navigation menus, but if you think a tree format with collapsible levels would suit your blog better, WP-dTree easily adds tree navigation to your site.

15. Ajax Contact FormAjax Contact Form adds a contact form to your site so that you don’t need to publicize your email address and risk opening it up to a torrent of spammers.

Ajax Contact Form uses AJAX technologies to create a form that responds to the user with validation and eliminates the need for page refreshes on message submission.
ConclusionWhether you’re a pro blogger that uses WordPress or you’re pitching for wordpress design work online, we hope the above tools will help you out!
About the authorDaniel Thornton writes for DesignCrowd an online service that specialises in logo design, web design, WordPress design and crowdsourcing.
Get the stock images and vectors you need for your designs on Stutterstock

Want to advertise here ? Contact us

Email newsletters are an important marketing and communications tool for many businesses. The appearance of your newsletter can be enhanced with an attractive design, but having a custom design isn’t the only option. Templates are available for newsletters, and many of them are provided by companies that manage mailing lists like MailChimp and Campaign Monitor. Those two providers market towards designers more than competitors like AWeber, so as a result they tend to have better quality and quantity of templates available.

Here is a look at some of the templates available.

MailChimp Templates:
These templates are free for use on paid accounts. Free accounts are limited to more basic templates.

Campaign Monitor Templates:
Modern Template

Cool Template

Typographic Template

Airmail

Clouds Template

Fabric Template

Cotton Rag Template

Color Direct Template

Eco Template

Helvetica Template

Worn Template

Classic Template

Misty Meadow Template

Retro Green

Retro Stripes

Gridworks Template

AWeber:

Premium Templates:
FocusMail ($22)

eMail ($22)

JumpMail ($22)

Market ($14)

BlauMail ($14)

Vesatile Newsletter ($15)

Modern Business 3 Light ($15)

Corporate Newsletter ($12)

Elegance ($10)

Other Sources of Free HTML Email Templates:

FreeMailTemplates.com
Free templates from TemplatesBox
Free templates from BuyTemplates.net
HTML Email Boilerplate

Advertise here with BSA
For years, MS Powerpoint was almost the only option for easily creating and managing slideshows.

Although it is still a popular tool in the market, today, there are other options for the web-friendly people like: Google Docs Presentations, Prezi, Zoho Show and more.

Also, there are free and open source JavaScript libraries or templates that are specially built for this case and enables web designers/developers to build presentations with a flexibility which any other tool can not offer.

Web-based presentations work in all modern browsers -including mobile-, can include any media, be scripted for advanced usage and coded to be dynamic.

Here are the 9 great and well-known HTML-JavaScript-powered engines for beautiful presentations:

Deck.js

Deck.js is a lovely JavaScript library for creating HTML presentations.

While advanced users can build totally custom outputs, there are templates and themes for novice users to create a standard slideshow with no effort.

Fathom.js

This is a jQuery plugin that lets us to create the slides in HTML, style them with CSS and control the presentation logic with JavaScript.

Navigation can be handled with keyboard, mouse or scrolling.

As a unique feature, it allows defining a video for synchronizing the slideshow with.

html5slides

html5slides is a presentation library developed by Google.

It has 2 built-in themes and support 3 different layouts (regular, faux-widescreen, widescreen).

DZSlides

A single file HTML5-CSS3 template for building presentations.

It also offers 2 shells: for embedding the output into other pages and for showing slides with a control panel.

S5

A popular standards-based presentation engine that has all the features we can ask for, including:

auto-scaling of text (responsive)
incremental display
unique URLs for each slide (bookmarking works)
progress indicator (handy for long slideshows)

and much more..

Shower

A simple, easy-to-use and standalone presentation library that has support for theming.

Slippy

Slippy is a jQuery-powered HTML presentations library that comes with a responsive layout.

Besides browsing the slides with the prev-next keys it lets users to directly go to the desired slide by using the number keys.

Pure CSS Slideshow

A CSS-powered slideshow that displays slide numbers as a header and supports mouse-based navigations.

Every page has its own #url for direct links and doesn't break the browser history.

P.S. Check its source for the code.

CSS 3D Slideshows

The presentation engine has support for 3D effects using CSS3 3D transforms.

And, an interesting feature is its ability to display nested slides (by pressing "down" rather than "next").

P.S. Check its source for the code.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

  


There are successful bloggers who exclusively write all of the content on their blogs however the vast majority of the top blogs on the web have a number of writers producing content for them on a regular basis. When you manage a multi author blog you spend less of your time writing articles and more time reviewing articles, scheduling articles and managing authors.

Today we would like to show you 25 WordPress plugins that will help you run a multi-author site quicker and more efficiently. The list includes plugins that help you manage your staff and plugins that make the posting process better for you and for your authors. It’s important for authors to get credit for the work that they do therefore several author profile plugins that let you increase an authors presence on your articles have also been included in the list.

*As always, all plugins have been tested for the purpose of this article.

Managing Authors
The following plugins will help you manage and communicate with your staff more efficiently.

1. Adminimize
Adminimize is a powerful free plugin that lets you control who has power over every aspect of your website. You can deactivate every possible option you can think of and control what admin, editors, authors, contributors and subscribers can do. The plugin automatically recognises any new user groups you have created too.

In short, it gives you complete control over what every user on your site can and cannot do. It works well with a number of other popular plugins too and is updated fairly regularly.

2. User Role Editor
A large percentage of blog owners won’t need the extended functionality that Adminimize provides. WordPress does not allow contributors to upload images so it’s a useful way of adding this functionality easily (if not, it’s a pain for guest posters to add images to posts).

In short, User Role Editor allows you to control exactly what each user group can and cannot do.

3. Members
Like User Role Editor, the Members WordPress plugin features a useful role manager that allows you to modify what certain user groups can and cannot do.

The plugin lets you control who can see content using shortcodes. By using this feature you can post secret messages to authors and staff or create private informational pages for them (everyone else will see a blank page).

4. Dashboard Notepad
What sets Dashboard Notepad apart from other notepad plugins is the ability to configure who can read the notes and who can edit them. It’s a useful way of communicating with your staff and leaving notes for yourself for future articles.

5. Private Messages For WordPress
If you are looking for a more direct way of liaising with your staff, you may want to consider Private Messages For WordPress. The plugin allows user groups the ability of messaging each other. You can set the number of messages each user group is allowed in their inbox. By setting the number of messages for a given user group to -1 you can remove their ability to send messages. Therefore, to create a private messaging option for editors only, you just have to remove the option for authors, contributors and subscribers.

6. Admin Message Board
Adds a private discussion area that all admins can view and add to. For some strange reason the plugin mimics Twitter and restricts messages to 140 characters or less.

7. Pre Publish Reminder
A useful plugin that lets you add notes for authors on the sidebar or below the post area. For example, you could remind them of formatting rules or remind them to always add a featured image. Handy if you have staff members who keep forgetting important elements of your posting rules.

8. Blog Metrics
Yoasts Blog Metrics makes it easy to monitor exactly what sort of contribution each author is making to your website. The plugins shows the average number of posts per month, average number of words per post, average number of comments and average number of words in the comments. It’s a useful way of gauging the value of each of your authors.

Managing Posts
The following plugins improve the procedure of posting in some way for you and/or your staff.

9. Co Authors Plus
A simple yet useful little plugin that lets you assign more than one author to a post or page. Handy for blog owners who publish a lot of collaborative posts.

10. WP CMS Post Control
Lets you remove certain controls of the post editor area from certain user groups. For example, for contributors you can remove the ability to set the post slug or featured image for any articles they submit.

11. WP Document Revisions
A collaborative document and file system that multi-author blogs should find useful. Users can create and modify documents through the admin area and leave notes for others to advise them what they have updated in the article.

This could be particularly useful if you are working on an eBook or preparing fresh content for a new area of your site. Could also be used as a FAQ or Wiki system for staff.

12. Audit Trail
Audit Trail allows you to track the actions of your all users (including admin). It shows you when a user last logged in, their IP address and the article they were working on. The ‘Trail’ allows you to see who has been working online via your site on a given day and see exactly what they did.

13. Editorial Calendar
Editorial Calendar makes scheduling articles a breeze with its easy to use drag and drop interface. The plugin creates a new calendar page therefore you can still use the traditional posts index page when you want.

14. Future Posts Calendar
Adds a simple calendar into the top of your post editor sidebar that shows dates of upcoming articles. You can also add the calendar to your WordPress admin dashboard.

15. Auto Schedule Posts
If the publication date of your articles isn’t that important for your website (e.g. a dating website may not be concerned about whether an article publishes today or three weeks from now), then you should find Auto Schedule Posts incredibly useful.

The plugin lets you set certain parameters about when you want your articles to publish every week. It will then schedule articles for any days that don’t already have a post scheduled.

16. Insights
Adds a productive box underneath your post editor that allows you to search the web for blogs, images, videos, news, Wikipedia articles and more. Authors can then insert or link to the items they find. If your authors are writing articles for you every day they should find the plugin saves them a lot of time.

Author Profiles
Authors are a vital part of every blogs success, therefore it’s only fair that they get some credit for their work. Noupe, for example, clearly displays the authors name at the top of an article and includes a bio box at the bottom of every article too.

The following plugins will give your authors more exposure and let your readers get to know them better.

17. WP Biographia
Arguably the best looking author bio plugin available for WordPress, WP Biographia gives you complete control over what is shown in the bio area and adds Facebook, Twitter, LinkedIn and Google+ profile fields to every users profile. You can choose whether the box is shown on posts, pages, archives and/or the home page and you can customise the colour scheme and border too.

Without a doubt the plugins best feature is the ability to display author bios in the RSS feed. 99% of blogs don’t include a link to the authors posts or website through their RSS feed therefore the guest poster loses a lot of potential traffic from RSS readers. WP Biographia corrects this by displaying a beautiful looking bio at the end of every post in the RSS feed.

18. Top Authors
A highly configurable top authors widget that lets you list your most frequent authors using their username, avatar or both. You can exclude admin and authors without posts if required.

19. Post Avatar
Let authors choose from a pre-defined list of images for their profile avatar. Images can be inserted automatically or manually into posts.

20. User Photo
Allow a user to assign a photo to their profile for use in posts and comments. You can set the dimensions for the photo and the JPEG compression level via the admin area.

21. Post Author
Adds an author information box above or below your content. Post revisions can be shown and an avatar can be added to the bio box too.

22. Cool Author Box
A simple plugin that automatically adds a cool looking author bio box underneath your posts and pages.

23. Author Exposed
Once installed an author box will appear when someone clicks on the link of an author. The box shows the authors name, email address and website. It also links to their Gravatar image, and shows a short bio for the author with links to the author’s other posts.

Advertising
Two WordPress plugins for those of you who want to share advertising revenue with your authors:

24. Author Advertising Plugin
Lets you set aside a percentage of advertising space to be shared amongst authors on your website. It supports any advertising program such as Google Adsense, Yahoo Publisher etc. Authors need to input their publisher ID in order to take part in the program (you can determine what user groups can take part in the program).

In order to install the plugin properly you will need to create the table manually via phpMyAdmin (the code is provided via the admin area).

25. WordPress Multiple Author Ad management
Allows authors to have control over the advertisements that are displayed on their own posts. Custom banners, text links, PayPal donations and Google Adsense are all supported.

Overview
If you don’t set things up correctly for your authors, you may find yourself in a position where you are spending more time managing authors and correcting their mistakes than you would if you wrote the articles yourself. By automating as many aspects of the moderating process and making things easier for y[…]

Advertise here with BSA
Mercury is a HTML5-powered WYSIWYG editor similar to the popular ones like TinyMCE or CKEditor but with a different usage experience.

Rather than being positioned inside a given element, it appears over the complete web page and can be used to edit the whole page or any number specified areas.

It supports previewing the edited content and inserting links, images, videos or tables. File uploads can be accomplished with drag 'n' drops.

Snippets can be defined and inserted quickly with the help of a sidebar. And, a similar sidebar exists for taking notes.

Also, collaborative editing is supported. Just edit any page that others are working on at the same time and see their changes in real time.

Mercury can be either installed as a Rails gem or by including the necessary JS and CSS files into our web pages.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Does posting to Facebook via third-party apps make any difference to how engaged your fans are? Does Facebook’s algorithm discriminate against content management apps?

The people at Applum, creators of Edgerank Checker, decided to find out. They analyzed more than a million Facebook updates on more than 50,000 Pages in order to test the theory that posting to Facebook via third-party apps simply doesn’t generate as much engagement as posting directly on Facebook.

The results were surprising. Applum found that posting via one of the top ten third-party APIs gave you an average of 88% fewer comments and likes, compared to posting directly to Facebook yourself.

Applum’s speculative reason: Facebook penalizes third-party apps in its complex algorithm. Indeed, Facebook updates from some third-party apps are condensed into a single News Feed story. This effectively eliminates opportunities for the kind of impressions and engagement you would get on separate posts.

Facebook users can decide to block all updates from any third-party app, which could also be a factor.

However, Applum notes, it may also be the type of content that is being posted through these apps — and its timing that is causing the problem. Many posts in third-party apps are scheduled or automated, which can lead to weaker engagement. Content from third-party apps is often not optimized for Facebook. For example, Twitter posts don’t usually include links with descriptions and thumbnails.

So is Facebook deliberately downgrading third-party apps? “We’re focused on ensuring that users see the highest quality stories in News Feed,” a Facebook spokesperson told us. “As part of this, related stories are typically aggregated so users can see a consolidated view of stories from one app. In some cases, we work closely with trusted partners, such as Preferred Developer Consultants, to test new ways of surfacing stories, and gather feedback to improve the Platform experience.”

UPDATE: An earlier version of the Edgerank Checker post, and of this article, broke out figures for two third-party content management apps: Hootsuite and Tweetdeck. After being contacted by at least one of those services, Edgerank Checker has removed all mention of either of them. We’ve reached out to the author of the post for further explanation.

More About: facebook, facebook apps, hootsuite, tweetdeck
For more Social Media coverage:Follow Mashable Social Media on TwitterBecome a Fan on FacebookSubscribe to the Social Media channelDownload our free apps for Android, Mac, iPhone and iPad

  


Anyone designing Web-based properties today requires a basic understanding of interaction design principles. Even if your training is not formally in human-computer interaction, user experience design or human factors, knowing the fundamentals of these disciplines greatly enhances the chances of your design’s success. This is especially true for visual designers. Many visual designers are formally trained in art school and informally trained at interactive agencies.

While these institutions focus on designing communications, neither typically provides a strong interaction design foundation. Having a broader skill set not only makes your designs more successful but makes you more valuable and employable (i.e. you become the unicorn). While in no way exhaustive, to get you started, here are five key tactics to understand and implement in your next project.

Image credit: Kristian Bjornard

1. Talk To Your Customers
The most important thing to understand when designing an online experience is your audience. Understanding who they are, what they do for a living, how old they are, how they work, what they know about the Web, how they use it, on what devices, where and so on provides invaluable insight into their pain points that you are out to solve.

Setting clear constraints on your design also helps. For example, if your audience will predominantly be using mobile devices to access the Web in hospitals, then your design must be responsive to those devices and be compatible with the environments where the devices will be used. In addition, understanding your audience builds on a communication design foundation by revealing your users’ sensitivities (physical or cultural, for example) to things like color and typography.

Understanding your audience requires conversation with target users. These conversations can happen in a variety of forums. While impersonal approaches such as surveys work well enough, nothing beats face-to-face conversations with your customers. Depending on who you’re targeting with your work, finding your target audience may be as simple as going down to the local coffee shop, buying a handful of $5 gift cards and striking up conversations with the patrons there. Most people will gladly exchange 10 to 15 minutes of sharing their opinion for a coffee shop gift card. Other ways to find users are to post ads on websites like Craigslist, pull names off your customer lists, reach out to trade organizations (for specific user types, like nurses) and spend time in locations where your audience spends time (for example, music fans at a concert).

The initial conversations will be awkward, but as more and more take place, a rhythm develops to the questions. Also, patterns begin to emerge, allowing you to tailor the questions more appropriately with each interview. The lessons you take away from these activities can be used to create personas — i.e. aggregate representations of typical users of your design — that can help provide context to future design decisions.

A persona document. (Image: Todd Zaki Warfel)

2. Orient The User
Now that you’ve got an understanding of who your user is, orienting them when they use your design is important. Orienting your users gives them a sense of place in a non-static experience. To effectively provide that sense, your design should tell users three things:

Where they are
Critical to any online experience is understanding where, in the broader context of the website, the user is currently transacting. If it’s clear to the user where they are, then there is a greater chance they’ll understand what you need them to do on that page. For example, if the user is aware they are on a “product page,” they should expect to see a purchase link and perhaps some other product options.
How they got there
If providing clarity on the user’s current location provides context for expected actions, then showing them the path they took to get there provides a safety net. That safety net is the comfort of knowing that if the user has wound up in the wrong place, they can back out and try again.
Where they can go from here
You’ve made it clear where they are and how they got there; if they are in the wrong spot they can backtrack and try another path. But if they’re ready to move forward or they believe the path back won’t provide the content they desire, then letting your users know what options are available from this point on is imperative. Never leave a user in a dead end. There should always be an option to proceed. A perfect example of this is a search results page that yields no results. While you should let the user know that nothing matches their search query, there should be options that lead them to the answers they seek (for example, related search terms). Ways forward can be manifested in your website’s navigation but can also be implemented as affordances. Affordances are elements in the interface that are obviously clickable, such as buttons and sliders.

Amazon does a good job with its no-results page.

(For a great primer on affordances, pick up Don Norman’s The Design of Everyday Things. While a bit dated, it lays a solid foundation for how product designers should think about their products.)

Clear website orientation provides comfort to users. It also reduces the chances that users will make mistakes and increases the chances that, when they do, they’ll be able to recover quickly.

3. Simpler Is Better
Visual designers are driven to add elements to a layout that may be aesthetically pleasing but don’t necessarily serve an interaction purpose. While certainly much is to be said for aesthetics adding to the polish and feel of an experience, when designing an interactive experience, consider opting for simpler design. Simplification means reducing the elements on the screen down to the most basic ones, the ones that will facilitate the task that the user has to complete. Start with that as a baseline, and then add ornamentation sparingly. Consider the brand of the website. The brand is a reflection not only of the aesthetic but of the experience. If a website is gorgeous, but its beauty makes completing a transaction impossible, then the website (and brand) will ultimately fail.

Aesthetics will always have a place and powerful purpose in any experience, yet ensuring that the experience is usable first is critical.

4. Design For A Dialog
Where visual design training focuses primarily on communication, interaction design puts a heavy focus on feedback loops — in essence, a conversation between the user and the website. As you work out an experience, provide ways for the system to communicate back to the user when they’ve done something right or wrong. Ensure that your experience makes clear when the user has succeeded and when an action is required to complete a transaction. Use your visual design and communication skills to build a visual language for this feedback dialogue. Ensure that no matter where the user is in the experience, any information that is coming from the website is consistent in design and presentation method. Different types of information will require different treatments. The user will learn the system quickly, and a dialogue with the website will begin to occur. In essence, you’re humanizing the experience (and the company behind it) by proactively predicting your users’ needs and presenting information and actions that mitigate user frustration.

Think Vitamin keeps the conversation going with its readers.

5. Workflow: Understanding The Before And After
Visual design is beautiful. It’s also static. Interaction design builds a workflow from page to page and from state to state. As you design each page, consider what the user can do on this page and how the next step in the process fits into the workflow. If you’ve just added a sign-up form to the page, think about what will happen when the user presses the “Submit” button. Will the page refresh? Will there be a confirmation page? What if there are errors in the form? What if the user hits the “Back” button? These are all components of the workflow of the experience. Each page or state is just one small component in the user’s click stream. The challenge is that each user might have a relatively unique click stream, depending on how they got to your website and why they came. You’ve used your knowledge of the user to orient them, and you’ve provided a simple interface that creates a successful dialogue with them: now ensure that each interaction has a logical next step. That next step should fit into the experience and visual language that you’ve created, so that the experience feels whole and consistent. These elements are what add credibility to the brand and increase users’ trust in your design.

Bonus Tip: Understand Your “Materials”
Jonathan Ive, designer of the iPod (among other things), promotes the idea that designers of all types must understand the material they’re working with. This hold true for interaction design as well. Understanding the “materials” that make up the Web is critical. A cursory education in HTML, CSS, JavaScript and related technologies will only enhance your understanding of the medium and provide a realistic perspective on your designs. A great resource for this is the group of developers who will be implementing your work. Strike up regular conversations with them about your design, and get a taste of whether your proposals are feasible given the technologies they employ. Even better, start learning the basics yourself. You don’t have to become a star coder, but knowing enough about how the medium in which you work behaves can greatly shape the interactions you design.

Summary
Interaction design is a multi-faceted discipline that links static communications together to form an experience. Understanding the basic principles of this discipline is core to d[…]

  


I’ve been using LESS religiously ever since I stumbled upon it months ago. CSS was never really a problem for me, in and of itself, but I was intrigued by the idea of using variables to create something along the lines of a color palette for my websites and themes. Having a color palette with a fixed number of options to choose from helps prevent me from going color crazy and deviating from a chosen style.

As it turns out, LESS — and Sass for that matter — are so much more than that. LESS and Sass share a lot of similarities in syntax, including the following:

Mixins – Classes for classes.
Parametric mixins – Classes to which you can pass parameters, like functions.
Nested Rules – Classes within classes, which cut down on repetitive code.
Operations – Math within CSS.
Color functions – Edit your colors.
Namespaces – Groups of styles that can be called by references.
Scope – Make local changes to styles.
JavaScript evaluation – JavaScript expressions evaluated in CSS.

The main difference between LESS and Sass is the way in which they are processed. LESS is a JavaScript library and is, therefore, processed client-side.

Sass, on the other hand, runs on Ruby and is processed server-side. A lot of developers might not choose LESS because of the additional time needed for the JavaScript engine to process the code and output the modified CSS to the browser. There are a few ways around this. The way I get around it is to use LESS only during the development process. Once I’m finished, I copy and paste the LESS output into a minifier and then into a separate CSS file to be included in place of the LESS files. Another option is to use LESS.app to compile and minify your LESS files. Both options will minimize the footprint of your styles, as well as avoid any problems that might result from the client’s browser not running JavaScript. While this is not likely, it’s always a possibility.

LESS Is More
Installation
Including LESS in something that you’re building is about as easy as it gets:

Go get yourself a copy of less.js;
Create a file to put your styles in, such as style.less;
Add the following code to your HTML’s <head>:

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
Note the rel attribute of the link. You are required to append the /less to the end of the value in order for LESS to work. You are also required to include the script immediately after the link to the style sheet. If you’re using HTML5 syntax, and I can’t imagine why you wouldn’t be, you can leave out the type="text/css" and the type="text/javascript".

There’s also a server-side version of LESS. The easiest way to install LESS on the server is with Node Package Manager (NPM).

Variables
If you’re a developer, variables are one of your best friends. In the event that you’ll be using information repeatedly (in this case, a color), setting it to a variable makes sense. This way, you guarantee yourself consistency and probably less scrolling about looking for a hex value to copy and paste. You can even do some fun little adding and subtracting of hex values that you want to render. Take this example:

@blue: #00c;
@light_blue: @blue + #333;
@dark_blue: @blue - #333;
If we apply these styles to three divs, we can see the gradated effect created by adding and subtracting the hex values to and from the original blue:

The transition from @light_blue to @blue to @dark_blue.

The only difference in variables between LESS and Sass is that, while LESS uses @, Sass uses $. There are some scope differences as well, which I’ll get to shortly.

Mixins
On occasion, we might create a style that’s intended to be used repeatedly throughout the style sheet. Nothing is stopping you from applying multiple classes to the elements in the HTML, but you could also do this without ever leaving your style sheet, using LESS. To illustrate this, I have pasted some sample code that one might use to style two elements on the page.

.border {
border-top: 1px dotted #333;
}

article.post {
background: #eee;
.border;
}

ul.menu {
background: #ccc;
.border;
}
This will give you something similar to what you would get if you had gone back to the HTML file and added the .bordered class to the two elements there — except you’ve done it without leaving the style sheet. And it works just as well:

Both the article and the unordered list share the border style.

With Sass, you declare @mixin prior to the style to identify it as a mixin. Later, you declare @include to call it.

@mixin border {
border-top: 1px dotted #333;
}

article.post {
background: #eee;
@include border;
}

ul.menu {
background: #ccc;
@include border;
}
Parametric Mixins
Like having functions in your CSS (*swoon*), these can be immensely useful for those seemingly redundant tasks of modern-day CSS. The best and most useful example of their use relates to the many vendor prefixes that we struggle with during this transition from CSS2 to CSS3. Nettuts+ has a wonderful webcast and article by Jeffrey Way, with details on including a file consisting entirely of useful parametric mixins that cover most of your favorite CSS3 properties in the respective vendor prefixes. For example, a simple mixin to handle rounded corners in their various forms:

.border-radius( @radius: 3px ) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
In this case, the .border-radius class has a default radius of 3 pixels, but you can pass whatever value you like to get a rounded corner of that radius. Something like .border-radius(10px) will round the corners by 10 pixels.

The syntax in Sass is very similar to that of LESS. Just use the $ for variables, and call the mixins with the @mixin and @include method mentioned earlier.

Selector Inheritance
Here’s something not provided in LESS. With this ability, you can append a selector to a previously established selector without the need to add it in a comma-separated format.

.menu {
border: 1px solid #ddd;
}

.footer {
@extend .menu;
}

/* will render like so: */
.menu, .footer {
border: 1px solid #ddd;
}
Nested Rules
Nesting classes and ids in CSS can be one of the only methods to keep your styles from interfering with and from being interfered with any other styles that may be added along the way. But this can get very messy. Using a selector like #site-body .post .post-header h2 is unappealing and takes up a lot of unnecessary space. With LESS, you can nest ids, classes and elements as you go. Using the example above, you could do something like this:

#site-body { …

.post { …

.post-header { …

h2 { … }

a { …

&:visited { … }
&:hover { … }
}
}
}
}
The above code is essentially the same as the ugly selector in the previous paragraph, but it’s much easier to read and understand, and it takes up much less space. You can also refer in element styles to their pseudo-elements by using the &, which in this case functions similar to this in JavaScript.

Operations
This is about what you would expect: using fixed numbers or variables to perform mathematical operations in your styles.

@base_margin: 10px;
@double_margin: @base_margin * 2;

@full_page: 960px;
@half_page: @full_page / 2;
@quarter_page: (@full_page / 2) / 2;
For the record, I am aware that I could have also divided by four to get the @quarter_page variable, but I wanted to illustrate that the parentheses rule from the “order of operations” also applies. Parentheses are also required if you’re going to perform operations within compound properties; for example, border: (@width / 2) solid #000.

Sass is a lot more versatile with numbers than LESS. It has built into it conversion tables to combine comparable units. Sass can work with unrecognized units of measurement and print them out. This feature was apparently introduced in an attempt to future-proof the library against changes made by the W3C.

/* Sass */
2in + 3cm + 2pc = 3.514in

/* LESS */
2in + 3cm + 2pc = Error
Color Functions
Earlier, I mentioned how LESS helps me stick to a color scheme in my coding process. One of the parts that contributes to this the most is the color function. Suppose you use a standard blue throughout your styles, and you want to use this color for a gradated “Submit” button in a form. You could go into Photoshop or another editor to get the hex value for a slightly lighter or darker shade than the blue for the gradient. Or you could just use a color function in LESS.

@blue: #369;

.submit {
padding: 5px 10px;
border: 1px solid @blue;
background: -moz-linear-gradient(top, lighten(@blue, 10%), @blue 100%); /*Moz*/
background: -webkit-gradient(linear, center top, center bottom, from(lighten(@blue, 10%)), color-stop(100%, @blue)); /*Webkit*/
background: -o-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*Opera*/
background: -ms-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*IE 10+*/
background: linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*W3C*/
color: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
}
The lighten function literally lightens the color by a percentage value. In this case, it will lighten the base blue by 10%. This method enables us to change the color of gradated elements and any other elements with that color simply by changing the base color itself. This could prove immensely helpful in theming. Plus, if you used a parametric function, like the ones listed above, you could alleviate some of that browser-prefix tedium with something as simple as .linear-gradient(lighten(@blue), @blue, 100%);.

Either way, you get an effect that’s rather nice:

Our nicely gradated, variable-based “Submit” button.

There are a lot of other color functions for darkening and satu[…]

Our CMS Focus page lists the top 30 content management systems that we want to discuss most here at CMS Report. It has been more than a year and a half since I made any changes to this list and so I decided it was time to make some significant changes.
Tweet Widget

We live in a time of two economies. In the first, mired in recession since 2008, millions are unemployed and underemployed, companies are reluctant to invest, and factories have fallen silent. Consumer demand is stagnant.

In the second, in the same time and space, demand is gushing. A handful of companies are doing exponentially better than their competitors. They enjoy runaway growth, premium pricing, and extraordinary customer loyalty. Here, companies are growing, profits are robust, and customers are loyal.

What's going on? Some portion of weak demand is a function of shrinking consumer pocketbooks. But structural issues don't explain why consumers disproportionately demand one product over a seemingly comparable one--think Kindle vs. Sony Reader, or Zipcar vs. Hertz Connect--by margins of five or 10 to one.

These differences are not accidental. "Demand creators," a special breed who design truly exciting products, recognize the huge gaps between what people buy and what they really want--and use those gaps as a springboard to see differently.

As they create products and services, demand creators are obsessed with sticking to just a few principles that make all the difference:

1. Make It Magnetic

Demand creators understand that very good isn't good enough. Most products fail to create an emotional connection with customers. Products must be magnetic, because when it comes to creating demand, it's not the first mover that wins; it's the first to create and capture the emotional space (ergonomics, aesthetics, message, feel, story) in the market. Think of Zipcar, the rental car a five-minute walk from your urban apartment with free gas and insurance, and a rate of $8 an hour. In a recent survey, 88% of Zipsters said they had recommended Zipcar to a friend in the last month, and 80% said they "loved" Zipcar. "Loving" the product: that's magnetic.

2. Fix Our Hassles

Think about the products you use, and think about how many of them annoy you--or that you even hate. Most of the products we buy are flawed, generating hassles that include time- or money-wasters--unclear instructions, needless risks, and other annoying bugs. The best demand creators map the hassles that dominate so much of daily life, and then figure out how to connect the dots to fix them. That process leads to explosive demand.

To draw the hassle map for phone users in India, for example, Nokia sends anthropologists to study usage patterns, and uses those findings to design phones. The Nokia 1100 offers multiple contact lists, an essential feature in a phone that might be shared; it allows a user to enter a price limit for a call, to make minutes last longer; and the 1100 screen display offers visual symbols for illiterate customers. For countries where electricity is unreliable or totally lacking, the phone includes a flashlight, radio, and alarm clock. In the last five years, Nokia has sold 250 million phones in the developing world, more units than iPod and Wii combined!

3. Build on the Backstory

It's often the unseen backstory elements that make or break a product. Demand creators obsess about infrastructure (can I get it to the customer cheaply and efficiently?), ecosystem and alliances (can I engage others so I don't reinvent the wheel?), and business design (how do I structure my organization to serve and learn from customers?). Then they connect all the dots needed to fix the hassle map of the customer. Think of Netflix, which spent a year figuring out how to work with the U.S. Post Office, went through 150 iterations of its mailing envelope to shave three seconds off the opening time, and opened 56 distribution centers across the U.S. and Canada--all to get DVDs into consumers' hands as quickly as possible. No wonder Netflix has 20 million subscribers and a market cap of $12 billion.

4. Find the Trigger

Most people who hear about a product remain fence-sitters, unwilling to try or buy until a trigger moves them to act. Some great products, like Volkwagen's Phaeton, or tap-and-go credit cards, failed to take off because their creators didn't figure out how to overcome consumer inertia. Great demand creators constantly search for the right triggers, always experimenting until they get a response.

Nespresso, for example, increased uptake six-fold when it opened mini boutiques that offered trial samples of its pod coffees, turning Nespresso into Europe's leading coffee brand. And Eurostar uncorked demand when it cut the London-Paris travel time from three hours to two hours and 15 minutes, making a one-day there-and-back-home-for-dinner trip a reality.

5. Build a Steep Trajectory of Improvement

A product's launch is merely the first step in a series of attacks upon the indifference of the market. On launch day, great demand creators jump into the next phase by asking themselves: How fast can we get better? While rivals might focus on technical improvements, demand creators know that there are at least four dimensions of improvement that matter: Technical (performance, design, capacity), emotional (see "Magnetic," above), affordability (productivity enhancements, lower price, better value), and content (new add-ons, plug-ins, deeper library). Every improvement they make will unlock new layers of demand, and leave less open space for imitative competitors.

Think of Amazon, which not only increases the content available on the Kindle, but makes the device better and more affordable with each new version. In addition, Amazon focuses intently on the emotional dimension, advertising the joy and convenience of reading, anytime, anywhere.

6. "De-Average" the Customer

"One size fits all" is an idea that great demand creators have discarded--because it doesn't work. Instead, they "de-average" complex markets, recognizing that the "average customer" is a myth, and that different customers (and even the same customers at different times) have widely varying hassle maps. The magic is not just in segmenting by hassle map, but in providing highly efficient, cost-effective ways to create product variations that more perfectly match the varying needs of customers.

Think about Zipcar, which uncovered different hassle maps for urbanites, students, city fleet managers--as well as for small businesses, big businesses, city rail systems, universities and apartment complexes. And Apple offers seven variations of the iPod, ranging in price from $49 to $349. It did a terrible job of variation with the iPhone, however, not segmenting down soon enough, thus leaving market opportunities for multiple Android competitors.

The Vibrant Economy

There are two economies. You can play in the vibrant one with gushers of demand by identifying and solving consumer. As a bonus, products that generate demand turn out to generate good economic returns for their creators. The very act of designing a simple solution cuts out inefficiencies, driving both top-level and bottom-line results.

There's a huge gap between what customers buy and what customers really want. Sharp-eyed and persistent master demand creators discern that gap and fill it. Demand creation is a discipline with the micro mechanisms described here; like any other discipline, it can be learned and applied by any leader and by any team.

Adrian Slywotzky is a partner at the global management consulting firm Oliver Wyman and a best-selling author. This article is based on material from his new book, Demand: Creating What People Love Before They Know They Want It (Crown Business), to be released on October 4, 2011. Follow the Demand blog at www.demandthebook.com.
[Image: Flickr user Andres Rueda]

At the Designer Fund’s first Designer Fair, IDEO’s Elle Luna explains how brands are increasingly seeking to gain customers and build loyalty by showing their human side.
Want to build your brand? Traditionally that’s meant a lot of chest thumping. But that’s changing, IDEO communications designer Elle Luna told a standing-room-only crowd at The Designer Fund’s first-ever Designer Fair on Friday. More and more, brands are gaining traction by embracing qualities like honesty, kindness, and simply having a sense of humor about themselves. It's something a lot of viewers of ads by Domino's, Old Spice, or Dos Equis may have noticed, but Luna summed it up succinctly.
“Today, brands are becoming more and more like humans,” Luna said. “They’re taking on more and more human-like traits.”

About 200 people crammed into 500 Startups’ incubator space in downtown Mountain View, Calif., for the inaugural Fair, a lightweight, late afternoon “conference” of sorts, where designers networked with hackers, and listened to several dozen presentations from the likes of Pinterest’s Evan Sharp, Eventbrite designer Tom Censani, former Mint.com lead designer and now Votizen cofounder Jason Putorti, and Visual.ly’s Nate Whitson.

The Fair was part of The Designer Fund’s overall goal to put designers at the center of the current tech boom and ultimately encourage some of them to start their own companies.

Luna’s talk on the increasing humanity of brands included examples from Pepsi, which decided to launch the Refresh Project last year, a charitable giving program, instead of dropping $20 million on a Super Bowl ad, and Patagonia, which uses the “Footprint Chronicles” section of its website to let consumers see the environmental impact of the company’s various garments.

Some brands might shy away from releasing the kind of information that Patagonia’s putting out there about their goods for fear of airing their (environmental) dirty laundry in public. But that would be missing the point, Luna said.

“The notable thing about what Patagonia is doing here is they’re not saying, ‘Hey look, we’re great.’ They’re saying, ‘Hey look, here’s where we are, and here’s what we’d like to be doing better,’” Luna said. “In their willingness to show the less desirable parts of their brand, they were making a much bigger win with consumers. They were coming across as seeming honest.”

“We are hard-wired to respond to [human] traits,” Luna continued. So, “if you’re doing good, [think about] how do you communicate that to your users, especially in a human way, through traits like honesty, openness, and humor? If you have practices that you’d like to improve upon, that you’re working on, [think about] how might you be honest and open with your users, even when it’s not all perfect.”

[Image: Flickr user Nazer K]

E.B. Boyd is FastCompany.com's Silicon Valley reporter. Twitter | Google+ | Email

Show of hands: If you run a website, how often do you consult your own search logs? I'm not talking about search engine optimization or inbound lead generation, here. I'm referring to the data that's generated by your site's own engine.

Anyone?

Lou Rosenfeld (@louisrosenfeld), author of "Search Analytics for Your Site," believes site search deserves a place in every site owner's toolset. These engines reveal the content that's working, the queries that go unanswered, and the things audiences need most — and all that information is tucked into datasets you already own.

Rosenfeld expands on these points in the following interview. He'll also explore many of these same topics during his upcoming session at Web 2.0 Expo New York.

Is site search often overlooked by site owners?

Lou Rosenfeld: It's not necessarily overlooked by users, but definitely by site owners who assume it's a simple application that gets set up and left alone. But the search engine is only one piece of a much larger puzzle that includes the design of the search interface and the results themselves, as well as content and tagging. So search requires ongoing testing and tuning to ensure that it will actually work.


Is site search data an untapped resource?

Lou Rosenfeld: If your site has substantial search traffic, then you already own scads of useful data that describe what your users want from your site — in their own words. Why would you not want to take advantage of this resource?

In my book, I cover different ways to improve many aspects of a site — not just search performance, but content quality, navigation, metadata, and overall performance. There's certainly enough there to keep a full-timer occupied. But if you don't have such resources in your hands, at least spend an hour per month reviewing two common reports:

Your site's most common queries — to see what's of greatest interest to your users and how those interests change over time.
Your site's most commonly failing queries — either queries that induce immediate site exits or those that retrieve zero results.

Dedicating just a little bit of time with these two simple reports will go a long way toward identifying and diagnosing problems with your site, many of which will be surprisingly simple to fix.

What are the best tools for analyzing site search data?

Lou Rosenfeld: Most common web analytics tools are lacking when it comes to helping analyze site search data. While you can get basic reports out of the big name tools, I always suggest downloading what you can into your favorite spreadsheet or database and playing with the data yourself. Your users, your site, and your organization are different than everyone else's, so you'll really want to get beyond your web analytics app's generic reports and interrogate the data as best suits your needs.

Search Analytics for Your Site — Any organization that has a searchable website is sitting on top of a valuable and under-exploited dataset: your search logs. This book shows how search data can improve your website and help you better serve your audience. See this title and others from Rosenfeld Media.

How do you act on the conclusions you reach from the data? Create more content for popular queries? Something else?

Lou Rosenfeld: Missing content is only one problem. You might find that the content actually does exist, but it's poorly structured, tagged, or titled. Or the content isn't prominent enough. Or your individual search engine results are poorly designed or unhelpfully sorted. Or that your deep contextual navigation is broken. Or that your search box isn't wide enough. These are just a few of the conclusions you might reach, but remember: analytics data can only tell you what might be wrong. You still need to use qualitative research methods to establish why.


Is there a particular site-specific search engine you recommend?

Lou Rosenfeld: Yes. The one you're using right now. Crappy search performance has less to do with your search engine selection process and more to do with not bothering to learn about users' needs and configuring your search engine accordingly. So before your CIO spends six figures on a new search engine license, at least make sure you're getting the most out of what you already have.

What's the difference between site search analytics (SSA) and search engine optimization (SEO)? Is SSA really just SEO for your own site?

Lou Rosenfeld: Pretty much. Large organizations have sites so jam-packed with content that searching them is as overwhelming as searching the web. In such environments, a decent search system is the user's only chance of finding what they're looking for. So site owners need to play God for their sites just like Larry Page and Sergey Brin have for the web — by ensuring reasonable search performance.

Does SSA reveal user intent better than other forms of analytics?

Lou Rosenfeld: I think so, as the data is far more semantically rich. While you might learn something about users' information needs by analyzing their navigational paths, you'd be guessing far less if you studied what they'd actually searched for. Again, site search data is the best example of users telling us what they want in their own words. Site search analytics is a great tool for closing this feedback loop. Without it, the dialog between our users and ourselves — via our sites — is broken.


This interview was edited and condensed.

Strata Conference New York 2011, being held Sept. 22-23, covers the latest and best tools and technologies for data science — from gathering, cleaning, analyzing, and storing data to communicating data intelligence effectively. Save 30% on registration with the code STN11RAD.

Related:

Search is the Web's fun and wicked problem
The economics of gaining attention
5 assumptions about social search
Social data is an oracle waiting for a question

Vitrue, a social media marketing company, is rolling out version 3.0 of its social media management platform for brands. New features include localization and enhanced analytics and metrics within one dashboard interface.

As we’ve written in the past, Vitrue’s SaaS platform allows brands and marketing agencies to
communicate with fans and consumers across Facebook, YouTube and Twitter accounts, location based services, and via mobile applications. The company’s SRM (social relationship management) platform is being used by a number of high profile brands including Harley Davidson, Mentos, Dick’s Sporting Goods, Crocs, Eddie Bauer, Maybelline, Purina, McDonald’s, YouTube, Ford, AT&T, Disney and Best Buy.

The newest version of Vitrue’s software comes with a new dashboard and user interface, allowing marketers to see, access and manage all of the available functionalities, tools and modules within one interface. The company has also added enhanced analytics and metrics to give marketers specific metrics on demographics and engagement of their social pages and users including insight into traffic sources, overall user demographics, top fan profiles, fan growth breakdowns, top location snapshots, per-post publishing metrics, and user engagement statistics by action (i.e., like, comment, share, play, etc.) and by day of week and time of day.

Other features include the ability to publish targeted content to specific users, the ability to add coupons, quizzes, and more to campaigns, and 24-7 customer support.

Vitrue, which has raised $32 million,
faces competition from Buddy Media.

As the number of people browsing the web from mobile devices increases, the demand for websites that respond to those devices surges. And still there are websites that aren’t equipped with the tools necessary to respond to those changes, whether it be lack of information or just not having the time or money to upgrade. The process of optimizing your website for a mobile device isn’t actually as hard as it seems, but knowing the steps in creating an effective mobile website can be the difference between success and failure. In this article I will walk you through five fundamental checkpoints to keep in mind in the creation of your mobile website. Feel free to leave comments if you feel I’ve missed important steps, or wish to touch upon any of them.

Choose the Right MarkupIn short, markup will make the content readable by mobile browsers. In the creation of your mobile website, it’s important to choose one markup language and stick to it. Explore your customer’s needs in choosing the right one that best fits their demands. How do you go about choosing the right language for your user? Here are the basic languages below, along with their key benefits/limitations.
WMLWML (wireless markup language) is one language used to make sites mobile-ready.Sites providing email service, sports scores, and a calendar service are the one’s that can benefit the most from having WMLWML is used by legacy systems or sites targeting users with low-end phones such as the Nokia.If your customer uses a basic, affordable phone such as the Nokia, WML is the best markup language for you.XHTMLXHTML is the computer language designed specifically for mobile phones.Most phone-browsers  support this language, and has become the predominate language of the web.XHTML-MP is a modularization of XHTML, and is basically indistinguishable from it.If you’re designing for an advanced device such as the iPhone, XHTML is preferred over XHTML-MP.In deciding between the two, access your site’s analytics to see which devices your visitors are using.

Knowing Your DeviceAside from markup languages, mobile phones differ greatly in rendering capabilities across browsers. Just as with IE6, Safari, and Firefox have extreme differences, mobile phones are a whole different device you have to account for. And since there’s so many shapes and sizes on the market, it makes the task even more cumbersome.

Common screen sizes are 128 x 160, 320 x 480, 176 x 220, 240 x 320Although many people have their website adjust automatically for hand-held devices, others create a mobile website from scratch. Web services such as Mobify make this possible.This is usually the best method, as you can create a customized site geared specifically towards mobile users, while allowing traditional web visitors to access your full site.To avoid user frustration, include links in your website’s footer to the mobile version of your site, and vice-versa. This way visitors know both are available, easing the stress of the unknown.
Scaling Down Your WebsiteA common tactic for those designing for the mobile web is to simply scale down their existing site to fit the parameters of a mobile device. This practice is counterproductive, as the mobile user is visiting your site to access specific information as quickly as possible. Also remember that many mobile devices use touch-screen technology so designing your UI around it is worthwhile. In determining what to include on your mobile website, consider the following:
Remove any copy that is not important for the mobile visitor Reduce the amount of navigation items to only those your mobile visitor needs to access on the go. Increase the size of your text to a readable level, links are recommended to be 32 pixels to account for the human fingertip. Design UI elements large. Mobile users tab and drag so you must accommodate to their fingertips. Optimize blog posts using pagination to make skimming and reading more natural.Remove unnecessary animations or images as they will load down the loading time of the website.When applicable, Media Queries can be used to scale an image properly across all browsing devices.
UsabilityEnhance your mobile websites usability by including only pertinent information that a mobile user needs while on the go. You have to keep in mind that browsing a website through a mobile device presents its own challenges. And while phones such as the iPhone and Android have made great strides in enhancing the web usability for its customers, not all phones make the task easy. Here are some tips to keep in mind regarding usability for mobile websites:
Older phones aren’t able to scroll left and right, leaving the user unable to browse a full website.If your website requires a lot of tabbing and clicking, navigating it on a mobile phone becomes a challenge.In creating your mobile website, focus on the primary features that mobile users are likely looking for. Such features could be contact information and store locators.As mentioned previously, links should be around 32 pixels to account for the human fingertip. Contact forms should also fit the viewport.Test your Website. Your layout may look great in one device, but slightly different in another. Online emulators allow you to see what your site will look like on different devices.Adding Your Mobile WebsiteThere are few different ways for adding a mobile version of your site to your domain. For instance you can create a subdomain from your primary domain that houses your mobile site. For instance, mobile.yoursite.com and yoursite.mobi. In any case many viewers still reach the primary domain when typing in your url. In this case you can:
Route traffic to your site depending on the viewer’s browsing agent. If they visit yoursitename.com, they can automatically be redirected to mobile.yoursite.com, for instance.ConclusionIn this article I’ve discussed key checkpoints to keep in mind in the creation of your mobile website. As the web expands, so does the devices and technology used to access it. Gone are the days where we had to worry about how our site renders in Internet Explorer. These new advances in technology presents more opportunities to appreciate and gain the most from the web. It’s our job to make this as easy as possible for those who wish to get on board.

The Spark of Genius Series highlights a unique feature of startups and is made possible by Microsoft BizSpark. If you would like to have your startup considered for inclusion, please see the details here.

Name: SimplyMeasured

Quick Pitch: SimplyMeasured’s competitive analysis tool compares engagement across competitors’ social media profiles.

Genius Idea: Giving context to social media engagement numbers.

Most social media analytics tools will measure how a profile’s fan base has changed and what percentage of those people are actively interacting with it. Most also give some indication as to what “share of voice” a brand has among its competitors in the conversation that’s pinging around social networks.

But to invoke the Double Rainbow guy, “What does it mean?”

A new tool from startup social media analytics company SimplyMeasured attempts to add some context to the numbers by showing customers how their pages stack up to those of their competitors.

“I think a lot of agencies and brands are sending these metrics up the chain: ‘Engagement is really important and we’ve got all this engagement, we have a million fans and 10% of those engaged with us,’” CEO Adam Schoenfeld says. “And the CEO or executive is saying, what does that mean? how big is that?”

With the new tool, it’s easy to make a comparison such as “that’s twice the amount of engagement our closest competitor has.” It’s also easy to learn from competitors’ pages by looking at what type of posts have returned the most responses for them. A post-by-post breakdown comes packaged with handy charts in an excel sheet.

SimplyMeasured is giving away a Facebook-only version its product, which it calls, a “Compete for social media.” Users need only enter the URLs that they’d like to compare in order to receive a report. A more complex version of the tool that includes Twitter comparative analysis, and will soon include YouTube comparative analysis, is packaged with SimplyMeasured’s general social media analysis tool. Plans for that tool start at $500 per month.

We featured some screenshots of the freebie tool in the gallery below. Take a look and let us know in the comments whether you would find it useful for putting social media stats into perspective.





































Image courtesy of iStockphoto, morganl

Series Supported by Microsoft BizSpark

The Spark of Genius Series highlights a unique feature of startups and is made possible by Microsoft BizSpark, a startup program that gives you three-year access to the latest Microsoft development tools, as well as connecting you to a nationwide network of investors and incubators. There are no upfront costs, so if your business is privately owned, less than three years old, and generates less than U.S.$1 million in annual revenue, you can sign up today.

More About: bizspark, simplymeasured, Social Media, social media analytics
For more Startups coverage:Follow Mashable Startups on TwitterBecome a Fan on FacebookSubscribe to the Startups channelDownload our free apps for Android, Mac, iPhone and iPad

Google just released AdWords Editor Version 9.5, and it comes with a couple of cool updates to keep in mind that make the new download worth the effort. Let’s review:

It’s time to update your AdWords Editor, people!

Campaign Experiments

Now you can change your experiment statuses at the ad group, keyword, and ad levels, change your Default Max. CPC or CPM and Display Network Max. CPC or CPM bids at the ad group level, change a Max CPC bid at the keyword level, and import and export experiment and bid changes in .CVS and .XML.

Locations Extensions

This version will let you create new location extensions manually for any address as well as modify existing ones, as it supports both new and existing location extensions. You can also download these in .CVS or .XML now.

Background Download

I think this is the coolest new feature, personally. If you’re working on a couple of big accounts, you can just download them in the background while you work on another account. Talk about timesaver!

Google also changed a couple of things to make it a better experience for the user. These changes include improving the revert functionality and streamlining the “Add Multiple Items” workflow.

So, basically this is a nice little update that’s going to save you some time and make your life a little easier.  I recommend downloading it ASAP, and Google recommends choosing the “Backup then Upgrade” option when you’re prompted to download.

Thanks for reading, and stay tuned for more news updates from PPC Hero!

Check out The Adventures of PPC Hero: Heroic Feats of Pay Per Click Management at http://www.ppchero.com/. Copyright © 2007-2010 Hanapin Marketing, LLC.

Matt Mullenweg, founder of the WordPress web publishing platform, took the stage at the recent San Francisco WordCamp event to share the state of the WordPress union. A key figure: WordPress is now powering 14.7% of the top one million global websites. There’s more. 

Read full story...



Follow us on Twitter

Join free newsletter

View upcoming events

Find a new job

An ad is clicked, and a purchase is made. Marketers have long used Google Analytics and similar tools to see which marketing efforts drive sales and conversions. Measurement is fundamental to ROI-focused marketing. Now, we’re taking this measurability a few steps further.
When a customer buys or converts on your site, most conversion tracking tools credit the most recent link or ad clicked. In reality though, customers research, compare and make purchase decisions via multiple touch points across multiple channels. So marketers that measure return solely on the last channel that a customer touches before conversion are getting an incomplete picture, and potentially missing out on important opportunities to reach their customers.
That’s why we’re excited today to introduce Multi-Channel Funnels to all Google Analytics users. This set of five new reports in Google Analytics gives marketers insight into the full path to conversion over a 30 day period, not simply the last click.

By looking at interactions across most digital media channels, including clicks from paid and organic searches, affiliates, social networks, and display ads, you can understand how different channels work together to create sales and conversions.

We’ve been piloting Multi-Channel Funnels with several customers over the past few months, and we’ve seen our customers gain valuable insight into the buying-cycle and understand the often hidden contribution of channels like social and display to conversions.
One of our early partners in the pilot, HUGO BOSS, uncovered significant contributions from upper funnel efforts, helping to better inform marketing strategy. "Knowing more about how our customers find us is very important, and this data helps us make better decisions. We found out that nearly two out of every three conversions involves more than one touch point,” said Patrick Berresheim, Director E-Commerce/CRM for HUGO BOSS. “It's now possible to value the contributions of assisting channels, which had previously been hidden by looking only at the last click.”
If you use Google Analytics on your website, and have goals or e-commerce tracking enabled, you can begin using the reports today by clicking on the My Conversions tab, with no further setup required. If you are an AdWords customer, make sure to link your AdWords and Analytics accounts to get the most detail on your ads performance. Starting today, you’ll see complete data in the reports for the past two months, and we’ll be expanding to encompass data back through January 2011 in the coming days. Update: This data is now available in Multi-Channel Funnels reports.
To help you learn more about the type of analysis you can do using Multi-Channel Funnels, including advanced features such as conversion segments and custom channel groupings, we’ll be scheduling a free webinar - look out for the registration details on the blog in a couple of weeks or sign up here to be notified by email. We’ll be walking through the reports and common use cases and you’ll have an opportunity to ask questions - we hope you’ll be able to make it.
Update: September 1, 2011 10:30am PST - Conversions are now available in the Multi-Channel Funnel reports going back to January 2011
Posted by Bill Kee, Product Manager for Google Analytics

The debate between big advertising agencies and small agencies goes on. A spate of recent articles and op-eds has agencies big and small continuing to take pot shots at one another. Since I recently left a large agency to start a company called Co Collective, it is often assumed that we don't believe in big agencies or their ability to succeed in the future. In fact, nothing could be further from the truth. Marketers are telling us that success in the future has nothing to do with big or small--that the winners and losers today, and in the future, will be determined by a different metric: collaborative vs. non-collaborative.
What clients really want: collaboration
At the end of the day, as an industry, all our clients care about is this: Can we help them solve problems? Can we do it quickly? And can we do it for less money than we did last year (because our clients have to do what they do for less money than they did last year). We believe that big agencies that get good at collaborating with other disciplines and specialist experts have a hugely bright future. Those that don’t will get small, and some will get gone, just as they always have when they get out of step with contemporary business reality. It is the circle of life. Smaller agencies and specialist experts probably have a bit of a leg up in this regard today because it is already clear to many of them that in this new world they MUST work together to “git ‘er done.” But big, global clients need organizations of scale. Big can be very beautiful.
The future is bright, big or small
For the big agency networks, figuring out how to think of themselves as large, curated crowds and finding ways to incentivize collaborative behavior across cultures and time zones is an inspiring challenge, and something that only they can figure out. For smaller companies with specialist expertise, finding ways to combine forces more effectively will allow them greater access to the strategic process earlier, where their thinking is sorely needed.
The good news is, there is a bottomless well of need to build brands and businesses today and in the future -- plenty of work for everybody. Having spent a long, happy and productive time inside agencies of all sizes we would be the first to agree that the amount of talent inside them is truly staggering. Figuring out how to deploy that talent more effectively against client need, and do it for less money is the key.
Clients need to collaborate, too
A final thought is that clients play a crucial role here. There are good clients and bad clients out there as well. Good ones will begin to create financial incentives for collaborative behavior that leads to better results and begin to benchmark partners against that metric, rather than simply assuming that all suppliers are the same and squeezing margins across the board. Large clients also need to begin to change internally, to encourage teams to reach outside their own silos, to begin to work together in new ways and to begin to rethink their internal innovation pipeline--the process by which products and services are brought to market. The process most use today was created for a previous age. Today a new process is needed that brings the differentiating story of a brand or business right up to the front of the process, and then brings the right groups of specialist from inside and outside a client company at the right time to get the right result. It needs to be a process infused with new values: generosity, mutual respect, obsession with results.
We can see it happening today inside more progressive marketers. It will be fun to watch and hopefully to do our small part in helping to make it happen across more companies in the future.
[Image: Flickr user Angela Rutherford]

Advertise here with BSA
WP7 Icons is a growing collection of free icons that are mono colored (black and white versions are available).

They are in transparent PNG + vector .Design (for Expression Design) formats and the PNG version is sized as 48*48px (or 24*24px once the empty space is trimmed).

The set includes items from add or delete to media controls and social networking icons.

P.S. The designer also provides a tutorial on "how to create such icons using Expression Design.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

  


For many of us, logging into websites is a part of our daily routine. In fact, we probably do it so often that we’ve stopped having to think about how it’s done… that is, until something goes wrong: we forget our password, our user name, the email address we signed up with, how we signed up, or even if we ever signed up at all.

These experiences are not just frustrating for us, but are bad for businesses as well. How bad? User Interface Engineering’s analysis of a major online retailer found that 45% of all customers had multiple registrations in the system, 160,000 people requested their password every day, and 75% of these people never completed the purchase they started once they requested their password.

To top it off, visitors who are not logged in do not see a personalized view of a website’s content and recommendations, which reduces conversion rates and engagement. So, log-in is a big deal — big enough that some websites have started exploring new designs solutions for the old problem.

Is This You?
Gowalla’s sign-in form (below) looks pretty standard: enter your user name or email address and your password, and then sign in. There’s also help for those of us who have forgotten our password or are new to the website. In other words, all of the most common log-in user-interface components are accounted for.

The sign-in form on Gowalla.

But Gowalla has taken the time to include a few more components to help people log in with more confidence if their first attempt hasn’t worked. If you attempt to sign in with a user name (or email address) and password that do not match, the website not only returns an error but returns the profile image and user name of the account you are trying to sign into as well:

A log-in error on Gowalla.

Including a profile picture provides instant visual confirmation: “Yes, this is my account, and I may have forgotten my password,“ or “No, this isn’t my account, so I must have entered the wrong user name or email address.” In either case, Gowalla provides a way to resolve the problem: “This isn’t me” or “I don’t know my password.”

The Q&A website Quora takes a similar approach, but it doesn’t wait until you are done trying to sign in before providing feedback. Quora’s log-in form immediately tells you if no account is associated with the email address you have entered, and it gives you the option to create a new account right then and there:

Quora instantly lets you know if there are no matching accounts for the email address you have entered.

If the address you have entered does match an account on Quora, then the account’s profile image and user name will appear to the right of the log-in form. This confirmation is similar to Gowalla’s but comes right away instead of after you’ve submitted the form.

If the email address you enter on Quora matches an account, you get visual confirmation instantly.

Instant Sign-In
Quora’s log-in form also includes an option to “Let me log in without a password on this browser.” Checked by default, this setting does just what it says: it eliminates the need for you to enter a password when re-logging into Quora. All you need to do to enter the website is click on your profile picture or name on the log-in screen.

Quora’s one-click log-in page.

To go back to the standard log-in screen, just click the “x” or “Log in as another user,” and then you can sign in the hard way: by entering your email address and password.

While one-click sign-in on Quora is convenient, it doesn’t really help you across the rest of the Web. For that, many websites are turning to third-party sign-in solutions.

“Single-sign-on” solutions such as Facebook, Twitter, OpenID and more have tried to tackle log-in issues by cutting down on the number of sign-in details that people need to remember across all of the websites that they use. With these services, one account will get you into many different websites.

A sampling of single-sign-on solutions.

Logging in this way is faster, too. When someone connects their Facebook or Twitter account to a website, they simply need to click the “Sign in with Facebook (or Twitter)” button to log in. Of course, they need to be signed into their Facebook or Twitter account in order for it to work with one click. But with 50% of Facebook’s 750 million active users logging into Facebook on any given day, the odds are good that one click is all it takes.

You can see this log-in solution in action on Gowalla (screenshot below). A Gowalla user who has connected their Facebook account needs only to click on the “Log in with Facebook” option in order to sign in — provided they are already signed into Facebook, of course. If they’re not signed into Facebook, they’ll need to do that first (usually in a new dialog box or browser tab). After doing so, they will be instantly redirected to Gowalla and logged in.

Gowalla provides an option to log in using your Facebook account.

New Log-In Problems
But with these new benefits come new problems — usually in the form of too many choices. When faced with multiple sign-in options on a website, people do one of the following:

They remember the service they used to sign up (or that they connected to their account), and they log in instantly. This is the best case scenario.
They assume they can sign in with any third-party service (for which they have an account), regardless of whether they have an account on the website they are trying to log into. The thought process for these folks goes something like this: “It says I can sign in with Facebook. I have a Facebook account. I should be able to sign in.”
They forget which service they used to sign up or if they used one at all, and thus hesitate or fail to log in.

To make matters worse, if someone picks the wrong provider, instead of signing in to the service they’re trying to use, they might end up signing up again, thereby creating a second account. While a website can do its best to match accounts from different services, there’s no completely accurate way (that I know of) to determine whether a Twitter and a Facebook account definitively belong to the same person.

So, while third-party sign-in addresses some problems, it also creates a few new ones. In an attempt to solve some of these new sign-in issues, we’ve been experimenting with new log-in screen designs on Bagcheck.

Our most recent sign-in screen (below) is an attempt to reduce confusion and prevent the types of errors I have just described — admittedly, though, at the expense of one-click sign-in. In this design, people are required to enter their user name or email address to sign in. We use instant search results to match their input to an existing user on the website, so someone needs to type only the first few letters of their name to find their account quickly. This tends to be much faster than typing an entire email address. But because more than one person is likely to have the same name, we provide the ability to sign in with an email address as well.

Once someone selects their name or enters their email address, then their options for signing in are revealed. No sign-in actions are shown beforehand.

The current Bagcheck sign-in screen does not reveal any log-in options until you select your name or enter your email address.

True, in this design people can no longer sign in with one click, because the sign-in buttons are not visible by default. But this may be a trade-off worth making, for the following reasons:

We keep people signed in until they explicitly sign out. So, hopefully people will rarely need to go through the sign-in process. Remember: the less people need to log in, the fewer sign-in problems you’ll have!
The added amount of effort required to sign in is small: just start typing your name and select a search result, or enter your complete email address, and then click the sign-in button. It’s not one-click, but it’s not a lot of work either.
Trying to sign in with an account provider that you have not set up on Bagcheck is no longer possible, because the log-in buttons don’t show up until after you have selected your name. This cuts down on duplicate accounts and confusion over which account you have signed up with or connected (especially on different browsers and computers where a cookie has not been set).

On mobile, however, these trade-offs may not be worth it. Logging into a website on a mobile device by typing is a lot more work than just tapping a button. So, in the Bagcheck mobile Web experience, we’ve kept the third-party sign-in buttons front and center, allowing people to log in with just one tap. It’s just another example of how the constraints and capabilities of different devices can influence design decisions.

The Bagcheck mobile Web experience keeps one-tap sign-in options visible.

Since launching this log-in experience on Bagcheck, we’ve gotten a lot of great feedback and ideas for improving the interactions. Many people have suggested using browser cookies to set a default sign-in option for returning visitors. While this might help people who return to the website using the same browser, we’ve seen many more sign-in issues when people use a different browser or computer. In these cases, a browser cookie won’t help.

Another common question is whether allowing anyone to search the list of Bagcheck users by name or email address reduces security. While this design does somewhat reduce the security of a Bagcheck account (compared to our previous log-in screen design), it’s no worse than many websites that let you sign in with your public user name, like Twitter.

And because all Bagcheck profile pages are public, users can be searched for on Google and on Bagcheck itself. Despite this, we’ve seen a bit of increased concern over this same search capability being on the sign[…]

Like an annoying pop song, Service Level Agreements (SLAs) have been on my mind for a while. In most cases, they are not worth the digital bits sent to serve them up on the web. Yet they are important if we are comparing cloud service providers, because without taking into account an SLA, your business may spend far more time and effort trying to engineer around failures to prop up an inexpensive cloud.

Recently, I received an e-mail comparing a customer’s internal storage costs to Amazon’s. Of course, Amazon seems to be cheaper based on a pure gigabyte comparison. But it was a flawed analysis because it didn’t include the service level promised, never mind guaranteed.

Without that it’s impossible to compare costs. The enterprise gigabyte comes with a whole host of services around it, while Amazon’s does not. IT groups are terrible at explaining their offerings, so it seems like cost per gigabyte is a good measure, but it’s not. Here’s why.

Amazon’s Elastic Block Storage service has huge variations in performance that make the service range from good enough to completely useless. It’s so variable that it takes a lot of work to architect around it. This post by Orion and Mdash of Heroku delves into some of the work they did to get acceptable performance from EBS, such as use lots of disks, larger buffers, right file-systems, larger chunk sizes on the RAID, etc. Maybe they toss in a little unicorn powder.

I was struck by how much work they did as storage admins. That costs money in labor, hiring, and training. Add backups, multi-zone, multi-datacenter and the dollar-to-dollar comparison between private storage and public storage begins to be a fairer fight.

This is not a knock on EBS, which I use. But I did learn that when you use a cloud service, you always accept a service level, whether explicit or implied, and that brings a whole bunch of labor, labor that could be avoided if you consider someone offering a higher service level, instead of cutting them out because their gigabyte pricing is too high.

Getting to better SLAs.
To improve SLAs we need to work on two questions. First, what are the operational expectations I should have in terms of reliability, availability, performance, security? Unlike Heroku,, who owns their own code, an enterprise customer can’t rewrite Oracle or SAP or their existing 1000+ internal applications. Therefore, specific operational expectations are very important to determine the suitability of the infrastructure for a specific application. The Amazon service catalog description for EBS performance doesn’t provide any expectation, and Amazon doesn’t commit to any service level that allows the customer to carry out operations they might need to implement in order to recover from failures.

Below, for example, is a potential way to set expectations: service catalog options. Each offering has different levels and costs. The customer can easily see that Tier 1 Windows includes higher level support, while Tier 4 does not include support. The customer can select and make a trade-off between service level and labor that works for them.

The second question is related to the visibility and tooling for recovery that a customer has. I agree with Christian Reilly that the legalese in SLAs is useless. They are biased in favor of the vendor, the penalties (if any) cannot hope to equal the value lost and they’re operationally useless. It’s this last bit that better SLAs can change, and in doing so make SLAs operationally useful.

For example, EBS provides replication, but I can’t see or manipulate the replica, nor is there a service request a user can make to get a copy. Therefore, operationally speaking, the customer is in charge making replicas, snapshots, and back ups for when EBS fails. And cloud is made by humans. Trucks hit generators. Lighting strikes. And that means the cloud will fail and the customer may not have any recourse to have prevented his data from getting lost.

There are other cloud providers who do provide back ups, mirroring, snapshots and the tooling. And those services cost more because the cloud provider adds more labor, know-how and resources to deliver that service level. Otherwise, the customer is on the hook for that labor, which adds to that gigabyte cost comparison.

New SLAs mean new types of clouds.
In conclusion, the road to better service level agreements will require the vendor to articulate the service offering and expected performance clearly in a way that is visible, actionable by the customer and with clear metrics for recovery. So if the service includes back up, the customer understands the scope, can see when the backup failed, and can on their own recover from failure within the promised window (mean time to recover).

New SLAs will likely lead to two types of clouds –or at least make this bifurcation of clouds more visible. One cloud will be for apps designed for failure, scale out and mobility: perfect for single app startups coming out of Silicon Valley and some new field applications. Which makes sense because startups have more labor than money.

The other is built to bring existing enterprise applications into a more cloud-like operating model; meaning transitioning existing applications and workloads to be more on-demand, elastic and pay-per-consumption, using either a private cloud or an enterprise cloud provider. I call them “city clouds” because they have to work within existing infrastructure, follow rules, customs, and are constrained by other applications. And thanks to better SLAs customers can know what they are choosing and price that into their estimates.

Rodrigo Flores is a cloud enterprise architect at Cisco Systems and the former founder and CTO of newScale, which was acquired by Cisco in April 2011.

Related research and analysis from GigaOM Pro:Subscriber content. Sign up for a free trial.
Infrastructure Overview, Q2 2010Report: Evolution of The Private CloudReport: Delivering Content in the Cloud

Salesforce.com (news, site) acquired social media monitoring platform Radian6 this March, but the US$ 326 million deal was lacking a mobile app that would address the growing needs of an increasingly-mobile workforce and enterprise. With this, Salesforce has today announced the launch of an iOS application for Radian6, available on the iPhone, iPad and iPod touch.

Read full story...



Follow us on Twitter

Join free newsletter

View upcoming events

Find a new job

Blogging software WordPress is announcing a number of impressive growth stats today. WordPress is now powering 14.7% of the top million websites in the world, up from 8.5%. And 22 out of every 100 new active domains in the US are running WordPress. These stats apply to both WordPress.com and WordPress.org sites.

You can also check out Founder Matt Mullenweg’s ‘State of the Word’ adress at WordCamp San Francisco last week. In July, WordPress.com blogs passed the 50 million mark. At the time, WordPress revealed that each month, 287 million people account for 2.5 billion pageviews on WordPress.com blogs.

In his speech, Mullenweg says that WordPress now has 15,000 plugins and has seen 200 million plugin downloads. WordPress 3.2 had 500,000 downloads in the first two days, representing the fastest upgrade speed in the blogging platform’s history.

Today, WordPress is also releasing the findings of a user and developer survey, which got over 18,000 responses from users around the world. Mullenweg says that 6,800 self-employed respondents were responsible for over 170,000 sites personally, and charged a median hourly rate of $50.







Crunchbase

WORDPRESS








Company:
WORDPRESS


Website:











Learn more

Facebook advertising is exploding, with ad spend on the network expected to hit $4 billion in 2011. Clearly, brands and companies are flocking to Facebook to reach users. And startups like GraphEffect are trying to help advertisers serve in more-highly targeted advertising on network. Today, GraphEffect, which is backed by Founder Collective, Lerer Ventures, and others, is launching its intelligent targeting system to the public.

GraphEffect’s platform allows advertisers to target Facebook ads using behavioral characteristics that are not explicitly expressed on the platform. So the company mines performance data and allows companies to hyper-target users in a way that Facebook doesn’t offer through its advertising platform. For example, based on likes and interests, GraphEffect can identify the type of user who would by virtual currency and target those users.

The key to GraphEffect us that it identifies certain traits of Facebook users, including likes, interests and demographics, and creates what the startup calls ‘lookalike’ models. Brands can then target to ‘lookalikes’ based on this data.

Co-founder James Borow tells me the mechanics of GraphEffect are similar in theory to the way Pandora decides to serve similar songs on its intelligent music platform. He explains that Pandora isn’t one hundred percent sure you may like a certain song that is similar to a chosen one, but serves it because the likelihood that a user would enjoy a song is strong. GraphEffect is applying this model to user data on Facebook and targeting.

The GraphEffect platform is actually built on top of Facebook’s marketing APIs and while in private beta for the past year, has helped brands like American Express, Live Nation, GE, Microsoft, Clinique, and others by optimizing their media spend to convert the type of users who buy and interact with their products and services.

GraphEffect has also announced that it has added four digital media and ad executives to its advisory board. Brandon Berger, Bob Dees, Peter Hershberg, and Dave Knox have joined the GraphEffect advisory board, and will be providing strategic counsel and guidance to the GraphEffect executive team.

Think of the number of times that you have submitted your e-mail address somewhere. It seems that whenever you visit some website you will most likely leave your e-mail address there: they ask you, they force you, they trick you – they will do anything to get this tiny piece of information.  “The money is in the list” – that’s what marketers say.

Now I should probably start rambling about all the benefits of having a huge e-mail list to give you the necessary incentive to read this guide from start to finish. But I’d rather amaze you with this awesome infographic that we made for this post:

This pretty “litte” infographic is nothing else but the visual recap of what you’re about to read. If you’ve fallen in love with it from the first sight you can easily save the full version available under “click for full size” button. Ok. Enough about the infographic, let’s get to the actual post:

Your e-mail marketing campaign starts from getting people to opt-in to your e-mail list. Even if you are able to convert 10% of your visitors into sales (which is nonsense), 90% are leaving your site without a trace! That’s a huge opportunity being lost here! You have to get their e-mail and try to sell your product to them a bit later!

There is an infinite number of ways to have people tell you their e-mail addresses, however all of them seem to fall into 3 different categories: ask, force and trick.

News – visiting your website over and over for new updates might not be so handy, especially when you post them infrequently. Ask people to leave their e-mails to send the news directly to their inboxes and you’ll be amazed by the number of subscribers.

Discounts & Promotions – wouldn’t you like to receive a text message every time your favourite clothing store announces a 50% off sale? So are your visitors – offer them “e-mail only” discounts and watch your list grow.

Freebies – did you ever submit your e-mail address to receive a link to download a free e-book? I bet most of you will say “Yes”. This is where you’re giving out your e-mail to get some value in return. If you have some piece of unique content (e-book, e-mail course, infographic, spreadsheet, cheatsheet, product guide, shopping guide, video, audio, podcast) – create an opt-in form, where people have to leave their e-mail addresses to receive that content.

Report – yes, it may also be considered as a freebie, but I felt like I should make a separate point out of it. Industry reports, which can really help people in their jobs/businesses are a holy grail which people are always looking for. I personally receive about a dozen different reports, and they are extremely helpful! Reports tend to have the biggest open rates, as people are actually looking forward to receiving them. The downside is that you need to work hard to keep the quality level of your reports as high as possible.

Do you happen to sell a product with a high learning curve? You’re lucky, as you can offer your customers a “tips & tricks” campaign right on the “Thank you for the purchase” page. Once they opt-in, you’ll be able to sell them accessories or related products with just a couple autoresponder e-mails being set up.
E-mail Course – is another widely spread tactic, worth a separate mention. An e-mail course is basically an auto-responder which consists of a certain number of e-mails. All you have to do is write the actual course about a specific topic, split it into several e-mails and setup the auto-responder to send an e-mail once in a while. A catchy course title and prominent placement of a subscription form will do the rest.

Squeeze pages – a simple “free newsletter” box in your sidebar may not work very well, instead you can pitch your subscription using one of those long sales letters. Then, once in a while, as you write a blog post, you can mention your newsletter and give a link to your squeeze page, which will do the job of convincing people to opt-in.

E-mail list brokers will most likely pitch you that the ROI from purchasing (or even rental) of some third-party e-mail list will cover all your expenses, but in most cases that is not true. Just like the search traffic is your most targeted and high converting of all, your own e-mail list will work much better than any rental one. Put your money and efforts into your own list, rather than purchasing if from third parties.
Existing contacts – you might already have a large contact list of your friends/colleagues/customers, you might as well collect contact information from your payment receipts. Well, adding everyone to your newsletter may get you into big trouble, as people might simply mark you as SPAM. What you CAN do, is e-mail them a link to your squeeze page and have them voluntarily opt-in to receive your newsletters in the future.

Expiration – once you have posted some free content, you may hide it behind an log-in form after some time. This way a returning visitor, who has watched your video, read your report or used your free tool will be forced to register and leave his e-mail to get access to this content again.

Members only – there might be a “members only” area on your website, which should be really attractive and be enough incentive that people leave their e-mails to get access to it.

Contests/Sweepstakes – you may list your newsletter subscription as an obligatory condition to enter, but note that this can somewhat decrease the number of participants.

Registration – speaking about the laziness, when was the last time you clicked the privacy policy link, which is given once you register somewhere? In most cases, you agree to receiving the newsletter of that company :)

Commenters – you can easily turn your commenters into subscribers by adding a checkbox to a comment form, which is checked by default. Again people are too lazy to be attentive, that’s why they will just leave a comment and opt-in.

Testimonials/Reviews/UGC – the trick is exactly the same as with comments, but this time you’re asking for a testimonial or some sort of review or feedback and put that tiny newsletter checkbox, which lots of people will overlook; (just in case – UGC stands for User Generated Content)

Once you have some people on your list, why not to use them to grow your list even more?
Add social buttons and endorse people to share the information with their friends. You’ll have to create a web-based version of your e-mail, so that once a person clicks the twitter icon in his e-mail, his friends will land on it’s web-based version, which can be equipped with a subscription box. According to MailChimp survey over 70% of people forward/share commercial e-mails less than once or month or never, but still a 30% chance is worth it!
Surveys/Quizzes – I bet many of you got really pissed off by a request to leave an e-mail in order to get a result of a 50-question-long quiz that you just thoroughly passed from start to finish. Well, “you just got punk’d” – either leave your e-mail, or you will never know the result and half an hour of your life will be lost :)

Polls/Tools – once you participate in a poll, the system may offer you to e-mail the final results once it ends, so that you can use them for future reference. Alternatively you can create a tool, like a price calculator, and add an option to e-mail the results to a customers inbox, so that he had an access to this information once he needs it.

Now you know the most common ways to get people to opt-in to your newsletter and the second logical part would be to actually implement them on your website. Ever heard of CRO (Conversion Rate Optimization)? This is basically a number of techniques to have your website visitors do what you want them to do. Newsletter signup forms are yet another object for CRO best practices, which mainly rely on location, size and color.

Lightbox – yes, that’s extremely irritating when the website you visit gets greyed out and some message appears above the fold. Yet studies show that this thing gathers e-mails like crazy! And besides, there are some cool plugins, that allow you to control whether to show the lightbox right away, or wait till a person visits two or three pages of your website (and lots of other things can be configured actually).

Sidebar – the most common place to put your newsletter subscription forms. This way they will be highly visible and won’t irritate anyone. What’s more important, is that you can actually have a number of different opt-ins in your sidebar: one for blog subscription, one for e-book download, one for a poll, etc.

Don’t forget to enhance your newsletter subscription box with the so-called risk removals as: “no spam” & “not selling to third parties”.
After the content – once a person reads your piece of content till the very end, you can tell that he is very interested in your resource, so why not to offer them to sign up? I really like the way Neil Patel from QuickSprout does it:

The e-mail opt-in process is usually full of the so-called “gate” pages that have close to no value – “thank you for registration” page, “please confirm your e-mail” page, etc. Try to put some call to action with a hot offer to those pages and see what the results will be.
Bottom – I’ve seen some websites having a newsletter subscription box sticking to the bottom of the browser window. If you ask me – that’s irritating. I wanted to show a screenshot of that practice, but it appears that those websites are no longer using it. But you can still try and see if it works for you.

Feedburner actually allows you to get a hold of your subscribers’ e-mail addresses, so if all the above methods are too time-consuming for you, use the Feedburner plugins to grow your e-mail list.

As a part of your signup box design, try using “Mad Libs” style for a chance[…]

Today’s #Heroview featured Michelle Morgan (@Michellemsem) as she enlightened us on the subject of PPC Keyword Research, Tools, and Strategy. The interview was full of great insights and interesting new ideas to add to your PPC arsenal. But you don’t need me to tell you, check out the streamcap below!

Thank you to everyone who participated in this month’s Heroview – real-time discussions with PPC industry experts via Twitter.  Stay tuned for next month’s Heroview!

August 18, 2011

PPC Hero: Welcome to #Heroview everyone! To get started, tell me a little about yourself. How long have you been working with PPC?



Michelle: Hey everyone! Thanks for having me, @ppchero. This should be a lot of fun! A little about me: I graduated from college in 2010 and got hired as an in-house PPC assistant close afterward. Now I manage all of our PPC accounts & have fallen in love with PPC. Fun work, great challenges, and a wonderful community.

PPC Hero: Glad to have you Michelle, lets dive right in! How do you typically begin your keyword research process?

Michelle: My first step is always to come up with a list of “common sense” keywords – something I would search for. Then, I take those words & search them in to Google and Bing. I try to get a feel for competition and searcher intent. Search engines know what their users are looking for. Their SERPs can give you great search intent information. Use it!

PPC Hero: There are many excellent sources of data out there. In your opinion, where are the best places to look?

Michelle: I have a hard time trusting any tools estimates on search traffic. I’ve not found one that I feel gives accurate numbers. That said, I think both AdWords’ and adCenter’s keyword tools show a correct hierarchy of keyword search traffic. What I mean is although the numbers of search volume are not accurate, if the stats show that keyword #1 is better than keyword #2 (in terms of volume). I usually find that to be true. So even if you can’t predict actual numbers, you can guess which will have more traffic.

PPC Hero: Do you include any negative keyword research into your initial strategy?

Michelle: Yes, but not as a separate process. With new groups of keywords, negatives are nearly as important as the keywords themselves. When looking for new kws, if I see a word I know I don’t want to show up for I write it down in a separate list. Most of my negative keywords will come from search query reports after the new keywords have been running for a while.

Every tool out there will inevitably give you some keyword suggestions that would be better negatives. Take advantage!

PPC Hero: On average, how often should keyword research be performed for a given account?

Michelle: I think a good PPC manager should always stay on top of their SQRs to be on the look out for opportunities. As far as a regular schedule goes, a lot depends on your company’s products/services & the size of your account. Companies with small lists of products/services might have a hard time branching out into new keyword lists with any regularity, but companies with tons of products and services might have constantly changing market demands to keep up with.

First, I think it’s worth noting that keyword research is NEVER done. Queries are always changing.

Michelle: Generally, the higher your level of traffic, the more often you should do some form of keyword research. I think you need to make sure you’re using your time effectively & making changes from large enough data sets. The accounts I work on have about 100,000 keywords, so I do some sort of keyword research (negative or expansion) nearly everyday just to stay on top of things.

PPC Hero: Excellent points! So, how do you coordinate your keyword decisions with your client/boss?

Michelle: Coordination can be a big benefit – even in-house. Every once in a while, our company will expand, or we’ll see a new opportunity and we’ll get together and chat about kw, targeting, and structuring ideas. Sometimes it’s extremely helpful to bounce your ideas off of other people. One of the best things we have created is a “Low Scores” campaign. This is where we send all of our ad groups that have terrible QSs but still generate great traffic.

PPC Hero: More communication, the better! Should your keywords be tailored to specific engines (Google, Bing, etc)?

Michelle: Definitely, keywords should be targeted to different engines. But I don’t think those differences are imperative in initial research. Tools like Soolve.com and the engine specific tools give suggestions that are slightly different for each engine & that’s great. But I think most of the differences are found later through SQRs. There usually aren’t major differences.

PPC Hero: As you mentioned earlier, SQR’s can be a good source for new converting keywords. Are these always successful in the long-run?

Michelle: New SQR keywords are wonderful. They can give you great results, but they’re not guaranteed to have long-term success. Changes in product features, discounts/sales, legal regulations, or news events can have long or short-term implications. All of these types of changes can have big effects on your account. Sometimes they’ll last for a week or so then lose effectiveness, other times they could be a benefit for years to come!

Once you’ve added some new keywords from SQRs, you should keep an eye on them to make sure they’re still performing well.

PPC Hero: Interesting! Let’s say you have a HUGE keyword list. What’s the best way to distinguish keywords with the most potential?

Michelle: That’s a tough one. I think “potential” is something each company needs to define for themselves. Account goals need to be well defined from the start. Some people are going for traffic, so broader keywords are the most important.

Michelle: Others are more concerned with lowering CPAs and high conversion rates. For those people like me, longer-tail and more restrictive match types tend to be the route to take. If those tighter groups perform well, there’s always the opportunity for expansion into new match types later.

PPC Hero: To wrap things up, do you find it important or beneficial to maintain a close relationship between SEO and PPC keyword research?

Michelle: I think it’s very important to keep close ties between SEO & PPC because they work hand-in-hand. SEO tends to be a longer-term goal while PPC is more immediate & usually a good testing ground. Also, not all searchers are alike. Some click on ads, others click exclusively on organic results. Catch them all!

First of all, I’ve never heard of commanding more space on a SERP as a bad thing.

Michelle: Here’s a study showing the relationship between SEO and PPC in terms of incremental clicks: http://t.co/lANGE1o

PPC Hero: Thanks for the excellent insights! Does anyone have any questions for our guest?

 

@JeffAllenUT: In your opinion, is it better to start specific using long tail and exact match and then move out?

Michelle: Thats usually my method. Start with mostly exact w/ some phrase & bmm mixed in. I can expand after that if I need to.

 

@Mel66: You’ve learned a lot about PPC in just a year. What are some of your favorite training resources?

Michelle: Thanks Melissa. My biggest source of information is twitter. All of the members of #ppcchat are amazing and so helpful! Other than that, I do a lot of blog reading. @sewatch @sengineland @clickz @ppchero (of course) There are so many!

 

@Chriskos: Any comments on keyword organization, choosing ad groups and campaign distribution?

Michelle: Keyword organization for me is done mostly by the modifying keyword. We have a set list of words for our company, but different people search for them differently. I try to get as specific as I can when creating a new ad group. Makes for better copy. I tend to make campaigns at the product/service level, than the ad groups are the modifiers for those products or services.

 

@MikeRyan2: Very well done. What’s your take on bid optimization? What’s a good starting bid and what factors influence changes?

Michelle: Great question. Bid optimization is huge. As far as starting bids go, that can’t be answered as a rule of thumb. I would say to start your bids at a price that you wouldn’t be mad paying for every click you get on that keyword. Once you’ve gathered some data, you can optimize for clicks, conversions, & average position in line with company goals.

 

PPC Hero: Well, that’s all the time we have. Thanks to @Michellemsem for some great insights, as well as everyone following along today!

Michelle: Thanks for having me @ppchero! This was a lot of fun!

 

Check out The Adventures of PPC Hero: Heroic Feats of Pay Per Click Management at http://www.ppchero.com/. Copyright © 2007-2010 Hanapin Marketing, LLC.

Today, many companies offer their employees the option to work from home, even if they live relatively close to the office. But common sense tells us that for some employees, this may not be the best option. As you can imagine, some unsupervised employees would sooner fill their day playing World of Warcraft than actually working. This decision tree will help you decide if you should let your employees work remotely, or if they should be required to work in-house.

 
This post was written by Colin Dobrin. Infographic reprinted with permission of Mindflash.

Advertise here with BSA
HybridAuth is an open source PHP library for authenticating through multiple social services and ID providers.

The services supported include OpenID,Facebook, LinkedIn, Google,Twitter, Windows Live, Foursquare, Vimeo, Yahoo, PayPal and more.

It can be integrated easily into existing websites by inserting a file and few lines to the sign-in/up pages.

Once authenticated, HybridAuth provides the connected user profile's in a rich, simple and standardized structure across all the social APIs.

And, besides authentication, the library enables us to interact with the social API client that the users are connected to.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Designing a website isn’t about just picking a nice color, throwing together a few navigational menus and hoping for the best, a great web designer will tell you that your design should brand your website and fit the industry you are targeting, while each part of the site must work together to form an “identity” that users will immediately recognize through your use of graphic design.

When developing a new property there are several aspects that I always choose to setup before attempting to dig into the deep design elements of the website.

Choosing Website Colors

The color(s) you choose for your site should fit the industry you are attempting to attract, for example a site about celebrity gossip will likely be served well by purple, pink and other colors that appeal to a mostly female demographic, while sports sites tend to do well with bold colors such as dark blue, dark red and even black. Knowing your demographic can help you determine which colors will work well for your purposes. I personally use Colorschemedesigner.com to find colors in the most efficient way possible.

Once you’ve chosen which colors you want to use on your website it’s important that you blend those colors throughout. For example, let’s assume you chose hex color code #3B5998 (Facebook blue), it’s important to include that color in your logo, navigation bars, highlighted links and even sidebar titles. When your users see your sites color scheme they should immediately associate that color with your product. If you don’t want a very bold color on your navigation bar a simple black bar with text or hover highlighting with your sites color scheme is also a nice solution.

Choosing Website Typography

The font you choose for your website is one of the first ways users will experience the content you provide. Just like choosing a color you want to make sure the typography on your website matches the type of content you provide. For example, looking back at our celebrity website, a “fun” font with slightly more curved lettering would be a great way to show off titles on a page. If you look at popular entertainment site TMZ.com they provide bold curvy titles that attract users with sensationalized headlines. When it comes to the actual content on the site however it’s a good idea to choose familiar fonts that users can associate with, for example Arial or Helvetica are both commonly used in the graphic design of websites and are easy to read since our eyes are trained to read them. You want your unique content to stand out among your sites colors, ads and other features, but not so much so that it distracts from your overall branding design elements. To find generally accepted free fonts I recommend google.com/webfonts. Once you have chosen your font type make sure to stick with that font throughout your sites design to create a unifying element.

Blend Social Media Options Into Your Site

Branding your site from a graphic design point of view doesn’t simply mean placing nice social sharing and follow icons on your site, if you want your product to stand out you need to develop icons that match your sites content. For example, if you use the hex code I highlighted earlier, it wouldn’t hurt to have Facebook, Twitter, Digg and other icons created in those colors or perhaps you can use basic sharing buttons but wrap them in a box border that matches your sites background or logo color. After you’ve blended in your social networking icons make sure to customize your Twitter, Facebook and other pages to match your sites color scheme, for example change your Twitter background color to the same color code as your sites logo. Many users will first view your content on social media sites before they click through to your site, if you make those social profiles feel like part of your final website product you can brand your website even when users are not actually on your property.

Website branding from a graphic design perspective comes down to understanding that all of the elements on your website need to work together and that work needs to be consistent. Before you design a website or higher a design consultancy firm you need to ask yourself what you want your site to say and then figure out how you want to deliver that message graphically both on-site and off-site.

 

Acquia (news, site), provider of Drupal services and support has announced that it is introducing two new Drupal service offerings and that it has acquired two companies.

Read full story...



Follow us on Twitter

Join free newsletter

View upcoming events

Find a new job

Touch Marketing offered analysts a bit of a break with the release of a recent Twitter infographic. The colorful graph presents over 35 different statistics, including the number of registered users, what time of day is best for being retweeted, and how many new tweets are posted per week. Behold: 

Read full story...



Follow us on Twitter

Join free newsletter

View upcoming events

Find a new job

Are you asking yourself these questions about your social marketing efforts? If you’re not, you be losing easy traffic and sales. The reason is that testing and tracking your social media campaigns is absolutely crucial to your success if you use social marketing to promote your business. If you aren’t taking advantage of all the free tools that are available to help you discover how successful your social media efforts are, then you are wasting both time and money.

Before you start marketing on social sites, choose the tools you need that will help you reach your marketing goals and save you both time and money. Below are 14 tools you may use to help you more effectively build a social media platform.

1. Hootsuite

Hootsuite is a social media dashboard and all in one web solution that allows you to promote to all the most popular social sites. This includes Twitter, Facebook, LinkedIn, MySpace and others. It also allows you to track people and businesses you are following and read your social streams in one place.

Free and paid versions are available. Extensive tracking allows you to find media metrics like  your Klout score, which is a measure of your influence across the internet. A blog, frequently asked questions (FAQ), and a help desk will give you full support to create effective social media campaigns for your business.

2. Klout

Unlike Hootsuite, which is an actual tool to help you communicate with your audience, Klout allows you to measure your influence with that audience. Using a scale of 1 to 100, Klout uses 35 different variables on Facebook and Twitter to determine your true reach, amplification probability, and network score. (This simply means how well you are getting your audience to act on your message.)

3. PeerIndex

PeerIndex is similar to Klout because it allows you to measure your overall authority on the internet. This is more than just about being popular; this is about your real authority and true influence on those you connect with. Using eight benchmark topics, your “fingerprint” is built up on a category by category level. How receptive your audience is also influences your overall authority.

4. Traacker

Traacker serves two functions. First, it allows your company or agency to effectively find and connect with the influencers in your industry. Second, you may measure your influence. Unlike the other two tools previously mentioned, which are free or low-cost, this solution will cost you several hundred dollars per month to implement.

5. Radian6

With other solutions you are actually tracking your brand, company, or yourself. With Radian6, you have the ability to track unlimited topics or keywords. Price range is similar to Traacker, with discounts available to non-profit organizations.

6. Bufferapp

A free/low-cost solution that allows you to spread your tweets out throughout the day. Build your followers and even tweet while you sleep. You’ll keep your readers happy and automate your tweets.

7. Chrome Tweetdeck

While our other solutions have focused on online tools, this “Tweetdeck” is specifically for the Google Chrome browser. It’s simple to use, with a sleek design, and best of all it’s free. You’ll easily organize all of your tweeting, and if you use Facebook too, then you’ll be able to handle both your Twitter and Facebook accounts with this one tool.

Don’t have Chrome? No problem because this tool is also available for the Android, iPhone, and as a PC Desktop so you can easily keep track of all of your Twitter activity.

8. GeoTwitr

Simple tool that allows you to sign in with your Twitter account and then mark your location. It’s free, and if geo targeting is important to you and your business, why not?

9. Tweriod

Would you like to know the best time to send your tweets so that your readers act on them? This tool analyzes both your tweets and the tweets of those connected to you so that you know the best time to tweet.

This site is also connected to some really good paid tools that will help you get even more out of your social media efforts. If you want to increase your Twitter following, or build “likes” to your Facebook pages, then definitely check it out.

10. Twitterific

Most tools created for Twitter are available for the PC. Twitterific is different. Similar to Tweetdeck for Chrome, this free tool allows you to use Twitter on either a MAC or an iPad.

Don’t want to see ads? No problem. There’s also a paid version you may buy and remove all the ads.

11. NutshellMail

Wouldn’t it be nice to get all of your social media activity in one email? Even better, wouldn’t it be nice to get it when you want it, not when it happens?

NutshellMail, a solution created by Constant Contact, allows you to save time monitoring your brand on all the most popular networks, including Twitter, Facebook, MySpace, LinkedIn, Yelp, YouTube, and Citysearch. See what all of your friends and business associates are doing, and get the information in one convenient email.

12. Tweetings

This is the first fully featured Twitter client for iPhone. If you have an iPad, it will also work for you. A desktop version is available for PC users to get live, instant updates.

13. Twimbow

Color code your tweets with this colorful Twitter client. This web-based Twitter client allows you to engage your Twitter followers more fully, as well as effectively because you can now organize your conversations. Keep up with your conversations better and know at a glance not only what you’ve said but answers you’ve received.

14. Seesmic

Seesmic bills itself as “The only social media tool you’ll ever need,” and it really does a good job of meeting that claim. With a version available for every browser, as well as both MAC and PC versions, you’ll find over 80 social services available. Don’t see a service you want? Then add it. You’ll find the most complete solution that’s free, and you’ll more easily track your social interactions, even if you’re on a smart phone.

There are many tools and services available to help you keep track of Twitter, as well as all of your other social media accounts. If you’re a business person, you’ll want to take advantage of as many of these services as possible to not only help you stay on top of your social media campaigns, but save you time.

Measuring your influence on the Web is more than just determining who’s reading you. By measuring your influence, you’ll know where to focus your social media efforts, driving more traffic, and more sales to your business.

IconPalace is the first premium stock icons marketplace that allows you to purchase individual icons, not only packs. The advantages of this are obvious and the shopping experience is optimal because most times a designer looks only for a certain icon, not for a whole pack. The opportunity to purchase that single icon that you need is certainly a new and anticipated feature for many designers.

So how does it workIf you are familiar with digital goods marketplaces, you will feel right at home with IconPalace.
How to buyPurchasing icons on IconPalace is really easy and straight-forward. The website uses it’s own currency in the form of credits. 1 credit can cost from 1$ to 0.5$ depending on the number you purchase. The icons prices start at 0.5 credits, which makes IconPalace really affordable, especially considering the fact that you can purchase exactly what icons you wish.

The buying experience is really easy : you purchase credits with real money via Paypal or MoneyBookers, and you use the credits to buy icons. It’s that simple. For more information regarding the buying experience, check out the “How to buy” page.
How to sellIf you are a talented designer, no matter from which part of the world you are from, IconPalace offers you a platform to showcase your work to a global audience and get paid for the sells your icons generate.
As the designer of the icons you have the option to set the prices for your icons, depending on the complexity and time spent to design them. Depending on the license and sales volume, you can earn from 40% up to 80% out of every sale. For more information regarding the selling experience on IconPalace, check out the “How to sell” page.
ServicesEven being just launched on IconPalace you can find over 800 high quality individual stock icons, with more icons added every day. Although you can purchase individual icons, these are grouped into icon sets. A cool feature is that you can purchase either certain icons form a set or the whole set at a discounted price.

The icon file formats available on IconPalace are : AI, EPS, PSD, ICO, PNG and ICNS. The website has an extended search function so you can easily find what you are looking for. There’s also a color filtering system so finding the icon with the right color will be a breeze.
For more info check out IconPalace. Get the stock images and vectors you need for your designs on Stutterstock

Want to advertise here ? Contact us

Project management and collaboration skills play a major role in every business and often the outcome of a project is highly affected by the initial planning and monitoring stages of a project. Project management is especially important for small and flexible businesses where all the work is based on a few people who have to communicate and develop the workflow. Globalization has made collaboration even more essential since many modern businesses like web design agencies don’t even have a constant address – people all around the world are working from their home.

Web-based project management and collaboration tools are the top choice of hundreds of entrepreneurs and thousands of small and medium size businesses. These tools will maximize your productivity, organization, and help you keep on top of your projects effortlessly. Keep track of your projects, manage your workers, set milestones, schedule your work, upload your files, send invoices, sync with your mobile – all of these features and more make these apps almost necessary.

Continue reading if you’re looking for your first project management app or just seeking to check out alternatives. With a lot to choose from it might be frustrating to find the right app for you. This article presents some of the best project management and collaboration tools out there. There are also tools for brainstorming ideas, hosting conversations and even managing a newsroom. Each of them share common general features, however each of them also has something unique to offer. Most of these tools come with a fixed monthly price, some of them you’ll have to pay for per user and month. Also a trial period is available with most of them so you’ll have the chance to examine and check out if it’s the right choice. Each description contains brief features the service offers as well as the pricing plans.

1. Teambox

Teambox is voted the best online project collaboration software for project managers, contractors, freelancers and teams. Teambox is the pioneer in joining social collaboration tools with online project management. It’s mission is to change the way people work by making it easier and more fun to get things done.

Features:

Teambox Projects consist of conversations, task lists, pages and file storage.
Share ideas, files, images and video. Discuss details and solve problems, stay alert thanks to email notifications.
Simple, fast and linear task creation. Add due dates and task owners in seconds. Quickly see what is getting done.
All of your important documents and media in one place. File storage that is simple and linear.
Various communication options. RSS, Email, Mobile Access and Web interfaces are just the beginning of how you can communicate.

Pricing:

Free: $0/month
Personal : $12/month
Basic: $29/month
Professional : $99/month

2. Projecturf

Projecturf is the Web-based project management app that helps individuals and businesses manage projects, people, and tasks. A project can be big or small, personal or business. Once a project is created, you add team members to the project who gain instant access to it via the Web. Within a project, there are tons of features and functions that can be done, such as creating and managing tasks, events on the calendar, and discussions; uploading and storing designs and documents; and analyzing project data using the Dashboard activity history and reporting.

Features:

Projecturf keeps you up-to-date on all your projects and stores everything in one place, that is always accessible, secure, and backed up.
Upload your own logo, create your own custom URL, change the colors, and tailor our app to suit your needs.
Projecturf uses the highest level of security available on all accounts at all times.
Pay only for your consumption. Pricing charts are built on project amount per month. Unlimited users, unlimited storage.

Pricing:

20 projects: $39.99/month
40 projects: $69.99/month
70 projects: $99.99/month
100 projects: $119.99/month

3. Apollo

Apollo is project and contact management done right. Using Apollo, you will realize that it’s built to help you get things done, quickly and efficiently. With Apollo, you will always know where your projects, your contacts and your life are at and you will feel on top of everything — regardless of how hectic your schedule is.

Features:

Keep everything under control – use the overview to keep track of what’s going on across all of your projects, calendars and personal tasks.
Start interactive timers – with interactive timers, you can start a timer and keep track of how long you are spending on a task.
See your project’s activity – in the activity screen you can see who did what on your project and who is allowed to access it.
Set your milestones – you can assign a task list to a milestone, to divide your project into stages and throw a party when you complete a full stage.

Pricing:

Basic: $23/month
Plus: $48/month
Premium: $96/month
Max: $148/month

4. Basecamp

Basecamp is the top choice for entrepreneurs, freelancers, small businesses, and groups inside big organizations. Projects go well when people talk to each other, discuss issues openly, and communicate clearly. Basecamp is focused on making this easy.

Features:

No more messy email threads. Post messages to Basecamp instead.
Easily share files, documents, images, and designs with your clients or team.
Assign to-dos with deadlines. Making to-do lists and adding to-do items literally just takes seconds.
Templates jump start your project. Instead of creating new projects from scratch every time, use Basecamp project templates to set up standardized projects ahead of time.

Pricing:

Plus: $49/month
Premium: $99/month
Max: $149/month

5. Huddle

Huddle is the world’s leading cloud-based collaboration platform, used by 90,000 businesses and government organizations in more than 180 countries.

Features:

Online file storage – Huddle encrypts all data exchanged with the server to industry standard levels as well as authenticating the server itself to the user.
Discussions – quickly start discussions with team members and keep all conversations and comments in one central place.
Tasks & files – immediately track deadlines and milestones for your projects. Attach files to specific tasks.
Permissions – set granular permissions against each workspace or folder, controlling who can view specific items.

Pricing:

$15/per user and month

6. Lighthouse

Lighthouse will simplify your workflow so you can do the job you were hired to do. Collaborate effortlessly on projects. Whether you’re a team of 5 or studio of 50, Lighthouse will help you keep track of your project development with ease.

Features:

Keep up with your project on the go – no matter where you are, we have the tools to keep you up to date on your project.
We’ll organize. You work – Lighthouse has given you all the tools you need to organize your tickets – custom states, a powerful tagging system, an advanced search, saved searches (we call them ticket bins), and a mass editing tool.
Setting your project goals – milestones help you group your tickets in timely releases.
Plays well with others – thanks to Lighthouse’s robust API, there are already dozens of useful services that integrate with Lighthouse.

Pricing:

Bronze: $25/month
Silver: $50/month
Gold: $100/month

7. Goplan

Goplan lets you keep track of your projects and collaborate with your colleagues securely through an intuitive user interface. Goplan was developed to scratch developers own itch – they needed a better tool to manage our projects, communicate with clients, and organize our personal lives. Goplan has become a consumer-facing product ever since then.

Features:

Everything in its right place – the Goplan dashboard gives you an overview of everything that’s happening with your company and your projects.
Task management – organize your projects into tasks and milestones. Tasks can have any number of sub-tasks, with sub-tasks of their own.
Issue tracking – if you’re running a software project, you’re probably aware of the notion of tickets and issue tracking. Tickets capture project defects, which can then prioritized and filtered.
File management – upload files and documents directly to Goplan and have all your projects assets in one secure place.

Pricing:

Startup: $10/month
Professional: $35/month
Unlimited: $80/month

8. Action Method

Action Method by Behance is a task-management methodology designed to help creative thinkers push their ideas forward. Based on the power of capturing and managing tasks you need to complete, Action Method ensures ideas are executed. From beautifully designed paper products, to Action Method Online, to Action Method for iPhone, this system of products works together to maximize productivity, organization, and accountability.

Features:

Capture Action Steps – action Steps are tasks that need to be completed. Each Action Step should start with a verb: “Call Y,” “Follow up with X,” “Buy a gift for Z.”
Delegate tasks – you can delegate Action Steps to anyone with an email address. Once an Action Step is delegated, you can monitor its progress.
Manage projects – all of your items in Action Method online are organized by project. A project could be a client, a project at work, a party you’re planning.
Sync with mobile – automatically sync with your mobile device to manage your tasks wherever you are. No wifi required.

Pricing:

Introductory: free
Premium: $12/month

9. Rule.fm

Rule – one application to make your business simply productive. People, CRM, Projects, Documents and more- all interacting and coexisting with total transparency online in an activity stream — so you can finally manage your business under one rule.

Features:

The stream – know what’s happening in your business up to the moment. View, filter and collaborate on all[…]

Google announced that they will be changing the definition of a session in Google Analytics. Currently, a session is ended when one of the following actions occur:

It’s the end of a day.
The visitor has closed their browser window.
It’s been longer than 30 minutes between pageviews for a single visitor.

With the changes happening in Analytics, the first and last bullet up there will still apply, but that middle one is changing:

When any traffic source value for the user changes. This includes: utm_source, utm_medium, utm_term, utm_content, utm_id, utm_campaign, and gclid.

Google Analytics, always ch-ch-ch-changing to bring you the most quality data.

 

This change takes place immediately, so it’s already happening in your account!

But, what’s it even mean for your account? Here’s the skinny: from now on, instead of recording a session as just a set amount of time having passed between pageviews, Google is getting more accurate about it. They’re recording it based on the traffic source code, which means if a visitor clicks on your red tennis shoes page, then look at your shoestrings, then clicks to your sock collection, and then clicks on another link for your red tennis shoes—it’s going to count that as another session.

This change is going to help you see more accurate information about what visitors are doing on your site, which is in line with the introduction of multi-channel funnels.

 

Google is warning that this change will increase the number of visits slightly, and they’re estimating the change at about 1%. So, don’t sweat it! It doesn’t seem like it’s going to affect your account metrics enough to cause an issue. It’s just more changes from Google to make Analytics more precise and provide more information about your visitors and their actions in your website.  (see below)

 

As always, thanks for reading and stay tuned for more updates from PPC Hero!

Check out The Adventures of PPC Hero: Heroic Feats of Pay Per Click Management at http://www.ppchero.com/. Copyright © 2007-2010 Hanapin Marketing, LLC.

  


Are you fed up with hearing about yet another Silicon Valley Web application built with fairy dust and funded by magic pixies? If so, this post is for you. Most of us will never get to work on a Web application that is funded by venture capital and for which the business aims are a secondary consideration. For us, developing a Web application is about meeting a particular business need as part of our job working with some large organization.

Whether as an in-house developer or as part of an agency, we work under strict business constraints and with limited budget and time. Personally, I thrive on this. But it is challenging, so finding the right approach is crucial. In my time of working on Web applications for businesses, I have identified three secrets that seem to make things go a lot smoother:

Focus on user tasks and not features,
Don’t try to solve everything and
Ask the right questions early on.

Let’s begin by looking at user tasks:

Focus On User Tasks, Not Features
When you’re asked to build a Web application, you do exactly that: build a Web application. You have not been asked to solve a business problem, nor to make it easy for the user group to complete a particular task. Instead (at least in my experience), your job is to add certain features and build a specific type of application.

Unfortunately, this is a dangerous approach. By focusing on the application you are building, the emphasis is firmly on technology and functionality, not the users’ needs or the underlying problem to be solved.

Take a Step Back
A good development team will step back at the beginning of a project and look at the underlying issues that have led to the application being initiated.

Spend time with those who will use the application. Observing how users complete the tasks you are trying to simplify is more enlightening than any specification document.
Actually speaking to those who will be interacting with your application on a daily basis will create a much more effective solution than blindly following the directives of whoever commissioned the project.

Make User Testing Part of the Development Process
User testing is key to getting to know the user. Aim to test the application at least once a month throughout the entire development cycle. This does not need to be expensive or time-consuming. Rather, each session needs only three or four users and should be easily completed within a morning. This allows the entire development team to take part in these sessions and be involved in the debriefing, which can happen over lunch.

For more information on this “budget” approach to usability, I recommend Steve Krug’s latest book Rocket Surgery Made Easy.

When it comes to building Web applications for the business, task completion is king. Features merely exist to help users complete tasks.

Which brings me to the next secret…

Don’t Try To Solve Everything
If you fail to stay focused on user needs and business goals, things can get out of hand. These kinds of projects tend to suffer particularly badly from scope creep. Once people in your organization see the potential of the application, they will start suggesting ideas for new functionality. The problem is that with every new feature comes more complexity. This can ultimately undermine the effectiveness of the app. When developing a Web application, I urge our clients to start simple.

Predicting how users will respond to your application can be hard, and a lot of time and money can be wasted building features that no one actually uses.

Monitor Your Key Performance Indicators
Once the simple application has launched, move into a phase of monitoring key performance indicators. This will help you judge the success of the app.

The indicators will vary between projects. However, establishing at the beginning of the process how the success of the app will be measured is important. Combined with user feedback, this monitoring provides a clearer picture of where you should go next. But be careful with user feedback.

Don’t Overreact to User Feedback
Users often react negatively to change. Learning a new system takes time, even if it ultimately is easier to use. Users will inevitably complain and make a plethora of suggestions.

Don’t react too quickly to these suggestions. Daniel Burka once told me from his time at Digg that they allow at least two weeks before reacting to user feedback. Allow users time to adjust to the application before making changes.

Users don’t like change, as Facebook has discovered.

But that is not an excuse for ignoring the opinions of users. In fact, you should carefully gather as much feedback as you can.

Sometimes Technology Is Not the Answer
Interestingly, many of the suggestions made by project stakeholders (not users) revolve around management issues, such as reporting, workflow and monitoring.

While these suggestions are sometimes valid, I have found that the simplest solution to these problems is usually managerial, not technical. For example, a number of clients have asked me for workflow functionality in their content management systems, so that documents cannot be published without approval from elsewhere in the organization. Of course, this is entirely possible to build. In fact, it comes standard in most content management systems.

But I usually wonder whether it would be easier just to tell content providers not to publish a document before it’s checked by someone else. Does this really need a technical solution when a simple policy would do the job?

If more features add more complexity, perhaps we should not solve every problem with a new feature. We could always add that functionality later if it really is required. Of course, that depends on whether the application is easy to expand.

Make It Expandable
Because our feature set is likely to change based on user feedback and business aims, building the application in anything but the most flexible way would be unwise, especially if we purposely haven’t added all of the intended functionality for launch.

Making an application flexible is obviously not easy. But if the application has a plug-in infrastructure from the beginning, then adapting it over time becomes easier. The trick is to recognize from the outset of the project that you do need flexibility. Which brings us to the next point:

Ask the Right Questions Early On
When building a Web application, nothing is worse than surprises. Make sure you have all the facts before beginning. Of course, you cannot know what you don’t know. But the trick is to know the right questions to ask before building. Too often, we focus on the wrong types of questions, such as:

Will this application get internal approval?
How will person X respond if we take this approach?
Does this conform to our branding guidelines?
How will this content be managed internally?

Focusing on these kinds of internal-facing questions may get the project approved faster, but it will lead to a far less effective application. In my experience, four particular questions, if neglected, will cause most problems in the development process:

What is the hosting environment?
When dealing with complex Web applications, knowing the hosting environment is important. Without knowing the environment, you cannot replicate it exactly on your development server, which increases the risk of incompatibilities down the line.
How will users be authenticated?
Most Web applications require users to identify themselves. Realizing late in the game that this authentication has to happen a particular way or be integrated with some legacy system creates all kinds of headaches. Many companies have a central user-authentication system, and your application will probably have to use it.
How will data be backed up?
Web applications often hold valuable data, some of which is confidential. This means that having a solid back-up plan is both business-critical and potentially complicated. By considering from the outset how to handle back-ups, you keep this from becoming a serious problem later in the development process.
Is there any legacy data?
Many new applications will replace existing systems that contain a lot of legacy data. Knowing exactly what this data is and having a plan in place to migrate it to the new system is important.

Learn From Your Mistakes
Every Web application presents unique challenges. Over time, though, you learn from your mistakes and discover the key issues. Whether it is focusing on users’ needs, keeping things simple or asking the right questions, these lessons will be invaluable going forward.

However, there is also an opportunity to learn from one another. Unfortunately, many development teams toil away in isolation within large organizations. Articles like this should stimulate discussion and encourage us to share our experiences — both good and bad — of working on these little-heard-of Web apps.

I hope you will take the time to share your experiences in the comments, so that we can come up with new best practice for developing Web applications in our businesses.

(al) (il)

© Paul Boag for Smashing Magazine, 2011.

Niche or industry-specific job boards are highly useful for job searchers who are looking for work in a specific field, and they’re also great for allowing employers to reach a targeted audience of job searchers.

For those who want to create a job board or add a job board to an existing website or blog, there are several options for creating and managing it. There are several different WordPress plugins and themes that have been developed over the past few years for running job boards.

I have used 2 commercial plugins and 1 commercial theme for job boards with very mixed results. In some cases setting up the job board was rather complicated, and in other cases the support was poor and the developer disappeared. If you’re building a website or a critical part of a website on a commercial plugin or theme it’s important to have confidence that the product will continue to be supported in the future, otherwise you could have major problems as new versions of WordPress are released.

Gravity Forms is a very popular commercial WordPress plugin for creating forms and it includes all of the functionality needed to create a job board. Although it is not specifically a job board plugin there are a few significant reasons why you may want to consider using Gravity Forms if you are looking to create a job board for yourself or for a client:

Gravity Forms is well-established and due to it’s popularity it is not in danger of becoming unsupported.
The inteface is easy to use and manage.
A PayPal add-on is available to those who have a developer’s license of Gravity Forms, so you can easily charge a fee for job submissions.

Because many WordPress designers and developers already have a Gravity Forms license I thought it would be useful to show how this plugin can be used to create your own job board. It is a commercial plugin, so if you don’t currently have a license you would need to at least purchase the $39 personal license in order to use Gravity Forms. That would allow you to set up a job board with free submissions. If you would like to be able to charge companies for the job listings, a developer’s license ($199) is needed in order to get the PayPal add-on.

Please note, this post is not endorsed or sponsored by Gravity Forms. I’ve found it to be a very useful (and time-saving) plugin in my own work so I thought this information may be helpful for others.

Step 1: Upload and Activate Gravity Forms
The very first step is to activate Gravity Forms like any other WordPress plugin.

Step 2: Set Up The Job Categories
Before we create the job submission form it will be helpful to set up the categories for job submissions. To do this, in the WordPress dashboard click on “Posts” and then “Categories”. Here you’ll be able to add the new categories and set up the custom URL slugs.

For the example job board that we’ll be working with in this tutorial I set up three categories, Graphic Design, Web Design, and Web Development (actually, I renamed the Uncategorized category to Graphic Design and created the other two categories). Add as many categories as you would like, including parent/child relationships between categories. When users submit a job they will be able to choose which category should be used.

Step 3: Create the Job Submission Form
We’re now ready to create the form that employers will be using to submit their job listing. Gravity Forms makes it simple to create advanced forms, and it also makes it possible to use the data from the form submission and automatically place it into a post. That way when someone submits a job listing through the form you will be notified by email and you’ll be able to go to the WordPress dashboard to publish the post or delete it if it’s not appropriate.

When you have Gravity Forms activated you will see a “Forms” link in the WordPress dashboard. Click on “New Form”.

Give your form a title and a description by clicking on “edit”.

We’ll need some basic info from the submitter, so to the right under “Advanced Fields” click on “Name” and “Email”. Then hover over the filed and click on “edit”.

That will open up some options. Check the “required” box to make this a required field.

The next field will be the job title. We’ll want this to be used as the post title when the job is published, so click on “Title” under “Post Fields”.

Then click on “edit” and change the name from “Post Title” to “Job Title”, and also make it a required field. Next, we’ll add two custom fields, one for the company name and one for the location. So click on “Custom Field” twice under “Post Fields”. Once the fileds are added to your form, click on “edit”. Change the name of the field and check the radio button for a new custom field name. I’ll leave the company field as optional but I’ll require the location field.

Next, we’ll need to allow the submitter to choose a category, so click on “Category” under “Post Fields”. Click on edit and change the label to “Job Category” and make the field required. This will add a drop down field to the form for selecting from the available categories (which we set up in step 2).

The last form field that we will be adding is one for the job description and for instructions to those who wish to apply. Click on “Body” under “Post Fields”. Click  on “edit” and change the label and make this field required.

Our form is now complete, so click on the “save” button. You’ll be presented with a few options. Click on “setup email notifications” and we’ll go ahead and set it up so that the form submission emails are customized how we want them.

Here you can set it so that the email notifications come from the name and email address of the person submitting the form, you can choose which email address to send them to, and you can choose which fields to display in the email.

Step 4: Add the Form to a Page
Now that we have our form ready to go we will need to add it to a page. Create a page called “Submit a Job”, or whatever you would like it to be titled. Once you are editing the page adding the form is easy. Click on the icon shown in the image below.

You’ll then be able to select the form that you want and it will be inserted into the page. Publish the page when it is ready.

Step 5: Edit the Theme
We’ll now need to make some changes to the theme to display the information that we want visitors to see. For the purposes of this tutorial we will be making minimal changes. In a real world scenario you would probably want to do additional work with the CSS to improve the look of the theme, but we’re just focusing on getting the job board functional for now.

Let’s start with the font page. We want it to show the most recent job submissions, the date of submission, name of the company, location, and job category. We won’t show any of the post content (the job description) on the front page, visitors will have to click to see those details.

The specific actions in this part will vary depending on the theme that you are using, so these will be rather generic instructions. In the index.php file you’ll want to find the code:

<!--?php the_content(', '); ?-->
or

<!--?php the_excerpt(', '); ?-->
depending on whether your theme displays full posts or excerpts on the front page. Remove that code entirely so that neither the post body nor the excerpt are shown on the front page.

Where you want the company name to be displayed, use the code:

<!--?php $values = get_post_custom_values("company"); echo $values[0]; ?-->
This will pull the data entered in the “company” custom field for the post.

Where you want the location to be displayed, use the code:

<!--?php $values = get_post_custom_values("location"); echo $values[0]; ?-->
This will pull the data entered in the “location” custom field for the post.

If your theme does not already show the date and category with posts on the front page you can add them with the following code:

<!--?php the_date('F jS, Y'); ?-->
and

<!--?php the_category(', '); ?-->
You’ll also want to set up the category pages by editing the category.php file to show the same information on each post as the front page, except of course it will only show posts in the selected category. You’ll also want to add the company name and the location to the single.php file (using the same code as shown above). which will add that informtion on the individual job listing posts.

Step 6: Setting Up the Payment
We now have a functional job board that allows employers to post a job for free. If you would like to charge a fee for job submissions you can keep going and integrate the PayPal add-on for Gravity Forms. You’ll need to download the add-on (you will need to be logged in to Gravity Forms to view this page), upload and activate it like any other WordPress plugin. You’ll need to edit a few settings to integrate Gravity Forms and PayPal. Gravity Forms provides excellent instructions (you’ll also need to be logged in for this page) for doing this. Basically, you’ll set the IPN settings in your PayPal account and then set up a PayPal feed in Gravity Forms.

You’ll need to add a product field to the submission form with the price that you would like to charge for submissions.

In the Gravity Forms dashboard you’ll then have a few settings to setup and you’ll be ready to go.

Now when someone completes the form they will automatically be led to pay through PayPal.

So as you can see, setting up a job board in WordPress is quite possible with the Gravity Forms plugin. This tutorial really only covers the basics, you’ll want to set up your theme to meet your needs, but the basics of getting the form submission and job listing posts set up is rather simple.

For more tutorials please see:

Create an Advanced Contact Form for Client Inqueries
How to Create a Se[…]

Advertise here with BSA

Data from internal site search queries performed by your users is a gold mine of information. This information can be used to guide site improvements related to design, information architecture, content, and more.

Site search analytics (SSA) is an emerging form of site analytics that studies search query data to discover patterns in site use.

In this interview, we discuss site search analytics with information architect consultant Louis Rosenfeld, a groundbreaking persona in the field of SSA, whose list of accolades include the authoring of Information Architecture for the World Wide Web published by O’Reilly and, most recently, Search Analytics for Your Site under Rosenfeld Media.

What is site search analytics in a nutshell?
Louis Rosenfeld (LR): Your users are telling you what they want from your site — in their own words — when they use your site’s search engine. Are you giving them what they want? SSA is simply a set of tools and methods to help you harvest users’ queries, test and measure how well they’re performing, and actually see how well you’re serving users. That’s it in a nutshell.

How is site search analytics different from SEO?
LR: In SEO, you’re looking to learn from the web queries that direct — or ought to direct — users to your site. In site search analytics, you study what users search once they reach your site. At that point, their queries are far more qualified and relevant to your organization and your content, so you’ll learn a lot about how to serve users better once they’re at your site.

What are some things a site owner can learn from analyzing search queries on her website?
LR: Here’s just one example: she can learn that her site is completely failing to provide users with critical content — even if the content is already there on the site.

She’d do that by identifying and analyzing the common search queries that retrieve zero results, then determining if the content was indeed there or not. If it was, then she’d be in a position to see if the problem was with the search engine’s configuration, or with the content being jargon-y, poorly written, or poorly tagged.

As you can see, SSA is a good diagnostic tool. The site owner could then fix the problems or, in a large organization, wield the data as a highly persuasive tool for cajoling unruly IT staff and content owners to do the Right Thing and fix whatever problems she’d identified.

There are many other forms of diagnostics covered in the book, all of which can help you fix and improve your site’s content and navigation, as well as search performance. Additionally, site owners can use SSA to develop search-related metrics. Those come in especially handy when you want to benchmark, monitor, and optimize your site’s findability.

How can site search analytics drive design decisions?
LR: SSA can help site owners determine which content should be given the most prominence. For example, in the book I show how analyzing query data can expose the seasonal nature of users’ information needs. When you know which content matters when, you can feature content on your main page to match those seasonal needs.

Another example: most sites suck at supporting contextual navigation within and across their deep content. If you analyze the queries that originate from deep content, you’ll get a sense of the "desire lines" you should support — in other words, the navigational paths users wish were there.

What are some counter-intuitive results and patterns you’ve derived from studying search queries?
LR: Most of what we learn isn’t so much counter-intuitive. Like all forms of user research, it’s simply stuff that wouldn’t have occurred to us if we hadn’t looked at the data.

For example, the Financial Times noticed that many queries included dates. Assuming that users wanted articles that were published on or near particular dates, FT simply made sure that chronological sorting and filtering of their search results worked well.

FT also noticed that many queries were for the names of people and companies. So they configured their system to allow users to filter by names as well.

These are simple features that provide a lot of value. But, like a lot of simple, good things, sometimes you don’t think of them unless you explore and analyze data. Or, if you’ve got a boss or colleagues to convince, sometimes you need evidence to support you. SSA is hard — and very convincing — data.

What tools can be used to gather data for search analytics?
LR: This doesn’t have to be a complex or expensive proposition. A free tool like Google Analytics can do some basic SSA reporting (most people don’t know this; it takes a little bit of configuration to get it to work with your site’s search engine). More importantly, you can then grab the data and drop it into a spreadsheet for more customized analysis (here’s an Excel spreadsheet you can use for analyzing queries).

Why should a site owner invest time/resources in site search analytics?
LR: What’s important to remember is that even an hour per week doing even the most basic analysis will teach you something of value. Here’s why: let’s say you only have time to analyze and test, say, your top 25 queries. Well, if you map queries out from most frequent to least frequent, they look like this:

Source: SSA009: Figure 2.4.

This is called the Zipf Distribution — and it’s pretty much true for everyone’s site: a few queries handle a large portion of the traffic. The rest — the "long tail" — are fairly esoteric.

Here’s another way to look at this data:

Source: SSA010: Table 2.1.

This table shows how, in this particular example, the most frequent 14 (of tens of thousands of) unique queries accounts for 10% of the site’s search traffic. To get to 20%, you only need to analyze 42 queries. To get to 30%, only 98.

So your efforts are quite scalable, and a little analysis can go a long, long way.

If I wanted to start analyzing search queries, what’s the best way to get going?
LR: Cheaply. Set up Google Analytics (free) on your site. Teach it how to parse out your search engine’s queries. Use GA’s standard reports, but be sure to download the data into your favorite spreadsheet application and… play!

More on Louis Rosenfeld
If you’re interested in learning more about site search analytics, get your copy of Louis Rosenfeld’s new book, Search Analytics for Your Site.

Also, check out Rosenfeld Media’s other books, such as Luke Wroblewski’s Web Form Design. Rosenfeld Media will be releasing 13 new titles by 2012, so make sure to stay tuned!

Louis Rosenfeld’s blog is at www.louisrosenfeld.com. Follow him on Twitter @ louisrosenfeld (and @RosenfeldMedia).

Exclusive Discount
Get a 15% discount on your purchase of Search Analytics for Your Site by using the following discount code:

6REV
Related Content

Search Analysis with Google Analytics
Optimizing WordPress for Search Engines
Popular Search Engines in the 90′s: Then and Now
Related categories: Interviews and Website Management

About the Author
Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Managing client projects is a major requirement for efficiency and for creating a positive experience for clients. Regardless of whether you freelance, work for a small agency, or work for a large agency, there are a lot of details and communication involved in client projects. Having an efficient system for managing those projects is essential.

In this post we’ll look at 10 project management apps that can help. While many of them have similar features, each has it’s own unique way of doing things. Some are web-based apps that involve a monthly fee, others software with a one-time fee, and others are open source and free.

Basecamp
Basecamp, from 37signals, is one of the most popular options for project management. Communication with other group members is easy with Basecamp, making it much more efficient than email. Other features include file sharing, to-do lists, assigning of due dates and responsibilities, project templates, and more.

Pricing for Basecamp is based on the number of projects and the amount of disk space needed for storage. The basic plan starts at $24 per month (15 projects, 5 GB of storage). A limited free plan is also available.

activeCollab
activeCollab is a project management tool that installs on your server or local network. In contrast to subscription-based project management apps you’ll have unlimited users, unlimited projects, and unlimited storage space. It provides a platform for planning, progress tracking and communication. activeCollab has a number of tools that save your time. Create project templates, easily reschedule milestones and tasks, quickly add new tasks and discussions and more.

The cost for a small business is $249 plus $99 per year for support and upgrades (first year is free). A 30-day free trial is available.

Mavenlink
Mavenlink aims to help client service providers, like web designers, by providing everything needed to manage projects.  It offers all of the standard features for collaborating and communication that you would expect to find in a project management app, plus it has a few additional features that are likely to be highly useful for freelance designers and small design agencies. With Mavenlink you can work with integrated contracts for your projects, and you can also invoice and accept payment from clients.

The Expert plan is priced at $39 per month for unlimited projects, unlimited account members, unlimited invoices, 20 GB of storage, and custom branding.  A 30-day free trial is available, as well as a limited free plan.

Subernova
Subernova is a project management app that lets you track time, send invoices and estimates, collaborate with others and keeps your business smooth by keeping tabs on late payments, deadlines and more.

The cost for Subernova is $14.99 per month or $149.99 per year. A 30-day free trial is available.

ProjectPier
ProjectPier is a free, open-source, PHP application for managing tasks, projects and teams through an intuitive web interface. If you’re not interested in paying a monthly subscription fee or a software license fee, ProjectPier may be a good option. With ProjectPier you’ll get plenty of features to manage projects and collaborate with team members and clients. It includes features like milestone tracking, tasks and tickets, file sharing, assigning of tasks, privacy control, and more.

Smartsheet
Smartsheet is used by thousands of companies for online project management, task management, and many other types of work. Securely share your work sheets, attached files, reports and discussions with team members as well as external contractors or clients.

The Basic plan is $9.95 per month for unlimited users (1 sheet creator), 10 sheets (projects),  and 3 GB of files storage. A free 30-day trial is available.

Collabtive
Collabtive is cloud based groupware (free) for project management. It allows you to manage projects, milestones, and tasks. Timetracking and reporting are also included. Collabtive is intended for small to medium-sized businesses and freelancers.

Projecturf
Projecturf helps you manage projects, people, and tasks. Create and assign tasks, share files, collaborate with others, track time and budgets, calendar events, and manage tickets.

Pricing starts at $9.99 per month for one project at a time, unlimited users, and 2 GB of storage space. A 14-day free trial is available.

Wrike
Wrike is a project management tool that allows you to manage unlimited projects, and collaborate and communicate with the ability to share any kind of file. Wrike allows you to create plans and manage tasks. You can even create a task in Wrike directly from Outlook.

Pricing starts at $49 per month for 5 users, unlimited projects, and 5 GB of storage space. A free trial is available.

EasyProject.net
EasyProjects.net offers management of unlimited projects, milesstones, project templates, batch operations, custom fields, portfolio management, time management, billing and invoicing, and more.

A hosted version of EasyProjects.net is available for $75 per month (5 users), or for $648 you can purchase a license and install it on your own server.

 

For more resources please see:

14 Online Presentation Tools
10 Extremely Useful Time Management Tools
20 Highly Useful Google Chrome Extensions
13 Options for Selling Digital Products on Your Website
11 Leading Tools for Free Website Analytics

URL shortening service Bit.ly (news, site) has acquired automated social media broadcaster Twitterfeed (news, site), moving from URL analytics towards channel delivery, thus extending its  intelligence capabilities into the burgeoning social media sphere. Customer experience managers should be pleased.

Read full story...



Follow us on Twitter

Join free newsletter

View upcoming events

Find a new job

Having a well-designed and demonstrative portfolio is crucial especially if being an artist is your only livelihood. It often happens that talented designers can come up with a fantastic design but don’t know how to turn it into a functional website. And it’s the other way around for developers. What to do if you’re a photographer who needs to show of his work but have no clue about websites and don’t want to pay through the nose for a portfolio? This is another niche where theme marketplaces come in aid. At theme marketplaces you can purchase fully-functional, well-designed high-quality portfolio themes dirt cheap and not worry about all the coding stuff. This article presents 40 incredible premium WordPress themes to make you and your work stand out.

1. DocPress ($35)

DocPress is a minimal yet powerful WordPress theme. It features modern and unique layouts on the homepage, portfolio page and blog. DocPress also takes advantage of WordPress 3.0 menus, automatically sized featured images and custom theme options.

2. Essence ($35)

Essence is a professional business, blog and portfolio WordPress theme. Its clean layout and design make it very readable and pleasant to look at. It comes with dozens of features and intuitive options. Essence uses HTML5 and CSS3 as well as all the newest WordPress functions up to its newest version.

3. Perfekto ($30)

Perfekto is a simple, clean and minimalist wordpress theme suitable for portfolio, gallery and photography websites. This theme also suitable for business and corporate websites.

4. Vue ($35)

Showcase your latest work and create your CV/resume with Vue.

5. MediaReel ($35)

MediaReel is a powerful, premium fullscreen background WordPress theme great for photography and portfolio websites but can also be used for other projects.

6. Garnish ($35)

Garnish is a clean-cut, straight to the point, simple to use portfolio theme. The uncluttered, one-page, ajax-powered portfolio is perfect for placing your most important work directly in front of your potential clients.

7. Echea ($35)

Echea is a ver easy to install and very powerful premium wordpress theme. Manage your forms, sidebars, page templates, styles, fonts and more. Also install and set up Echea within a minute as advertised with our newest addition, TitanInstaller. The ultimate theme installation solution.

8. Simpl ($35)

Simpl is a clean and classy theme that emphasizes your content. Whether your goal is to land the next big client with your flashy portfolio or to saturate the minds of your readers with premium textual content, Simpl does the trick. No matter your field or passion, Simpl will allow you to broadcast your message in the most universal and uncluttered fashion.

9. Artisan Creatif ($35)

Whether you’re an established photography studio or an up and coming artist, Artisan Creatif will answer your needs for a professional portfolio publishing platform. Born from our extensive knowledge and experience as a boutique design and development studio, this theme is expressly designed to successfully showcase and promote your work with elements such as a filterable portfolio, individual case studies and much more.

10. Sense ($35)

Sense is a minimalist premium WordPress theme design , great choice for you or for your client, can be used for every type of site.

11. timeless ($35)

We can all agree that design trends change over time. But there’s always those timeless designs that no matter when they’re used, they work. That’s why Timeless was meticulously designed, based on swiss design, the use of grids and the ever so used Helvetica font, timeless is focused on typography and not cute shiny images that will need to be changed in 6 months.

12. qop ($35)

This beautifully designed template is as gorgeous to look at as it is to customize and use. Well commented code in all files enables easy alterations if you are looking to roll up your sleeves and get dirty.

13. Rockwell ($35)

RockWell is a powerful theme with unique features. It’s easy to use, easy to customize and most importantly – it allows you to unleash your creativity. Fun, loud and versatile = that’s RockWell. Doesn’t matter if you are a photographer, business, blogger or a designer – this theme will suit all types.

14. Halo ($30)

WordPress Halo Theme is a brand new timeless Portfolio Theme with some really stunning Features but still as clean and minimalistic as possible, concentrating the focus of Your Visitors absolutely on Your Work.

15. 8Cells ($35)

8Cells is the WordPress theme for Portfolio, Creative built with latest WordPress features. Custom Post Type, Shortcodes, Extensive admin panel etc.

16. Gridlocked ($35)

Gridlocked is a grid-based, post-format supporting, layout-shuffling, minimalistic theme for creatives. It is both a classic portfolio for showcasing your work and a modern tumblr-style blogging system.

17. Core ($35)

Core is the Minimalist Photography, Portfolio, Personal website Template built with latest WordPress features. Custom Post Type and Image Uploader etc.

18. Briefed ($70)

Designed by Cameron Moll, Briefed is for all types of designers & creatives thanks to it’s modular layout and clean, minimal design. The home page is completely customizable with a portfolio powered by custom post types, optional Dribbble feed, and jsMasonry for an adaptive layout.

19. Elefolio ($70)

Elefolio combines easy Tumblog publishing and a Portfolio to showcase your work and posts. The portfolio uses custom post types and can also stream from your Dribbble account. It will impress any visitor with its simple yet detailed look.

20. Vimes ($69)

Vimes is a simple & elegant theme for WordPress, designed especially for design agencies, photographers and artists, but which can be easily used as a traditional blog theme.

21. Wings ($32)

Wings is a premium portfolio and blog theme which helps you to present your text and media content in a professional and minimalistic way. It comes with two different styles (dark & light) – both designed to keep the focus on the content and your portfolio presentations. No annoying images or scripts which may destroy the professional appearance you need for a business website.

22. Bismika ($35)

Bismika is a WordPress theme for any Portfolio, Blog or Business site. This theme allow user to pick home layout from 5 options ( default/custom , page+sidebar, fullwidth page, Blog+sidebar or Portfolio lists). All done with few clicks on theme options.

23. Fundamental ($35)

Fundamental is a professional WordPress portfolio theme, easily customized, full of goodies, and simply a beautiful way to display your work or show your blog.

24. Strobe ($35)

Introducing Strobe WordPress Theme version 1.0. This theme features a wide range of customization and backend features. Every single page and tiny section in this Theme is customizable. For an insight into the backend watch the Showcase video.

25. Micro ($35)

Micro is an extremely fluid and elegant WordPress theme that focuses on customizability and function. It’s simple but well-structured look is backed by a powerful skin builder that allows you to construct your own colour schemes right from the WordPress admin.

26. Austen ($35)

Austen is a Minimalist theme hand crafted for Portfolio, Blogging & Business usage. It has a clean, elegant style and is supported by a robust, flexible option panel.

27. Folio Elements ($75)

The Folio Elements theme is a simplistic portfolio theme for WordPress which eliminates all the clutter and puts your content forward. There are no single post pages, comments, widgets or static pages when using Folio Elements which is absolutely the best part of this theme. If elegance and simplicity are not what you are looking for, Folio Elements is definitely not for you.

28. Transfer ($75)

Transfer is a minimal WordPress theme, perfect for creatives and businesses alike. Featuring a minimal design, valid code, and rock-solid functionality, Transfer delivers a full-scale, modern redesign solution for your WordPress site.

29. PhotoSquares ($70)

PhotoSquares2 is newest version of widely used WordPress gallery theme. This theme is perfect choice for photographers and designers who want to showcase their work. This portfolio WordPress theme is very easy to customize and comes with five different color templates to choose from.

30. Immense ($49 per subscription)

Immense is a minimalist professional photography theme for WordPress. It allows for fullscreen slideshows that automatically adjust to the size of the browser.

31. Sidewinder ($49 per subscription)

Sidewinder is a horizontal side-scrolling photo theme for WordPress perfect for creating beautiful photo portfolio websites. Sidewinder is a child theme for the Base theme framework.

32. Uno ($49 per subscription)

Uno is a minimalist photo gallery and photo blogging theme for WordPress. A child theme for the Base Theme Framework, Uno can be used for both portfolios and blogs.

33. Photography ($68)

A premium WordPress theme built for photographers. Includes easy to use galleries, integrated Flickr support, and two gorgeous color schemes.

34. Motion Picture ($50)

Make your videos front and center with this neat and impactful video blog theme featuring High Definition post designs and our Typography Manager.

35. Press Two ($50)

Press Two is a complete re-write of our most successful theme Press. Advanced features such as Custom Post types and our Typography Manager give you more control over this minimalist magazine theme than you could dream of.

36. 365 Pro ($48)

365 Pro is a high impact WordPress photography theme that boasts an array of features including auto-resizing images,  EXIF data pages, fluid photo gallery, multiple widget areas and a professional looking blog.

37. FolioGrid Pro ($48)

Designed to be a fluid WordPress Portfolio Theme, FolioGrid has shown an impressive flexibility […]

  


Previously, on Noupe. We brought you a handful of ways to expand on the functionality of any WordPress based site using some inspired plugins and/or themes to elevate this CMS beyond its humble beginnings as a blogging platform. With ways to turn WP into a Discussion Forum, an Online Shop, and a Helpdesk. Today, that mission continues.

Excerpt from Part One

Theme designers and plugin developers have been pushing the boundaries of what WordPress can do for some time. This has accelerated since the introduction of Custom Post Types into the WordPress core as it allows developers to use WordPress in a lot of weird and wonderful ways.

Today we will begin showing you examples of themes and plugins that let you use WordPress in ways you may have never thought possible.

As we mentioned last week, in this installment we will show you how to extend the possibilities of your WP site to make it a Wiki, an Arcade, a Job Board, a Membership based site, a Review site, or just a Q&A site. Now let’s get at it.

Wiki
Due to the sheer amount of content they contain, Wikis are a good way of making money online (take Star Trek fan wiki Memory Alpha for example). They are also a useful addition to blogs and websites as it allows readers to contribute to the site. As you would expect from a CMS, WordPress handles Wikis easily.

Theme
WikiWP – FREE

In A Nutshell: A free WordPress theme that’s based on the Wikipedia design.

Pros

SEO friendly.
Clean design (though perhaps a little dated).

Cons

Hasn’t been updated for years so new WordPress features aren’t built into this theme.

WordPress Wiki Theme – $30

In A Nutshell: A premium WordPress design that uses WordPress to create a wiki.

Pros

6 colour schemes to choose from.
Features sliding sidebar menus and a dedicated FAQ page.

Cons

Hasn’t been updated with WordPress 3.0 features such as featured images.

Plugins
Wiki – $39

In A Nutshell: A premium WordPress plugin that lets you convert any post or page into a Wiki.

Pros

Entries can be edited directly on the page without having to access your admin area.
Works with WordPress, WordPress MU and BuddyPress.
Perfect for adding a Wiki to an existing website.

You May Also Want To Consider…

eSimple Wiki – A basic free Wiki plugin for WordPress.
Wiki Embed – Lets you embed wikis onto any WordPress page or post.
WikiPress – An open source plugin that lets you collaborate with other users in your admin section via a Wiki.

Arcade
There are quite a few premium products that allow you to build an arcade website using WordPress. Most plugins come packaged with a theme and charge a little extra for the games to be included in the zip file.

MyArcadePlugin Lite – FREE | My Arcade Plugin – €29.95

In A Nutshell: A feature rich arcade WordPress plugin that lets you install a whopping 29,000 games.

Pros

Games can be downloaded and posted automatically.
Great looking design and can be customised with your own brand in minutes.
Leaderboard support to encourage visitors to come back.

Cons

Free version of the plugin is very limited.

WP Arcade – $33

In A Nutshell: A premium arcade theme store that comes packaged with a plugin that automatically grabs games from MochinMedia.

Pros

All themes come with 5 colour schemes.
Advertising and Google Analytics integration.
Huge amount of customisation through the themes unique options page.
Good price for an arcade solution.

Cons

There are currently 10 themes available however they are all very similar.

WP Arcade Engine – $29

In A Nutshell: A premium arcade plugin for WordPress.

Pros

The plugin can be set to publish new games every day automatically.
Support for any type of game type.
Includes a 30 day no questions asked money back guarantee.

Cons

The plugin retails for $29 however you don’t get any games for this price. You will need to pay an additional $29 to get a game pack.

You May Also Want To Consider…

WP Mini Games – Allows you to easily embed flash games onto posts, pages and sidebars.
ArcadePress – An fulley fledged open source arcade solution.
WP Games Embed – Lets you embed flash games into your posts and pages using shortcodes.

Job Board
There are a lot of job related plugins available for WordPress though 3 stand out from the rest: the Job Board and Jobroller designs and the very useful Job Manager. I recommend Job Manager for those of you who want to add a job section into an existing WordPress website.

Themes
Job Board – $65

In A Nutshell: A premium theme that uses WordPress to power a job board.

Pros

Complete control using a dedicated theme options page.
Coupons feature to allow certain customers discounts.
Automated payment collection via PayPal.
Very easy to brand.

Jobroller – $99

In A Nutshell: Turn your WordPress website into a fully functional job board.

Pros

Easy to use theme options area.
Options for job seekers and employers. Job seekers can also upload their resume/CV for employers to see.
Five different colour schemes.
Social media integration.

Plugins
Job Manager – FREE

In A Nutshell: An open source job plugin that doesn’t scrimp on features

Pros

Can create multiple job boards.
Applicants can apply directly through the website.
Good template system that allows you to customise the job area into your existing WordPress design.

Cons

If you are looking for a dedicated job website, it may be better to use an all in one job solution such as the premium themes mentioned as you would need to use this plugin with an existing design.

WPCareers – FREE

In A Nutshell: A free plugin that lets you create a searchable resume (CV) database.

Pros

Users can modify descriptions at a later date and upload their own photos/images.
Can manage job seekers and employers.

Cons

Limited features when compared to other options.

You May Also Want To Consider…

CareerBuilder Jobs – Power your own job board through CareerBuilder.
Job Listing – An open source plugin that lets you create a fully customisable job board on your website.

Membership
WordPress is the perfect platform for a membership website. The premium member plugins are better supported however free alternatives have a huge range of features too.

Members Only – FREE

In A Nutshell: Make your content viewable only by signed in members.

Pros

Can specify what page the member is redirected to when they log in.
Can protect RSS feeds for members too.

User Role Subscriptions – FREE

In A Nutshell: A user role subscription plugin that allows you to restrict content to paid subscribers.

Pros

Can modify the email template for new subscribers.
Automatically deletes expired subscribers.
Can accept payments via PayPal.

Cons

Quite limited. There are better alternatives available.

WP-Members – FREE

In A Nutshell: A membership system that restricts content to signed in users.

Pros

Can block pages, posts, both or neither by default.
Registration process can be changed to suit your needs.
Private member area can be determined.
Well documented.

Cons

No support for paid membership.

Members – FREE

In A Nutshell: A user role and content management plugin.

Pros

Capabilities of users can be modified.
You can control what user groups can see specific content.
RSS feeds can be restricted.

s2Member – FREE | s2Member Pro – $69

In A Nutshell: An feature rich membership plugin.

Pros

Includes 4 membership levels: Free, Bronze, Silver, Gold, and Platinum.
Works with multiple payment gateways.
Can setup one off or recurring payments.
Can restrict content and downloads to specified member levels.

Membership – FREE | Membership Premium – $39

In A Nutshell: Transforms WordPress into a fully functional membership site.

Pros

Can offer free memberships that turn into paid memberships after a set number of days.
Unlimited membership and subscription levels.
Can restrict access to members only in lots of different areas including posts, pages, comments, categories, galleries and more.
Well documented, well supported and updated regularly.

WP-Membership – $25

In A Nutshell: Sell your content with this premium membership plugin.

Pros

Can setup unlimited membership levels.
Payments can be made via PayPal and the dashboard shows sales for that month.

Cons

Limited number of member options compared to other paid membership plugins.

CMS Members – $59.50

In A Nutshell: A solid membership plugin that boasts some great features.

Pros

Create unlimited memberships.
Built in mass mailer.
Accepts PayPal and 2Checkout as payment from new members.
Content within a post or page can be restricted to different member groups.

MagicMembers – $97

In A Nutshell: A premium membership plugin that has a huge amount of features.

Pros

Works with a huge number of payment gateways.
Integrates with popular auto responders.
Premium content can be restricted on a ‘Pay Per Post’ basis.
Categories can be protected and RSS feeds can be restricted to paying members too.

Wishlist Member – $97

In A Nutshell: One of the most popular premium membership plugins available today.

Pros

Sequential content delivery for those who want to drip-feed content to members.
Flexible membership options including free, trial or paid. Members can also migrate to other membership levels after a set period of time.
Works with many shopping cart systems.
Integrates with many popular WordPress plugins.

You May Also Want To Consider…

DW Members Only – Redirects any unregistered members to the login page.
Membership Database – Manage a member database for your club or association.

Review Website
The surge to make money through review websites has died down a little however there are still some good premium plugins out there for those of you who are looking to launch a review website.

My Review Plugin – $90

In A Nutshell: A flexible rating plugin […]

Agile development is known for being cheaper, faster, and quicker to respond to changing market demands, as compared to the slower but steady, sequential process of the waterfall method. And while Agile may be more suitable for projects that are amenable to its speed and quick reaction time, traditional waterfall industries are starting to see the value of using this methodology.

Read full story...



Follow us on Twitter

Join free newsletter

View upcoming events

Find a new job

One of the biggest sources of buzz this past week has been Adobe’s announcement of the Edge preview. People have been talking about it a lot but few seem to really grasp some of the ideas or technology behind this.

Today, I’d like to talk to you a little about the Edge preview and why you should be cautiously optimistic at this juncture.

A Little History
Creating content using a standards based approach is hard. This is where Edge comes in.

Flash’s birth and history can make for a very, very confusing read: it’s incredibly loved or hated depending on who you speak to. The undeniable fact is that Flash is one of the main reasons behind the proliferation of video and interactive media on the web. On the flip side, it’s criticized for its closed nature and performance issues.

While the platform itself isn’t going anywhere in the near future, you can’t help but notice that Flash’s hold on the web has been loosening lately.

Chalk it up the rise of HTML5 and an increasing number of developers embracing open standards or a certain fruit flavored company leading a crusade against Flash, the bottomline is that the web has been looking for an open, standards based alternative to Flash for sometime now. One of the big reasons for the arrival and rise in popularity of HTML5 along with libraries like jQuery can be attributed to antagonism and apathy towards the Flash platform.

Creating content with the new technologies though has been far from smooth. This is where Edge comes in.

What is Edge?
Edge is Adobe’s attempt at being relevant in the post-Flash world.

Edge is touted as an animation tool ideal for designers who want to create web content replete with animations but based on the open standards that prop up the web. According to their site:

Adobe Edge is a new web motion and interaction design tool that allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS3.

Basically, Edge is your ticket to adding animated content without having to resort to external plugins like Flash or Silverlight.

Do We Really Need Another Tool?
In this case, oh, yes we do!

I certainly feel so. Before you look for your pitchforks, let me explain!

Flash developers have access to very mature and very sophisticated design tools. Want to create a simple animation? A few clicks here, some input there and you’re done! They really do enjoy the use of a complete environment when it comes to authoring their content.

What happens when you want to go the standards based way?

It’s not that easy, I can tell you that much. You have to poke around with code, learn a little JavaScript, get bored, learn to use a library like jQuery, get excited again and then find out that you still have to hand code every single animation.

While it’s ok for us dev types, it’s much more of a chore for the artsy designers. Standards based development really doesn’t have to be hard! I realize that enterprising developers have come up solutions for these but none have appeared from the bigwigs of big content.

Edge seeks to streamline this process by reusing common concepts of media creation such as timelines and stages to make the learning curve more gentler, easier and thus, more accessible.

Initial Impressions
The preview is a svelte 65MB download and installs quite quickly. Getting access to the download requires an Adobe account though. It’s free, sure, but adds an unnecessary step to the process. 1999 called, they want their frivolous signups back.

And oh, if you’re still lost as to where to download your copy, you can get it here.

The Interface

First impressions of the preview are quite positive. It looks clean, composed and uncluttered. If you’ve used GoLive in the past, or even Flash, the interface should look mostly familiar.

The stage or canvas acts as the first DIV and when you add elements to your canvas, they’re added hierarchically with the type of element being displayed on the side.

The timeline pane is one of the key portions of any animation suite and Edge doesn’t disappoint. The entire lower portion of the interface is dominated by the timeline pane.

You can view all the properties of the elements you’ve added so far to the canvas in the timeline. Creating an animation is as simple as adding a keyframe, supplying it with the info for the frame and Edge will fill in the rest — tweening works as expected, excellently.

Functionality of the Current Preview Version
This preview is obviously in alpha mode — the first preview’s main focus is on adding simple shapes and animations. That’s pretty much all there’s present in the interface as well.

Users can add text, images and simple shapes with relative ease — just point, click and drag. You can also customize assorted characteristics of the content including color, skewing, opacity, rotation and much more. Take a quick look at the image below to get an idea of what I’m talking about. If you’ve at all been introduced to animation software in the past, you should feel right at home.

You can also import premade assets, including images, into your current canvas.

Under the Hood
Since this isn’t really a tutorial on how to use Edge, I’m going to skip ahead and download a premade demo which you can get from here.

Let’s take a look at the directory structure of a sample Edge project:

No surprises here. Your animations are now created from your familiar trifecta of web technologies — HTML, CSS and JavaScript.

As opposed to popular opinion, Edge uses a mix of jQuery and CSS3 to animate the contents of its canvas. Yes, you heard that right – jQuery does a lot of the grunt work behind Edge.

Digging into the code with Firebug, you’ll notice that there are a lot of DIV elements being moved around with jQuery. For example, here is the actual code being injected in the example I linked above. Not entirely pretty.

Basically, any animation that CSS3 can do is left to it since all CSS3 effects are hardware accelerated, and thus will perform well. The rest is left for jQuery to handle.

Digging further into the code, you’ll see that all your element, their properties, tweening information and the rest are stored as a JSON file. I’m assuming the engine basically parses this information and constructs the DOM and attaches the handlers.

As a quick experiment, let’s look at what the browser sees:

Uh, oh. There’s literally nothing that makes semantic sense in there. Disable JavaScript and you’re left with a big blob of nothingness. Fans of graceful degradation, get your pitchforks.

Where the Heck is HTML5?
It’s being marketed as a HTML5 tool and well… this is not HTML5 powered. Yet.

I went in expecting to be dazzled by the splendor of canvas or SVG. After a look at the DOM, it’s quite apparent there isn’t even a tiny bit of either in there. Just to make sure, I did a quick search of the JavaScript files searching for the canvas related keyword, getContext . Needless to say, nothing turned up. The biggest blob of HTML5 here is the doctype. Sure, you can import SVG content but you can’t touch the markup so it’s a moo point.

It’s a little puzzling why Edge doesn’t use any of the modern technologies instead. If anything, it’s being marketed as a HTML5 tool and well… this is not HTML5 powered. Disingenuous marketing or signs of features to come? I’m leaning towards the latter whilst really, really hoping the former isn’t true.

Is this Approach the Best Option Moving Forward?
Nope.

From a development perspective, animating DIVs is the equivalent of using tables for layout — it works but at the cost of elegance and semantics. Canvas and SVG are precision engineered to do exactly what Edge does here and make more sense in the long run.

Even if canvas performance is piddling on the current mobile devices, there’s no way for the performance to go but up and it really shouldn’t hamper the adoption of new technology.

While one would ideally like to see cutting edge apps actually make use of similar cutting edge technologies, keep in mind that this is still a preview, an early alpha version.

In the words of one of the engineers behind Edge regarding DIV based animation:

We started with DIVs because we wanted to get something out there quickly that folks could play with. I say we ‘started’ there because Edge will be evolving rapidly — the product is by no means feature complete.

That’s a little encouraging! While I’m disappointed with their initial, see what sticks approach, it’s good to know that this is just how they’re kicking off things, not how they plan to do things ultimately.

Remember, this is Still a Preview
The thoughts above may come off as a little negative but that’s not my intention. I, and the rest of the community, have high hopes for this tool and thus very high expectations.

And Adobe on their part isn’t lazing around. They’re already working on the feedback provided by the community so far and have a road map in place for future versions.

With Adobe embracing open standards and focusing on producing creative tools instead of boxed-in application platforms, I can’t help but feel they’re on the path towards becoming as relevant to the progress of the web as they were in the past during the height of Flash.

Let us know how you feel about the Edge preview in the comments and thank you so much for reading!

No matter your social media marketing strategy, we’ve all questioned its validity and viability. What we’re doing seems to be working, but how can we be sure? There are so many variables to track and consider that sorting it all out can make your brain hurt. While we can’t offer you a tried-and-true equation, we can offer you a few insights inspired by Argyle’s recent Data Driven Social Marketing webinar.

Read full story...



Follow us on Twitter

Join free newsletter

View upcoming events

Find a new job

The traditional office space is in the midst of its most dramatic shift since it was rocked by the creation of the cubicle more than 40 years ago. Driven by new communication technologies, the globalization of supply chains and an increased emphasis on real estate cost reduction, we’ve seen a massive change in the way people work. The “New Office” is an airport lounge on a tablet, a midnight video call on the kitchen counter, a shared table at the office or a collaboration pod for ad hoc meetings. These new workspaces create fresh
challenges for IT departments and technological demands from today’s workforce – from new productivity tools to broader communication and collaboration solutions.

In the last 10 years, we’ve seen a significant reduction in the average office space per employee. In 1995, it was approximately 300 square feet; today it is 225 square feet or less. This workspace shrinkage is due to various work style trends, including companies leveraging hot desking, where an employee temporarily occupies a workspace outfitted to meet their needs, hotelling,reservation-based hot desking, and incentive programs for employees who work from home.

These space-focused work trends create new pain points for employees, ranging from a need for tools that increase privacy (such as headsets, individual phone booths, etc.) to self-sufficiency and collaboration solutions. As a result, the IT industry is now focused on implementing radically simple and easy-to-use solutions, requiring no IT support, so employees can focus on communicating and collaborating. I was particularly intrigued by Tim Campos’ decision at Facebook to use vending machines to dispense items like keyboards, headphones and power sources to employees – part of what he calls “frictionless IT.”

Piggybacking the evolving office space is the gradual increase of space allocated to team collaboration — currently, it’s close to 30 percent of the average office space. It used to be that meetings were relegated
to a few dedicated rooms and water cooler discussions literally happened around the water cooler. Today, the physical space is adapting to the way teams work – ad hoc, on a project basis, cross-functional, with team members scattered around the world. We’re witnessing a fragmentation of collaboration spaces. Now there
are larger amounts of smaller spaces for employees – rooms that typically hold about four people – equipped with video conferencing systems that are smaller, cheaper, self-installed and easy-to-use.

Driven by the need to replace more antiquated pieces of IT equipment and the availability/growth of unified communications (UC) solutions, we’re seeing a union of computing and communication tools at the desk and in new collaboration spaces. UC simplifies how employees work together, regardless of whether or
not they’re in the office. However, questions are rising around what device will become the catch-all communication and productivity solution: the PC, a tablet dock, a UC phone or perhaps a smartphone.

This is certainly just the tip of the iceberg when it comes to next-generation collaboration products and the evolution of the new office. Video conferencing addresses the need for structured meetings, but new tools will emerge to address the need for unstructured collaboration – from interactive connected smart boards to tablet whiteboard applications.

My guess: this is just the beginning. The personal space will continue to shrink and become increasingly mobile/virtual. We’ll likely see a day where the office becomes a series of collaboration spaces, designed to connect fragmented virtual teams. Until then, we’ll continue to witness the development of new
technologies and services designed to address the changing office. New players and industry stalwarts alike will start to develop products and solutions that make the new office a reality.

Eric Kintz is Vice President and General Manager of Logitech for Business, Logitech’s newly-created division focused on business productivity and unified communications solutions. Follow him on Twitter: @EricKintz.

Photo courtesy Flickr user Campaign Monitor

Related research and analysis from GigaOM Pro:Subscriber content. Sign up for a free trial.
The Future of Work Platforms: An OverviewMillennials in the enterprise, part 1: strategies for supporting the new digital workforceThe Future of Workplaces

If you have a twitter account, you oftentimes find yourself looking for a way to display your latest tweets on your website or blog. This is pretty much a solved problem. There are jQuery plugins, PHP classes and tutorials that show you how to do this.

However, what happens if you only want to display certain tweets, that you have explicitly marked to show? As minimalistic twitter’s feature set is, it does provide a solution to this problem – favorites.

In this tutorial, we will be writing a PHP class that will fetch, cache, and display your favorite tweets in a beautiful CSS3 interface.

HTML
You can see the markup of the page that we will be using as a foundation below. The #container div will hold the tweets (which we will be generating in the PHP section of the tutorial).

index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display your Favorite Tweets using PHP and jQuery | Tutorialzine Demo</title>

<!-- Our CSS stylesheet file -->
<link rel="stylesheet" href="assets/css/styles.css" />

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<div id="container">
<!-- The tweets will go here -->
</div>

<!-- JavaScript includes -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="assets/js/jquery.splitlines.js"></script>
<script src="assets/js/script.js"></script>

</body>
</html>
We will be using the splitLines plugin, which as its name suggest, will split the tweets into separate divs, one for each line of text. This is necessary as it is the only we can apply padding to the lines individually (as an illustration, view the demo with JS disabled). However, the demo will still keep most of its design without it.

As for the generation of the tweets, we will be creating a PHP class that will handle it for us. We will only need to call its generate method inside the #container div like this: $tweets->generate(5), which will show the 5 most recent liked tweets. This method will output an unordered list with tweets:

Tweet markup
<ul class="tweetFavList">
<li>
<p>The text of the tweet goes here</p>
<div class="info">
<a title="Go to Tutorialzine's twitter page" class="user"
href="http://twitter.com/Tutorialzine">Tutorialzine</a>

<span title="Retweet Count" class="retweet">19</span>

<a title="Shared 3 days ago" target="_blank" class="date"
href="http://twitter.com/Tutorialzine/status/98439169621241856">3 days ago</a>
</div>

<div class="divider"></div>

</li>

<!-- More tweets here .. -->

</ul>
The text of the tweet will be held in a paragraph, with additional information available in the .info div. Now lets write the PHP class.

Display Your Favorite Tweets with jQuery and PHP

PHP
We will name our class FavoriteTweetsList. It will take a twitter username as a parameter, and expose a number of useful methods for fetching tweets and generating HTML markup.

The class will fetch the favorite tweets json feed, located at http://api.twitter.com/1/favorites/USERNAME.json (see Tutorialzine’s feed as an example). Additionally, it will include caching, so that a request is made only once every three hours, which will speed things up.

FavoriteTweetsList.class.php
class FavoriteTweetsList{
private $username;
const cache = "cache_tweets.ser";

public function __construct($username){
$this->username = $username;
}

/* The get method returns an array of tweet objects */

public function get(){

$cache = self::cache;
$tweets = array();

if(file_exists($cache) && time() - filemtime($cache) < 3*60*60){

// Use the cache if it exists and is less than three hours old
$tweets = unserialize(file_get_contents($cache));
}
else{

// Otherwise rebuild it
$tweets = json_decode($this->fetch_feed());
file_put_contents($cache,serialize($tweets));
}

if(!$tweets){
$tweets = array();
}

return $tweets;
}

/* The generate method takes an array of tweets and build the markup */

public function generate($limit=10, $className = 'tweetFavList'){

echo "<ul class='$className'>";

// Limiting the number of shown tweets
$tweets = array_slice($this->get(),0,$limit);

foreach($tweets as $t){

$id = $t->id_str;
$text = self::formatTweet($t->text);
$time = self::relativeTime($t->created_at);
$username = $t->user->screen_name;
$retweets = $t->retweet_count;

?>

<li>
<p><?php echo $text ?></p>
<div class="info">
<a href="http://twitter.com/<?php echo $username ?>" class="user"
title="Go to <?php echo $username?>'s twitter page">
<?php echo $username ?></a>

<?php if($retweets > 0):?>
<span class="retweet" title="Retweet Count">
<?php echo $retweets ?></span>
<?php endif;?>

<a href="http://twitter.com/<?php echo $username,'/status/',$id?>"
class="date" target="_blank" title="Shared <?php echo $time?>">
<?php echo $time?></a>
</div>

<div class="divider"></div>

</li>

<?php
}

echo "</ul>";
}

/* Helper methods and static functions */

private function fetch_feed(){
return file_get_contents("http://api.twitter.com/1/favorites/{$this->username}.json");
}

private static function relativeTime($time){

$divisions = array(1,60,60,24,7,4.34,12);
$names = array('second','minute','hour','day','week','month','year');
$time = time() - strtotime($time);

$name = "";

if($time < 10){
return "just now";
}

for($i=0; $i<count($divisions); $i++){
if($time < $divisions[$i]) break;

$time = $time/$divisions[$i];
$name = $names[$i];
}

$time = round($time);

if($time != 1){
$name.= 's';
}

return "$time $name ago";
}

private static function formatTweet($str){

// Linkifying URLs, mentionds and topics. Notice that
// each resultant anchor type has a unique class name.

$str = preg_replace(
'/((ftp|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w\/_\.]*(\?\S+)?)?)?)/i',
'<a class="link" href="$1" target="_blank">$1</a>',
$str
);

$str = preg_replace(
'/(\s|^)@([\w\-]+)/',
'$1<a class="mention" href="http://twitter.com/#!/$2" target="_blank">@$2</a>',
$str
);

$str = preg_replace(
'/(\s|^)#([\w\-]+)/',
'$1<a class="hash" href="http://twitter.com/search?q=%23$2">#$2</a>',
$str
);

return $str;
}
}
Of the methods above, generate() is the one that you will most likely be working with directly. It takes the number of tweets to be displayed, and an optional class parameter, that overrides the default class attribute of the unordered list.

Now that we have the FavoriteTweetsList class in place, we simply need to instantiate an object, passing it a twitter username, like this:

index.php
require "includes/FavoriteTweetsList.class.php";

$tweets = new FavoriteTweetsList('Tutorialzine');
Calling the $tweets->generate() will show that user’s latest faved tweets.

jQuery
As we are using the splitLines jQuery plugin, we already have most of the work done for us. We simply have to loop through the paragraph elements holding the text of the tweets, and call the plugin.

script.js
$(function(){
var width = $('ul.tweetFavList p').outerWidth();

// Looping through the p elements
// and calling the splitLines plugin

$('ul.tweetFavList p').each(function(){
$(this).addClass('sliced').splitLines({width:width});
});
});
This will split the contents of the paragraph into lines, each held in an individual div, which we can style.

CSS
First lets style the unordered list and the paragraph elements.

styles.css – 1
ul.tweetFavList{
margin:0 auto;
width:600px;
list-style:none;
}

ul.tweetFavList p{
background-color: #363636;
color: #FFFFFF;
display: inline;
font-size: 28px;
line-height: 2.25;
padding: 10px;
}

/* Coloring the links differently */

ul.tweetFavList a.link { color:#aed080;}
ul.tweetFavList a.mention { color:#6fc6d9;}
ul.tweetFavList a.hash { color:#dd90e9;}
If you take a closer look at the formatTweet() static method in the PHP class, you will see that we are adding a class name for each type of hyperlink – a regular link, a mention or a hash, so we can style them differently.

When the page loads, jQuery adds sliced as a class to each paragraph. This class undoes some of the styling applied to the paragraphs by default as a fallback, so we can display the individual lines properly.

styles.css – 2
/* The sliced class is assigned by jQuery */

ul.tweetFavList p.sliced{
background:none;
display:block;
padding:0;
line-height:2;
}

/* Each div is a line generated by the splitLines plugin */

ul.tweetFavList li p div{
background-color: #363636;
box-shadow: 2px 2px 2px rgba(33, 33, 33, 0.5);
display: inline-block;
margin-bottom: 6px;
padding: 0 10px;
white-space: nowrap;
}
Next we will style the colorful information boxes that hold the author username, publish date and retweet count.

styles.css – 3
ul.tweetFavList .info{
overflow: hidden;
padding: 15px 0 5px;
}

/* The colorful info boxes */

ul.tweetFavList .user,
ul.tweetFavList .retweet,
ul.tweetFavList .date{
float:left;
padding:4px 8px;
color:#fff !important;
text-decoration:none;
font-size:11px;
box-shadow: 1px 1px 1px rgba(33, 33, 33, 0.3);
}

ul.tweetFavList .user{
background-color:#6fc6d9;
}

ul.tweetFavList .retweet{
background-color:#dd90e9;
cursor:default;
}

ul.tweetFavList .date{
background-color:#aed080;
}
And finally we will style the divider. This is a single div, but thanks to :before/:after pseudo elements, we add two more circles to the left and to the right of it.

styles.css – 4
/* Styling the dotted divider */

ul.tweetFavList .divider,
ul.tweetFavList .divider:before,
ul.tweetFavList .divider:after{
backg[…]

Richard Frankel is the co-founder and president of Rocket Fuel, a leading real-time ad targeting platform. You can follow him @rocketfuelinc.

By now, almost everyone has been targeted by online advertising. One minute you’re browsing for a pair of pants and then for days on end, everywhere you go on the web, you’re stalked by the same banner ad offering a discount on pants. Even if you’ve already purchased the pants, the ad continues to stalk you.

For marketers, ad “retargeting” — receiving ads based on previous actions or purchases — can be an effective method to reconnect with interested shoppers even after they leave a website, thus increasing brand recall and boosting conversions. Retargeting, when done right, is useful to consumers, offering them discounts or promoting items they’re likely to be interested in. But done poorly, retargeting can have a negative effect on your brand. Many people find it creepy to be “stalked” and will grow increasingly irritated by your ads.

Unfortunately, most customer retargeting today is done by blunt force. Targeting companies simply serve ads to consumers who might be interested based on demographics, click behavior and browsing history. They hit these same consumers with the same ads for days on end as they travel around the web.

But there is another way. It involves using data modeling and predictive analytics to do real-time precision targeting. With the newest ad targeting methods, you can reach highly-specific audiences such as “middle-income people in northeast Michigan in the immediate market for designer gravestones,” or “owners of English Bulldogs whose pets have arthritis and are looking for warm dog booties.”

In the case of the pants shopper, you could serve different ads to the shopper at each moment based on real-time data analysis. Using predictive analytics, you could find out what items they might be interested in next as a complement to that purchase, what colors and styles they like, or whether they prefer your brand. Instead of being followed by one ad for pants, the shopper might see an ad for belts that match his or her style and budget, or a 15% discount in return for filling out a review of the item he or she just purchased.

If you’ve decided you’d like to take your targeting practices from blunt force to fine-tuned finesse, here are several steps to get you started.

Segment Your Retargeting Audience

Good retargeting starts with finding receptive, in-market consumers interested in your offers and messages. Start by analyzing all the audience profile data you’ve developed over the years and group your audiences into segments. Conduct real-time tests on these audiences to identify which exact micro-segments are most interested in your products.

If this sounds just like targeting, it’s because the same elements apply. Don’t stop testing. Audiences change over time as consumers learn more about your products, make purchases, read reviews, and are influenced by other products and information in the outside world.

Optimize Campaigns in Real Time

It’s not enough to optimize your campaigns once a month, or even once a week. If a consumer sees your same ad several times in one week, the feeling of “stalking” can set in quickly. Instead, you should be optimizing your ads in real time.

To target and retarget ads, you’ll need to work with a targeting company that provides real-time optimization; most campaigns only do so once a month. Make sure to ask if they can deliver.

Continue to Refine Audiences

Make sure your targeting provider offers real-time predictive analytics so you can refine your audience segments on the fly and target and retarget them with specific campaigns and messages.

Make sure to measure the effectiveness of your audience segments against the metrics that matter to you. Perhaps the most important metric for your brand is increasing the shopping basket size or increasing shopping frequency among new customers.

Manage Ad Frequency

Use campaign analytics and real-time surveys to find out what consumers think of your brand at a given moment. This will help you gauge how your ads are resonating. The goal is to determine the frequency at which your ads are shown enough to boost brand recall and increase sales without annoying consumers.

Remember, the “right” ad frequency is an individual measurement based on your customers and the needs of your company. Real-time brand surveys will help you see both the positive and negative impact of your campaigns.

Go Multi-Channel

The best way to not “stalk” consumers is to reach them on different channels at different points in the browsing and purchase process. Integrate media buys across display, video, mobile, and social to reach customers wherever they are in the moment and make sure your retargeting company can serve ads onto all of these platforms.

Use deep data analytics to determine which ads work on your audience on specific channels or at specific times.

Smarten Up

Consumers can feel stalked even on a single website. If you buy inventory on a website hoping to avoid chasing someone around the web, your ad may still appear on that site every single time the person visits. The answer is to buy across a wide range of media via display, video, social, and mobile, then optimize.

Do your brand a favor and use sophisticated real-time predictive analytics to connect with consumers when they want, where they want, and how they want. One day we’ll look back at blunt-force targeted ads the same way we see other digital nuisances. Get a head start on the competition by making your retargeted ads smart, fresh and useful to consumers.

Image courtesy of Flickr, diegohp93

More About: ads, business, how to, MARKETING, targeting ads
For more Business & Marketing coverage:Follow Mashable Business & Marketing on TwitterBecome a Fan on FacebookSubscribe to the Business & Marketing channelDownload our free apps for Android, Mac, iPhone and iPad

There’s a lot of innovation going on in the browser wars these days, with huge strides in features and performance from all the top vendors. And there’s a new feature on the horizon that’s going to make web apps even more powerful and flexible: Web Intents, which will allow web apps to communicate with each other.

Today, Google has announced that it’s planning to integrate Web Intents into Chrome. The news comes on the heels of Mozilla’s announcement last month that it is also working on the project (Google’s post seems to indicate that the two projects used to be distinct, but that they’re now being unified under a single API).

So what exactly are Web Intents? The name and the purpose are both similar to the Intents system that’s present in Google’s Android platform. In short, Intents allow two separate applications to communicate with each other, without either of them having to actually know what the other one is. Instead, they offer and listen for generic hooks.

On Android this means that if you install a new image editing application, the default Gallery app doesn’t have to integrate any special APIs in order to send a photo to that editing app. Likewise in the case of a web app, this means that a new photo hosting site could easily integrate editing functionality from something like Aviary or Picnik, without either of those services needing to implement a special API unique to that photo hosting site.

Yes, it’s slightly confusing, but it’s a good thing, and it means web apps will be able to operate more like native applications.

Here’s a quote from Google’s blog post:

We are hard at work designing an analogous system for the web: Web Intents. This web platform API will provide the same benefits of Android Intents, but better suited for web applications. When designing the system, we have first and foremost been interested in creating a simple, easy-to-use API. With Web Intents, you will be able to connect your web app to a service with as little as two lines of code! Chrome will perform the heavy lifting for you. As with Android, Web Intents documents an initial set of intent actions (edit, view, share, etc.) that likely cover the majority of use cases on the web today; however, as the web grows and sites provide more functionality, new intent actions will be added by services that document these intents, some more popular than others. To foster development and use of intents, we plan to create a site to browse existing intents and add new intents.

There’s also an examples page live here.

Internet Marketing Optimization isn’t a simple process, users can’t simply pick and choose a smart tag line, throw it up on Google Adwords and other publisher platforms and hope for the best, instead it requires split testing of ads, clearly targeted website pages that draw in a users attention and the constant monitoring of old ads and the ads of competitors. If you plan to optimize your internet marketing there are a few simple steps you can take to get you started, where you go from there is solely based on how your site or product performs.

Split Testing Ads

If internet businesses could become successful by throwing up a single ad and immediately reaping the benefits we would all be millionaires, the truth is finding the right ads for your pages and product can be tricky. Users should begin their internet campaigns with the expectation that campaigns may lose money before gaining. Start by creating several ads with different wording, for example you might try “Samsung Nexus S Free With Activation” if you offer cell phones and then try “Free Smartphone From Samsung” or “Free Samsung Android Phone Activations.” During each campaign write down the number of people who visited your site based on the number of impressions you served through your publisher platform, then determine how many people accepted the offer. The first number (site visitors based on page impressions) is your CTR (Click-Through-Rate), while the number of  buyers are your conversion rate (CTR / buyers). After a day of testing during different times figure out which ad works the best. After you choose a winner split test it against yet another ad until you are satisfied that you have the best converting ad for your website. Through split testing you can determine which ads are working during different times and then optimize your ad display times by ad to gain the biggest audience for the lowest future cost.

Here’s a simple chart demonstrating split testing:

Website Page Optimization

You can split test for weeks and still fail at advertising, however you can avoid the risk of failure by optimizing your website’s pages for better conversion. Start your optimization by installing a heat map on your website. A heat map is a piece of software which shows the “hottest” places on your website in terms of visitor click through rates. For example, users may click the top right ad on your page more than anywhere else, by understanding where a users eyes are traveling and their fingers are clicking you can place your best converting pages and products in those section.

Here’s an example of a Google.com heatmap, the red areas are where users tend to click the most:

Not only should you understand where users are clicking, you should also optimize your marketing materials for users. Write your pages for people and not for search engines. Engage your readers with exciting information and make sure they understand the importance of your products or information.

Monitoring Results Against Competing Pages

Creating checks and balances for your internet marketing optimization plan is just as important as setting marketing plans into motion. Split testing may provide results in the short term however trends change, users move on and it’s up to you to ensure they return. Once you have optimized your web pages and set your ads to timed intervals it’s important to continually monitor the success of those campaigns. If a certain page or product stops converting you may want to check your pages keywords or exact product names against competitor pages, are they using different keywords? Perhaps they are highlighting parts of the product or story you missed? If you’re using Adwords, Yahoo Ads or other ad platforms you may also want to check if your competitors are using ads that appear more engaging or offer a different angle.

Internet Marketing Optimization is not an exact science, even the best split testers and optimization firms are constantly tweaking their campaigns and testing new marketing practices, however by monitoring your ads and product pages and monitoring your competitors you can determine new and exciting ways to pitch your products to potential customers.

 

There’s been a lot of buzz this week about PageLever (news, site), a service that allegedly makes Facebook Insights look like an analytics tool for beginners.  

Read full story...



Follow us on Twitter

Join free newsletter

View upcoming events

Find a new job

Two years ago I attended the Gilbane conference in San Francisco, and among my clearest memories of the event  is how most business folk treated the word "social" as if it had crawled up someone’s you know what, died, and then terrorized all of the enterprise as a zombie corpse. 

Read full story...



Follow us on Twitter

Join free newsletter

View upcoming events

Find a new job