During an exploration of CloudFront it was noted that requests were the lionshare of the costs for one application. How much savings could be realized by merging all icon files into one and serving them using positioning in CSS? Quite a bit actually.

First, I created an icon file that is 128 pixels square to hold my 16 pixel square icons. Each of the icons individually averages out to ~700 bytes. After adding all the images, the total filesize for this new icon file was ~21.5K. This already equates to a significant space savings on any page that loads all 64 icons which would translate to ~44.8K. More space could be saved had I used a gif, but I wanted retain the alpha – personal preference. Next I created the necessary CSS to position these images using intelligent names like s-icon-heart to replace images/heart.png, this makes the code very readable. The CSS positioning code for my icon file to support all 64 icons is ~3.6K which needs to be added to the stylesheet sitewide.

Adding the icon file and the CSS together yields a total savings of ~19.7K for pages that use all icons in the file. While not every page uses every icon, stylesheets and images are usually cached by the browser so future requests for these assets won’t incur a trip to the server. Furthermore we’ve eliminated up to 63 http requests which, although individually are quick, cumulatively they add up to serious time for the browser!

You can see how I made my icon file by dropping the icons into a grid in Photoshop. I then save this out as a large PNG. Be aware that older versions of IE do not support PNG transparency so you might get some odd behaviors there. As always test in the browsers you wish to support.

I then add the necessary positioning elements into my CSS file for each of the icons. Getting the names and positions was probably the most tedious part of the process.

div.icon { width:16px; height:16px; }
.icon { background-image: url('images/icons.png'); }
.icon-star-bronze-red { background-position: 0 0; }
.icon-star-bronze-green { background-position: -16px 0; }
.icon-star-bronze-blue { background-position: -32px 0; }
.icon-star-gold-red { background-position: -48px 0; }
.icon-star-gold-green { background-position: -64px 0; }
.icon-star-gold-blue { background-position: -80px 0; }
/* ... 58 more definitions */

There are a number of ways to then use this in your code. You can point towards a clear.gif, if you’re already using one for positioning or layout. You can apply it as the background image on an element. Get creative.

<!-- using an image -->
<img src="images/clear.gif" width="16" height="16" class="icon icon-star-gold-red" />
<!-- using a div -->
<div class="icon icon-star-gold-red"></div>

If you are looking for a kick ass icon library, look no further than the FAMFAMFAM Silk Icons which are available for free under a creative commons license.

Following up on the post about Facebook Like Datelines, this post provides a simple function for creating Twitter like aged timestamps in natural language. Looking at a date time isn’t always helpful, for example “2/9/2004 19:30am” doesn’t give the reader a quick understanding if this is current or not. Twitter, Facebook and other sites uses the difference in times to provide a more meaningful expression of when an action took place which also provides relevance to current events. The great part about using this method is the need to handle time-zones goes away because the calculation of the time elapsed is relative regardless of what time-zone the data is tagged in. See it in action with the General Motors news tags on AutoLists.

The function below simply displays an English string that provides the difference in times. This is obviously in English, but can be internationalized very easily. Twitter stops at 24 hours, but this extends the natural language formatting out to about 1 week then reverts to a full precision time-stamp. As you can see by the very simple math and logic involved, you can quickly extend this as far out as you would like.

function time_offset($t, $f = 'h:ma M. j Y T'){
	$o = time() - $t;
	switch($o){
		case($o <= 1): return "just now"; break;
		case($o < 20): return $o . " seconds ago"; break;
		case($o < 40): return "half a minute ago"; break;
		case($o < 60): return "less than a minute ago"; break;
		case($o <= 90): return "1 minute ago"; break;
		case($o <= 59*60): return round($o / 60) . " minutes ago"; break;
		case($o <= 60*60*1.5): return "1 hour ago"; break;
		case($o <= 60*60*24): return round($o / 60 / 60) . " hours ago"; break;
		case($o <= 60*60*24*1.5): return "1 day ago"; break;
		case($o < 60*60*24*7): return round($o / 60 / 60 / 24) . " days ago"; break;
		case($o <= 60*60*24*9): return "1 week ago"; break;
		default: return date($f, $t);
	}
}

