Limiting The Visibility Of WordPress Posts Via Usernames


  

Controlling who is able to view a post is a simple task once the system is established. Limiting access to certain users has several applications, such as enabling a design studio to distribute artwork to its various clients, or enabling a small school to arrange for homework to be posted online using a cheap and easy solution.

lpvuau-splash1

The easiest method to get this system working is to make the recipients of the information “subscribers� (since they need not be able to post) and the distributors of information “authors� (since they should only be able to edit their own posts). This system eliminates several headaches for the webmaster by managing who has access to particular posts. The username would be used to identify who is allowed to view certain posts, since it is unique and, for the most part, constant.

The Basics

What Will You Need?

  • WordPress 3.1 or later
  • Members of various roles
  • The ability to modify your theme’s files
  • Basic knowledge of PHP and MySQL

What Is a Username?

In general, a username is a means by which to identify and verify a user. It is not the only way to identify a user, but remembering a username is easier for the person logging in than having to remember a random user ID. A username can be made unique to an individual, unlike a person’s name or email address (family members may share the same name, or even the same email address). This ease of use and uniqueness is why usernames are used on most websites that require people to sign up in order to access the website or certain of its features.

To WordPress, a username is means of identifying a user. Paired with a password, a username enables someone to access their profile and, depending on their permissions within WordPress, to access to the administrative pages of the website. A username can be used for many functions in the operation and management of a website, such as karma, prestige, user roles and expulsion.

A WordPress username is unique and impossible for the average user to change. Thus, the system is a potentially reliable means of identifying individuals. This reliability is important for a system in which a post must be visible to only a few people. The permissions of a post should not alter merely because someone has changed their name or email address.

Screenshot of a WordPress single user page
The user page in a WordPress installation. Note that “Usernames cannot be changed.�

Setting Up The Back End

In order for an author to be able to set permissions for visibility, a method of selecting users must be set up on the post editing page. We could accomplish this by one of several methods, one of the easiest and most efficient of which is to create a meta box (or widget) in the post editing page that allows the author to add custom information, as required by a theme or plugin. This information enables us to tell the theme which members should have viewing rights to particular posts.

A Basic Custom Meta Box

Justin Tadlock’s article “How to Create Custom Post Meta Boxes in WordPress� explains how to create meta boxes, and we’ll reuse that code here.

Let’s assume we’re dealing with a website for a music school named “Smashing Magazine’s Fancy Flautists.â€� We will use the name smashing_flautist_access in the code for the back end to distinguish it from other custom functions. Justin’s code is a great starting point for this project, but it needs a little customization for our purpose. Place the following code in your theme’s functions.php, and modify the various labels according to your project.

/* Fire our meta box setup function on the post editor screen. */
add_action( 'load-post.php', 'smashing_post_meta_boxes_setup' );
add_action( 'load-post-new.php', 'smashing_post_meta_boxes_setup' );

/* Meta box setup function. */
function smashing_post_meta_boxes_setup() {

	/* Add meta boxes on the 'add_meta_boxes' hook. */
	add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );

	/* Save post meta on the 'save_post' hook. */
	add_action( 'save_post', 'smashing_flautist_access_save_meta', 10, 2 );
}

/* Create one or more meta boxes to be displayed on the post editor screen. */
function smashing_add_post_meta_boxes() {

	add_meta_box(
		'smashing-flautist-access',			// Unique ID
		esc_html__( 'Post Viewing Permission', 'smashing_flautist' ),		// Title
		'smashing_flautist_access_meta_box',		// Callback function
		'post',					// Admin page (or post type)
		'normal',					// Context
		'default'					// Priority
	);
}

/* Display the post meta box. */
function smashing_flautist_access_meta_box( $object, $box ) { ?>

	<?php wp_nonce_field( basename( __FILE__ ), 'smashing_flautist_access_nonce' ); ?>

	<p>
		<label for="smashing-flautist-access"><?php _e( "Enter the username of the subscriber that you want to view this content.", 'smashing_flautist' ); ?></label>
		<br />
		<input class="widefat" type="text" name="smashing-flautist-access" id="smashing-flautist-access" value="<?php echo esc_attr( get_post_meta( $object->ID, 'smashing_flautist_access', true ) ); ?>" size="30" />
	</p>
<?php }

With Justin’s code, modified for this project, we should have a custom meta box that looks like this:

Screenshot of a basic meta box
A basic meta box positioned below the post editing box.

Adding Ease to the Selection

This box can be used as is, and the author would simply input the members who they want to allow to view a post. This would work well if each author had very few usernames to remember; but if the author has long list of usernames to choose from, then a list of members would have to be displayed, and there would have to be a system that allows the authors to choose members from the list. Add the following code to the area just below the original box, just after the closing paragraph tag, to display a list of users with their names, along with radio buttons to grant one of the users access to the current post.

<table class="smashing-flautist-access">
<tr align="left">
<th>Username</th>
<th>    </th>
<th>Visiblity</th>
<th>    </th>
<th>Name</th>
</tr>
<?php
global $post;
	$users = get_users('role=subscriber');
	foreach ($users as $user) {
			$user_info = get_userdata( $user->ID );
			if(get_post_meta( $object->ID, 'smashing_flautist_access', true ) == $user->user_login) $ifchecked = 'checked="checked" ';
			echo "<tr>";
			echo "<td>$user->user_login</td><td>    </td>";
			echo "<td align=\"center\"><input type=\"radio\" name=\"smashing-flautist-access\" id=\"smashing-flautist-access\" value=\"$user->user_login\" " . $ifchecked ."/></td><td>    </td>";
			echo "<td>$user_info->last_name, $user_info->first_name</td><td>    </td>";
			echo "</tr>";
			unset($ifchecked);

	} ?></table>

If everything goes well, you should end up with a box underneath the post editor that looks similar to the image below. The form containing the radio buttons gets a list of users that are listed as subscribers and makes the selection of the student with viewing permissions easy, all without the post’s author having to remember any usernames.

Screenshot of a meta box with user information
A meta box that contains a method to select the particular name and information of each user.

Saving the List

