Server administration is a rarely discussed topic here on Build Internet, but today’s tutorial is a quick and easy modification that may prove useful to some. At the very least, it will save you from a “How did they do this?!” Google search someday.

This post also comes with a preface. While this may be a neat trick, it’s not something that should be done without a good reason. This could very well be a case of decorating instead of designing. With that in mind, let’s learn something to impress your (tech savvy) friends.

A Custom Example in Naming

Take a minute to load the URL below in a new window. The page content is irrelevant. What’s important is that the page is a custom (.OMR) extension running the PHP MIME type. Bonus points for anyone who got the acronym.

http://buildinternet.com/live/custom-files/index.omr

What’s going on? I’ve edited our server’s configuration file to handle the new OMR type as a PHP file. I’ve also set up the OMR extension to take priority over all other file types when loading a default index page. This process is remarkably simple.

This tutorial is intended for servers running Apache configurations. Statistically, this will include most of you.

Reinventing the File Type

File extension names are little more than letter combinations. Their real meaning comes from generally accepted standards. A file with JPG extension is expected to be an image, and programs will default accordingly. These are the. But these definitions can be changed.

Think of it like a vanity license plate for files. Certain sites, like the financial management site Mint, use custom extensions (e.g. index.mint) as an added layer of security on their pages. By obscuring the coding languages and systems used, they are adding one extra step to getting through server security. The majority of us aren’t running bank-level operations though.

Online file formats are specified using something called MIME types. A file’s MIME type controls how it is to be handled by servers, clients, etc. Many types come predefined (e.g. JPG, HTML), but we’re also able to add in new ones. In the same way that both HTM and HTML represent the same MIME type, we can tell the server to treat a custom file extension like an existing definition. A file extension of XYZ could then become another name for PHP documents.

Declare a New File Type

The code for this is surprisingly short and sweet. Keep in mind that the # symbol represents a commented line, and is not actually part of the required code. This block can be copied directly into either of the two methods outlined in the next section, and does not require any special prefacing to work.

# Add extension OMR to PHP type definition
AddType application/x-httpd-php .omr
# Sets index.omr into default page stack
DirectoryIndex index.omr index.php index.htm index.html

Putting it in Action

You can put append this code to either of the files outlined below. I recommend setting up an isolated directory locally using MAMP/WAMP in order to keep from potentially damaging global settings. Keep in mind that the modified htaccess file will only affect the directory it is in, and makes damage control much simpler.

.htaccess

Create an .htaccess file in the root directory and append. The difference between htaccess and httpd.conf is how the file is accessed. The htaccess route is better for controlling specific directories or fixes to the Apache setup. The downside is that since the htaccess file is called for each page load, it can add extra load to the server.

To get a better understanding of how .htaccess files affects server directories, take a look at the excerpt from the Apache documentation:

The configuration directives found in a .htaccess file are applied to the directory in which the .htaccess file is found, and to all subdirectories thereof. However, it is important to also remember that there may have been .htaccess files in directories higher up. Directives are applied in the order that they are found.

httpd.conf

According to the official Apache documentation, best practice dictates that the majority of directives should be made through the configuration files, and not htaccess wherever possible. The definitions found in httpd.conf are loaded when the server starts instead of on individual access, which may offer a slight difference in resources required. Keep in mind that any edits made to the .conf file will not take affect until the server has been restarted.

The process for editing your server’s httpd.conf file will vary based on hosting provider. This blog is hosted on a dedicated virtual server on MediaTemple, where the recommendation is to edit vhost.conf file in place of the main httpd.conf file. Refer to your hosting provider’s support documents for more. If you are unable to edit this configuration directly, the htaccess file may be the next best alternative.

Use in Moderation

You now have the tools and directions needed to create new file extensions on an Apache server. I strongly recommend against making changes for the hell of it. While this may be a nice trick, the average website probably doesn’t need a creative mix of new filenames (e.g. Ars Technica and .ars files) to suddenly show up. Arbitrarily applying this to your site would cause a considerable amount of confusion among search engines, users, and server configuration. Conventions exist for a reason.

Have you seen custom file extensions used effectively? Are you a server genius with some considerations to add to the discussion? Please share in the comments below.

Further Reading

Interested in finding out more about what Apache and htaccess modifications can do for your site? I’ve included a few links below to continue the research.

1. Internet Media Types on Wikipedia
2. Tutorial on editing httpd.conf for MediaTemple
3. The htaccess Cheat Sheet

Related posts:

1. Scaling Servers with the Cloud: Amazon CloudFront This is the second of two articles focused on...
2. How to Set Up a Local PHP/MySQL Development Sandbox for Windows and OS X Editor’s Note: This is the first guest tutorial that...
3. Scaling Servers with the Cloud: Amazon S3 This is the first of two articles focused on...

Hello Spring. It’s been a long time.

Every couple weeks or so, we scavenge Flickr for some wonderfully inspiring photography to build color schemes from. The results can be used to start graphic and web projects of all sizes. As we’ve said before, inspiration comes in funny places sometimes.

Photos are all found via Flickr (follow image links for author info). Color schemes are available to download through COLOURlovers.

Springtime Inspired Palettes

We’ve compiled photos and palettes below that should help get your designs into the spring season. Design away!

Welcome Back Spring

Even though plants seem to be the typical Spring symbol, there are plenty of other ways to show the season. If you’re feeling particularly inspired, why not share a Spring color scheme of your own? That’s exactly what the Build Internet ColourLover group is for. Post your spring-related inspirations (or otherwise) and share with the rest of our color-minded readers.

If you’re looking to integrate any of the color palettes seen here into a layout, I recommend taking a look at our “Build Site Color Schemes from Photography” article for more help.

A Side-note: It’s been a long time since we’ve put up one of these posts. We’re hoping to get them back on (at most) a bi-weekly rate. They won’t be replacing other scheduled posts, just adding to the overall posting schedule. What do you think? Would you like to see us add/remove anything to our color scheme posts to make them more useful?

Related posts:

1. Color Scheme Inspiration – Fresh from the Bakery Have a sweet tooth? This round of color palettes...
2. Color Scheme Inspiration – USA National Landmarks Put away your tourism handbook, because today we’ll be...
3. Color Scheme Inspiration – Windows It’s a look into the outside world through a...