I really like the date strings in the Facebook Newsfeed. They somehow make the data feel more personal when they relate to me with more natural language “Today”. This in place of callous standardized formatting so many websites present such as “2/10/2009″ or worse yet “02/10/2004″ or even worse still “2009-02-10″. The following code illustrates how you can create a quick and easy formatting of data that’s ordered by date and output it in a meaningful way to your users. You can see an example of this in action on the top stories feed on AutoLists.com as well.

The one flaw with this method as presented here is it is tied to the webserver’s time zone and the developers regionalization preferences. This, however, can easily be extended to match the users time-zone and internationalization needs with a little more effort. In the interest of simplicity I am providing it as simple as possible to illustrate the logic. The dateline class follows the code listing.

// Query for your data that contains a datetime field
 
$date_str = today_yesterday(time());
while($record = $query_result->fetch_assoc()){
	if($date_str != today_yesterday(strtotime($record['date_published']))){
		$date_str = today_yesterday(strtotime($record['date_published']));
		print '<div class="dateline">" . $date_str . "</div>';
	}
 
	// Do whatever logic you need to with each record here...
	printf($record_format, $record['title'], $record['link'], $record['image']);
 
}
 
// Date String Formatting Function
function today_yesterday($t, $f = 'l, F j'){
	if(date("Ymd") == date("Ymd", $t)){
		return "Today";
	} elseif (date("Ymd", time()-(24*60*60)) == date("Ymd",$t)){
		return "Yesterday";
	} else {
		return date($f, $t);
	}
}

div.dateline { border-bottom:1px solid #ccc; color: #ccc; font-size:12pt; }

There is always a fine balance between K.I.S.S. and giving users the flexibility they really need. I’ve been working on configuring a number of Windows Server machines over the last few days getting ready for a major shift in architectural design and philosophy that will happen tonight beginning at 6pm. On numerous occasions when dialing in the configuration I’ve found myself overwhelmed by the un-necessary complexity of the windows wizard interfaces and underwhelmed by the advanced setting panes of many services.

More important to creating a step by step wizard handling users through a myriad of options would be to provide a context specific wizard that takes into account not only what the user has click just now, but what they’ve clicked and interacted with before. The wizard could be setup to solve problems instead of provide functionality. Then for the battle hardened users who no longer require the training wheels that the wizards offer, provide simple automateable tools which let them configure the server quickly and export the settings for duplication!

Let the software learn the user through prior interaction and adjust itself accordingly. Finally, if there’s an option that a single word can’t explain, place the contextual help right there so the user doesn’t have to search Google to find out what it does! Before anyone thinks this is a problem unique to Windows, it’s not. Almost every single digital device (BlackBerry, OS X, Linux can’t we agree on a pseudo consistent path structure guys?) I’ve ever used has had a UI that could be improved through careful thought and extensive testing.

jQuery users, take a look at the autocomplete plugin which is shipping in the UI framework. While there are some serious limitations to the currently plugin, it does provides a drop dead simple way to provide Google Suggest style functionality to your site users without significant overhead. It’s widely supported and weighs in at 78K (without data/css and markup) for the minified components.

My one complaint is the lack of JSON support for remotely fetched results. Currently you must return items for the suggest widget as plain text list. You can, however, currently parse individual lines (which could be objects). I expect the jQuery team will be adding this functionality soon enough. Jörn Zaefferer has built a modified version of the plugin that supports JSON. I’m holding out until it’s merged into the UI trunk to limit my sources of code updates in this instance.

Below is a quick example of the syntax so you can see how easy it is to create. The file, names.php, simply returns a series of names, 1 per line. This might be static or pulled from a database based on the passed “q” get parameter that holds the contents of the input area.

jQuery Autocomplete Plugin Screenshot

<link rel="stylesheet" href="css/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ui.core.min.js"></script>
<script type="text/javascript" src="jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="jquery.dimensions.min.js"></script>
<script type="text/javascript" src="ui.autocomplete.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $("#name").autocomplete("names.php");
});
</script>
<form>
   Name <input type="text" id="name" name="name" value="" /><input type="button" value="Go" />