Now that we have generated a list that makes it easy for the authors to pick which members they want to be able to view particular posts, we have to create a system to add the list to WordPress’ MySQL database so that we can retrieve it later. We also need a way to tell WordPress to update this list of usernames in case the author decides later to add or remove someone from a particular post’s list of authorized viewers. The code provided by Justin does excellent work; place his code below in your theme’s functions.php, just after the function that sets up the custom meta box.

/* Save post meta on the 'save_post' hook. */
add_action( 'save_post', 'smashing_flautist_access_save_meta', 10, 2 );

/* Save the meta box's post metadata. */
function smashing_flautist_access_save_meta( $post_id, $post ) {

	/* Make all $wpdb references within this function refer to this variable */
	global $wpdb;

	/* Verify the nonce before proceeding. */
	if ( !isset( $_POST['smashing_flautist_access_nonce'] ) || !wp_verify_nonce( $_POST['smashing_flautist_access_nonce'], basename( __FILE__ ) ) )
		return $post_id;

	/* Get the post type object. */
	$post_type = get_post_type_object( $post->post_type );

	/* Check if the current user has permission to edit the post. */
	if ( !current_user_can( $post_type->cap->edit_post, $post_id ) )
		return $post_id;

	/* Get the posted data and sanitize it for use as an HTML class. */
	$new_meta_value = ( isset( $_POST['smashing-flautist-access'] ) ? sanitize_html_class( $_POST['smashing-flautist-access'] ) : '' );

	/* Get the meta key. */
	$meta_key = 'smashing_flautist_access';

	/* Get the meta value of the custom field key. */
	$meta_value = get_post_meta( $post_id, $meta_key, true );

	/* If a new meta value was added and there was no previous value, add it. */
	if ( $new_meta_value && '' == $meta_value )
		{
		add_post_meta( $post_id, $meta_key, $new_meta_value, true );
		$wpdb->query($wpdb->prepare("UPDATE $wpdb->posts SET post_status = 'private' WHERE ID = ".$post_id." AND post_type ='post'"));
		}
	/* If the new meta value does not match the old value, update it. */
	elseif ( $new_meta_value && $new_meta_value != $meta_value )
		{
		update_post_meta( $post_id, $meta_key, $new_meta_value );
		$wpdb->query($wpdb->prepare("UPDATE $wpdb->posts SET post_status = 'private' WHERE ID = ".$post_id." AND post_type ='post'"));
		}
	/* If there is no new meta value but an old value exists, delete it. */
	elseif ( '' == $new_meta_value && $meta_value )
		{
		delete_post_meta( $post_id, $meta_key, $meta_value );
		$wpdb->query($wpdb->prepare("UPDATE $wpdb->posts SET post_status = 'public' WHERE ID = ".$post_id." AND post_type ='post'"));
		}
}

The three MySQL queries are in place to prevent unauthorized users from viewing protected posts and to hide the posts from the RSS feeds. The first query runs only when new data populates the previously empty custom field, while the second query runs only when the data in the custom field has changed. The third query runs only if the custom field is emptied, and it sets the post’s visibility back to “Public.� All three are protected from SQL injection attacks by using $wpdb->prepare() to validate the data entered into the username form field.

If you don’t like that WordPress precedes the post’s title with the word “Private,â€� then add the following code to your theme’s functions.php file. This custom function is called when your theme would display a post’s title; it finds any instance of the words “Protectedâ€� or “Privateâ€� at the beginning of the title and removes them. In the core of WordPress’ programming, the function get_the_title() adds those words if a post’s visibility is restricted and the person viewing is not an administrator. What the following code does is send a message to the action that get_the_title() hooks into, telling it to remove the terms “Protected: â€� and “Private: â€� from the title. So, you can set a post’s title to begin with either term, and the title will not be altered; this code only affects WordPress’ ability to add to your title.

function smashing_title_trim($title) {
	$title = attribute_escape($title);
	$needles = array(__('Protected: '),__('Private: '));
	$title = str_replace($needles,'',$title);
	return $title;
}
add_filter('protected_title_format','smashing_title_trim');
add_filter('private_title_format','smashing_title_trim');

To allow users at the subscriber level to see private posts, you have to give them that capability. As it happens, some of the code we’ll be using later frees us from having to worry about users at the subscriber level seeing the posts of others.

$subRole = get_role( 'subscriber' );
$subRole->add_cap( 'read_private_posts' );

You can also grant users at the subscriber level permission to view private pages, in case you want a dedicated page of information that subscribers should know.

$subRole->add_cap( 'read_private_pages' );

Setting Up The Front End

Now that we have a way to add members to the list of people who can view a particular post, we have to modify our theme to use this data, and to actually control the visibility of each post based on this list. First, we need a way to get the username of the person who can view a post. Secondly, we would compare the username of the member with viewing permissions to the user who is currently logged in. Finally, we would make the theme display either the post in the loop or an error message (or perhaps nothing at all).

Place this code just after The Loop starts. It goes in single.php, category.php and index.php if you will be displaying posts on the home page.

<?php
/* Get the post's acceptable viewer. */
		$flautist_access = get_post_meta($post->ID, 'smashing_flautist_access', true );
/* Get the post's current viewer, if he or she is logged in. */
		if(is_user_logged_in()) {$current_flautist = $current_user->user_login;}
/* See if the acceptable viewer and the current viewer are the same */
		if($flautist_access == $current_flautist || current_user_can('author') || current_user_can('editor') || current_user_can('administrator'))
			{echo ''; ?>

Place this code just before the loop ends. Here is where you can show an error message telling the user that they may not view this post. Or you could leave this code as is to make it appear as though the current visitor is not missing anything.

<?php } else { echo ''; } ?>

This is what a hidden post looks like to the public or to a user who is not logged in. They would see what appears to be an error message and are redirected away from the post.

What the public sees when trying to view a protected post
If a person is not logged in and tries to view a restricted post, they would get an error message.

What an unauthorized user sees when trying to view a protected post
If a user is logged in but not allowed to view a restricted post, they would see either nothing or an error message specific to members.