This will be an experiment in transparency. CSS has come a long way over the years, and one of the biggest advancements is the integrated use of transparency. A few years back, transparency in web design was a compatibility nightmare, and involved a messy combination of images and alignment.

We’re spoiled today with the introduction and adoption of the CSS3 spec and widespread PNG compatibility. Today’s tutorial will take advantage of this by exploring one of these newer attributes in action.

The Goal

By the end of this tutorial, you’ll have the means to build a page layout (like the demo) that can be updated by simply changing the background. Using varying levels of transparent white and black backgrounds, we can achieve a monochromatic layout based off the background’s color value. To put it another way, all color is relative to the background and can be changed by a single value.

I’ve attached a color switching panel into the version below for demonstration purposes. It is simply responsible for updating the body’s background attribute with each color. Go ahead and give it a try now.

A Brief Intro to Web Color

Before we get started, let’s refresh with a quick primer of color in CSS. In most cases, colors are designated using either hexadecimal value or RGB triplet within the CSS stylesheet.

In RGB, colors are specified using three distinct values between 0 and 255. These values represent the amount of red, green, and blue respectively. While both methods are usable, most modern web designers choose to use hexadecimal values instead. In this system, the values are given as a single six digit code.

Both of the styles below would end up with a color red:

/* Red with RGB */
.rgb-red{color: rgb(255, 0, 0);}