</form>

The newsfeed is the single most important touchpoint for any application within the current Facebook design. Facebook has been working very hard to combat spam over the last 12 months. They have reduced the number of invitations, notifications and messages applications can send per day. Additionally, they now monitor the recipient responses to the communication, and create a quality rating based on it. That said, the newsfeed is still the primary source where most people will first interact with an application. As such, it is monumentally important that all outward communications from your application, email, invites, and feed items, are built carefully and intentionally.

This post is a followup to an earlier post covering the key design components of an application. While most of these items are language specific, there are some opportunities for creativity and these areas should be familiar to the designers as well as the marketers and developers.

Newsfeed Stories

There are three flavors of newsfeed stories, one line, short and full. The end user ultimately has the final say on which (if any) of the article types your application can publish. Remember, keep the user experience clean, neat and consistent with Facebook. Newsfeed articles are generated using dynamic variable population of a pre-defined template. For example, a story might look like “{actor} rated <i>{movie}</i> {stars} stars.” At runtime, your developer will pass values for these variables and the final story might look something like, “Erik rated <i>Lakeview Terrace</i> 3 stars.” This templated format is carried through the newsfeed with the exception of the “General Body” field, which is only present in the short story. Facebook provides a very robust developer console which includes the Feed Preview Console. If you haven’t already done so, I recommend installing the developer application so you can access these tools.

One line

Just like the name implies, this is as short as it gets. Links are permitted in the title. The only graphic is the 16 x 16 pixel graphic assigned to the application.

Newsfeed Item - One Line

Key Features:

• Aggregates to newsfeed
• Least intrusive

Short

Short stories begin providing some real flexibility. Up to four 75 x 75 pixel images can be included (scaled dynamically by Facebook as needed) and linked individually. Additionally, more detailed text can be passed. Additionally, a third area called “general body” can also be passed. Some limited HTML is allowed within the templated portion of the story, but not within the “general body.”

Newsfeed Short Story from Honesty Box

Key Features:

• Up to 4 optional images (defined as parameters)
• Freeform Text Block called “General Body”
• No images, tables, or forms within template
• Bold, Italics, Links are allowed within the template
• Aggregate to the newsfeed

Full

As the name implies, Full stories are just that, full. Not only can they include HTML, they can even include form elements! This allows for a dynamic newsfeed item. While your initial reaction may be to jump in and make everything Full stories, they will not aggregate to the main newsfeed and are only useful within the mini-feed.

Newsfeed Full Story from Honesty Box

Key Features:

• Forms
• Images
• Tables
• Does not aggregate

Appended Test Text

This is the text that was appended to the default feed items to see which HTML components were valid. The screenshot shows the output of the default settings. I also added an image to the images array. I noticed that the short story images don’t always load in the console, however, referencing external images seems to work fine.

Newsfeed Template Test Console

<p>Paragraph text</p>
 
<b>Bold Text</b>
<i>Italic Text</i>
 
<a href="http://www.google.com">Link Text</a>
 
<h1>Testing H1</h1>
<h2>Testing H2</h2>
<h3>Testing H3</h3>
 
<table border="1">
<tr><td>c1</td><td>c2</td></tr>
<tr><td>c3</td><td>c4</td></tr>
</table>
 
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" />

Invitations/Requests

Some have proclaimed the application invite dead as a viral tool. While they certainly less effective than the early days of the platform, they are still very much an integral component of a marketing strategy. Facebook prohibits any application from incentivizing users to send invitations so forget that. Also off limits are forced invites, so don’t even consider putting the invite screen in your normal application flow.