What an authorized user sees when trying to view a protected post
If a member is logged in and authorized to view a protected post, then they would see the post itself.

Conclusion

Being able to control who can view individual posts is a useful feature with a wide variety of applications. Third-party software can natively do this, but WordPress is widely supported and documented, which means that any security holes that might allow unauthorized users to view restricted posts would be shut in a future update. Plus, it allows you to run an actual blog next to posts with limited visibility. This system could be used by administrators to distribute personalized content, by professionals to send files to clients, or by bloggers to restrict the visibility of certain posts to certain members.

Enabling an author to control who can view their posts can help them tailor the blog’s content to the needs or tastes of certain users. Ultimately, you will have to factor in the purpose and content of your website when deciding whether to use this method. It’s not for everyone, but it suit the needs of owners of small websites who want to deliver certain content to certain people.

Resources

(al)


© Chris Ellison for Smashing Magazine, 2012.


Useful CSS Snippets for Your Coding Arsenal


  

CSS is a beautiful language but it can also be frustrating at times. Certain CSS solutions don’t work on certain browsers (cough Internet Explorer cough) and much of your time can be spent debugging code.

Thankfully there are lots of great CSS snippets available online that fix common problems and design issues. In this article we have listed 30 CSS snippets that we think you will find very useful.

The Code

1. Chris Poteet’s CSS Browser Reset

Resetting your CSS style allows you to stop cross browser differences. Chris Proteet’s reset code doesn’t work in IE6 however this shouldn’t be a concern any more with use of the browser dropping below 1% in the USA.

/*

Reset Default Browser Styles
- Place first in the listing of external style sheets for cascading.
- Be sure to explicitly set margin/padding styles.
- Styles are not reset that have to do with display (block, inline) are not reset.

By: Chris Poteet & various influences

*/

* {
vertical-align: baseline;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: none;
padding: 0;
margin: 0;
}
body {
padding: 5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
margin: 20px 0;
}
li, dd, blockquote {
margin-left: 40px;
}
dt {
font-weight: bold;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

2. Eric Meyer’s CSS Reset

Eric Meyer’s CSS code resets is one of the most popular CSS snippets. It even found it’s way into the Blueprint CSS Framework.

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

3. How to Create Multiple Borders in CSS3

A cool technique using the box-shadow property that allows you to create multiple borders around an object.

box-shadow:
    0 0 0 2px #000,
    0 0 0 3px #999,
    0 0 0 9px #fa0,
    0 0 0 10px #666,
    0 0 0 16px #fd0,
    0 0 0 18px #000;

4. Tucked Corners

This CSS code will give you the cool ‘tucked corners’ effect that is used on the Gravatar home page.

div.tucked-corners {
	    background: #f6f6f6;
	    height: 380px;
	    margin: 50px auto;
	    padding: 10px;
	    position: relative;
	    width: 580px;
	    -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
	       -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
	            box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
	}
	span.tucked-corners {
	    background: #c4453c;
	    display: block;
	    height: 380px;
	    position: relative;
	    width: 580px;
	    -webkit-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
	       -moz-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
	            box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
	}

	/* Top Corner Effect */

	.top-corners:after,
	.top-corners:before {
	    background: #e6e6e6;
	    content: '';
	    height: 50px;
	    position: absolute;
	    top: -25px;
	    width: 100px;
	    z-index: 10;
	    -webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
	       -moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
	            box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
	}
	.top-corners:after {
	    left: -50px;
	    -webkit-transform: rotate(-45deg);
	       -moz-transform: rotate(-45deg);
	        -ms-transform: rotate(-45deg);
	         -o-transform: rotate(-45deg);
	            transform: rotate(-45deg);
	}
	.top-corners:before {
	    right: -50px;
	    -webkit-transform: rotate(45deg);
	       -moz-transform: rotate(45deg);
	        -ms-transform: rotate(45deg);
	         -o-transform: rotate(45deg);
	            transform: rotate(45deg);
	}

	/* Bottom Corner Effect */

	.bottom-corners:after,
	.bottom-corners:before {
	    background: #e6e6e6;
	    content: '';
	    height: 50px;
	    position: absolute;
	    bottom: -25px;
	    width: 100px;
	    -webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
	       -moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
	            box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
	}
	.bottom-corners:after {
	    left: -50px;
	    -webkit-transform: rotate(-135deg);
	       -moz-transform: rotate(-135deg);
	        -ms-transform: rotate(-135deg);
	         -o-transform: rotate(-135deg);
	            transform: rotate(-135deg);
	}
	.bottom-corners:before {
	    right: -50px;
	    -webkit-transform: rotate(135deg);
	       -moz-transform: rotate(135deg);
	        -ms-transform: rotate(135deg);
	         -o-transform: rotate(135deg);
	            transform: rotate(135deg);
	}

5. iPad-Specific CSS

Change the general layout of ipad screens and portrait and landscape modes.

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}

6. Style links depending on file format

A short CSS snippet that changes the styling of external links, email links and links to pdf documents.

	/* external links */
a[href^="http://"]{
    padding-right: 20px;
    background: url(external.gif) no-repeat center right;
}

/* emails */

a[href^="mailto:"]{
padding-right: 20px;

background: url(email.png) no-repeat center right;

}

/* pdfs */

a[href$=".pdf"]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;

7. Drop Caps

A great cross-browser snippet that lets you make the first letter of a paragraph stand out.

.firstcharacter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

This can also be achieved using CSS3 however it doesn’t work on IE9.

p:first-child:first-letter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

8. CSS Sticky Footer

Create a sticky footer for your page. The solution works on all major browsers including Google Chrome and IE8.

CSS

/*
Sticky Footer Solution
by Steve Hatcher 

http://stever.ca

http://www.cssstickyfooter.com

*/

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
	padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;
	clear:both;} 

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

/* IMPORTANT

You also need to include this conditional style in the  of your HTML file to feed this style to IE 6 and lower and 8 and higher.



*/

HTML


<div id="wrap">

	<div id="main">

	</div>

</div>


<div id="footer">

</div>

9. Image Replacement Technique