/* Red with hexadecimal */
.hex-red{color: #A90000;}

This has been the basis for color selection in web design for the past decade or so. But somewhere along the line, people realized that it might be good to include another option to web color. That’s where RGBa comes in.

Transparency with RGBa

RGBa is an expansion on the RGB attribute for CSS. Just like the RGB attribute, the first three values are used to specify color. The difference is an additional value. The fourth number in a RGBa set is used to specify the alpha (transparency) of the color. If we wanted to see the background image through a block of content, we could use an RGBa attribute to make the content’s background semi-transparent:

.content{background: rgba(255, 255, 255, .5);}

You’ll notice that the alpha value operates on a 0 to 1 scale, where 0 is completely invisible. Decimals are completely acceptable. The code above represents a white background with 50% transparency.

Varying a Base Color

Using a series of transparent blacks and whites, we’ll filter the background color into a variety of shades. The screenshot below demonstrates this concept in action. Keep in mind that this system allows an entire layout’s color to update with just one change. Now let’s put it in action.

A Basic Structure

To keep things simple, we’ll start with a simple layout of four boxes with varying shades of whites and blacks. Take note of the classes assigned to each div. The “box” class is the base style for each, while “dark”, “light”, etc all represent variations of the shades. You will get a better visualization once the CSS is applied in the next step.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Flexible Color Schemes with RGBa</title>

</head>

<body>

	<div class="box light">
		<p>This is a light box</p>
	</div>

	<div class="box lighter">
		<p>This is a lighter box</p>
	</div>

	<div class="box dark">
		<p>This is a dark box</p>
	</div>

	<div class="box darker">
		<p>This is a darker box</p>
	</div>

</body>
</html>

Now that we’ve identified all the elements, we’re ready to put everything together with a stylesheet.

Styling with CSS

One of the main roles that CSS plays in this system is to apply transparency to each element. You will notice that after the body’s background color is initially declared, no colors beyond black and white are referenced. Add the styles below to your page:

/* This is the basis for all page color */
		body{background:#DEF088;}

		p{font-family:helvetica, arial, sans-serif; font-size:13px; padding:20px;}

		/* Generic box shadow & formatting */
			.box{-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, .25); -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.25); margin:10px auto;}

		/* Values for white base */
			.light{background: rgba(255,255,255, .3); border:1px solid rgba(255,255,255,.45);}
			.lighter{background: rgba(255,255,255, .6); border:1px solid rgba(255,255,255,.45);}
				.light p{text-shadow:0px 1px 0px rgba(255,255,255, .5);}
				.lighter p{text-shadow:0px 1px 0px rgba(255,255,255, .7);}
				.light a, .lighter a{color: rgba(0, 0, 0, .9);}

		/* Values for black base */
			.dark{background: rgba(0, 0, 0, .3); border:1px solid rgba(0, 0, 0,.2);}
			.darker{background: rgba(0, 0, 0, .6); border:1px solid rgba(0, 0, 0,.2);}
				.dark p{color:#FAFAFA; text-shadow:0px 1px 0px rgba(255,255,255, .2);}
				.darker p{color:#FAFAFA; text-shadow:0px 1px 0px rgba(255,255,255, .5);}
				.dark a, .darker a{color: rgba(255,255,255, .9);}

On first glance, the stylesheet appears to be more complicated than it actually is. Many of the styles outlined in the code above are variations of the same core ideas. The “dark” class, for example, is only a few digits away from “darker”.

If you’ve done everything correctly, you should end up with something like this:

Using the concepts of this sample page, you can build entire page layouts like the demonstration available for download below. I highly recommend taking some time to go through the code there, as it is more applicable to the real world (and lengthier) than the cut and dry version here.

Wrapping Up & Moving Forward

You’ll notice that transparency can be applied to more than just solid background colors. In this tutorial’s example layout, I’ve applied varying levels of transparency to text, shadows, and borders. Since the background is the only source of color, any level of transparency will cause some of the background color to filter forward.

Is this a perfect way to put together colors? Of course not. The typical shadows and borders will not have as much impact when using darker shades (e.g. blacks) of colors. It does, however, demonstrate how using RGBa for elements can allow the design’s context to affect visuals. Think of it like blending layers in Photoshop.

Further Reading and Resources

For more on the topics covered in this post, be sure to check out the links listed below.

1. RGBa Browser Support
2. CSS3: RGBa Today

Related posts:

1. It’s a Rainbow! – Color Changing Text and Backgrounds w/ jQuery Here’s a quick and easy way to cycle between...
2. Build Site Color Schemes from Photography One of the reoccurring responses we received from our...
3. How to Center a Website With CSS Centering a website is a key part of many CSS...

Regular blog readers probably notice the wide range of social media “Share this” links found on most sites. With everyone from CNN to ESPN integrating ways of sharing content, one of the most popular techniques is using a URL shortener to neaten up and condense the link.

Today we’re going to explore this idea of sharing content a little bit more. Sharing links to content is just one piece of the social media equation. Capturing the response to it is quite another.

Let’s get started:

What We’re Building

Today’s tutorial will walk through the creation of a customizable “Tweet this” link that integrates the Bit.ly API and Twitter updates. The goal will be to have a selectable menu of prefaces, and then tweet the preface and link accordingly. Here are some examples of possible end results:

1. Reading: Article Name / Article Link
2. I absolutely loved: Article Name / Article Link
3. Made me think: Article Name / Article Link
4. Completely disagree: Article Name / Article Link
5. Article Name / Article Link

What’s the point?

This way a reader will be able to add some personality to the shared link, rather than sticking to a rigid “Currently Reading” preface like the one this blog is (currently) guilty of*. People respond to content differently, and this is a kind of system that helps them share it easily. If I found a post thought-provoking, I’d like to say so. On the flip side, you (as the site owner) will be able to see what kind of feedback people are giving about your content. Think of it like an indirect polling system.

I haven’t seen this kind of Twitter feedback system done anywhere else with blogs yet, but then again the internet is a big place. Now that we’ve all got our eyes on the same prize, let’s get introduced to the API’s we’ll be working with:

*For those wondering, yes, this will be part of the upcoming Build Internet theme update.

The Bit.ly API

The Bit.ly Developer Tools allow you to take a URL and return the new shortened link. It sounds simple because it is. This also means that working with the API is surprisingly pleasant, and will most likely leave you feeling quite smart afterward.

In order to shorten links with this API, you will need an API key. This key will allow all shortened links to be automatically associated with the key’s account. One is automatically generated for you after registering a new account. No cost necessary. You will find this information listed under the “Accounts” tab of the Bit.ly dashboard once logged in. I will not be using a valid API key for this tutorial, so be sure to substitute your own in accordingly.

Automatic Shortening

David Walsh wrote up a nice PHP option for shortening links last Spring. It’s not the only way to access the API (e.g. JavaScript), but this method keeps account information private because the key is only visible server-side. His tutorial will be the basis for our Bit.ly integration.

Create a new PHP file for the shortening script. Mine will be called “shorten.php” for this tutorial. You will need to put in your own Bit.ly API information where noted in the script.

<?php
	/*
		Based on code from David Walsh

http://davidwalsh.name/bitly-php

	*/

	//Assign URL of page to shorten.
	//Substitute with the_permalink() if using Wordpress.
	$full_url = "YOUR URL HERE";

	/* make a URL small */
	function make_bitly_url($url,$login,$appkey,$format = 'xml',$version = '2.0.1')
	{
		//create the URL
		$bitly = 'http://api.bit.ly/shorten?version='.$version.'&longUrl='.urlencode($url).'&login='.$login.'&apiKey='.$appkey.'&format='.$format;

		//get the url
		//could also use cURL here
		$response = file_get_contents($bitly);

		//parse depending on desired format
		if(strtolower($format) == 'json')
		{
			$json = @json_decode($response,true);
			return $json['results'][$url]['shortUrl'];
		}
		else //xml
		{
			$xml = simplexml_load_string($response);
			return 'http://bit.ly/'.$xml->results->nodeKeyVal->hash;
		}
	}

	/* usage (replace with your account information) */
	$short = make_bitly_url($full_url,'ENTER BITLY LOGIN','ENTER BITLY API KEY','json');

	//Our short url is now stored in $short
?>

I’ve copied a slightly modified code below for simplicity sake, but please refer back to his article for any further explanations or credit. The only difference is that the original echo statement is removed upon successful shortening. After running this script, we end up with a shortened version of the original URL stored in the $short variable.

The Page Setup

Create a new PHP file and paste in the code below. Notice that we are loading in the shorten.php script created in the last step at the top of the page. This area is also responsible for specifying the page title.

<?php
	//Calls Bit.ly shortener on current URL, returns $short variable with results
	REQUIRE_ONCE 'shorten.php';

	//Assign title of page. Substitute with the_title() if using Wordpress.
	$current_title = "Sample Page Title";
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

	<title>Share Feedback with Twitter and the Bit.ly API </title>

	<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>

	<script type="text/javascript">
		//jQuery code will go here
	</script>

</head>
<body>

	<h1>Share on Twitter</h1>
	<p>Select a response and post to your Twitter feed.</p>

	<p>I <select id="feedback">
		<option value="Liked">liked</option>
		<option value="Interesting">was interested by</option>
		<option value="Inspired by">was inspired by</option>
		<option value="Absolutely loved">absolutely loved</option>
		<option value="Didn't like">didn't like</option>
		<option value="Completely disagree">completely disagreed with</option>
	</select> this post.</p>

	<p id="tweetit"><a href="http://twitter.com/home?status=Liked" target="_blank" title="Share link and feedback on Twitter">Tweet It</a><p>

</body>
</html>

Composing the Tweet with jQuery

jQuery will be responsible for taking all of the pieces and putting them into a functional link. Passing the $short variable from PHP to jQuery is surprisingly simple thanks to a well-placed echo statement. The code below should be added into the script tag created in the previous step.

<script type="text/javascript">

	$(document).ready(function(){

		//Assign initial values
		var short_url = "<?php echo $short;?>";
		var post_title = "<?php echo $current_title;?>";
		var user_feedback;
		var tweet;

		function getFeedback(){
			//Assign selected item to feedback
			user_feedback = $("#feedback").val();
		}

		function composeTweet(){
			//Compose the tweet
			tweet = user_feedback + ': ' + post_title + ' ' + short_url;

			//Update destination before sending tweet
			$('#tweetit a').attr("href", "http://twitter.com/home?status=" + tweet);
		}

		$("#tweetit a").click(function(){
			composeTweet();
		});

		//Update feedback when option is changed
		$("#feedback").change(getFeedback);

		//Get the initial feedback value from dropdown menu
		getFeedback();

		//Compose a default tweet
		composeTweet();

	});

</script>

There’s a few main things to be aware of in the script above. The variables for short_url and post_title are assigned based on the contents of the PHP counterparts. The user_feedback variable will contain the “feedback” value (e.g. Love it) and the tweet variable contains the compiled result for Twitter.

There are two functions in charge of everything. The getFeedback function is responsible for updating the feedback value when the page initially loads and when the select box is changed. The composeTweet function combines the contents of all variables into a single tweet. Once the tweet is composed, the relevant “Tweet This” link (in next section) gets updated accordingly.

Simple Posting with Twitter

This is the easy part. Using a constructed URL, we’ll open Twitter in new window with the status box automatically filled. The user will need to submit the tweet template from Twitter before it is posted. Since we’ve already written the jQuery code responsible for setting the URL, the only thing left to do is create the target “Tweet This” link.

Make sure this link is in your final page result:

<p id="tweetit"><a href="http://twitter.com/home?status=Liked" target="_blank" title="Share link and feedback on Twitter">Tweet It</a><p>

Keep in mind that once the page is loaded, the jQuery script will overwrite the default link destination with the compiled tweet. I’ve set the target page to open in a new window for simplicity sake.

What about the API?

If you haven’t already been introduced to it, the Twitter API is wonderful. We won’t be using it for this tutorial, but I highly recommend spending a spare hour or two exploring options when you get the chance.

The API can do more than just fill in the status box, but requires a few extra steps. If you are interested in creating automatic tweets, you will need to have the user authenticate your site to their Twitter account. This would give you the ability to post to user’s accounts without having to open a new window for Twitter. If your site relies heavily on social media sharing, this might be the best option to explore. Depending on the response to this tutorial, an introduction to the API will probably find its way into an upcoming post.

Going Further

Depending on how long your post titles are, it might be a good idea to include a hashtag to identify your site. Implementing this would be as simple as adding another variable to the link construction in jQuery. If you got lost at any step of the way, I recommend downloading the project source files below to see the results in action. Remember that you will need to insert your Bit.ly account information before running the page successfully.

Wordpress Integration

There’s also a fair amount of blog integration that can happen with Wordpress template tags. I’ve commented in a few places where it might make sense to insert Wordpress defaults. With a little luck and planning, you’ll be able to automate a similar system into your next theme update.

Have I missed anything? Thought of any cool applications for a feedback system like this? Be sure to share any comments or questions below.

Related posts:

1. Quick Tip – Blur Links With jQuery This quick tip covers a quick usability upgrade for links...
2. How to Change the Default Gravatar in Wordpress As much as I love seeing the mystery man appear...
3. Quick Tip – Reading & Editing HTML Attributes in jQuery jQuery Attributes allow for some interesting editing to happen...

If there’s one thing that never seems to go out of style, it’s a good jQuery slideshow.

Highly visual websites rely on the ability to showcase imagery automatically. Whether it be a professional photographer or zoo, slideshows pop up so frequently because they work well.

In today’s tutorial we’ll take the makings of a classic slideshow, but use a different kind of transition to animate between slides. It may not fit every project, but diversity is always welcome in the world of web design.

The Goal

Be the end of this tutorial, we’ll have a slideshow that transitions by changing the visible window. You will need to download two plugins for this tutorial: one for easing animations and one for timing slide changes. I’ve also packaged both in the tutorial source file below.

Structuring the Slideshow

Step one is setting up the HTML structure for the slideshow.

As you may notice, we’re loading a few external JavaScript files into this page. After loading in the latest version of jQuery, we bring in the two plugins mentioned above. I’ve put both into a subfolder to keep things organized. The last JavaScript file loaded is “image-rotator.js”, and is where all of our custom jQuery code will go in a few steps.

Keeping with convention, we’ll contain the slideshow inside of an unordered list. This type of slideshow will require a helper “window” div in order to work correctly. Since we’re essentially looking at a specific corner of a larger image (simulated by the list) we will need to mask the areas outside of focus. This may sound a little complicated, but the image below should help you visualize:

Let’s get started by creating a new HTML file with the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Panning Slideshow | Build Internet Tutorial</title>

	<link rel="stylesheet" href="panning-slideshow.css"/>

	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script src="js/jquery.easing.1.3.js"></script>
	<script src="js/jquery.timer.js"></script>
	<script src="image-rotator.js"></script>

</head>

<body>

	<div id="window">
		<ul id="slideshow">
			<li class="box1"><img src="images/tiger.jpg" alt="Tiger"/></li>
			<li class="box2"><img src="images/macaw.jpg" alt="Macaw"/></li>
			<li class="box3"><img src="images/bald-eagle.jpg" alt="Bald Eagle"/></li>
			<li class="box4"><img src="images/panda.jpg" alt="Panda"/></li>
		</ul>
	</div>

</body>
</html>

Style and Arrangement with CSS

The biggest change from typical slideshows is that the “#window” div is used to block out the full list images via overflow:hidden. Keep in mind that the grid of slideshow images is actually 1920px wide and 700px high. Since we’re only showing one slide at a time, the #window div cuts the visible area to 960px width and 350px height.

Copy the code below into your CSS file.

*{margin:0; padding:0;}

body{background:#353637; height:100%;}

#window{clear:both; width:960px; height:350px; background:#131310; overflow:hidden; position:relative; margin:10px auto 10px auto;}

#slideshow{width:1920px; height:700px; overflow:hidden; position:relative;}
	#slideshow li{width:960px; height:350px; float:left; display:inline;}

As with any CSS file, there is always opportunity to condense and streamline the styles involved. If you end up making a more efficient version of this, please share it with the rest of us!

Animating with jQuery

The primary role of jQuery in this slideshow is to adjust the coordinates of the list item image being shown. Our roadmap is below:

With this in mind, let’s turn these motions into jQuery animations. Copy the code below into your project’s JavaScript file, and then meet us below for the script explanation.

$(document).ready(function(){

	//This keeps track of the slideshow's current location
	var current_panel = 1;
	//Controlling the duration of animation by variable will simplify changes
	var animation_duration = 2500;

	$.timer(6000, function (timer) {
		//Determine the current location, and transition to next panel
		switch(current_panel){
			case 1:
				$("#slideshow").stop().animate({left: "-960px", top: "0px"}, {easing: 'easeOutBack', duration: animation_duration});
				current_panel = 2;
			break;
			case 2:
				$("#slideshow").stop().animate({left: "0px", top: "-350px"}, {easing: 'easeOutBack', duration: animation_duration});
				current_panel = 3;
			break;
			case 3:
				$("#slideshow").stop().animate({left: "-960px", top: "-350px"}, {easing: 'easeOutBack', duration: animation_duration});
				current_panel = 4;
			break;
			case 4:
				$("#slideshow").stop().animate({left: "0px", top: "0px"}, {easing: 'easeOutBack', duration: animation_duration});
				current_panel = 1;
			break;
	  		timer.reset(12000);
		}
	});

});

This code starts out by declaring two variables. The first is current_panel, and will be used to keep track of the slideshow’s current location. The second is animation_duration and is used to affect all transitions in one place, rather than having to change times in four different locations. Where possible, it’s typically a good idea to condense attributes like this into variables for easy editing.

The timer function is based on our second plugin. Every 6000 milliseconds, the function encapsulated is fired. This function determines the current panel, and then animates the transition to the next sequential panel. Panel 4 automatically resets back to the start. Once the transition has been made, the current_panel variable is updated, and the timer is reset. Not bad!

What About Easing?

You may have noticed the easing attribute within the animate function. The easing plugin gives the transition a smooth elastic feel instead of a typical rigid motion. I’ve selected “easeOutBack” for the demo, but feel free to experiment with other easing options for your version.

Other Possibilities

Using this method, you could also setup one large slide instead of four individual ones. This would allow you to scan the contents of an oversized image in distinct zones, like a map.

Updating Delay

I started working on this slideshow before the delay function was added to the latest version of jQuery. While I haven’t explored it much yet, it seems like the timer plugin used here might be able to get replaced by it. If anyone chooses to explore this route, be sure to let us know what you come up with!

Have we missed anything/made any errors? Are there any steps that need further explanation? Let us know in the comments and we’ll try to sort it out!

The pictures of zoo animals used in this tutorial were all found via Flickr. Individual photo credits: Bald Eagle / Tiger / Panda / Macaw

Related posts:

1. Animate Curtains Opening with jQuery Step 1 – What You’ll Need This tutorial would...
2. Animate Image Filling Up Using jQuery The Photoshop Portion – Preparing Your Image(s) Step one...
3. Crafting an Animated Postcard With jQuery Nicely illustrated banners are…nice. But why not add a...

This post has a little background to its inspiration.

At the start of Summer 2009, we started Officeal as a way to showcase the offices of companies that “get” creative culture. The numbers are slowly increasing, but it’s ended up serving a more important role. We’ve seen the kinds of things that make companies more than just a place to work. These are the types of companies that create lifestyles you want to be a part of.

As some of you may know already, Sam and I also run a web and creative company called One Mighty Roar. (Build Internet was originally developed as a side-project after a few years of small-to-mid range client jobs as a way to contribute back to the web design community.) Since then we’ve expanded in both client base and number of people involved. Put simply, we’ve seen a lot of growth this past year from the business side of things.

Somewhere along the line of these internet crusades, we started to look at what all of this meant to us. After a while, we realized that we kept revisiting the same big ideas:

The Big Question

What makes an awesome company on the inside? My answers will probably not be the same as yours. With that in mind, I’d like to share the philosophy One Mighty Roar has developed over the past couple years. If by the end you’d like to share your own insight, please feel free to treat us to your ideas in the comment below.

Our answers so far…

You’ll find One Mighty Roar’s philosophy-in-progress below, broken down into the big ideas:

Always Have a Lead that Excites You

Do you have something to look forward to? We like to always have a reach goal or project that excites the hell out of us. A reach lead keeps us excited with a constant chance of landing something extraordinary. Even when we work on smaller projects, we know that something bigger could be on the horizon. This could be a big brand website, a long term project with a steady budget, or just something with fascinating possibilities to grow.

Is this easier said than done? Absolutely. But it’s also motivation get moving and network with the right kind of people.

Nobody is an Island

The Internet is build upon the ability to create communities and extend social connections. How the hell could a company based in web be any different? If you’re a web design company in our area, we’d love to meet up for lunch. You have a side-project you’d like to talk about? Awesome. We’re not in the business of cutthroat competition. Collaboration breeds creativity, and we’re all for networking to do so.

Professionals do not have to be good at everything. Learning from the work of others gives an opportunity to fill gaps your own company may have.

Know Who Does It Well

Building off the last point, we have a lot of role models in the web industry to whom we look to for motivation. We’ve met several, but most have no idea we exist. For years we’ve watched as some of our favorite companies have landed larger clients, launched huge projects, and gone through general growth.

Good Ideas are Universal

When it comes to the startup culture, industry is not a limit for inspiration. I will never sell shoes online, but Zappos never ceases to amaze me with their take on customer service. David Heinemeier Hansson of 37Signals has redefined how I look at simplicity and metrics for success. Collis Ta’aed is the type of accessible and transparent entrepreneur that we can model communities after. Even though a company has a different focus, there’s almost always at least one thing to learn from it.

Congratulate Brilliance

Let’s rephrase this slightly. Congratulate the brilliance of other people. I’ve started to turned my “Why didn’t I think of that?!” frustration into motivation to build something just as great. If you frequent the design communities online, it’s easy to forget that good design is not as common as it appears. With millions of websites out there, a truly well-designed website is statistically worth recognition.

The Compliment Challenge

Here’s a challenge that you can start today: The next time you find someone’s blog, design, or idea that impresses you — let them know! You’d be surprised how many networking opportunities can be found in a simple “Nice work!” email. Genuine compliments rarely get old.

Entrepreneurship is a Constant

When an idea succeeds, the entrepreneur that brought it to life shouldn’t magically go through a change. We believe the best CEO’s are the ones who never lost touch with the excitement of pushing through a new idea. Entrepreneur is not an entry level title for the yet unsuccessful — it’s a full-on personality type.

We gravitate towards people who have ideas in the making. Collaborating with big ideas only inspires bigger ones. The self-described entrepreneurs are the ones who will get fresh ideas realized, rather than maintain those that already exists.

Choose Clients that Motivate You

By this point, many people (myself included), have made Clients from Hell a daily read. While we laugh at the stories, the reality is that there are plenty of clients out there that rub companies the wrong way. They make us irritable, and turn an otherwise cheerful culture into a pile of stress and “get it over with!”

While there’s no foolproof way of avoiding these kinds of clients all the time, it still helps to know who will bring out the best in your company. As business grows, and you have the luxury of turning down jobs, aim for the right attitude. We think that in many cases an awesome client is worth more than a high budget headache.

Closing Thoughts

This is our manifesto so far. It will probably not be the same a month from now, but that’s perfectly fine. We learn as we go, and that’s part of what makes us excited to land the next project. Business is sometimes serious… business. These are principles we strive for. Does this mean we’re able to practice them without compromise from time to time? Of course not. They’re called ideals for a reason, after all. If T-ball taught us anything in school, it’s that the ongoing effort matters most.

We’re a Fortunate Group

The creative and marketing industries a lucky breed. They don’t have to worry about the seriousness and stresses of client insurance policies. They don’t deal exclusively with people at their worst times (e.g. auto repair shops). This doesn’t necessarily mean we’re living in a dream world, just that we’ve been given the opportunity to create “corporate cultures” that reflect the creativity of our work. We’re in the business of ideas, and it’s refreshing lifestyle and people (not cubicle structure) that promote more of them.

Going Further

There are plenty of blogs out there that focus on the day to day business of freelances and small ventures. The sites and resources below have a different kind of approach. Many of them focus more on the big picture rather than the intricate details. I’ll warn you now: not all of their purposes will be immediately apparent. Take some time to read an article or two from each, and you’ll hopefully begin to see where the value lies.

Sites & Blogs

1. The Netsetter
2. The Blog of Tim Ferriss
3. Seth Godin’s Blog’
4. LifeDev
5. TED Talks on Business
6. Signal vs. Noise

Books & Reading

1. The 4-Hour Workweek
2. Good to Great: Why Some Companies Make the Leap… and Others Don’t
3. Crush It!: Why NOW Is the Time to Cash In on Your Passion
4. Getting Real: The smarter, faster, easier way to build a successful web application
5. First, Break All the Rules: What the World’s Greatest Managers Do Differently
6. Built to Last: Successful Habits of Visionary Companies

That’s our take. What about yours?

Related posts:

1. Getting Clients to Embrace Fresh Ideas The internet is full of brand new proof of...
2. The Rebranding of a Company – A Case Study Over the past few months, I’ve been part of...
3. Quote This Project – Fishing Supply Company Pricing Results A little over a week ago, we set up...

Conversion, return on investment, loyalty, referrals; all of these site metrics are incredibly important to any successful website, and a site that sells product(s) is no exception. In a world (wide web) that’s muddled and overrun with sub-par, poorly designed shopping websites, it’s hard to break away from the mold.

The key is to be informed — not only about designing a better shopping experience, but making that shopping experience more informative and enjoyable for the most important person, a potential customer! In my experience, I’ve noticed five main types of online shoppers. They’re much like normal brick & mortar shoppers, too. So, how do you make the best experience possible for these five types of people?

Bargain Hunter

The bargain hunter is just like shoppers you’d see in a supermarket. The one’s who hold up all the lines with their unorganized coupon binder, sets of buy five, get one free items and their rebate stuffed receipts. The same goes for web buyers. They regularly search sites like Retailmenot and Cheap Stingy Bargains looking for free swag or coupon codes to use.

How to help a Bargain Hunter

The simplest way to accommodate the bargain hunter is to enable coupon/promo codes during checkout. Most recent shopping cart software will ship with this functionality (or at the very least, have plug-ins developed that will allow it). You can promote these codes by submitting them to sites, sending out emails with the code and giving a code in an email after a purchase has been made — this will also encourage them to come back.

Window Shopper

Have you ever been walking down the street and saw something you just couldn’t live without (then you saw the price)? That, in a nutshell, is the window shopper. Whether they are shopping for a new LCD TV, dress, car or jewelry, this shopper can sometimes get talked into buying something over the course of a few visits.

How to help a Window Shopper

A great way to sell to the window shopper is to describe your products as detailed and precise as you can. List any benefits, positive uses and other things that might be useful to know. That way, the consumer can’t turn down a product that can help them in so many different ways.

Review-Centric Shopper

Popular sites like Amazon and Newegg use a star rating system that allows customers to rate a product after purchasing. Some people say to take these reviews with a grain of salt, because they might not have any experience outside of the product they are reviewing. Personally, I like reading these reviews because it gives me a wide range of previous buyers that have used the product I might buy.

How to help a Review-Centric Shopper

Obviously, the best way to make your site usable to the review centric shopper is to add a rating and/or commenting system on your products. Along with the coupon codes, many shopping carts will come with the functionality or at least have some plugins that can achieve this addition.

The Big Spender

Ah, the big spender. They buy the biggest, most expensive products every time they go out. They will walk by an area of a store and just throw things in their cart without ever thinking twice. They shop at the most expensive department stores and buy only name brands.

How to sell to a Big Spender

My opinion on the big spender? They are great for your site stats and revenue! On every product detail page, try adding a block of “Related Products” or “Add on Accessories” with a link to add it to their cart right then. The temptation to buy more products is there and the big spender just might take the bait.

The Comparison Shopper

In my shopping experiences (online and off), there are usually always two types of products; the name brand & the off brand, with the off brand typically cheaper. When looking at these, the price is usually the deciding factor in which one someone purchases. But what if you are selling the name brand? Can you rely on the name alone to sell, if the off-brand is the same product, just repackaged? In the world’s current economic state, I’m beginning to think a name might not be enough anymore.

How does all this relate to online sales, you might ask? Well, online shoppers are just like offline — they want a solid product at the cheapest price without sacrificing quality. So, you need to prove to them that your product is worth their investment and is a better choice than your competitor’s product.

How to sell to a Comparison Shopper

Firstly, add a rating and review section on each product detail page. Seeing past customer feedback can change someone’s opinion rather quickly. Secondly, try adding an area for testimonials that you can administer. This way, if you get some astounding review from some well known sources, your credibility will be raised instantaneously. You can always style the testimonials to make them stand out as to catch user’s attention, too.

Go Forth and Sell

There you have it. The five main types of online shoppers and some tips to sell to each of them. With a bit of research, creating a user-based shopping experience isn’t very far out of your reach. As a result of your work, you will notice more customer interaction (ratings & reviews), more sales (due to trust from testimonials), and return customers (promo codes and referral leads). Why not take some time and spruce up your shopping experience? Your customers, and your wallet, will thank you!

Do you have any other personalities to add to this list? Be sure to share them in the comments below!

Related posts:

1. The Anatomy of An Online Store Let’s not try to over simplify online shopping. If...
2. The Anatomy of a Corporate Site This is part three of the week-long “Website Anatomy...
3. How to Plan a Content Heavy Site Editor’s Note: Today’s guest post comes from Mary Fran....

A management professor once told me that in business, the only thing you need to know is one special shape. This meant absolutely nothing to me until he began to show me how every fundamental business practice boils down to a basic geometric shape.

Here I am paying $50k a year and we’re going to learn about one shape – a classic equilateral triangle. You know, that guy with 3 sides, 60 degrees each angle, and 180 degrees to go around. Yup, the simple, classy, equilateral triangle. 3 sides, no frills, all business. A Harvard MBA teaching other MBA’s about triangles?

I’m skeptical to say the least.

A $50,000 Triangle

As it turns out, the professor is spot on. Without getting technical, the geometry of thinking takes complex ideas and generates them into solid variables. Statistically, take on any more than three variables, and you’ve got a huge pile of worthless information with far too many options. Take on any less than three variables, and you’ve just induced tunnel vision. Three is the magic number because it’s just enough form with just enough chaos to actually yield real information. Basically you take a big idea, smash it into three variables, and voila – you can now use your triangle for a myriad of things.

At this point, it’s alright to be puzzled, luckily this concept is about as simple as the shape itself. Here’s what I call “Triangle One” and how we use it to determine our strategy for beating out competition when pitching to clients.

First Corner – Economic Quality

The first corner of “Triangle One” is your firm’s economic quality: In terms of cost, how expensive is your firm compared to the next guy? Does your cost reflect your quality? On an apples to apples comparison, how does your firm stack up?

Use this corner of the triangle when you’re up against a firm who’s only difference is their sheer size. They’re better because they’re bigger… or are they? Let clients know you’re scalable, flexible, and you don’t have to pay a 40-person staff their comfortable salaries.

Second Corner – Interaction Quality

The second corner of “Triangle One” is your firm’s interaction quality: Are you more personal with clients than your competitor? What’s the demeanor of your interactions? What sort of relationship do you build?

Use this corner of the triangle when you’re up against a firm who takes projects and disappears. Let the client know you’re a phone call away from their idea, rather than a few unanswered phone calls, unread e-mails, and a few unheard voicemails away. Trust us, it makes the difference. Make yourself available, but don’t give up control.

Third Corner – Differentiation

The third corner of “Triangle One” is your firm’s differentiation: Simply, why are you unique? Why chose your firm over another? What makes your firm stand out like a sore thumb (assuming a sore thumb is something awesome)?

Use this corner of the triangle when you’re up against a firm who you can’t quite beat on economics. Let’s be honest, you have to justify your costs sometimes too, make frequent use of this corner. Why your different is why you’re in business and the “firm” down the street isn’t. Show your uniqueness and show it well. Everyone’s watching.

Go Ahead, Pick Your Corner

Inside “Triangle One” lives your firm and the location of your firm is pulled and pushed by each of the three dimensions. The more you show towards one quality, the closer you are to its corner. It’s up to employee, client, and even personal evaluations to place your firm inside the triangle.

Most major firms tend to pull away from interaction and settle somewhere between economy and differentiation. The more centralized the location, the better.

Smaller firms tend to sit right in the middle; however, smaller firms have the advantage because they have the flexibility to stretch their home as close to the corners as they want to. However, never spread yourself too thin, but that’s another triangle for another time.

Next time your smaller firm is pitted up toe to toe against a bigger, “better” competitor, try to explore ways to exploit their “Triangle One” and capitalize on your “Triangle One”. Beat any big firm in at least 2 of the 3 corners and you’ll get more shots than MTV’s Jersey Shore (If that pop culture reference went over your head, consider yourself lucky). Show that you in fact can compete… and do a damn good job doing it.

Source

(c) 2010 Robert W. Keidel. The Geometry of Strategy: Concepts for Strategic Management. Routledge.

Related posts:

1. 4 Rules for Pitching to Offline Clients Being based online has its share of advantages. Clients...
2. Getting Clients to Embrace Fresh Ideas The internet is full of brand new proof of...
3. Watch Your Language: Clients & Pricing // Want more pricing help? This is day two...

We haven’t gone back to basics in a while.

Today’s tutorial will bring you through the process of building a slick menu using a single CSS sprite image. It’s a simple, but elegant solution for most websites. This was one of the design strategies that first helped me to start using smarter markup. For those of you just getting introduced to this technique today, hopefully you’ll have some similar results.

The end goal is to create a navigation menu that loads quickly, and does not require any dated JavaScript for hover effects. If you’re still using individual images for each menu item, it’s time to upgrade.

The Goal

This CSS sprite will keep HTTP requests down and increase load speed. For a more in depth explanation of CSS Sprites, take a look at Chris Coyier’s article on CSS Tricks. He goes into a wider variety of uses, but this tutorial will focus on getting the navigation done for simplicity’s sake.

Design the Menu

Breaking from the usual flow of tutorials, we’re going to take a look at part of the Photoshop process before hitting the code. This is in order to demonstrate a simple way of measurement and markers for the menu’s sprite design.

Love the Grid

Rulers and markers are your best friend when it comes to CSS sprites. To take advantage of these guides in Photoshop, turn on rulers through the View>Rulers option in the toolbar. Once rulers are active, you can create a new guide by click on the ruler and then dragging onto the composition area. These guide lines can be used to align your sprite. Alternatively, you can activate the grid overlay through View>Show>Grid.

In order for the positioning to work in CSS, you’ll need to know the rough coordinates of each menu item inside the sprite. I’ve found it easiest to pick a measurement system that it consistent instead of minimal.

To put it another way, I would much rather remember 100px, 200px, etc than 101px, 342px, etc. Blocking your sprite out in a logical grid also makes future changes significantly less painful, and often requires less adjustment. You can find the example sprite image that I use for this tutorial at the bottom of this post in the source files.

Structure with HTML

The code below will set up a basic menu structure for us to work with in CSS. Feel free to start a new file or insert into an existing menu.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>CSS Sprite Navigation</title>
	<link rel="stylesheet" href="css-sprites-nav.css" type="text/css" />

</head>

<body>

		<ul id="menu">
			<li class="home"><a class="selected" href="#">Home</a></li>
			<li class="about"><a href="#">About</a></li>
			<li class="contact"><a href="#">Contact</a></li>
		</ul>

</body>
</html>

A Brief Word on SEO

Our top navigation menu will be structured as a list to keep semantic code. Keep in mind that because these list items will only be displaying an image. The hidden overflow and negative text indent will hide any text from the user’s view. We do not want to leave them blank, because that would give search engines less content to crawl. Even though the images will have text, the search engine will not be aware of this unless we give it actual code to reference.

The Big Idea: As designs become more graphic intense, it is ok to use images (in moderation) as text replacement for elements like navigation, banners, button, etc. If you choose to do this, you still have to account for the search engines.

Position Images with CSS

Copy the code below into your CSS file for the project. An explanation will follow.

/* Everything CSS Sprite Menu */
	ul#menu{margin:0; padding:0; list-style:none; clear:both;}
		#menu li{overflow:hidden; text-indent:-9999px; display:inline; float:left; margin-right:10px;}
			#menu li a{background:url('images/menu-sprite.jpg') no-repeat; width:100%; height:100%; display:block;}

			/* Home Button */
			#menu li.home{width:115px; height:60px;}
				#menu li.home a{background-position:-5px -5px;}
				#menu li.home a:hover{background-position:-5px -75px;}
				#menu li.home a.selected{background-position:-5px -145px;}

			/* About Button */
			#menu li.about{width:120px; height:60px;}
				#menu li.about a{background-position:-125px -5px;}
				#menu li.about a:hover{background-position:-125px -75px;}
				#menu li.about a.selected{background-position:-125px -145px;}

			/* Contact Button */
			#menu li.contact{width:160px; height:60px;}
				#menu li.contact a{background-position:-250px -5px;}
				#menu li.contact a:hover{background-position:-250px -75px;}
				#menu li.contact a.selected{background-position:-250px -145px;}

Change Image with Background Position

The background-position CSS property allows you to specify a set of coordinates on the background image. The benefit of this is that you can load a single background image for a number of elements, but give individual ones their own coordinates. This property is the backbone of CSS sprites.

You’ll remember that we gave each menu list item its own class. This allows us to target them individually for background image coordinates. The background image has already been defined by the general anchor tag style, so the only change that needs to be made for each menu item is the positioning. Especially on larger projects, keeping down the number of redundant styles is key to keeping sanity.

Using this method, we created three unique states for the navigation:

1. Default is displayed to start
2. Hover is activated by mouseover
3. Selected indicates the current page location. It can be activated by a special “selected” class assignment

Unless you’re building something out of the ordinary (e.g. multi-tiered menu), you’d have a hard time needing anything past these three states.

Wrapping Up

By this point you should have a menu driven by a single image. As Chris Coyier’s article brings up, this lowers HTTP requests and allows a smoother loading experience than a long list of bulky separate files for each element. Condensing is good for pages.

I’ve put together a ZIP file of source code and demo for further help. The example in the file is a little more comprehensive, but still follows the principles of this tutorial. Having any errors or confusion about the process? Leave a comment below and we’ll try to sort things out.

Related posts:

1. Using the PHP Include Function to Template Faster Today’s tutorial shows how using PHP’s include function for...
2. How to Make a Slideshow with a Transparent PNG Frame Today’s tutorial is headed back to the basics. We’re...
3. Quick Tip – Simplify List Margins with CSS After working with CSS for a while, it’s easy...

I’m going to be bold for just a moment and assume that you spend a fair amount of time at the computer.

If you pile on hour after hour in front of a screen, maybe you should take the time to make sure you’re as comfortable as you could possibly be – which is where ergonomics comes in.

Ergonomics is the science of designing the job, equipment, and workplace to fit the worker. There are two reasons to have an ergonomic setup – health and productivity.

With that said, why not see what you can do to tweak your work environment and consequently live a longer and more productive life?

The Checklist

There are plenty of articles floating around that can point you in the ergonomically correct direction, but in order to make things easier, here is a quick checklist based off some of those readings. The sources are linked to at the end of the post, for those of you that feel so inclined.

Chair

• Feet should be flat on the floor, ankles at 90 degrees.
• Thighs parallel with floor and knees bent 90 degrees.
• A few inches of space between the back of your knees and the edge of the chair.
• Elbows at 90 degrees when using keyboard.
• Sit back as far as possible within the chair, it will force upright posture.

Desk

• Your armrests should act as an extension of your desk (elbow height = desk height).
• Keep the most used items within reach on your desk, minimizing reaching up or down.

Monitor

• Give your monitor some personal space, put it 20″ to 30″ away from your face (an arm’s length).
• If your monitor allows tilting, aim for a 10 to 20 degree angle, which will help minimize neck movement.
• Center your monitor in front of you, to avoid unnatural neck/body twisting.
• Keep your head in a neutral position, so only your eyes have to move to see the screen, not your neck.
• Your direct line of sight should be closer to the top of the monitor, to avoid bending your neck upwards.

Keyboard and Mouse

• Relax your hand(s) and fingers.
• Arm holding mouse should be at a 90 degree angle, allowing for full arm movement.
• Wrists should be as flat as possible when using the keyboard. (Get rid of the keyboard stands)
• There have been mixed reviews about soft wrist rests (like those gel pads), although studies from University of Berkeley, California noted that they can cause unnatural angling of the wrist and can sometimes even pinch blood vessels.

Odds and Ends

• Eye Strain - According to Cornell’s Ergonomic guide, “Every 15 minutes you should briefly look away from the screen for a minute or two to a more distant scene, preferably something more that 20 feet away. This lets the muscles inside the eye relax. Also, blink your eyes rapidly for a few seconds. This refreshes the tear film and clears dust from the eye surface.”
• Stretching - If you have four minutes and a desire for your coworkers to look at you funny, you might want to consider stretching before beginning your work day.

Sources

• Workspace Planner – Punch in your height and get exact measurements to help you set up your workspace.
• Cornell Ergo Guide – A comprehensive look at everything ergonomic from Cornell University.
• CUergo: 10 Tips for Mouse Use – Another gem from Cornell, rethink how you use your mouse.’
• Workstation Assessment Checklist – A very thorough checklist to run your workstation through.
• Comfortable Computing – A whole wealth of ergonomic information.

Related posts:

1. Five Minute Upgrade – Header Hierarchy Headings can be tricky business. In a continuation of our...
2. Five Minute Upgrade – Writing Blog Post Titles That Grab Attention You’ve just spent a ton of time putting together...
3. Five Minute Upgrade – Using CSS Borders for Emphasis I’ve noticed recently that many of the techniques used by...