Application Request

Aggregate News

Facebook’s algorithms attempt to merge stories together whenever possible for an individuals newsfeed. In this way, highly popular applications will have reduced numbers of entries within a single newsfeed, instead referencing multiple friends together, making the experience much better for the end user. Read all about the feed.registerTemplateBundle on the developer for more technical details and tips on creating stories that will aggregate well.

Aggregation Item From Newsfeed

In the example above, 2 of my friends have become fans of Whole Foods. Earlier in the day, I saw only one name, so the copy read, “xxxxx xxxxx became a fan of Whole Foods Market”. Now that a second friend has become a fan, the text has changed to “xxxxx xxxxx and xxxxx xxxxx became fans of Whole Foods Market”. This is story aggregation at it’s best. Instead of generating two items with very little difference, Facebook has created a single item. And if another friend joins, it will eventually change to reference a couple of names and a number of other friends who did the same.

Notifications

Once a user has permitted your application to interact with it, notifications and emails from the application become an option. There are two different notification types. First users can send notifications to other users. These are a common way to engage users with the application. There’s no design elements related to this item, but the 16 x 16 icon will appear along side the messaging. Second, which is new, allows applications to send notifications to users without pre-pending another users name. The screenshots below show an example of each from the Are You Interested? application. The first item is a user to user notification, and the second item is an application to user item. Notifications appear in the footer dialog (if enabled) as well as on the general notifications page.

Notifications

Notifications Dialog

Emails

Facebook permits applications to send email directly to users email account. The application does not have access to the email address and Facebook includes some “unsubscribe” language in the email. Depending on how “spammy” the messages are deemed to be, this link may be at the top or bottom of the message. Application “developers” have access to the applications current “spamminess” level within the Facebook tools.

The developer wiki entry on notifications.sendEmail has the most up to date listing of what HTML is permitted in an email body. As of this writing, it is limited to P, BR, A, B, I, H1, HR, and CENTER.

Application Email Test

Facebook’s information for developers is thorough and easy to navigate, but for designers, it’s a bit more challenging. This guide walks you through the main touch points for the new Facebook design and the visual integration points for applications. This is not a review of all application touchpoints, but rather a graphical designers guide for what spaces and bits they’ll need to design when working on Facebook applications. Newsfeed items were intentionally left from this because I feel their importance would be minimized here and they warrant their own post.

At the very bottom of this post is a quick checklist you can use when designing for Facebook to ensure you capture all the necessary surfaces you’ll need to design for.

Profile Presence

After the newsfeed, the most prominent location users would see your application has historically been the profile. There are three forms of “widgets” or boxes, a tab and the publisher. All of which have some interesting uses.

Publisher

The publisher may be the most revolutionary item from the old facebook style. Designers won’t be doing much here beyond creating a facebook like UI for the application. For those unfamiliar with it’s use, the publisher allows content publication directly from the profile page. Much like updating your status, the publisher can update your photos, video and so much more. The publisher is 520 pixels wide and writes directly to the persons newsfeed.

Profile Publisher

Wall/Info Tabs

This box persists for both the wall and profile tabs of the new design. The box is very small, only 184 pixels wide, and very low on the pages. Note that this size matches the “narrow” box from the boxes tab. It should be noted that the user has to explicitly permit an application to create a profile box.

Wall and Info Box

Boxes Tab

Boxes are the old profile items. They come in two sizes, narrow at 184 pixels and wide at 380 pixels. This tab holds the boxes added by applications by users from the recently phased out facebook profile design. The user can manipulate the placement of the boxes within the tab, including choosing narrow or wide versions. Much like the Wall/Info tabs, users must explicitly allow applications to publish these boxes for all new applications.

Profile Boxes Tab

Named Application Tab

Another exciting change for the profile is the named tab. Unlike the other boxes, the tab actually pulls data from the application in real time. This provides the user with a more dynamic and interactive experience. A word of caution though, the user is responsible for creating the tab themselves. While the process is reasonably simple, it may benefit developers to provide a quick “how to” on adding the tab. Another nice feature of the tab is letting the users get a feel for the application in a controlled way.

Named Application Tab

Application Presence

The application is key for distributing your brand and where your users will spent most of their time. This is not the gateway in – but how they’ll experience you once they begin interacting with the brand.

Application Directory

Each day the application directory becomes less and less important for users to discover new apps. However, it still exists and the 75px x 75px icon is required.

Application Directory

About Application

The about page is a public facing (read indexable by Google and other search engines) page that describes your application, is commonly used for feedback and support issues as well as being referenced by every page in the footer as the go to place if something doesn’t work. This page is important – don’t underestimate it. The critical component here is a large 396 pixel graphic that can be placed at the top of the page. The intended use is as a screenshot, however, can include anything you think will help convey the purpose of your application to a perspective user. Also notice the 16 x 16 pixel icon which is used throughout the site as a “bullet” for your application is used here.

About Application Page

Application Canvas

While last on this list, this is certainly not the least important item. The new design opens up a nice wide 720 pixels to developers which provides ample space to present information in a far less restrictive way. This design can be a re-hash of the profile tab, if appropriate for your application. Keeping the two designs the same certainly helps in building your brand.

Application Canvas

Advertising

Facebook prohibits advertising of any kind, even plugs for your other applications, anywhere but on the canvas page. When designing the assorted boxes, keep this in mind.

Designers Checklist

When designing facebook applications, this list is a nice place to start when figuring out just what components you need to create. As always, use your best judgement with the height of variable height boxes. Your user will not keep the box if they are inconsistent with the Facebook design or use more space than they feel appropriate. Always place the user experience first.

• 16px x 16px – gif
• 75px x 75px – png, jpg or gif
• 396px wide application about graphic – png, jpg or gif
• 720px wide application canvas – html, fbjs, css and flash
• 184px wide profile box – html, fbjs, css and flash
• 380px wide profile box – html, fbjs, css and flash
• 520px wide profile publisher – html, fbjs, css
• 720px wide profile application tab – html, fbjs, css and flash

Right now I think I’d rather have a Tesla Roadster than an iPhone. Sure that’s a bold statement considering I can afford an iPhone and not a roadster but I think the car takes the cake for innovation. Being a huge fan of technology and cars I’ve drooling over this car since I first heard about it about a year ago and now that they’re “available” I’m equally as excited to see what they do with the sedan rumored for 2010 production.

See what the hype is about in these videos.

Mashable has a nice collection of 16 tools for designers and developers for plugging into Firefox. I’m personally a fan of Web Developer Toolbar and Y!Slow which are both great. The original Mashable article included the other two tools I find indispensable, ColorZilla and Firebug.

Doing some reading this morning lead me to this site which has a collection of 10 bits of code that you can tweet. Reading this reminded me of the 5Kb website challenge. The premise was to create a functional website in 5Kb of code. That included all images, javascript, css, html… EVERYTHING! I recall there were a number of very complex graphic manipulation tools and even a shopping cart. Today I’m building out a new design for a client and my CSS include alone is already 3,197 bytes. This got me to thinking, we need a new 5Kb website challenge.

So here it is! What can you make in 5Kb?

Rules:

• All HTML, CSS, JavaScript, Images and any initial httpRequest() content loaded at startup must be less than 5Kb
• Content loaded via AJAX (if used) must be less than 5Kb per load request. In other words, it it loads a json object that references an image, the image + json must be less than 5Kb in size.
• The site must “do” something.

Prizes

I’ll give the three (3) best entries a 512Mb Memorex Mini USB Thumb Drive. Entries must be submitted by June 16, 2008 to be eligible for a prize. Submit your site and description in the comments below.

Judging and all that good stuff is subject to participation. If we have enough entries, I’ll open it to the community – otherwise, I’ll be the judge. I’m off to get started on my (non-eligible) project.