A handy way of replacing a text page element with an image. The snippet addresses a problem from another solution in which Firefox users noticed a dotted border that goes to the left of the screen.

a.replacement
{
  background: url(dotted-border.png) no-repeat;
  height: 44px;
  width: 316px;
  display: block;
  text-indent: -9999px;
  overflow: hidden;  /*Add this line to the image replacement method*/
}

10. Set body font-size to 62.5% for Easier em Conversion

If you want to have a more flexible layout, you should use em instead of pixels or points. By setting your font size at 62.5% you can easily set your font using em as the value will be a tenth of pixel value.

body {
  font-size: 62.5%; /* font-size 1em = 10px */
}
p {
  font-size: 1.2em; /* 1.2em = 12px */
}

11. Vertically Align Text

If you set the line-height of your paragraph as the same size as it’s parent division you can easily center the text vertically.

div { width:100px; height:100px; }
div p { line-height:100px; }

12. How to Create 3D Text With CSS3

Using the text-shadow property, this snippet will help you create 3D text using CSS only.

p.threeD
{
	text-shadow:
		-1px 1px 0 #ddd,
		-2px 2px 0 #c8c8c8,
		-3px 3px 0 #ccc,
		-4px 4px 0 #b8b8b8,
		-4px 4px 0 #bbb,
		0px 1px 1px rgba(0,0,0,.4),
		0px 2px 2px rgba(0,0,0,.3),
		-1px 3px 3px rgba(0,0,0,.2),
		-1px 5px 5px rgba(0,0,0,.1),
		-2px 8px 8px rgba(0,0,0,.1),
		-2px 13px 13px rgba(0,0,0,.1)
		;
}

13. Wrapping Long URLs and Text Content with CSS

This snippet will stop long lines of text extending over the content area by making sure the content wraps to fit the content width.

pre {
	white-space: pre;           /* CSS 2.0 */
	white-space: pre-wrap;      /* CSS 2.1 */
	white-space: pre-line;      /* CSS 3.0 */
	white-space: -pre-wrap;     /* Opera 4-6 */
	white-space: -o-pre-wrap;   /* Opera 7 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -hp-pre-wrap;  /* HP Printers */
	word-wrap: break-word;      /* IE 5+ */
	}

14. Fancy Ampersand

Make your ampersands stand out using this short snippet. Simply change the font-family to suit your preference.

.amp {
font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
font-style: italic;
font-weight: normal;
}

15. Pull Quotes for Improved Reading

Make your quotes stand out more by floating them to the right or left hand side of your content and wrapping content around it.

.pullquote {
width: 300px;
float: right;
margin: 5px;
font-family: Georgia, "Times New Roman", Times, serif;
font: italic bold #ff0000 ; }

16. Rounded Borders Around Images

With CSS3 you can easily place rounded borders around your images using this snippet.

img {
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}

17. Image Preloader

Load a small gif in the background of an image first so that it is showed before the main image loads.

img
{
    background: url(img/preloader.gif) no?repeat 50% 50%;
}

18. CSS3 Opacity

By using the opacity property, which lets you see through an element, you can create a layered textured background.

div.L1 { background:#036; opacity:0.2; height:20px; }
div.L2 { background:#036; opacity:0.4; height:20px; }
div.L3 { background:#036; opacity:0.6; height:20px; }
div.L4 { background:#036; opacity:0.8; height:20px; }
div.L5 { background:#036; opacity:1.0; height:20px; }

19. Highlight links that open in a new window

This snippet allows you to easily distinguish links that open in new browser/tab windows by styling them different from other links.

a[target="_blank"]:before,
a[target="new"]:before {
margin:0 5px 0 0;
padding:1px;
outline:1px solid #333;
color:#333;
background:#ff9;
font:12px "Zapf Dingbats";
content: "\279C";
 }

20. The New Bulletproof @Font-Face Syntax

A cross-browser CSS snippet that lets you define your font faces.

@font-face {
	font-family: 'MyFontFamily';
	src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
	     url('myfont-webfont.woff') format('woff'),
	     url('myfont-webfont.ttf')  format('truetype'),
	     url('myfont-webfont.svg#svgFontName') format('svg');
	}

21. Flip an Image

A CSS snippet that lets you flip an image. This is particularly useful if you want to flip icons such as arrows.

img {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}

22. Email Link With An Image

A quick way of automatically adding a mail image to all of your email links.

a[href^="mailto:"] {
     background: url(images/email.png) no-repeat right top;
     padding-right:10px;
}

23. Beautiful Blockquotes

A neat way of styling your blockquotes to add a bit more punch to them.

blockquote {
     background:#f9f9f9;
     border-left:10px solid #ccc;
     margin:1.5em 10px;
     padding:.5em 10px;
     quotes:"\201C""\201D""\2018""\2019";
}
blockquote:before {
     color:#ccc;
     content:open-quote;
     font-size:4em;
     line-height:.1em;
     margin-right:.25em;
     vertical-align:-.4em;
}
blockquote p {
     display:inline;
}

24. Browser CSS hacks

A large list of browser hacks to make sure your website looks consistent across all browsers.

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red } 

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

/* FF 3.5+ */
body:not(:-moz-handler-blocked) #cuarenta { color: red; }

/***** Attribute Hacks ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

/* IE8, IE9 */
#anotherone  {color: blue\0/;} /* must go at the END of all rules */

25. How To Change The Default Text Selection Color on your Blog

Change the color of highlighted text by adding this little CSS snippet to your stylesheet.

::selection {
   background: #ffb7b7; /* Safari */
        color: #ffffff;
   }
::-moz-selection {
   background: #ffb7b7; /* Firefox */
        color: #ffffff;
   }

26. Clearfix

Clear floated elements easily by creating a CSS clear class.

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.clearfix { display: inline-block; }

/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

27. Hide Logo Text With Text Indent

Make your logo is SEO friendly by using this snippet for your h1 tag. The snippet ensures that the logo text is not displayed on the page.

h1 {
        text-indent:-9999px;
        margin:0 auto;
        width:400px;
        height:100px;
        background:transparent url("images/logo.jpg") no-repeat scroll;
}

28. Reset all Text Colors and Background Colors

Reset all text and background colours. The snippet sets everything back to black text on a white background though you can change these colours accordingly.

* {
     color: black !important;
     background-color: white !important;
     background-image: none !important;
}

29. Multiple Background Images

Use multiple background images with this useful CSS3 snippet.

#multiple-images {
   background: url(image_1.png) top left no-repeat,
   url(image_2.png) bottom left no-repeat,
   url(image_3.png) bottom right no-repeat;
}

30. Linear Gradient

This CSS code will allow you to create a linear gradient in the background of an element. This works on all major browsers however some older browsers don’t display it properly (particularly older versions of IE).

background: -webkit-gradient(linear, left top, left bottom, from(#74b8d7), to(#437fbc));
background: -moz-linear-gradient(top,  #74b8d7,  #437fbc);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#74b8d7', endColorstr='#437fbc');

We hope that you enjoyed the post and found it as useful as we’d hoped. If you know of any other useful CSS snippets that you keep handy that we neglected, please share them with us in the comment area.

(rb)


The UX Research Plan That Stakeholders Love


  

UX practitioners, both consultants and in house, sometimes conduct research. Be it usability testing or user research with a generative goal, research requires planning. To make sure product managers, developers, marketers and executives (let’s call them stakeholders) act on UX research results, planning must be crystal clear, collaborative, fast and digestible. Long plans or no plans don’t work for people. You must be able to boil a UX research plan down to one page. If you can’t or won’t, then you won’t get buy-in for the research and its results.

This article addresses one key aspect of planning UX research: the one-page plan document. Before we get to that, we’ll briefly discuss the benefits of research planning and identify the audience of a research planning document.

Blueprint Heart
(Image: Patrick Hoesly)

A word about stakeholders. A stakeholder in the UX world is a code name for the people who UX practitioners work with. These are our clients, whether internal or external to our organization. These are people who need to believe in what we do, act on research results, and fund and sponsor future research. We all have a stake in product development. They have a stake in UX research.

The Benefits Of Research Planning

Very generally speaking, UX research can answer two types of questions:

  1. What’s useful?
    What do people need? Who is the target audience?
  2. What’s usable?
    Does the design work for people, and how it can be improved?

Dozens of research methodologies could be implemented to answer these and more specific questions, and it is up to designers, researchers and their teams to decide what works best for them and when is the right time to answer their questions.

Here are the benefits of planning UX research:

  • Get a better feel of stakeholders.
    A written plan helps you identify what works and doesn’t work for people, and what questions they are trying to answer.
  • Engage stakeholders.
    A study plan ensures they are properly involved with the study and its results. If there’s no written plan, then there’s a greater chance that stakeholders won’t feel engaged.
  • Writing things down helps you.
    When you put things in writing, they look very different than how you imagined them when they were just thoughts in your head. Always have a written study plan, even if you don’t share it with anyone else.

Now, let’s quickly identify the target audience for the research planning document.

Who Are You Planning For? Who Are The Stakeholders?

As with every product or service, the best offering comes from carefully identifying the target audience, their needs and their wants. Different UX research stakeholders are interested in different aspects of a research plan:

  • Product managers and software engineers are mostly interested in the study’s goal, research questions and schedule. In some cases, they are also interested in the criteria for participants. These stakeholders are usually interested in goals and questions because these determine the content of the study and its focus. They are interested in the schedule to make sure it enables them to make timely design, business and development decisions. Criteria for participants interest them when the product targets a very specific demographic and they want to make sure participants are representative of that demographic.
  • Managers and executives are probably interested in the study’s goal and the overall cost of the study, because they are likely sponsoring the study. Usually, their bandwidth does not allow them more than that.
  • You! The plan is mostly for you. As soon as you put your thoughts in writing, something happens, and you find holes in them. These holes help you improve the plan. A written plan also helps you focus and better prepare for the study. The fact of the matter is that if you can’t boil your plan down to a page, you probably don’t really understand it.

Now that we’ve discussed why a planning document is important and who it is for, let’s get to the nitty gritty of the document.

The Plan That Stakeholders Love: The One-Pager

The users of a research plan love brevity and appreciate succinct definitions of what will happen, why, when and with whom. Here are the sections that go in a one-page research plan:

  • Title
    The title should combine the thing you’re studying and the methodology; for example, “Monster.com field study� or “XYZ Phone data-entry usability test.� Sometimes mentioning the target audience of the study is also appropriate; for example, “Whitehouse.com news page interviews with senior citizens.�
  • Author and stakeholders
    State your full name, title and email address on one line. After you get the stakeholders’ buy-in for the plan, add their details as well — the research belongs to everyone now.
  • Date
    Update it whenever the plan is updated.
  • Background
    Describe what led to this study. Discuss the recent history of the project. Be brief, no more than five lines.
  • Goals
    Briefly state the high-level reason (or reasons) for conducting this study. Try to phrase it in one sentence. If that wouldn’t make sense, create a numbered list of very short goal statements. If you have more than three to four goals, you are either aiming too high (meaning you have too many goals) or repeating yourself.
  • Research questions
    These are the specifics, the core of your plan. Provide a numbered list of questions that you plan to answer during the study. It is extremely important that your stakeholders understand that you will not necessarily be asking the study participants these questions. As a rule of thumb, have no more than seven to ten questions, preferably around five. Later on, you will construct your study script to answer these questions. An effective way to think about research questions is to imagine that they are the headings in the study’s summary.
  • Methodology
    In an academic environment, this section has one primary goal: to provide as many details as other researchers need in order to repeat the exact same study. In practice, the goal of the methodology section is to briefly inform the stakeholders of what will happen, for how long and where.
  • Participants
    Provide a list of the primary characteristics of the people you will be recruiting to participate in the study. Have a good reason for each and every characteristic. If you have two participant groups, describe both groups’ characteristics in lists or in a table. Append a draft form that you’ll use to screen participants.
  • Schedule
    Inform stakeholders of at least three important dates: when recruiting starts, when the study will take place, and when they can expect results. Large research projects require more scheduling details. For example, if the study involves travel to another city or country, more dates might be required for on-site preparation and meetings or for analysis workshops.
  • Script placeholder
    When a full study script is ready, it will appear under this title. Until then, all you need is a heading with a “TBD� indication.

A Sample UX Research Plan

XYZ Phone Data-Entry Usability Test

By John Smith-Kline, Usability Researcher, jskline@example.com

Stakeholders: Wanda Verdi (PM), Sam Crouch (Lead Engineer)

Last updated: 13 January 2012

Background
Since January 2009, when the XYZ Phone was introduced to the world, particularly after its market release, journalists, bloggers, industry experts, other stakeholders and customers have privately and publicly expressed negative opinions about the XYZ Phone’s keyboard. These views suggest that the keyboard is hard to use and that it imposes a poor experience on customers. Some have claimed this as the main reason why the XYZ Phone will not succeed among business users. Over the years, several improvements have been made to data entry (such as using horizontal keyboards for most features), to no avail.

Goals
Identify the strengths and weaknesses of data entry on the XYZ Phone, and provide opportunities for improvement.

Research questions

  1. How do people enter data on the XYZ Phone?
  2. What is the learning curve of new XYZ Phone users when they enter data?
  3. What are the most common errors users make when entering data?

Methodology
A usability study will be held in our lab with 20 participants. Each participant session will last 60 minutes and will include a short briefing, an interview, a task performance with an XYZ Phone and a debriefing. Among the tasks: enter an email subject heading, compose a long email, check news updates on CNN’s website, create a calendar event and more.

Participants
These are the primary characteristics of the study’s participants:

  • Business user,
  • Age 22 to 55,
  • Never used an XYZ Phone,
  • Expressed interest in learning more about or purchasing an XYZ Phone,
  • Uses the Web at least 10 hours a week.

[Link to a draft screener]

Schedule

  • Recruiting: begins on November 12
  • Study day: November 22
  • Results delivery: December 2

Script
TBD

Recap

A short plan that you and your stakeholders prepare together is key to a successful start of a UX research project.

  • Boil down your collective knowledge, agreements and understanding of what will happen, why, with whom and when.
  • Set the right expectations among stakeholders.
  • Try to keep the plan to one page.
  • Secure buy-in for the UX research by making it a team effort.
  • The core of the plan is the list of questions you are trying to answer. Choose the right ones.

Happy planning!

(al) (fi) (il)


© Tomer Sharon for Smashing Magazine, 2012.


Creative Uses of Illustration in Web Design


  

Using illustration in web design has become quite trendy these days. People love to see beautifully designed illustration based websites because they stand out from the rest. Not only because of the beautiful illustrative art work and carefully crafted web designs but also because of the perfect balance struck between these two important components.

Today, we want to dig into some creative ways you can work beautiful illustrations into your web design projects. We hope that this compilation will inspire some new ideas. You can see in the examples where designers have captured a certain illustrative style and wonderfully integrated it into website design in various ways. These unique illustrative styles make a website more memorable. Enjoy!

The Showcase

Plavacek.net
Plavacek.net takes a unique and gorgeous approach with its design that certainly looks great and attention grabbing. The designer imaginatively presents the underwater and above water scenes in a single frame brilliantly.

Screenshot

Meomi
In this web design, although the mascot is not the only bit of illustration and character work present it does add a lot of personality. The overall illustrations and style of the site make it a less formal presentation.

Screenshot

The Last March
This is another illustration driven web design that demonstrates the different levels of playfulness and whimsy these types of illustrated elements can add beyond pure decoration.

Screenshot

Pampaneo
Pampaneo’s lively use of yellow and green with idiosyncratic characters creates a bold look with depth and balance.

Screenshot

The Pixel
This is another site with a very stylish design, but with a much busier layout. The blue-tone gives a very strong impression.

Screenshot

Pojeta
With this web design, the designer conveyed his own personal and unique style with a single illustration against a vast amount of whitespace. This makes the design look hugely impactful and very beautiful.

Screenshot

YODAA
This website successfully manages to be unique in its own way by highlighting the illustration with carefully positioned content; and since this is accomplished effectively, the result is quite spectacular.

Screenshot

Aussie BBQ Legends
What makes this website stand out is not only the stunning illustrative art work or the vigilantly crafted design; rather it is the beautiful balance between these two components like was mentioned in the opening.

Screenshot

Ufo.lt
This website demonstrates a beautiful submersion in illustration. You can see how creatively the designer makes use of their illo skills.

Screenshot

Pieoneers
The illustration presented in this website although it is very colorful and has some depth, it still maintains a bit of a simplistic feel. The muted tones used for the rest of the site really make the splash of color in the pie very pleasing to the eyes.

Screenshot

Html5 Lab
Html5 Lab has a bold site, using large 2D illustrations and some light embellishments coupled with a sharp color scheme of grey and red with little traces of white and black to pull the design together.

Screenshot

Pigeon and Pigeonette
The uncharacteristic layout and quirky, vibrant illustration make Pigeon and Pigeonette worthy of exploring.

Screenshot

Teamnomad
Teamnomad’s header reinforces its own theme simply and in an understated way, though it is still extremely apparent, creating a strong brand connection quickly. The rest of the page leaves enough room to breathe, so viewers aren’t overwhelmed.

Screenshot

Iwit
A large stream of character illustration is paired with an otherwise simple website design, creating a very attention-grabbing result. There truly isn’t much here that could use improving.

Screenshot

Rays-lab
Here the design uses a rich, vibrant illustration that provides a stunning foundation for the design to work off of.

Screenshot

Coopers kids
Coopers kids’ illustration doesn’t carry on all through the page, but it works wonderfully with the peaceful color scheme creating a look that is both simple and effective.

Screenshot

Ericsteuten
Although very eventful, with lots of movement to draw the eye, the design here is still balanced well. This balance seems so simply struck that it makes the whole process look easy.

Screenshot

Attack of the web
Attack of the web mostly confines the use of exceptional illustrative elements to the over-sized header of the single page site. This is a great example of a functionality driven site with a strong use of illustration.

Screenshot

Cubeclub-chemnitz
This web design has a strong letterpress print feel, with bold text and original icons. The repeated texture pattern is a nice touch.

Screenshot

Dedoce
In this design, the underwater scene possesses loads of grunge and texture which keep it from looking like just another vector built website.

Screenshot

Cool Brush Design
Cool Brush Design’s site throws restraint out the window yet still manages to pull off sophistication with ease. The majority of the illustration serves both ornamental and functional purposes.

Screenshot

Arbel Designs
The illustration work in Arbel Designs’ site is extremely attractive and attention grabbing, however the way the tabs adjust when they are clicked is somewhat distracting; but the overall design is still extraordinary.

Screenshot

Toris Eye
In this web design, illustrations are put to work to create an overall theme that looks visually alluring and appealing.

Screenshot

Racket
Here the thematic illustrations are used establish a very surreal tone or theme for the site, and they certainly grab the attention of the users.

Screenshot

Get my boss to North Cape
This web design whimsically repeats its fundamental mission statement through the illustration which comically recreates the site title whilst simultaneously establishing a theme.

Screenshot

Egopop
This is another site with an atypical layout in this collection. The illustrations in the design let you know about the individual this site represents as well as break the normal web mindset a visitor may have.

Screenshot

Duirwaign Studios
Duirwaign Studios makes use of illustration in a very beautiful and breathtaking manner. It also provides some life and movement to the design putting a memorable face to it.

Screenshot

Mellow Mushroom
In this case, the interactive illustrative elements provide much more than mere decoration, adding an edge which smartens the design in a way that only interactive illustration can.

Screenshot

The Great Bearded Reef.com
The Great Bearded Reef makes use of creative illustration to create this playful masterpiece. This is a distinctively fun, tongue-in-cheek design which fits and serves its purpose well.

Screenshot

Moshi Monsters
Here, the illustrations are relatively strange yet tempting owing to their inimitability and innovation. The big and bold typography definitely is the first thing that gets noticed, and compliments the rest of the design well.

Screenshot

The Alamo Basement
The background texture of this website provides it an extraordinarily captivating and personal feel. The visual explosion of characters and colors is great for getting the reader’s attention.

Screenshot

Florida Flourish
This is an enormously stunning illustration full of interactive elements which comes with an unmatched style that captivates the visitors.

Screenshot

Webbli World
This website illustration instills a sense of enjoyment and wonder that engages the visitors with its appealing design.

Screenshot

Old Loft
Old Loft brings into play an artistic and inventive illustration that makes this website both unforgettable and exceptional.

Screenshot

Visit Cascadia
The overall style of this website feels like an illustration, and still, it doesn’t have the characteristic humanistic elements.

Screenshot

Veerle
Here the illustration lends more backup support, with many brilliant background elements in play. Some of these are more corporeal than others, although in general they are more about visual support than anything else.

Screenshot

Tea Round App
This is an ideal example of illustrated design. The style is tremendously stunning, totally unique, and very appealing.

Screenshot

Pixel Baecker
The hand rendered design here showcases the designer’s talent. It demonstrates that they creates artwork with their hands that connects flawlessly to their animation skills.

Screenshot

Chernobyl heart
In this web design, the illustrated text is far more subtle than most. Rather than driving the whole direction of the design, it merely plays along nicely.

Screenshot

Instant Ad Legend
The somewhat singular style of this design delightfully incorporates the large illustrative elements which play several roles in the overall design.

Screenshot

(rb)


How To Deliver Exceptional Client Service


  

We often hear companies, including Web agencies, boast about how they provide exceptional client service. But how do they define exceptional?

Consider this scenario. You are hired to design and develop a new website for a retail client. The client loves the design, and the pages you develop use the latest in HTML5, CSS3 and responsive design, resulting in a website that works wonderfully across browsers and devices. The e-commerce features of the new website help the client significantly increase their online sales, and the entire project is delivered on time and on budget. Now, is this “exceptional� client service? I don’t think it is.

When the client hired you, they expected that you would design and develop a great website. They also expected it would be done according to the timeline and budget set during the planning stages of the project. As successful as this project may have been for both you and the client, in the end, you did exactly what you were hired to do. You did your job.

Just Doing Your Job Vs. Delivering Exceptional Service

Nothing is wrong with “just doing your job.â€� In many cases, that alone is a tall order. So, while doing what you were hired to do is nothing to be ashamed of, it is also not exceptional — nor will it set you apart. There will always be other agencies or designers that will be able to do the work as well as you can — and there will certainly be someone willing to do it cheaper! The service you provide is how you can truly differentiate yourself.

Exceptional client service is about going beyond what is realistically expected of you. It is about surprising, and often delighting, customers, turning them into enthusiastic referral sources and lifelong clients who stick with you not only because you do great work at a fair price, but because the value you bring to them goes far beyond just your products.

In this article, I’ll detail a few of the ways that I have tried to take my own client service to the next level and deliver a better experience, starting with the most important aspect: the relationships that you establish with the clients who hire you.

Superhero racing to help
There is a difference between doing what you were hired to do and delivering a superheroic level of service. (Image: JD Hancock)

Creating Real Relationships

Here’s a quick exercise. Write down your five most important clients (how you define “important� is up to you). Then, write down as many things you know about those clients that have nothing to do with their business or the work you have done for them. What are their hobbies or passions? How many kids do they have? How old are those kids, and what are their names? Where do they like to vacation? Things like that.

So, how long is your list? If you’re like most people I speak with, probably not very long at all. We learn everything we can about a client’s business, but we often fail to discover anything substantial about our clients as people. If we do not engage with our clients in a real, personal way, then we are just another vendor — and vendors are easily replaceable with better cheaper options. However, clients are much less likely to consider replacing people with whom they have real relationships.

So, how do you start learning more about your clients? Simple: ask them questions about themselves and their lives, not just about their business.

Asking Real Questions

When I give this advice to others, it is often met with some apprehension. Asking someone about their business goals is easy. Asking them about their life outside of the office is harder. We often avoid getting personal for fear of offending the person or saying the wrong thing; but by being overly cautious, we miss the chance to create a real relationship.

Whenever I get nervous about getting too personal with a client, I remind myself of a story. A few years ago, I had the privilege to work on the website for the Tori Lynn Andreozzi Foundation. This non-profit foundation was named after a young girl who, walking home from school one afternoon, was struck by a drunk driver. Tori survived but was forever changed. Today, she is in a minimally conscious state, unable to walk, speak or eat.

In one of my first meetings with this client, I sat down with the head of the foundation, Tori’s mother, Cathy. I began the conversation simply by asking her, “How is Tori doing today?�

Cathy smiled and answered that Tori was doing well. We had our meeting and discussed the website and the project. As we were wrapping up, Cathy thanked me for asking her about Tori. She explained that so many people avoid asking about her daughter, fearing the news would be bad or that Cathy would be upset by the question. The truth is that, even though Tori has bad days, Cathy always enjoys talking about her daughter and was very happy to be asked about her. By asking Cathy how her daughter was doing, I showed her that I cared about more than just the project.

Website for the Tori Lynn Andreozzi Foundation
The website for the Tori Lynn Andreozzi Foundation

Today, Cathy is one of my favorite people to speak with, and we begin every conversation by asking how each other’s children are doing. We have much more than a great client-vendor relationship, all because I asked a real question, honestly cared about the answer, and created a real, human connection in the process. Had I been too afraid to ask that question, I might never have been able to build the relationship that I have now.

Don’t be afraid to ask your clients real questions. If they don’t want to answer you, they won’t. But for those who do (and you will find that most, if not all, of your clients will be happy to have a real conversation that has nothing to do with business), you will be well on your way to building real relationships.

Participate In More Than Just Projects

Another way to build a relationship with a client that goes beyond the project is to participate in their events. If the client runs a non-profit organization, they might have fundraisers or similar events that offer you an opportunity to support their cause and nurture the relationship. Go to these events and participate. As a bonus, you will also be helping a worthwhile cause.

Not all of your clients will have fundraising events, but they might invite you to holiday parties and other gatherings. Take advantage of these opportunities to interact with your clients outside of a normal business setting. It will go a long way to reinforcing those real relationships that you are trying to create and show that you are more than just another vendor.

Similarly, consider inviting clients to some of your events to show that you view them as more than just a source of business. When they arrive, greet them warmly and enjoy their company, leaving business talk for another day.

Help Them With Services That You Do Not Provide

Clients may hire you to design and develop a Web presence for them, but in the course of the project you will often discover that they need other services that you do not provide. By listening to their needs, you might learn that they have issues with their payroll company or their accountants or some other aspect of their business.

Look to your own business and the vendors you use. There may be a service or company that you have had success with that you could recommend. Also look to your other clients to see whether they offer services that fit. If appropriate, set up a lunch meeting between you, the client with the need and the client that might be able to fill that need. Not only will you be taking two clients out for lunch, you will hopefully be helping them both by making a valuable connection between the two companies.

When a client can say, “I hired this company to design our website and they ended up helping us revamp our entire payroll system!â€� you position yourself as much more than just their “Web teamâ€� — you show that you are a valued business resource and a trusted advisor.

Pick Up The Phone

Good communication is key to any relationship. Still, judging from the number of clients I speak with who are unhappy with their current Web team — not because they do a poor job, but because they are unresponsive — quality communication is not always a given.

Regularly updating your clients by email is important, but also pick up the phone every now and then, so that you become more than just that distant person behind those electronic updates. By hearing your voice, clients will feel more connected to you and the project. It also shows them that you value them enough to take the time to make a personal call, and it gives you a chance to talk about something other than business.

Conversations bubbles in an office
Regular phone calls allow you to have real conversations with clients, communicating at a personal level that email and other electronic updates do not allow for. (Image: opensourceway)

Face The Bad Times Head On

Have you ever had to share bad news with a client, but rather than pick up the phone to discuss the issue, you waited and sent an email at 5:15 pm on a Friday? By doing this, you may have bought yourself a few more days before having to face the client’s worried questions, but you also damage the relationship by hiding behind an email. It also means that the client will read the bad news first thing on Monday morning; definitely not a good start to their week, and definitely not the way to treat a valued relationship.

Here’s a secret: clients do not expect you to be perfect. They do, however, expect you to be honest. When something goes wrong, let them know quickly so that they are not blindsided by the issue later on. And never deliver bad news by email. Picking up the phone to discuss the news lets you reassure the client and answer any questions they may have. An after-hours email certainly won’t do that for them.

If the matter is handled correctly, the client will not remember that something went wrong. They will remember that you were honest and kept them apprised of the state of the project, even when it did not go according to plan.

Be Thankful And Show Appreciation

When was the last time you thanked a client for working with you? How did you do it? Did you send a basket of cookies or chocolate with a generic “thank you� message, or did you do something more personal?

Too often, we fail to even thank our clients for their business. We are so keen to finish a project and move on to the next one that we forget to properly show our appreciation.

While a basket of sweets and a generic message is better than nothing, consider sending a personal, handwritten thank-you note.

Handwritten letters have become all but extinct these days. With the rise of electronic communication such as email, social networks and text messaging, so few people take the time and effort to actually write a letter. The gesture of a personal letter will delight and surprise your client, not only because you have thanked them, but because the way you did so was personal, memorable and the perfect cap to a successful project.

Handwritten thank you message
A thankful, personal handwritten card is a great way to cap off a successful project. (Image: irrezolut)

How About You? Do You Deliver Exceptional Client Service?

I hope this article starts a conversation. How do you deliver exceptional client service? What tips can you share so that others can delight their own clients and offer them value beyond just products?

In this industry, we are always eager to share the latest tips and tricks on CSS, HTML, JavaScript, PHP or some other Web technology. Let’s also start to share tips on how to deliver exceptional client service, because success in this industry is about much more than developing great websites — it’s about developing great relationships.

(al)


© Jeremy Girard for Smashing Magazine, 2012.


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress