For many beginners, the task of picking fonts is a mystifying process. There seem to be endless choices — from normal, conventional-looking fonts to novelty candy cane fonts and bunny fonts — with no way of understanding the options, only never-ending lists of categories and recommendations. Selecting the right typeface is a mixture of firm rules and loose intuition, and takes years of experience to develop a feeling for. Here are five guidelines for picking and using fonts that I’ve developed in the course of using and teaching typography.

1. Dress For The Occasion

Many of my beginning students go about picking a font as though they were searching for new music to listen to: they assess the personality of each face and look for something unique and distinctive that expresses their particular aesthetic taste, perspective and personal history. This approach is problematic, because it places too much importance on individuality.

The most appropriate analogy for picking type. (Photo credit: Samuuraijohnny. Used under Creative Commons license.)

For better or for worse, picking a typeface is more like getting dressed in the morning. Just as with clothing, there’s a distinction between typefaces that are expressive and stylish versus those that are useful and appropriate to many situations, and our job is to try to find the right balance for the occasion. While appropriateness isn’t a sexy concept, it’s the acid test that should guide our choice of font.

My “favorite” piece of clothing is probably an outlandish pair of 70s flare bellbottoms that I bought at a thrift store, but the reality is that these don’t make it out of my closet very often outside of Halloween. Every designer has a few favorite fonts like this — expressive personal favorites that we hold onto and wait for the perfect festive occasion to use. More often, I find myself putting on the same old pair of Levis morning after morning. It’s not that I like these better than my cherished flares, exactly… I just seem to wind up wearing them most of the time.

Every designer has a few workhorse typefaces that are like comfortable jeans: they go with everything, they seem to adapt to their surroundings and become more relaxed or more formal as the occasion calls for, and they just seem to come out of the closet day after day. Usually, these are faces that have a number of weights (Light, Regular, Bold, etc) and/or cuts (Italic, Condensed, etc). My particular safety blankets are: Myriad, Gotham, DIN,Akzidenz Grotesk and Interstate among the sans; Mercury, Electra and Perpetua among the serif faces.

A large type family like Helvetica Neue can be used to express a range of voices and emotions. Versatile and comfortable to work with, these faces are like a favorite pair of jeans for designers.

2. Know Your Families: Grouping Fonts

The clothing analogy gives us a good idea of what kind of closet we need to put together. The next challenge is to develop some kind of structure by which we can mentally categorize the different typefaces we run across.

Typefaces can be divided and subdivided into dozens of categories (Scotch Modern, anybody?), but we only really need to keep track of five groups to establish a working understanding of the majority of type being used in the present-day landscape.

The following list is not meant as a comprehensive classification of each and every category of type (there are plenty of great sites on the web that already tackle this, such as Typedia’s type classifications) but rather as a manageable shorthand overview of key groups. Let’s look at two major groups without serifs (serifs being the little feet at the ends of the letterforms), two with serifs, and one outlier (with big, boxey feet).

1. Geometric Sans

I’m actually combining three different groups here (Geometric, Realist and Grotesk), but there is enough in common between these groups that we can think of them as one entity for now. Geometric Sans-Serifs are those faces that are based on strict geometric forms. The individual letter forms of a Geometric Sans often have strokes that are all the same width and frequently evidence a kind of “less is more” minimalism in their design.

At their best, Geometric Sans are clear, objective, modern, universal; at their worst, cold, impersonal, boring. A classic Geometric Sans is like a beautifully designed airport: it’s impressive, modern and useful, but we have to think twice about whether or not we’d like to live there.

Examples of Geometric/Realist/Grotesk Sans: Helvetica, Univers, Futura, Avant Garde, Akzidenz Grotesk, Franklin Gothic, Gotham.

2. Humanist Sans

These are Sans faces that are derived from handwriting — as clean and modern as some of them may look, they still retain something inescapably human at their root. Compare the ‘t’ in the image above to the ‘t’ in ‘Geometric’ and note how much more detail and idiosyncrasy the Humanist ‘t’ has.

This is the essence of the Humanist Sans: whereas Geometric Sans are typically designed to be as simple as possible, the letter forms of a Humanist font generally have more detail, less consistency, and frequently involve thinner and thicker stoke weights — after all they come from our handwriting, which is something individuated. At their best, Humanist Sans manage to have it both ways: modern yet human, clear yet empathetic. At their worst, they seem wishy-washy and fake, the hand servants of corporate insincerity.

Examples of Humanist Sans: Gill Sans, Frutiger, Myriad, Optima, Verdana.

3. Old Style

Also referred to as ‘Venetian’, these are our oldest typefaces, the result of centuries of incremental development of our calligraphic forms. Old Style faces are marked by little contrast between thick and thin (as the technical restrictions of the time didn’t allow for it), and the curved letter forms tend to tilt to the left (just as calligraphy tilts). Old Style faces at their best are classic, traditional, readable and at their worst are… well, classic and traditional.

Examples of Old Style: Jenson, Bembo, Palatino, and — especially — Garamond, which was considered so perfect at the time of its creation that no one really tried much to improve on it for a century and a half.

4. Transitional and Modern

An outgrowth of Enlightenment thinking, Transitional (mid 18th Century) and Modern (late 18th century, not to be confused with mid 20th century modernism) typefaces emerged as type designers experimented with making their letterforms more geometric, sharp and virtuosic than the unassuming faces of the Old Style period. Transitional faces marked a modest advancement in this direction — although Baskerville, a quintessential Transitional typeface, appeared so sharp to onlookers that people believed it could hurt one’s vision to look at it.

In carving Modernist punches, type designers indulged in a kind of virtuosic demonstration of contrasting thick and thin strokes — much of the development was spurred by a competition between two rival designers who cut similar faces, Bodoni and Didot. At their best, transitional and modern faces seem strong, stylish, dynamic. At their worst, they seem neither here nor there — too conspicuous and baroque to be classic, too stodgy to be truly modern.

Examples of transitional typefaces: Times New Roman, Baskerville.
Examples of Modern serifs: Bodoni, Didot.

5. Slab Serifs

Also known as ‘Egyptian’ (don’t ask), the Slab Serif is a wild card that has come strongly back into vogue in recent years. Slab Serifs usually have strokes like those of sans faces (that is, simple forms with relatively little contrast between thick and thin) but with solid, rectangular shoes stuck on the end. Slab Serifs are an outlier in the sense that they convey very specific — and yet often quite contradictory — associations: sometimes the thinker, sometimes the tough guy; sometimes the bully, sometimes the nerd; sometimes the urban sophisticate, sometimes the cowboy.

They can convey a sense of authority, in the case of heavy versions like Rockwell, but they can also be quite friendly, as in the recent favorite Archer. Many slab serifs seem to express an urban character (such as Rockwell, Courier and Lubalin), but when applied in a different context (especially Clarendon) they strongly recall the American Frontier and the kind of rural, vernacular signage that appears in photos from this period. Slab Serifs are hard to generalize about as a group, but their distinctive blocky serifs function something like a pair of horn-rimmed glasses: they add a distinctive wrinkle to anything, but can easily become overly conspicuous in the wrong surroundings.

Examples of Slab Serifs: Clarendon, Rockwell, Courier, Lubalin Graph, Archer.

3. Don’t Be a Wimp: The Principle of Decisive Contrast

So, now that we know our families and some classic examples of each, we need to decide how to mix and match and — most importantly — whether to mix and match at all. Most of the time, one typeface will do, especially if it’s one of our workhorses with many different weights that work together. If we reach a point where we want to add a second face to the mix, it’s always good to observe this simple rule: keep it exactly the same, or change it a lot — avoid wimpy, incremental variations.

This is a general principle of design, and its official name is correspondence and contrast. The best way to view this rule in action is to take all the random coins you collected in your last trip through Europe and dump them out on a table together. If you put two identical coins next to each other, they look good together because they match (correspondence). On the other hand, if we put a dime next to one of those big copper coins we picked up somewhere in Central Europe, this also looks interesting because of the contrast between the two — they look sufficiently different.

What doesn’t work so well is when put our dime next to a coin from another country that’s almost the same size and color but slightly different. This creates an uneasy visual relationship because it poses a question, even if we barely register it in on a conscious level — our mind asks the question of whether these two are the same or not, and that process of asking and wondering distracts us from simply viewing.

When we combine multiple typefaces on a design, we want them to coexist comfortably — we don’t want to distract the viewer with the question, are these the same or not? We can start by avoiding two different faces from within one of the five categories that we listed above all together — two geometric sans, say Franklin and Helvetica. While not exactly alike, these two are also not sufficiently different and therefore put our layout in that dreaded neither-here-nor-there place.

If we are going to throw another font into the pot along with Helvetica, much better if we use something like Bembo, a classic Old Style face. Centuries apart in age and light years apart in terms of inspiration, Helvetica and Bembo have enough contrast to comfortably share a page:

Unfortunately, it’s not as simple as just picking fonts that are very, very different — placing our candy cane font next to, say, Garamond or Caslon does not guarantee us typographic harmony. Often, as in the above example of Helvetica and Bembo, there’s no real explanation for why two faces complement each other — they just do.

But if we want some principle to guide our selection, it should be this: often, two typefaces work well together if they have one thing in common but are otherwise greatly different. This shared common aspect can be visual (similar x-height or stroke weight) or it can be chronological. Typefaces from the same period of time have a greater likelihood of working well together… and if they are by the same designer, all the better.

4. A Little Can Go a Long Way

‘Enough with all these conventional-looking fonts and rules!’ you say. ‘I need something for my rave flyer! And my Thai restaurant menu! And my Christmas cards!’ What you’re pointing out here is that all the faces I’ve discussed so far are ‘body typefaces’, meaning you could conceivably set a whole menu or newspaper with any of them; in the clothing analogy presented in part one, these are our everyday Levis. What of our Halloween flares?

Periodically, there’s a need for a font that oozes with personality, whether that personality is warehouse party, Pad Thai or Santa Claus. And this need brings us into the vast wilderness of Display typefaces, which includes everything from Comic Sans to our candy-cane and bunny fonts. ‘Display’ is just another way of saying ‘do not exceed recommended dosage‘: applied sparingly to headlines, a display font can add a well-needed dash of flavor to a design, but it can quickly wear out its welcome if used too widely.

Time for another clothing analogy:

(Photo credit: Betsssssy. Used under Creative Commons license.)

Betsey’s outfit works because the pink belts acts as an accent and is offset by the down-to-earthiness of blue jeans. But if we get carried away and slather Betsey entirely in pink, she might wind up looking something like this:

(Photo credit: Phillip Leroyer). Used under Creative Commons license.)

Let’s call this the Pink Belt Principle of Type: display faces with lots of personality are best used in small doses. If we apply our cool display type to every bit of text in our design, the aesthetic appeal of the type is quickly spent and — worse yet — our design becomes very hard to read. Let’s say we’re designing a menu for our favorite corner Thai place. Our client might want us to use a ‘typically’ Asian display face, like Sho:

So far, so good. But look what happens when we apply our prized font choice to the entire menu:

Enough already. Let’s try replacing some of the rank-and-file text copy with something more neutral:

That’s better. Now that we’ve reined in the usage of our star typeface, we’ve allowed it to shine again.

5. Rule Number Five Is ‘There Are No Rules’

Really. Look hard enough and you will find a dazzling-looking menu set entirely in a hard-to-read display font. Or of two different Geometric Sans faces living happily together on a page (in fact, just this week I wound up trying this on a project and was surprised to find that it hit the spot). There are only conventions, no ironclad rules about how to use type, just as there are no rules about how we should dress in the morning. It’s worth trying everything just to see what happens — even wearing your Halloween flares to your court date.

In Conclusion

Hopefully, these five principles will have given you some guidelines for how to select, apply and mix type — and, indeed, whether to mix it at all. In the end, picking typefaces requires a combination of understanding and intuition, and — as with any skill — demands practice. With all the different fonts we have access to nowadays, it’s easy to forget that there’s nothing like a classic typeface used well by somebody who knows how to use it.

Some of the best type advice I ever received came early on from my first typography teacher: pick one typeface you like and use it over and over for months to the exclusion of all others. While this kind of exercise can feel constraining at times, it can also serve as a useful reminder that the quantity of available choices in the internet age is no substitute for quality.

Other Resources

You may be interested in the following articles and related resources:

• Typedia Type Classifications
  A more extensive list of different categories and sub-categories of typefaces than the simplified version presented in this article.
• So You Need A Typeface?
  Useful — and humorous — flowchart for selecting type, brought to you by Julian Hansen via Inspiration Lab.
• The Elements of Typographic Style by Robert Bringhurst
  Link to the Amazon.com order page for this 1992 classic.
• What Type Are You?
  Pentagram’s patented personality test.
• Best Practices of Combining Typefaces
  This articles takes a close look at some of the best practices for combining typefaces — as well as some blunders to avoid.

(ik) (vf)

---

© Dan Mayer for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: Fonts, typography

With the recent launch of Projekt19, we are taking on more client work. With client work, one of the most exciting parts of the process is discussing the clients expectations and then brainstorming on what we can come up with.

In order to collect the ideas from your client, as well as some of your own ideas – create a Moodboard. Whether you decide to show the client or use it internally, it’s a very helpful tool. One document that you can source for ideas, colour palettes, web elements for the entire project. I thought it would be a great idea to share the Moodboards I have used over the past month. Looking through them you can get an idea of what type of site the moodboard was created for, and hopefully you will also be inspired.

I have included two zip files – one with the entire hi-res collection of Moodboards, as well as the blank psd template I use.

Download

Download Entire Hi Res Collection of Moodboards – 29mb

Download Blank PSD Moodboard Template

Extra Resources

John ONolan posted a very creative way to use Moodboards with Moo Cards; Getting Creative: Moo’d Cards

An effective, well-organized workflow is an important asset of professional web designers. The more useful and time-saving your tools are, the more time you can focus on important things, thus creating a foundation for timely good-quality results. The problem is that there are just way too many tools, services and resources out there, so it has become difficult to keep track on them and find those tiny little time-savers that will spare you headaches and save time in a long run.

And this is where we come in. Back in old days, Smashing Magazine used to publish lists after lists, with plethora of links that covered different topics all somehow related to web design and development. We have undergone quite a development since then, and are now publishing almost only in-depth articles — written by some of the best professionals in the industry. However, useful, carefully prepared and filtered lists are still useful, and therefore we keep publishing them as well.

Below you’ll find 50 useful tools and time-savers for web designers and developers. Among other things, you will find recently released tools, useful reference sheets, articles and further resources. Such posts are prepared over months, each containing resources found, reviewed or bookmarked by the Smashing Editorial Team. We hope that at least some of them will help you improve your workflow!

You may be interested in the following related posts:

• 50 Powerful Time-Savers For Web Designers
• 50 New Useful CSS Techniques, Tools and Tutorials
• 45 Incredibly Useful Web Design Checklists and Questionnaires

[By the way, did you know we have a brand new free Smashing Email Newsletter? Subscribe now and get fresh short tips and tricks on Tuesdays!]

Typography

Meet Your Type: A Field Guide to Typography (free PDF)
This eBook will help you better understand the foundation of typography and overcome common obstacles and problems when choosing type.

Web Font Specimen
This template lets you check the typography by analyzing the HTML-specimen in your browser. The specimen contains whole paragraphs in various line heights and font sizes, different headings, ordered and unordered lists, as well as italic and bold text. You can analyze the body size comparison that reveals aspects of the typeface that can’t otherwise be seen and study single glyphs, measure, grayscale as well as light on dark and dark on light previews. You may want to check out Good Web Fonts for the actual specimens of various legible screen fonts.

Font Anatomy Wallpaper
This wallpaper (1920×1200) covers the terminology of typography, showcasing indi­vid­ual parts of the char­ac­ters of the alpha­bet.

Web FontFont User Guide (PDF)
This Web FontFont User Guide contains information about typography aimed at different groups of people: web developers, system administrators and website visitors. You may want to consider giving it to your clients or colleagues.

AltFontPrev
This is a simple JavaScript bookmarklet that lets you view the font stack of any website and then deactivate each font with a single click. It makes it easy not only to make sure everything looks okay when certain fonts aren’t installed on a user’s system, but also to view the fonts included in the website’s font stack in a single click, rather than opening the source code. You can even specify a custom font, which makes it handy when you’re considering changing a design’s current font.

Typografix
This tool is an HTML re-processing script for creating beautiful typography. It corrects things like ellipses and smart quotes and adds tags for <script>, <pre> and <code> automatically. The en dash, for example, is created automatically when a hyphen is surrounded by spaces, and the em dash is created when two dashes appear in a row. Typografix is written in C#, requires Windows Installer 3.1 and .NET Framework 3.5 SP1.

Unicode Codepoint Chart
This chart is broken down neatly by type of character and symbol (and by language in many cases), with a visual reference under each category. From there, just click on the symbol or character you want and you’re brought to a page with detailed information about the character, along with a browser test page, an outline (in SVG format) and a variety of encodings and character sets (HTML entity, UTF-8, UTF-16, UTF-32, ISO-8859-8, etc.).

Bookmarklets

Quix
We have covered Quix several once already, but when one talks about bookmarklets, it is just necessary to mention Quix as well. Wouldn’t it be nice to have a powerful command line in your browser, some kind of shell that lets you use handy commands and shortcuts for a quicker and more productive workflow? That’s exactly what Quix offers. The tool is a clever extensible bookmarklet that lets you both access your bookmarks and perform various operations on other websites.

WP-Toolbar bookmarklet
This tool will save a lot of clicks as you edit or update posts on your WordPress-powered blog. The bookmarklet gives you quick access to the entire administrative back-end directly in your browser’s window. There is also a GreaseMonkey script that automatically loads the toolbar when you visit a particular website.

Print Friendly Bookmarklet
This bookmarklet strips advertising, navigation and all things that you don’t want to have when you decide to print out a page. It formats the content of an article or a document for great readbility and generates a minimal and clean PDF for printing.

Bookmarklet Combiner
This tool creates a master bookmarklet which can either run all bookmarks at once or display a menu at some area of the page. Nice service for users who wants to avoid using a special folder only to hold all bookmarklets.

The Printliminator
The Printliminator is a bookmarklet with some simple tools you can use to makes websites print better. One click to activate, and then click to remove elements from the page, remove graphics, and apply better print styling.

Bespin Bookmarklet
Using the Bespin Bookmarklet, you can replace any textarea you encounter with a Bespin editor, making editing the text much more pleasant.

CSS, HTML and JavaScript Tools

eCSStender
Extensions built with eCSStender simplify the design process because you can author modern CSS using advanced selectors, properties such as border-radius, or custom font faces and rest assured that your design will work — even in IE6.

CoffeeScript
This is a little programming language that compiles JavaScript while simplifying the code that developers actually have to deal with. It works with current JavaScript libraries and compiles clean code, leaving even comments intact. Once developers familiarize themselves with how CoffeeScript works, they could potentially save themselves a lot of time and headaches with the simplified code.

#grid
#grid is a little tool that inserts a grid onto the Web page. You can hold the grid in place and toggle it between the foreground and background. To display the grid, just press a hot key on your keyboard, and you can set your own short keys to switch views.

Primer CSS
This tiny generator works online and has only one function: it extracts from an HTML page (copying and pasting will do) a framework of classes and IDs that can be used as the foundation of an external style sheet. This can be wonderful if you work by first doing the structure in HTML, and then the forms and colors in the style sheet.

CSS Usage
CSS Coverage is an extension for Firebug which allows you to scan multiple pages of your site to see which CSS rules are actually used in your site. Each time you run a scan, the CSS files that are included in the current page are shown with the number of times the rules has been found applied on your page before it.

JS.Class: Ruby-style JavaScript
JS.Class is a set of tools designed to make it easy to build robust object-oriented programs in JavaScript. It’s based on Ruby, and gives you access to Ruby’s object, module and class systems, some of its reflection and metaprogramming facilities, and a few of the packages from its standard library. It also provides a package manager to help load your applications efficiently.

JS Bin
JS Bin is an application specifically designed to help JavaScript- and CSS-developers to test snippets of code, within some context, and debug the code collaboratively. JS Bin allows you to edit and test JavaScript and HTML (reloading the URL also maintains the state of your code, new tabs doesn’t). Once you’re happy you can save, and send the URL to a peer for review or help. They can then make further changes saving anew if required.

jQuery 1.4.2 Visual Cheat Sheet
jQuery Visual Cheat Sheet is a updated version of the useful jQuery Cheat Sheet. It includes all the reference you will need for jQuery 1.4.2 API.

Turbine
Turbine is a collection of PHP-powered tools that decrease CSS development time and help you avoid headaches. Among other things, it has a simple syntax, automatic packing and gzipping of multiple style files, OOP-like inheritance and templating features as well as a shell for experiments and debugging.

Jo: JavaScript Application Framework for HTML5
Jo embraces JavaScript’s object model and leverages CSS3 to handle as much of the presentation and animation as possible. It also provides a consistent and modular event model between objects and plays nicely with other libraries like PhoneGap.

Sencha: HTML5 Mobile App Framework
Sencha Touch allows you to develop web apps that look and feel native on Apple iOS and Google Android touch screen devices.

Aloha Editor, The HTML5 Editor
Aloha Editor is an advanced browser-based editor that is faster than other editors and provides you with better and richer formatting in real-time in your browser.

JavaScript Regex Syntax Highlighter
Do you want RegexPal-style regex syntax highlighting on your webpages? This library takes care of it for you, so you can spend more time writing regular expressions and less time deciphering them. Currently, JavaScript regexes only are supported.

OpenStack Open Source Cloud Computing Software
The goal of OpenStack is to allow any organization to create and offer cloud computing capabilities using open source software running on standard hardware. OpenStack Compute is software for automatically creating and managing large groups of virtual private servers.

sweet-template
Sweet (Simple WEb front-End Template) is a lightweight JavaScript template with high performance. It’s small, fast, easy to use, and, most important, extensible. It also can be integrated with jQuery.

jQuery Deconstructed
The Deconstructed series is designed to visually and interactively deconstruct the internal code of JavaScript libraries, including jQuery, Prototype and MooTools. It breaks the physical JavaScript into visual blocks that you can easiliy navigate. Each block opens to reveal its internal code. Clickable hyperlinks allow you to follow program flow.

Alloy UI
Alloy is a UI metaframework that provides a consistent and simple API for building web applications across all three levels of the browser: structure, style and behavior.

Google JavaScript Style Guide
This document provides a set of conventions (sometimes arbitrary) that hold the style guidelines used for Google code. It covers general good practices for open-source projects and well-written and well-documented code. It covers a lot of ground, from “use camelCase for variable names” to “never use global variables” to “never use exceptions.”

gleeBox
Gleebox provides a way to navigate web pages via keyboard. For instance, it allows you to hit the ‘G’-key and every link on the page will be highlighted. This application is available as an extension for Firefox and Google Chrome.

shellinabox
Shell In A Box implements a web server that can export arbitrary command line tools to a web based terminal emulator. This emulator is accessible to every browser that supports JavaScript and CSS and does not require any additional browser plugins.

Juicer: a CSS and JavaScript packaging tool
Juicer is a new command line tool that helps by resolving dependencies, merging and compressing files. It can check the syntax, add cache busters to and cycle asset hosts on URLs in CSS files.

Jake: A Build Tool for JavaScript
Jake is a new build tool built entirely in JavaScript that runs on top of the CommonJS. As its name suggests, it is based on the existing and already popular Rake tool and benefits from the same simplicity.

Closure Compiler
The Closure Compiler is a tool for making JavaScript download and run faster. It is a true compiler for JavaScript. Instead of compiling from a source language to machine code, it compiles from JavaScript to better JavaScript. It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what’s left. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls.

Useful Online Tools and Services

ComparePSD (Win only)
This tool lets you compare two Photoshop files side by side and see every little difference. Look for differences by layer or by effect. You get a scaled view of the files, so you can see them next to each other and pick out differences more quickly. ComparePSD is available for Windows only and is free to download and use.

Secure Passwords Generator
The tool lets you enter parameters, including the length of the password, whether to include uppercase and/or lowercase letters or numbers or punctuation and whether to eliminate characters that resemble each other (such as i and l, 1 and I, and o and 0). Then, just select the number of passwords to generate, and it returns a list. It even includes phonetics for each password to make it easier to read out loud (in case you’re giving a password to someone over the phone, for example).

SwatchSpot: Random Color Swatch Generator
This tool creates random color swatches to inspire you. Lock in the colors you like and shuffle away the ones you don’t. Once you’re done, grab the color codes or download your palette.

Yuuguu: Instant screen sharing and web conferencing
This tool provides instant web-conferencing, online meetings and collaboration and enables you to work with your cusomers, partners and colleagues right away, without a single download. The free version allows for 100 minutes per month of web conferencing.

Web Form Recovery Firefox Plugin
Lazarus securely auto-saves all forms as you type, so after a crash or server timeout you can go back to the form, right click, “recover form”, and breathe a sigh of relief.

Which loads faster?
This tool lets you see two websites load side by side in real time. Then it shows how long each took to load and the percentage difference.

Faary
Faary is an online form builder that operates with the help of text lines, and the form is generated as such. The tool creates an HTML form with CSS, which can be downloaded as a ZIP archive.

Scr.im
Scr.im lets you use a shortened URL to give out your email address safely and securely on forums. Just enter your email address on Scr.im and it will give you a link to a page with your email address, with security to prevent bots from viewing it.

Name Checklist
This tool will help you find out if your brand name, username, domain and vanity url are still available online or they are already taken.

Quora – Web Design
Quora is a continually improving collection of questions and answers created, edited, and organized by everyone who uses it. You can follow web design, usability and related discussions and ask your questions as well.

Todo.txt Command Line Interface
If you’ve got a file called todo.txt on your computer right now, this script is for you. You probably don’t want to launch a full-blown text editor every time you need to add an item to your to-do list, or mark one that’s already there as complete. With this simple shell script, you can interact with todo.txt at the command line for quick and easy, Unix-y access.

Note and Point
This gallery highlights beautiful Keynote, PDF and PowerPoint-slides on the Web (mostly Web design-related) which is great for inspiration if you are thinking about creating beautiful and attractive slides for your next presentation.

ManyBooks
This site offers a huge collection of public domain e-books, as well as other newer books that have been released in the public domain or under Creative Commons licenses, in a variety of formats.

Tweetment
This service allows you to design sexy web pages for your tweets.

Browser Cover Generator
This simple tool generates a browser preview of an uploaded image and can add address bar URL, window title, shadow, status bar and various browser skins to the image.

Linkification Firefox Plugin
Linkification Converts text links into genuine, clickable links. To view and set options, you can use the Linkification right-click context menu.

Useful References and Guides

Design Is History
This resource showcases the evolution of design through time. It was created as a teaching tool for young designers just beginning to explore graphic design and as a reference tool for all designers. As a designer it is important to understand where design came from, how it developed, and who shaped its evolution. The more exposure you have to past, current and future design trends, styles and designers, the larger your problem-solving toolkit. The larger your toolkit, the more effective of a designer you can be.

User Interface Style Guides
This page features some useful links to style guides used by large websites, corporations and news agencies (e.g. the BBC Style Guide), including editorial guidelines, quality guidelines and online standards.

Trademarkia
Trademarkia is a free search engine for U.S. federally registered trademarks on the Internet. They provide up to the minute contextual information about the current use of interesting business names, slogans, and logos through pictures, commercials, and conversations from Flickr, Google, Youtube, and Twitter for each U.S. trademark filed with the United States Patent and Trademark Office (USPTO) since the year 1870.

Icon Reference Chart
This chart, created by Jon Hicks, was created to collect the sizes, formats and the related information about icons used on different devices. At the moment it covers browsers, Android, iPad, iPhone, iPhone 4, Linux, Mac OS X and Windows. And you can also download a template for iPhone and iPad icons. Useful.

OpenWith.org
OpenWith is a directory of existing file extensions and free tools to open them. You’ll find a free program for just about everything you would ever need to open, including source code, data files, disc images, spreadsheets and video files.

ScriptSrc.net
This site puts all the latest versions of script tags from the various JavaScript libraries in one place. Whether you use jQuery, swfobject, Chrome Frame, MooTools, Ext JS, YUI, Prototype, Dojo or Scriptaculous, you’ll find the most recent script tags here.

Colours In Cultures Chart
This map shows how colours are perceived in different cultures and nations across the globe.

Guidelines and standards manuals
Handy examples of guidelines and standards manuals used by companies and brands online. Also check Branding & Corporate Identity Design page.

Code Standards and Front-End Development Best Practices
This document outlines de-facto code standards in professional modern front-end development. The primary motivation of the document is code consistency and best practices. By maintaining consistency in coding styles and conventions, we can ease the burden of legacy code maintenance, and mitigate risk of breakage in the future. Nice and useful overview.

Essential Tools You Always have Handy When Fixing a PC Problem?
This forum thread features must-have tools that you should keep loaded on your thumb drive when asked to deal with a family member of friend’s personal computer issue.

Project Management For Dummies
Because of the ever-growing array of huge, complex, and technically challenging projects in today’s world, project management has become a critical skill. This page provides a nice project management cheat sheet that will help you handle your project management assignments, such as confirming a project’s justification, developing project objectives and schedules, and maintaining commitment for a project.

Expression Engine Reference Chart
A quick and useful reference guide for ExpressionEngine users. A PDF-version is available as well.

Computer Hardware Chart
A detailed and handy hardware chart for notebook RAM, desktop RAM, CPU sockets, hard drives, ports, processor card slots, processor card sockets, peripheral cards, desktop card slots and power connectors.

Corporate Identity / Logo Usage Guides
A collection of documents that illustrate how organizations and companies ensure that their branding remains consistent online and in print.

ASCII: The Pronouncation Guide
ASCII stands for American Standard Code for Information Interchange. Computers can only understand numbers, so an ASCII code is the numerical representation of a character such as ‘a’ or ‘@’ or an action of some sort. The non-printing ASCII characters are rarely used for their original purpose. This page features an ASCII character table and includes descriptions of the first 32 non-printing characters and the guide to their pronouncation.

Name Pronunciation Guide
Inogolo is a practical, easy-to-use website devoted to the English pronunciation of the names of people, places, and miscellaneous stuff. The site contains a searchable database of names with both phonetic and audio pronunciations in English.

Usability and User Experience

Hand picked UX related resources
UXMARKZ is a collection of hand picked UX related resources, updated daily. You will find interesting sites, articles, videos, images and slideshows from the field of interaction design, usability, information achitecture, user interface design and other. All submissions are moderated.

UX Myths
This ressource is supposed to help you build your website based on evidence, not false beliefs. UX Myths collects the most frequent user experience misconceptions and explains why they don’t hold true. And you don’t have to take their word for it, the site shows you a lot of research findings and articles by design and usability gurus.

User Interface Design Patterns for Ideas and Inspiration
A user interface design pattern library. It is a collection of Web design patterns and best practices which helps you to find inspiration and design interfaces with great user experience. It is also a user interface gallery full of real world examples of our patterns.

Last Click

How Do I Win Rock Paper Scissors Every Time?
Now, that’s a handy resource: have you ever gotten tired of being crushed by Rock, cut to shreds by Scissors, or smothered by Paper? This graphic has information compiled about Rock, Paper, Scissors (RPS) from the World RPS Society, the masters of Rock, Paper, Scissors, to help you overcome your opponents and understand the strategies needed to win Rock, Paper, Scissors every time.

The Universal Packing List
This tool generates a custom packing list for your journeys. You have to provide some basic information about the journey and a packing list appears immediately.

Ex-blocker
The Ex-blocker is a plugin that hides any information about your ex online. The tool is available as a Firefox and Chrome extension.

Not Beans Again
An online tool that finds a recipe from your ingredients. Enter what you have got in your fridge to the “Ingrediometer” and see if the tool can come up with a recipe for you.

A Coder’s Guide to Coffee
As most software and creative professionals know, coffee is an important technology for boosting mental acuity and maintaining peak on-the-job performance. But did you also know that coffee can be a damn tasty beverage? All you need is the appropriate amount of disrespect for the mainstream coffee industry and a desire to enjoy a better beverage.

Flipboard
Flipboard is a free personalized social magazine for your iPad. It allows you to quickly flip through news, photos and updates your friends are sharing on Facebook and Twitter. The emergence of tools like this is what will make iPad a truly useful and handy device for many people.

Related Posts

You may be interested in the following related posts:

• 50 Powerful Time-Savers For Web Designers
• 50 New Useful CSS Techniques, Tools and Tutorials
• 45 Incredibly Useful Web Design Checklists and Questionnaires

---

© Vitaly Friedman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: Coding, Design, tools, typography, usability, Workflow

Design is constantly changing and moving forward. However, typography is one aspect of design that seems to resist progression. When it comes to typography, there are standards and traditions that have been around for many years. These rules are there for a reason – to make sure that letters and words are legible. But to move forward, sometimes rules have to be broken. So for this post we’ve rounded up 26 free progressive and experimental fonts. These fonts might be pushing the limits of traditional type design, but the results are stunning.

Rounded

Cube 02

Paranoid

Mod Gothic

Ultras

Tozuna

Nano

Slukoni

VAL

Gordala

Quadranta

Metal

Playtime

Sylar Stencil

Sans Serious

Kain Block

LOT

Clutchee

Tribbon

KnucklePuck

Etcetera

Amputa Bangiz

Betlog Square

Slimbo

Days

FILE

We hear about it all the time, people's social profiles are taking over by hackers. It is fairly simply done. Find a way to get people's username and password, login, change their login credentials, and voila. The attacker now has complete control over peoples profiles, and there is nothing they can do about it.

Just a few days ago, the musician Jason Mraz's Twitter account was taken over, and because the attacker changed his password, he could not do anything to stop them - apart from trying to contact Twitter and persuade them that this really was his account, and that someone else was in control of it.

As he wrote (on Facebook): "**IMPORTANT** someone has hacked into Jason's twitter account. Don't believe anything that is tweeted until we have access back into the account!"

Then today, United Airlines lost their Twitter account.

But here is the thing. It is amazingly simple for app developers to prevent this sort of thing. That is. You cannot prevent people from losing their username and password, but you can prevent that in doing so, they also lose control of their profile.

Here is what you do:

When anyone tries to change either the username, password or email address, send an email to the existing email address with the following message.

This way, it would be impossible for an attacker to take over your account, because you would always be able to change it back to you. Even if an attacker changed your password, email, or username, it could all be reversed by a simple following the link. And because this link would always be sent to the email on file before it was changed, you would always be in control.

It is really that simple - one email, with an "undo" link.

...something that every web app should implement by default.

- Read Comments

The OV-chipkaart is the new ticket system for Dutch public transport, using RFID cards, similar to Hong Kong's MTR (metro) octopus card.

In the past year several regional transport organizations (bus, tram, subway) as well as the Dutch railways have introduced the new system. The old ticket system for bus, tram and subways (the strippenkaart) will - and in some cases has been - phased out. So in some cities, the only way to get on public transport is the OV-chipkaart, and in the future it will also be the only alternative on the trains. You can choose between an anonymous rechargeable card, an anonymous single use card, and you can activate the chip in your reduced fare card.

For those of you that have been to Hong Kong, and seen the MTR's version of this at work, may think what the issue is here. Well, the issue is that the OV-chipkaart as its implemented now has some serious flaws from the user perspective. Consider it an interesting exercise in how not to create acceptance for a new system.

Single fare ticket more expensive
On the trams and buses you can only buy cards that allow you to travel for an hour, at a price of 2,60 Euro. Previously, going from my house to the railway station with a ticket I bought on the tram (already at a premium price) was 1,60 Euro. This is especially annoying for tourists. The argument from the transport agencies is: "Yes, but you can travel on it for a whole hour." Right, I wanted to quickly get from one place to the next to... get on another tram and travel for an hour?
The transport agencies initially pledged that the average fare would not be higher as a consequence of the introduction of the OV chipkaart, but in a number of cities an average increase of 5 to 10% was found. Politicians now are considering to wait with phasing out the old ticket system before this is fixed.


The price of the single fare ticket would not have been such a problem if there would have been the option to charge your card at bus and tram stops. Which is not there. So if your personalized or anonymous card is empty, the only alternative you have is to buy the incredibly expensive ticket on the tram or bus.

Activating a personalized card: absolute horror
A lot of people in The Netherlands have the aforementioned reduced fare card, as it gives a 40% discount on train travel outside of morning rush hours. This card has to be activated to be used as an OV-chipkaart. To do so you must make an account at the OV-chipkaart website. They chose to word activating the card as 'buying a product in the webshop'. You 'buy' the product 'activate my chipcard'. But then the card is not yet active. You have to 'collect your product' at a ticketing machine or service desk. A choice you have to make on the website. The whole procedure is just wrought with systems-thinking. Or an attempt at thinking from the user perspective gone horribly wrong.
Most problematic, the website is the only way to activate your card, and the procedure is far from clear. I've spoken to several people whose (somewhat elderly) parents no longer travel on buses and trams, as they found buying and charging an anonymous card too complicated. We're talking about a user group of which some find taking money from an ATM machine uncomfortable, and we're asking them to virtually transfer money from their account to a card. I think that very few of them will be activating their personalized OV-chipkaart if the system remains as is. What we in politically correct terms would call 'technology averse' people should be able to simply go to a service desk and get help to activate the card. Especially because this is a group of people for whom public transport can be the only way of getting around.

Activating automatic credit refill
If you have an activated personalized card, you can automatically transfer money from your bank account to your OV-chipkaart if you buy the 'automatic refill product' at the aforementioned website. I had to 'buy' this product three times before it finally worked. And both previous times I did receive a confirmation that 'my product' was ready to pick up. Went to the station to collect my product: no product.

Train travel: forgetting to check out
At this time, for train travel you can still choose between the OV-chipkaart and regular tickets. This phasing-in approach has the disadvantage that there are no turnstiles at the entrance and exit of the station, as people with regular tickets need to be able to enter and exit as well. And here's the catch: in Hong Kong you cannot exit the station without swiping your card. In the Netherlands you can. And if you exit without checking out you will be charged a maximum of 20 Euro. Of course, on buses and trams there are no turnstiles as well, but there the maximum amount you will be charged is 4 euro. To remind people to check out the Railways have added all kinds of signs and at regular intervals announcements are made on the train and station. The thing is: if the penalty is 20 euro, you should not be able to exit the station without checking out. To quote Krug: don't make me think.

Same device for checking in as for checking out
There are two types of devices for checking in and out. There's one where you can either check in or out. And there are devices, on trams, buses and some train stations, where you can both check in and out (picture on the right). Now, this wouldn't have been much of a problem, but...
To compensate for the problem of having no turnstiles and people forgetting to check out, the railways are lenient on the time between check-in and check-out. If I forget to check out in the morning, and then hold my card at a check-in/out pole in the evening, it will check me out. However, because the device at my station is both used to check people in and out, if I've just checked out, I cannot check in again, which I need to do to travel back home. No alternative in that case than to buy regular ticket.

Student OV-chipkaart
Students in Netherlands get a card that allows them free public transport either during the week or on weekends. Since this is a subscription and there are no turnstiles at the station, one would assume students would not need to check in. They do. And nobody really knows why. My best guess is that its for the benefit of travel statistics.
Got feedback that indeed in the beginning it was unclear whether students should check in or not. By now it is clear, or at least to some extent: students can check in, but do not need to.

All the same system, but separate
Because the OV-chipkaart is a single system, but the transport companies are separate, you need to check in and out on each vehicle you travel. You cannot simply check in on the bus, then travel by train, switch to the subway, and then check out. However, the architecture of for railway stations, such as station Bijlmer is not suited to accomodate this. At station Bijlmer people don't check out when they exit the metro or train, or exit the platform, but they check out when they exit the station hall. And by that time metro and train passengers have mixed so they cannot check out via the same devices, because the system needs to know whether you are checking out of the metro or out of the train. So they decided to dedicate one exit of the station for people checking out of the metro, and the other exit for people checking out of the train. Which, as expected, was completely unclear to travelers, who could not figure out why this device, that looked exactly the same would not check them out. Once again, this problem was 'fixed' with signs.


RFID signal collision
The RFID chip that was chosen is susceptible to interference. I have an another RFID card in my wallet, that I need to enter the building where I work, and when I have both cards in my wallet, and then hold it up to the RFID readers, neither can I enter at work nor check in in train or tram. And I think that in the near future the amount of RFID cards in our wallets will only increase. Seems like a poor protocol to me, but maybe they just chose a cheap RFID chip.

Checking tickets
It takes the train staff about 3 times as long to check your OV-chipcard with a PDA than it takes them to look at a regular card. On the bright side: once the turnstiles are installed at the stations, the need to check the tickets of all the passengers will be less, because you simply cannot enter the station without a checking in.
Additionally, a conductor checking my chip-card on a long train ride (in the Netherlands that's about 2,5 hours) confessed that the battery time of the device he had to use to check the cards was not sufficient to last all the way back and forth. At some point on the way back the thing would simply shut down. And this was at a time when only a few people were using chip-cards on the train...

You have your own gripes with the OV-chipkaart or similar systems? Feel free to share them in the comments...

[Top photo:Ramatheron, Single fare ticket:Alper, Sign at station:Sint Smeding, Check in/out pole:Battlefan, GVB/NS card pole:Hilderik]

When it comes to web design, white is always a symbol of elegance, minimalism and style. You can use white to create space, to keep it simple, to drive the attention to other elements at your page and also to maintain your site with a clean and minimal look. Several websites use white as their main color, and this is what we will show here. You probably have seen some of these sites before, but they are such a great example that I had to mention them again. And in case you want to share a “clean white website”, the comments are open!

Made by Sofa

iA

Fell Swoop

Sherpa.

72 Rivington Street

Zander Martineau

televisionkillsme

Cynosura

Ragged Edge Design

Medium

squareFACTOR

chrissloan.info

Fourth Floor Interactive

Gustavo Ureña

Feelwire

Banjax Web Design

we make it live

Cameron Queen

Mark Boulton Design

Tisha Creative

Clogg Solutions

pixelumbrella

Christa Robillard

Tandem Film Production

Vertigo Visual

attitude design

plumd.com

n’uova design lab

big youth

Sitepark

checkout

Ui Tuneup

zenhabits

nestliving

About the Author

Gisele Muller is someone that recently discovered a new career online. A person that really likes technology, design, photography and creativity. An eternal geek wannabe, tech fan and a communication lover! Current location: Porto Alegre, RS – Brazil. Twitter: @gismullr

Are you tired of living in public, sick of all the privacy theater the social networks are putting on, and just want to end it all online? Now you can wipe the slate clean with the Web 2.0 Suicide Machine. (Warning: This will really delete your online presence and is irrevocable). Just put in your credentials for Facebook, MySpace, Twitter, or LinkedIn and it will delete all your friends and messages, and change your username, password, and photo so that you cannot log back in.

The site is actually run by Moddr, a New Media Lab in Rotterdam, which execute the underlying scripts which erase your accounts. The Web 2.0 Suicide Machine is a digital Dr. Kevorkian. On Facebook, for instance, it removes all your friends one by one, removes your groups and joins you to its own “Social Network Suiciders,”and lets you leave some last words. So far 321 people have used the site to commit Facebook suicide. On Twitter, it deletes all of your Tweets, and removes all the people you follow and your followers. It doesn’t actually delete these accounts, it just puts them to rest.

The Web 2.0 Suicide Machine runs a python script which launches a browser session and automates the process of disconnecting from these social networks (here is a video showing how this works with Twitter). You can even watch the virtual suicide in progress via a Flash app which shows it as a remote desktop session. You can watch your online life pass away one message at a time. Taking over somebody else’s account via an automated script, even with permission, may very well be against the terms of service of these social networks.

From the FAQs:

If I start killing my 2.0-self, can I stop the process?
No!

If I start killing my 2.0-self, can YOU stop the process?
No!

What shall I do after I’ve killed myself with the web2.0 suicide machine?
Try calling some friends, take a walk in a park or buy a bottle of wine and start enjoying your real life again. Some Social Suiciders reported that their lives has improved by an approximate average of 25%. Don’t worry, if you feel empty right after you committed suicide. This is a normal reaction which will slowly fade away within the first 24-72 hours.

The light-hearted video below explains the benefits of committing Web 2.0 Suicide and disconnecting from “so many people you don’t really care about.” Unplugging from your social life online will leave you more time for your real life, which you’ve probably been neglecting. With the Web 2.0 Suicide Machine, you can “sign out forever.” Not that we are recommending you do this in any way. But you may enjoy the video.

web 2.0 suicide machine promotion from moddr_ on Vimeo.

Crunch Network: CrunchBoard because it’s time for you to find a new Job2.0

We’re just a week away from the annual gadget-lover’s dream event, otherwise known as CES. One company that everyone will have their eyes on this year is Mophie.

Mophie, a popular retailer of Apple iPhone and iPod accessories, is set to debut their iPhone credit card reader — said to be named “Credit Card reader” — and complimentary processing application. This will allow merchants to accept credit card payments by swiping the card through a special iPhone case. While details around the device add-on are slim, interest is already high.

The buzz building around Mophie, the palpable excitement and interest stimulated by Square, and an increasingly competitive mobile payment system market means that 2010 will be the year that consumers will buy and sell from their mobile phones.

---

Proof of Concept

---

If you purchased anything at Apple retail stores this holiday season, then you were probably rung up by an employee using Apple’s new custom-designed iPod Touch with a black shell serving as a credit card reader.

The combo software hardware solution, which replaced the hand-held Windows CE devices they were previously using, serves as a testament to both the practicality and feasibility of processing payments en masse.

We got our first detailed look at the Apple’s new system via AppleInsider, who shared detailed descriptions and images of both the software and hardware components comprising Apple’s credit card reader.

---

The Contenders

---

Square

---

Square, from Twitter co-creator Jack Dorsey, was first to make a big media splash in the mobile credit card reader sector. Square’s answer to mobile credit card payments is a platform agnostic hardware device that plugs-in to phones via audio jacks.

The company has currently only developed software for the iPhone, but that’s expected to change in the coming months. Square also plans to give their square-shapped reader away for free, charge a minimal fee for the app, and support customer loyalty programs.

---

Mophie

---

The details around Mophie’s Credit Card Reader are minimal at the moment, but their hardware appears to be an iPhone-only shell similar in style to the Juice Pack Air (which retails for $79.95). We can safely assume then that Mophie’s hardware solution will be a much pricier alternative to Square. As for what the software component will look like or cost, we can only speculate at this point.

---

VeriFone / PAYware

---

Another big player in the space this year will be VeriFone. The company has their only mobile credit card processing system called PAYware Mobile and it’s also one part hardware, one part software application.

The first iteration of PAYware Mobile is for iPhone and iPod Touch (with versions being developed for Windows Mobile, BlackBerry and Android). The iPhone hardware device plugs into the dock connector and hugs the bottom half of the phone, with the credit card swipe on the side.

The Verifone solution isn’t exactly priced for Square’s everyman casual seller. The all-in-one package deal includes a stylus for signatures and will cost $49 to activate, $15 p/mo, and 17 cents p/transcation (according to the Los Angeles Times) with a 2 year contract. Of course, you’re also paying for the Verifone name and the supposed extra security that goes along with the it. You can pre-order PAYware Mobile now, but its expected release is slated for January 15, 2010.

As more companies enter the space you can expect security and pricing to be the two primary factors that influence consumer and small business decisions around the solution they choose.

---

Reviews: Android, Twitter

Tags: Mobile 2.0, mophie, PAYware Mobile, Square, trending, VeriFone

Why isn’t this a permanent fixture of the iPhone?

Thanks to the iPhone’s camera, Walk n Type lets you view exactly what’s in front of you as you walk,  with the text your typing layered on top of it. Clearly not meant for driving, you can of course use it when your walking, sat down or I guess watching a movie…?

Once you’ve finished writing whatever it is you might be writing (email, text, tweet), you can copy and paste that into the app of your choice. It works with anything that accepts copy and paste.

Genius. Now lets get Apple onto this asap.

Video demo below, more info here and the app is available for $0.99 here.

(Remember this is only available for the iPhone, not the iPod Touch as the Touch doesn’t have a camera)

Thanks Chris Messina and Go2Girl

So may a thousand actions, once afoot,
End in one purpose, and be all well borne
Without defeat.

(This is the seventh post in a series called
"Being online: identity, anonymity, and all things in between.")

Despite all the variations played on the theme of personal identities
in the previous sections, remember that identity is a group construct,
not an individual one. If we never took part in groups, our personal
identities would scarcely matter.

We're all members of certain groups without our choice: the particular
race, social class, or gender that other people assign us to. When a
woman posts a seductive picture online, she is helping to shape the
way men and other women view womanhood in general. The same goes when
she posts a demonstration of herself expertly fixing a computer or
operating a super-collider. And the image every member of a racial
minority puts up of himself or his cohorts, like it or not, determines
the way all members of that race are judged.

It seems an invariant of human culture to exploit the image of an
individual in order to leave an impression about the entire group to
which he or she belongs. It has been done by the arts and mass media
ever since they were invented, but the Internet gives millions of
ordinary people the chance to inflect the process. This diffusion of
influence was recognized by Time Magazine in 2006 when it

designated "you" as its Person of the Year.

Going by Goffman's extremely broad definition of "framing"--any
assumption or shared knowledge that lies behind a visible act is part
of the frame--identity might be the most important frame of all, and
the locus around which other frames revolve. Thus, my identity as an
English-speaker and US native frames the starting point of this
series from the perspective of a world technological and cultural
center.

Others, though, may come to the Internet with an identity impaired by
its very use. For instance, they may have to sacrifice their
languages, or at least the character sets they traditionally use, in
order to communicate online in a cost-effective way.

As Lisa Nakamura points out in her book Digitizing Race: Visual
Cultures of the Internet (University of Minnesota Press, 2008),
individuals can expand or criticize conventional images of women,
Asians, Muslims, and others by reusing images and mashing them up in
challenging ways. Nakamura even suggests that the typical slicing and
recombination of digital images reflects the way people create their
identities from fragments of older traditions, which in turn have been
shattered by the economics and culture of modern global change.

Technology also groups us. Are we the first to jump on a new medium
such as Voice over IP or Google Wave? Just as--to cite Giddens--we
express identity through lifestyle choices such as vegetarianism or
living in a downtown apartment instead of a house in the suburbs, we
express identity through the devices we buy and the Internet services
we use. And other people make assumptions about our identity based on
these things.

Let's turn now to groups at a more intimate level. Every online forum
has the potential to be a small community--and even a small
government, with rules backed up by unique punishments--where people
train each other to carry out their identities in various ways.

Groups must be explicit and conscious of group identity. Online media
rarely provide chances for the equivalent of sitting at a bar with
grizzled veterans and hearing their stories. That is why groups often
post rules (check out Wikipedia's, which are complicated enough to
call for an entire wiki of their own) to deal with churn and the lack
of opportunities to pass on norms informally.

This article began with the hope of understanding the current state of
the art in online group formation: social networking. The reason
social networking sites hold promise is that they augment the
individual, an echo of Douglas Engelbart's goal to augment personal
achievement through the invention of the mouse and multimedia
networking in the 1960s. In a 2004 article
(PDF),
anthropologist danah michele boyd made the observation--or perhaps just
reported a subject's observation--that these networks try to represent
each person's identity as the set of connections he or she has. At
Friendster, at least (where people look up each others' friends for
potential dates), the networks of friends become the main show. The
same criticism could be made of LinkedIn, where the chief goal is
career-building rather than dating.

Perhaps adding relationships to our definition of identity can
humanize the concept, as suggested by
Cynthia Kurtz.
I explained the importance of sharing information with "friends of
friends" in a comment added to an

earlier section of this article.
But when viewed in the worst light, Friendster and LinkedIn cheapen
your identity to the connections you can offer other people.

Just as rudimentary digital cameras--especially when embedded in
mobile devices--have confirmed the old notion that a picture is worth
a thousand words, the connecting power of social networks will be
multiplied a thousandfold if facial recognition improves to the point
where it can automatically disseminate information about where we were
and whom we met. If automated crawling tools could identify faces in
millions of photos taken at parties, conferences, banquets, and even
public places, and then combine the information to determine who knows
whom, the amount of information that would become publicly available
about our habits and associations would be staggering.

For instance, imagine if the recently announced service for photo
recognition, Google
Goggles, evolves to the point where it can match faces against
faces in other photos. And then imagine that Google provides Goggles
as an API for use with social networks where people tag photos with
names. A single tag by a cousin on your photo at a party could lead to
your being associated with everybody else in all other photos of you
posted online. These developments, while not imminent, are plausible
in the light of past advances in the technologies.

Social networks create a new personal information economy. We
already have such an economy in real-life's customer reward cards: we
give up valuable information about our long-term purchasing habits in
exchange for discounts. Some business experts suggest a similar
explicit arrangement for the Internet. Regulations would prohibit the
retention of information unrelated to a sale, but allow retailers to
offer discounts in exchange for the right to retain certain types of
information. This would make privacy a class issue, because the
affluent would be most likely to forgo the bribe and withhold their
information. And because the affluent are the biggest spenders,
businesses are unlikely to find it worth their while to support this
compromise.

Everyone on social networks is engaging in the new personal
information economy. We choose to post our favorite movies in order to
meet fans and learn about new movies we'd like. And we reveal the
colleges we attended so we can meet potential business partners from
those institutions. We even post jokes and casual observations to earn
people's admiration. While we're all having fun, every nugget we
release is subjected first, consciously or unconsciously, to a key
question: will we get some benefit from the social network
commensurate with the value of the information we are about to give
our contacts?

This view of social network as economy provides a partial answer to
the questions posed at the very start of this series:

Should we post our age and marital status? Should we make our profile
private or public? Should we reveal that we're gay?...

The answer is that each of us is responsible for assessing the value
of posting at every moment, taking into consideration the tone of the
network, how many people are watching our postings, what they can
offer us, and more.

The economy extends to sending nude photographs of yourself to current
or would-be lovers. A recent

report from the Pew Research Center
says no less:

"Sexually suggestive images sent to the privacy of the phone have
become a form of relationship currency."
Exhibitionists don't seem to realize that their photos are likely to
travel far beyond the person to whom they're entrusted--a bitter
truth that, once admitted, would certainly alter the senders' economic
calculations.

While filtering our contributions to the network, we also filter those
who are entitled to receive them--and here the economy is out of
balance. Rampant are the complaints about receiving connection
requests you don't want from old boyfriends or the guys who smoked dope
with you in high school. Social networking urgently needs to establish
a culture in which it's OK to say that you're filtering your
connections. (A couple years ago I rejected a connection and got a
death threat in return. Looking at the person's profile, I determined
that it was a joke--but I still think twice about visiting the city
where he lives.)

Although connections on social networks are definitive, no one asks
about the identity of the social network itself (except shareholders
hoping to increase its popularity and critics trying to change its
policies). But some online communities head in a very different
direction. Law professor Beth Simone Noveck, in an essay titled

A democracy of groups,
points out that self-organized groups can mold their own unique identities
in order to effect collective action.

Noveck's optimism regarding self-organizing groups led to the current
experiments with online democracy pursued by the Obama administration,
where Noveck was appointed to both the transitional team and a Deputy
CTO position to start implementation of the Open Government initiative
that Obama

released on his first day in office.

In Noveck's theory, a group's effectiveness depends on each member's
success is gelling his or her individual identity. "Through visual and
graphical representation, this new technology enables people to see
themselves and others and to perceive the role they have
assumed. Appearing as a defined person--whether by name or in an
embodied avatar--makes it easier to sense oneself as part of a group
and, arguably, will facilitate the inculcation of the social norms at
the heart of a group's culture."

These are intriguing claims, but it's odd that Noveck does not
consider the ability to import external markers of identity into the
group space, or to check members' assertions of identity against these
external markers. For instance, what if visitors to Second Life could
receive a token from her law school (through the OAuth protocol, say)
that validates her as a professor?

One way to tie individuals more tightly together in online groups, as
explained in her article, is to make online forums feel more like
real-world places so that people can develop "forms of attachment" to
the forums in ways that they feel emotionally attached to their town
square, college, or other local "great good place" (to borrow the name
of a popular book by Ray Oldenburg). As Noveck writes, "The new
generation of technology is reintroducing the concept of space and
place online." As an example she cites Second Life, which was growing
rapidly in popularity at the time. Effectively, she is granting groups
identities, just like individuals, and recommending that a group
foment stronger ties among its members by creating a stronger group
identity.

No one in the Obama administration has picked up the most aggressive
suggestion in A democracy of groups, that the law recognize
groups as entities--"new forms of collective legal personhood"--in a
similar manner to how it now recognizes corporations. But Vermont has
taken a step in that direction by changing its laws to allow virtual
corporations, and ultimately we may be dealing with group identity
online as much as with individual identity.

The posts in "Being online: identity, anonymity, and all things in between" are:

Introduction



Being online: Your identity in real life--what people know


Your identity online: getting down to basics


Your identity to advertisers: it's not all about you


What you say about yourself, or selves


Forged identities and non-identities

Group identities and social network identities (this post)

Conclusion: identity narratives

Social media is growing fast, but how fast? Using Tweepsearch to search bios on Twitter profiles, blogger B. L. Ochman found there were 4,487 social media experts in May 2009. Today there are 15,740.

The stats, which include variations like social media- “guru”, “ninja” and “superstar,” show that “marketer” is by far the most-used name.

There’s amusement to be found in the numbers, too: The blog Broadstuff points out that “This represents a 3.5x increase every six months. Projecting this growth forward means that there will be nearly 30m social media experts etc on Twitter by this time in 2012.”

That humorous observation raises a legitimate point: A growing industry needs trust and reputation. With social media growing so rapidly and no certification yet established, how do we go about establishing reputation?

Without it, such stats provide fodder for those who would say that social media — which is touching every industry from entertainment to air travel — is simply hot air.

---

Reviews: Twitter

Tags: social media, social media experts, trending, twitter

I’ve been pretty pumped about Swype’s ultra-speedy alternative typing solution for touchscreen devices ever since it first debuted at TechCrunch50 2008. My excitement only grew when it finally made its way to a handset, the Omnia II, just last month – but as I’m not the biggest fan of the OS that powers that device, my thumbs were left twiddling until an Android port was released.

Earlier this morning, I got my hands-on a pre-release copy of just that: Swype for Android. So how is it? In a word: Great.

If you’re unfamiliar with Swype, here’s how it works: rather than typing words by tapping letter-by-letter, you swipe (swipe, Swype – Get it?) your finger (or a stylus) through the letters of each word. If you wanted to spell “DOG”, for example, you’d put your thumb down on D, slide it over to O, down to G, and then release. You don’t have to be perfectly accurate – in fact, you can be pretty sloppy and Swype will still figure out what you mean. If it’s not positive which word you meant, it’ll present a list of possible options. After a very very slight learning curve, Swype promises to be considerably faster than the standard hunt-and-peck keyboard input method.

Notes & Impressions:

• I tested Swype on the Verizon Droid Eris. As far as I can tell, Swype is working properly on any Android-device with a WVGA (800×480 or 854×480), HVGA (480×320), or QVGA (320×480) resolution. This pretty much covers the gamut of Android smart phones.
• After just a few minutes of get accustomed to Swype, I’m already typing a bit faster than I am on the standard Android keyboard. With a bit of practice, I could probably double my speed.
• I’m surprised how sloppy I can be with my tracing before Swype starts tripping up. Once you start blasting away at it, it’s almost magical.
• Works in both portrait and landscape mode
• Currently appears to support US English, French, German, Italian, Russian, and Spanish
• Under options, you can pick your language, toggle Auto-spacing (inserts spaces after each word), Word prediction, Tip indicator (Flashes a tip indicator on the keyboard when it has hints for you), Disable sounds, set how long the Swype path is shown, tweak the Speed vs Accuracy settings (defaults work for me), and run through the Swype tutorial
• It doesn’t know curse words out of the box. Duck you! However..
• Adding words is simple: You just type them manually, letter by letter. I taught it every curse word I know in a minute or two.
• Switching back and forth between Swype and the standard keyboard is a matter of holding your thumb on any text input box, hitting “Select Input Method”, and picking whichever keyboard you prefer.
• Swype appears to work just fine in every Android app I’ve got on this device. One feature, however, requires apps to be modified for compatibility: double-tap correction. In any Swype-tailored app, you can double tap any word you’ve typed to be presented with a list of alternatives. All apps, Swype-enabled or not, will present a list of alternatives immediately after a questionable word is typed – you just can’t double tap them after the fact.

Overall, Swype for Android seems like an absolutely rock solid alternative to the standard Android keyboard. For devices without physical keyboards (like the HTC Magic, Droid Eris, Samsung Behold, etc.), this really ought to be something that’s included out-of-the-box.

Crunch Network: TechCrunch obsessively profiling and reviewing new Internet products and companies

Via9GAG.

What does Steve Jobs really do for Apple?
I had a recent conversation on Apple’s incredible design culture and what it would take to create that in a startup. In many ways, it seems like an insurmountably difficult challenge to play the role of Steve Jobs, with his god-like sense of product aesthetics and interactions.

And yet, Apple has hundreds of products and experiences – hardware, software, HR materials, commercials, etc. Steve Jobs certainly doesn’t have time to work on the design of every Apple product, and of course has 35,000 employees to manage. So what does Steve Jobs really do, to create the amazing design culture at Apple?

And more importantly, can a startup hope to even start to capture the same kind of culture?

Well, let me give you my best guess

IDEO’s product framework for Desirability, Feasibility, and Viability
First, let’s take a quick detour and talk about IDEO’s perspective on new product development – this is documented as part of their 100+ PDF on human centered design, but also recounted to me by my patient girlfriend who works there.

The idea is that all products ultimately come from an epic struggle between three perspectives: Desirability, Feasibility, and Viability. IDEO focuses on new products from the desirability side, which means they think about how to make sexy products with clear value propositions, and think technology and business goals flow from that. Most of their Fortune 500 clients do not act this way, of course, which is why they have to hire IDEO.

Here’s the diagram included in their HCD toolkit:

The way this was retold to me is that these factors map into functional parts of a business:

• Viability = Business focus (marketing, finance)
• Feasibility = Engineering focus (technologies, agile process, etc.)
• Desirability = Design focus (customers, aesthetics, etc.)

Business-focused product perspective: Viability
For business-oriented products, the focus might be on any of the following:

• “hot markets”
• making money
• funding potential
• distribution
• metrics

The idea there is that you get to a product via one of these first-order items. A business-oriented entrepreneur might identify a market, then try to come up with a product within the market – for example, “wow, Zynga is making $250M/year, and fish games are big. I should come up with a social gaming product too.”

I would also argue that “corporate” thinking (including MBAs and biz plan competitions) fundamentally revolve around this approach – the most important thing becomes the analytical discussion around the business, rather than the core user experience itself. Financial metrics and market sizes become the dominating point of discussion – I would argue also that most venture capitalists fall into this bucket.

The big “religions” in this perspective are frameworks like Built to Last, Crossing the Chasm, Customer Development, Blue Ocean Strategy, even Efficient Market Hypothesis. You might also count Six Sigma, all the stuff in McKinsey quarterlies, etc.

Engineering-focused product perspective: Feasibility
For technology-oriented products, the focus might be on the following:

• programming language and development stack
• cool technologies or libraries
• engineering processes (agile or otherwise)

For people who use this as a first-order filter, you might end up with a line of thinking like, “BitTorrent is really cool, how do we build a business around it?”

I would also put engineering processes like agile into this, because that can easily become a first-order item in how to build a product as well. Agile won’t work for every team, for every product, in every situation, and yet it’s viewed as an all-purpose hammer – does that really make sense?

The big “religions” in this perspective are frameworks are agile, scrum, open source, etc. I might also count the “ecosystems” like Rails as a unique culture with its own set of beliefs and conventions. Frameworks like “Lean Startups” ultimately combine both Business and Engineering goals, via Customer Development plus Agile.

Design-focused product perspective: Desirability
For design-focused products, the focus might be on:

• context, culture, and goals
• customer goals and product experience
• design aesthetics and interactions

The first-order filter in this case might be “Sick people go to hospitals and have a terrible experience – how do we improve that?” The tools employed at this initial stage might include user research, development of personas and user goals, and rapid prototyping to explore many product concepts.

The big “religions” here are led by Apple and their aesthetics and standards. And of course folks like IDEO and their “design thinking” ideas.

How business and engineering goals encroach on the desirability of a product
Reading through the above, perhaps you have identified yourself as prioritizing one versus the other. And in general, the prioritization of the three different goals drives what kinds of product experiences you can build.

From the perspective of making a sexy, highly desirable product, you’ll find lots of objections from business or engineering:

• “spending money on visual design is too expensive”
• “polishing a product will make the process too slow”
• “this product is boring to implement”
• “can you redesign this product so we can build it in 1 week sprints?”
• “this target user is great, but we want the product to be more powerful and support more audiences”
• “but Zynga doesn’t do this, can you just copy them?”
• “why build so many prototypes that get thrown away? That’s costly and slow”
• “if you added X to this product, it would put us into strategic market Y”
• etc.

How do you handle questions like the above?

All of them are great questions, and of course the right answer means you have to find a balance in the approach. But what is the expense towards the core of your product experience?

Back to Steve Jobs – what does he really do?
Long story short, my hypothesis is that Steve Jobs is one of the rare CEOs who is very focused on product desirability. In battles with the business and technology goals, desirability will almost always win out.

So his role isn’t that of a designer, but rather Chief Design Advocate. This means:

• he makes it clear that products should be “insanely great”
• he recruits a top design team, and protects them from competing goals
• he is willing to spend money, adjust technology processes, all for the goal of highly desirable products
• he convinces financial analysts, industry pundits, etc. that product design is very important

To me, the amazing part about this is: Any company can do it.

Maybe not as good as Jobs, but they can decide to make it a priority – but few companies do. With the pressure of quarterly earnings, what competitors are doing, and employee aspirational desires, the focus moves off of killer experiences for customers – that’s no good.

If the above is true, then any of us can be the Steve Jobs of our team. Start by prioritizing design and desirability, and place it on a better footing relative to engineering and business goals. Learn the tools, develop your own religion, and start building great product experiences.

It almost sounds so easy!

Want more?
If you liked this post, please subscribe or follow me on Twitter. You can also find more essays here.

Are you interested designing or developing your own iPhone Application or Palm Pre Application? Teehan+Lax has put together iPhone GUI PSD and Palm Pre GUI PSD to help designers pitch and develop polished concepts using a tool their pretty familiar with, Photoshop. The elements are built with vectors for easy editing and scaling.

iPhone GUI PSD: http://www.teehanlax.com/blog/2009/06/18/iphone-gui-psd-30/
Palm Pre GUI PSD: http://www.teehanlax.com/blog/2009/07/08/palm-pre-gui-psd/

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

The navigation might be the single most important aspect of a web design’s usability. Without a navigation, you would be stuck on the home page for a very long time. I believe a navigation or menu must be easy to use, but this doesn’t mean it has to be boring. In fact, it helps to add a little flair to your navigation. It entices visitors to click and hang around your site a little longer. Here are thirty examples of beautifully designed web design navigation for your inspiration.

Billy Tamplin

Burciaga

The Swish Life

Mission Bicycle Company

Typejockeys

Red Velvet Art

MetaLab

Authentic Jobs

Icon Dock

Morphix Design Studio

Sushi & Robots

Utah.travel

Robert Alan

Hull Digital Live 09

NOSOTROS

Artua Design Studios

Internet Dreams

Strutta

Pirata London

Tapbots

Weightshift

Guifx

Owltastic

inkd

Bohemian Coding

Think Orange

Culinary Culture

Light CMS

Toggle

atebits

Latest project by Kim Asendorf that has been developing over time if you have been following his flickr, is a visual exploration and visualization of spam collected ever since 2006 in his ongoing Spam Catalog project.

Graphically kept as simple as possible, Spam Visualization explores how the visualization diagrams can commute between information and aesthetic. Included visualizations are; quantityGrid, wordScore, toplevelCircle, ipQuadrangle, timeTable and BasicShare.

You can explore them all now by visiting spamvisualization.net

• Continuity [Flash, Games]
• Flickr Clock [Flash]
• Blow Up [Flash]
• Commentry [Flash]
• Personas [Flash]
• Joy Division LP Cover Visualized [Flash]

Tumblr Mosaic Viewer allows you to view any Tumblr blog as image thumbs in two varying sizes, 100 and 250 pixels. Whether this be your favourite tumblr blogs or you would like to explore the directory, Tumblr Mosaic Viewer is a great way to view tumblr.

See CAN’s thisthatandwhatnot on Tumblr Mosaic Viewer or for more awesome Tumblr sites see our #tumblrfollow on Twitter.

(via @kimasendorf)

• 3D Waveform [Javascript]
• Íonz / Digital Persona [WebApp, Flash]
• Boks [Air]
• Aggregate your online activity using Tumblr [Tutorial]
• Project Cybersyn [Reference]
• Ghostwriter [vvvv, Inspiration]

Ever wonder what happens when you take a simple idea and glob on features for a few years? You get Facebook and YouTube, two great products that have become mired in excess.

Facebook did something about it first, by introducing Facebook Lite, which was such an upgrade of the Facebook experience, that it single-handedly saved Facebook for me. I use FB again, not for FailVille, but for actual friend to friend communication.

Crazy talk, I know.

But this movement towards lighter, faster design that cuts to the core of the product has not been lost on Google, with its current rush towards speed as a goal. Today, they have brought YouTube Feather, a redesign of YouTube that seems to have borrowed the FB Lite design ethic hook, line, and sinker.

You can opt in to Feather here. If you just want to take a peek, look at this:

I am very impressed by the simplicity of the page: search, video, interaction, who and what, and more videos to see. That is all I really want on YouTube, anyway. Also, in my testing I did not receive a single advertisement, so those might be turned off at the moment. Cross your fingers that this sticks.

I want to underscore a larger trend here, that I hope continues. In the last few years we have built 1000 services that integrate into each other, creating a mashup of everything, all the time. Some of it is useful, but often it seems to impede the product experience.

By retreating a bit, and taking a second look at what the product actually does, we can speed up the websites use, and save time digging to find the functionality. Facebook Lite and YouTube Feather are both good representations of the abstract vision of both products, I hope that we see more of this.

Finding the right domain name is an important step in creating a successful website. Luckily there are tools out there to help you in this process by not only helping you find available domain names, but also helping you in the creative aspect by giving you suggestions. Here are 10 of these tools to help you find that perfect domain name.

Domize

Domize is a ajax powered domain name search engine. Domize will check whether unavailable domain names can be bought on the secondary market or whether they’re soon expiring. Most incredibly, Domize runs these additional checks in next to no time, meaning you’re spending less time waiting for page reloads or starting at spinning icons and more time finding your perfect domain name.

dnScoop

dnScoop.com attempts to estimate a value for an established website or a domain name by using factors such as: links pointing to the domain, popularity of the domain, age of the domain, and pagerank of the domain.

Ajax Whois

Ajax Whois is a comprehensive and easy to use service for finding available domain names and obtaining WHOIS and other information about registered domain names.

Squurl

Squurl is an ajax powered domain finder that makes your searches quick and painless. It also has a handy domain shortening feature.

Domainr

Domainr helps you find domain names beyond the usual .com’s, .net’s, and .org’s.

Domain Tools

Domain Tools gives you a wide range of tools for finding domains such as suggestions, whois lookup, and for sale searches.

DomainsBot

DomainsBot helps you find the right domain name by giving you advanced search features.

Dot-o-mator

Dot-o-mator gives you domain name suggestions based on a keyword that you provide, and allows you to save the suggestions to a scratchboard. There’s even an iPhone app.

Bust a Name

Bust a Name is a tool to help you find domains and manage them. It combines linguistic data with a unique interface to let you quickly search through thousands of domains and see which are available.

Nameboy

NameBoy generates domain names based on the keywords you enter, and you can register or back-order them.

Yadin Dudai writes in the New Scientist on two books on memory and forgetting in the digital age — Total Recall: How the e-memory revolution will change everything by Gordon Bell and Jim Gemmell, and Delete: The virtue of forgetting in the digital age by Viktor Mayer-Schönberger — and concludes: “For the human condition, forgetting is at least as important as remembering – sometimes more so. Without it, we are all bound to lead the miserable life of A. R. Luria’s patient Solomon Shereshevsky, who was crippled by his boundless, indelible memory, or his fictional counterpart, Jorge Luis Borges’s Funes. No forgetting implies no generalisation, no real present time, no amelioration of trauma, and no weaving of meaningful life narratives.” Read full story

Glyphish provides 130 great icons for iPhone applications. They are designed and carefully optimized for use on toolbars and tab bars in iPhone apps, they are also perfect for Android apps, websites, t-shirts, tattoos and more.

iPhone UI icons are 24-bit PNG images used as a mask to generate selected and unselected button states. Dimensions should be about 30×30 pixels for tab bar icons and about 20×20 pixels for toolbar and navigation icons. You can find Glyphish icons in AI and PSD formats. So that you can easily resize and customize them.

Requirements: -
Demo: http://glyphish.com/
License: Creative Commons License

Sponsors

Dreamhost: Get $50 Off with Coupon Code: WEBAPPERS

This post is part of Mashable’s Spark of Genius series, which highlights a unique feature of startups. If you would like to have your startup considered for inclusion, please see the details here. The series is made possible by Microsoft BizSpark.

Name: Lu.ly

Quick Pitch: Lu.ly brings users’ Facebook and Twitter stream into browsers in real-time.

Genius Idea: Lu.ly is a browser extension for Firefox, Internet Explorer and Safari (Safari currently in alpha) that lets you see your friends Twitter and Facebook status updates in real-time via scrolling text within the Lu.ly toolbar.

Lu.ly also lets you share web pages on Twitter or Facebook (and automatically shortens the URLs), send direct messages, @replies and RTs.

There are a lot of Twitter add-ons for Firefox but Lu.ly is one of the first that offers support across browsers. Plus, the ability to see Facebook and Twitter updates in one space is really nice.

Lu.ly scrolls new status messages and tweets into your window as they appear. You can click backwards and forwards through your timeline and reply or send a direct message to the user from the toolbar. You can also click on links from tweets or on a user’s username and a new tab will open with that link or the user’s Twitter page. What we really like about Lu.ly, though, is the ability to use the search bar to search Twitter.

Although there are other toolbar plugins that also show Twitter updates, Lu.ly is especially unobtrusive and really doesn’t distract you from what you are doing. In addition, if you want to turn off updates, you can just click on the service button for Facebook or Twitter and log-out.

We like seeing useful toolbar plugins, especially when they are supported across browsers. Lu.ly’s streamlining of Facebook and Twitter in the browser definitely falls into that category.

---

Spark of Genius Series Sponsored by Microsoft BizSpark

---

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

Entrepreneurs can take advantage of the Azure Services platform for their website hosting and storage needs. Microsoft recently announced the “new CloudApp()” contest – use the Azure Services Platform for hosting your .NET or PHP app, and you could be the lucky winner of a USD 5000* (please see website for official rules and guidelines).”

---

Reviews: Facebook, Firefox, Internet Explorer, PHP, Safari, Twitter

Tags: facebook, firefox plugin, lu.ly, toolbar, twitter

Each year, thousands of developers, designers, and programmers from around the world gather together at conferences and events to share ideas, promote the latest technologies, and discuss best practices, standards, and emerging trends in their respective fields. For those of us who have had the privilege to participate in one or more of those events, we likely received valuable information that had a profound effect on our progress as web professionals.

In this article, I’ve attempted to gather together a comprehensive list of web development and graphic design-related conferences and events that developers and designers can use as a reference to find out where and when the latest of such of events will be taking place. I’ve tried to ensure that the event descriptions and links are as general as possible, allowing this list to stay relevant for as long as possible.

Unfortunately, it is not possible to include every pertinent event. So if there is anything relevant missing, please comment below and we’ll try to add it to the list. Also, if any of the information is incorrect or out of date, you can contact me using the bio information at the bottom of this article, and we’ll make any necessary corrections.

The list, which includes a brief description plus location, is divided into the following categories:

• General Web Design Conferences
• UI, UX, & IA Conferences
• JavaScript & Ajax Conferences
• Graphic Design Conferences
• Mobile Web Conferences
• Back-End Programming Conferences
• Ruby on Rails Conferences
• Flash & ActionScript Conferences
• SEO & SEM Conferences
• Marketing & Social Media Conferences
• Technology Conferences

General Web Design Conferences

The following list consists of web conferences and events that cover a broad range of topics, including design, usability, web standards, and coding.

An Event Apart
“From the makers of A List Apart. An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.”

Location: Multiple U.S. cities

Web Directions
“Our major conferences, Web Directions South and Web Directions North, are held annually in Sydney, Australia and Vancouver, Canada, and cover the full range of interests for web professionals — web design, front-end and back-end development, information architecture, interaction design, accessibility, data visualization and much more.”

Location: Australia, North America, Japan

Front-End Design Conference
“web-conference-roundup.”

Location: U.S.A.

Future of Web Design
“There’s loads going on at this years event. You’ll hear from great speakers, enjoy in depth workshops and make new friends and contacts. It’s a 1 day, 1 track event with a 2nd day of fantastic workshops.”

Location: New York City, U.S.A.

Voices That Matter Conferences
“The Pearson Education Voices That Matter Conference series gives voice to the most important thought leaders in technology, design, and business today. These conferences give our readers access to those who have devised new technologies, new approaches and new inventions. Our speakers are the individuals who have made the strongest contributions impacting their industry. ”

Location: Multiple U.S. cities

In Control Conference
“Learn from a diverse array of Web experts to use modern tools and techniques to refine your Web design craft now. Harness creative inspiration to unlock your potential, amplify innovation, and broaden your reach. Immerse yourself in two days of idea exchange with potential business partners who are as forward-thinking as you are.”

Location: U.S.A.

@media Web Conferences
“Founded in 2004, Vivabit has been producing widely renowned and consistently well-received conferences for web professionals since the first sell-out @media event in London in 2005.”

Location: Multiple cities worldwide

Webstock
“Webstock is a range of web-related events with the aim of improving how websites are built through inspiration, education, insightful analysis and practical application. It features industry leaders and kick-ass speakers talking on topics such as accessibility, web standards, usability and other best practices.”

Location: New Zealand

WebVisions
“WebVisions explores the future of design, content creation, user experience and business strategy to uncover the trends and agents of change that will shatter your assumptions about the Web. Be ready to network, share ideas and be inspired by an all-star lineup of speakers.”

Location: Portland, Oregon, U.S.A.

Web Developers Conference
“As always we’ve put together a great line up of speakers from across the UK. Not only that but we have also got local developers and designers together to help answer your questions.”

Location: Bristol, U.K.

Edge of the Web Conference
“The conference program offers a diverse range of leading edge and highly topical content focusing on key areas of current web development best practise, such as usability and accessibility and current web trends such as social networking and open data exchange, in a two day conference format.”

Location: Western Australia

Build Web Conference
“With a variety of companion workshops, lectures, parties, meetups and an unconference, Build was created for those enthusiastic about the web and passionate about what they do.”

Location: Belfast, Ireland

EdUI Conference
“EdUI offers a rare speaker lineup of top web innovators that will inspire and enlighten web designers, developers, managers, and user experience and interaction design professions from any industry.”

Location: Charlottesville, Virginia, U.S.A.

The Rich Web Experience Conference
“RWE is a technically focused event targeted at: Web Designers, Developers, and Technical Project Managers.”

Location: Orlando, Florida, U.S.A.

Web Design World
“Since 1997, we’ve helped thousands of Web designers learn what they need to know to make better web sites, manage web projects, and get home at a decent hour.”

Location: Seattle, Washington, U.S.A.

Fronteers
“Fronteers wants to organize a world class front-end web development conference each year. This is entirely done by volunteers, so we can keep the costs as low as possible.”

Location: Amsterdam, The Netherlands

The Big (D)esign Conference
“The Big Design Conference is an intense day of learning within the scope of Strategy, Social Media, User Experience, and Code Development. Experts from across the country will gather to present theories, research, experiences, and best practices to students, professionals, and executives looking to stay on the bleeding edge.”

Location: Dallas, Texas, U.S.A.

IDEA Conference
“IDEA brings together leading interaction design thinkers from across the globe, and challenges them: to share beyond the concepts that inspire them most, and deliver practical guidance for attendees to begin making an immediate difference in the networked world of today and tomorrow.”

Location: North America

UI, UX, & IA Conferences

The following list includes conferences and events focused on user interface design, user experience design, usability, and information architecture.

User Interface Conference
“Whether you’re looking for insights into new strategies, you need to learn the latest advancements, or you want a primer for new skills, this conference is the one for you. Our team of experts will set your imagination on fire, powering up your creative juices so you can dazzle and delight, whether you’re a member of a large team or a UX-Team-Of-One.”

Location: Massachusetts, U.S.A.

International Conference on Intelligent User Interfaces
“IUI is the annual meeting of the intelligent interfaces community and serves as the principal international forum for reporting outstanding research and development on intelligent user interfaces.”

Location: Worldwide

Web 3.0
“At Web 3.0 Conference we will explore how companies are using the semantic web today, and should be using them tomorrow, for significant bottom line impact in areas like marketing, corporate information management, publishing, customer service, and personal productivity.”

Location: Multiple U.S. cities

Information Architecture Summit
“The Information Architecture Summit is the premier gathering place for information architects and other user experience professionals. The conference has grown from a special interest group’s efforts to define an emerging field, to a rich and expanding community of practice, shaping and informing multiple disciplines.”

Location: Multiple cities worldwide

UX Australia
“UX Australia is a 3-day user experience design conference, with inspiring and practical presentations, covering a range of topics about how to design great experiences for people.”

Location: Australia

UXCampLondon
“A one day BarCamp in Richmond, London for anyone involved or interested in user experience design, interaction design, information architecture or usability.”

Location: Richmond, London, U.K.

UX Week
“UX Week is the premier user experience conference. With a mix of inspiring talks from recognized thought leaders and hands-on workshops delivering takeaway skills, this event delivers for user experience professionals at all levels — directors, managers, and practitioners.”

Location: San Francisco, U.S.A.

UX London
“UX London is a unique three-day event combining inspirational talks with in-depth workshops presented by some of the industry’s biggest names.”

Location: London, U.K.

Usability Week Conference
“In place of scattered, shallow talks, Usability Week offers up to 6 days of deep learning as international experts lead 33 full-day tutorials on topics such as: Fundamental guidelines for Web usability, Improving usability for complex applications, Applying information architecture (IA) principles, Writing for the Web, Agile development and usability, Managing user experience strategy.”

Location: Multiple cities worldwide

Advanced Common Sense Usability Workshops
Usability workshops presented by the consulting firm “Advanced Common Sense”, owned and operated by Steve Krug, author of Don’t Make Me Think.

Location: Multiple U.S. Cities

JavaScript & Ajax Conferences

The following list includes conferences and events focused on JavaScript programming, JavaScript libraries, and Ajax.

jQuery Conference
“The annual conference of jQuery users and developers. There will be talks on jQuery, jQuery UI, plugins, complex application development, and more — all from the top jQuery developers. Case studies from some of the leading users of jQuery will be included along with a 3 hour tutorial for those just getting started.”

Location: U.S.A.

Full Frontal JavaScript Conference
“Full Frontal is a conference held in Brighton UK, for the front end developers with JavaScript skills ranging from beginner to advanced. If you’ve dabbled with JavaScript in the past and wanted to learn more about how the language works and what makes it tick, then this conference is for you.”

Location: Brighton, U.K.

The Ajax Experience
“The Ajax Experience (TAE) is the original, and most authoritative, event for Web developers and designers wanting to learn more about Ajax and next generation Web applications. TAE bridges technology and practice by focusing on new solutions for real world problems, and giving practical examples on those solutions. Presented by over 40 independent Ajax experts from across the globe and with so many expert attendees present as well, you can even network and leverage informal learning opportunities from your peers who can contribute directly to your skills and project success.”

Location: Boston, Massachusetts, U.S.A.

JSConf
“JSConf … is a conference devoted to the programming language we all love to hate and hate to love, JavaScript. This is conference will be thoughtful, content driven, and exemplify the very nature of JavaScript. The core focus of this conference is to expose some of the details about JavaScript that are often overlooked and present them more as a discussion with the audience. The content of the conference should cater to all types of JavaScript users from client interfaces to server development to testing.”

Location: Europe

AJAXWorld RIA Conference & Expo
“The first and only major AJAX event in the world.”

Location: New York City, U.S.A.

Graphic Design Conferences

The following list focuses on events and conference related to graphic design and design-related tools and technologies.

HOW Design Conference
“The HOW Design Conference recognizes that graphic design is a business as well as an art. We launched this annual event in 1991 with the goal of providing a hands-on, educational program to enable designers to better balance the three key components of graphic design: creativity, business and technology. Conference sessions cover a mix of these three critical design issues, with particular emphasis on creative and business topics.”

Location: U.S.A.

Adobe MAX
“Connect. Exchange ideas and build relationships with leading designers and developers, industry experts, and Adobe product teams. Discover. Choose from hundreds of sessions and labs presented by industry leaders and Adobe experts on best practices and emerging technologies. Inspire. Join the inspiring conversations that unfold when thousands of the most innovative, creative minds gather in one place.”

Location: U.S.A.

AIGA Design Conference
“Join us for the AIGA Design Conference, to celebrate design excellence, reinforce friendships and connections and stimulate thinking about the critical issues that surround design practice.”

Location: U.S.A.

TypeCon
“TypeCon explores type for the screen, printing history, Dutch design, type in motion, Arabic calligraphy, the American Arts and Crafts movement, experimental typography, and much more. Special events include the third annual Type and Design Education Forum, and an exhibition of international type and design.”

Location: U.S.A.

Photoshop World Conference & Expo
“Photoshop World is the ONLY Photoshop and digital photography conference designed to put you at the top of your game with fast and furious classes from the world’s leading experts. Photoshop World is where Photoshop users go to learn hard and play even harder!”

Location: Multiple U.S. Cities

PDN PhotoPlus International Conference + Expo
“PDN PhotoPlus International Conference + Expo is the most important event in the photo industry. Designed for professionals and advanced amateurs in the photographic and imaging industries, PDN PhotoPlus Expo showcases the latest advances in photography.”

Location: New York City, U.S.A.

London Design Festival
“The London Design Festival is an annual event established to celebrate and promote London as the creative capital of the world.”

Location: London, U.K.

View Conference
“VIEW Conference is the premiere international event in Italy on Computer Graphics, Interactive Techniques, Digital Cinema, 3D Animation, Gaming and VFX.”

Location: Italy

Design City
“Design City, a ’show within a show’, will bring together graphic designers with vendors who sell to the graphic design market. It connects buyers with sellers in a modern, interactive, results-driven environment. As one of the first trade shows of its kind in Canada, Design City aims to further strengthen the graphic design community and bring together buyers and sellers in the industry.”

Location: Canada

Design Indaba
“With a focus on international thought leadership, the Design Indaba Conference has become one of the world’s leading design events and hosts more than 40 speakers and 2 500 delegates. Independently curated with a focus on case studies and ingenious problem solving, rather than simply eye-catching portfolios, conference alumni are contemporary industry pacesetters.”

Location: Cape Town, South Africa

5D: The Future of Immersive Design
“Our goal is to unite a vital community of designers and image-makers and to serve as a catalyst for innovation.”

Location: California, U.S.A.

Mogo Media Web & Graphic Design Conferences
“Home of the InDesign Conference, the Adobe Creative Suite Conference, the Pixel Conference, the Vector Conference, the Web Design & Developer Conference, the Conference for Adobe Acrobat, and more!”

Location: Multiple cities worldwide

Mobile Web Conferences

The following list focuses on events and conferences covering to mobile web design and related technologies.

Design for Mobile
“The Design for Mobile conference is North America’s only design conference exclusively for mobile devices. All aspects are covered, from academic explorations to practical execution, from research to design to development.”

Location: Lawrence, Kansas, U.S.A.

Mobile 2.0 Conference
“Our two-day event, presented by the Mobile 2.0 Organizing Committee, focuses on understanding and leveraging Mobile Ecosystems, building and successfully monetizing new Mobile Applications and Services, and exploring Disruptive Mobile Innovation and Business Models.”

Location: San Francisco, California, U.S.A.

Voices That Matter: iPhone Developers Conference
“Learn what it takes to build killer iPhone apps, leveraging your existing skills in Objective-C. From Core Animation and Core Data to Push Notification Services and MapKit, we’ve got the bases covered.”

Location: Massachusetts, U.S.A.

BlackBerry® Developer Conference
“At the heart of the BlackBerry® Developer Conference is a core group of technically minded people who come together because they’re passionate about development and the possibilities for building outstanding mobile applications on the BlackBerry solution. Join the best and the brightest from Research In Motion (RIM), drawn from a team of thousands focused on the success of one platform, with a wealth of knowledge and experience in mobile application development.”

Location: California, U.S.A.

Mobile Web & Applications
“Mobile Web and Apps, incorporating an exclusive focus day on Mobile Social Networking, will provide you with all that you need to understand, improve and profit from this seismic shift in our industry.”

Location: London, U.K.

FITC Mobile
“Jam packed with information as well as a massive networking opportunity, FITC Mobile consists of presentations, demonstrations, and panel discussions, and is one of the only events in the world covering all aspects of mobile content.”

Location: Toronto, Ontario, Canada

PodCamp Az
“What makes ours different? Well, as you’ll note from the main page, this isn’t all about podcasting. Now we love podcasting, don’t get us wrong. But podcasting is simply a means to an end. It’s a method of distributing media files. We think the creation of those media files is more interesting. And we think what people do with those files is far more interesting than that.”

Location: Arizona, U.S.A.

Mobile 2.0 Conference
“The event provides a dynamic networking and information-sharing business environment, bringing together key stakeholders within the mobile web 2.0 value chain to discuss current trends and revenue generation possibilities, successful business models and the future opportunities that exist within Mobile social networks, Mobile internet and broadband, Devices and mobile AppStores, Mobile advertising Mobile content, Mobile gaming, video and TV.”

Location: Berlin, Germany

Back-End Programming Conferences

The following list consists of events and conferences focused on back-end programming languages and tools, platforms, and technologies related to those languages.

PHP Conferences
Visit the conferences page at PHP.net for updates and information on php-related conferences from around the world.

Location: Multiple cities worldwide

MySQL Conference & Expo
“The MySQL Conference & Expo is an interactive learning community — four days packed with connections to MySQL developers and open source experts who know their subject inside and out. You’ll gain unique insights from speakers, vendors, project leaders, and other participants who are using MySQL to successfully run the world’s most demanding applications, saving millions of dollars over proprietary software and hardware solutions.”

Location: Santa Clara, California, U.S.A.

Microsoft Professional Developers Conference
“The Professional Developers Conference (PDC) is the definitive developer event focused on the technical strategy of the Microsoft developer platform. Attendees come from around the world to learn about the future of Microsoft developer technology directly from the people who make it happen. If you’re a developer, architect or technology leader involved in making strategic technology decisions for your company or organization, the PDC is for you.”

Location: Los Angeles, California, U.S.A.

Microsoft MIX
“MIX is for designers and developers who build innovative web sites. Attendees are coders, strategists, information architects, visual designers, UX professionals and digital marketers. They represent top web sites, web start-ups, interactive agencies and other organizations that do business on the Web.”

Location: Las Vegas, Nevada, U.S.A.

The ExpressionEngine & CodeIgniter Conference (EECI)
“At the ExpressionEngine & CodeIgniter Conference you can meet the experts, be inspired and break new boundaries! This event brings you presentations and workshops from your favorite EE & CI speakers. Both beginners and experienced users will benefit from a variety of topics and sessions: discover how your favourite content management system and PHP framework can bend even further!”

Location: Leiden, The Netherlands

JavaOne
“The JavaOne conference is the kind of event where the declaration “Classpath is dead!”* causes hundreds of people to applaud soundly and hoot their approval. We’re talking hardcore, middleware-loving, certified-geeky Javaheads coming together to share their love of — and frustrations over — the Java programming language and platform, and the extended technology that it informs.”

Location: San Francisco, California, U.S.A.

Yahoo Developer Conference: Open Hack
“Hack Days are events hosted by Yahoo!—sometimes with other partners—in which participants are encouraged to create web applications in 24 hours ideally using one or more of Yahoo’s APIs or open source libraries. They normally consist of a combination of structured talks and unstructured ‘hacking’ time, often run overnight and normally conclude with a hack demo session with prizes for the best hacks.”

Location: Multiple cities worldwide

OpenSource World
“OpenSource World focuses on innovative solutions in real-world environments using open source, open standards and open architecture as part of an integrated IT infrastructure. The OpenSource World conference will present the latest Linux and open source ideas in a technical context by industry experts and innovators, giving IT end-users actionable initiatives that bring cost savings to the enterprise.”

Location: Multiple cities worldwide

Google I/O Developer Conference
“Google I/O is a web developer-focused conference held annually by Google to discuss web applications using Google and open web technologies.”

Location: San Francisco, California, U.S.A.

Google Developer Day
“Google Developer Days are a chance to learn about Google developer products from the engineers who built them. These one-day events will include seminars and “office hours” on web technologies including Google Maps, OpenSocial, Android, AJAX APIs, Chrome, Google Web Toolkit and more.”

Location: Multiple cities worldwide

Atlanta Linux Fest
“The Atlanta Linux Fest is a free grassroots conference for the GNU/Open Source Software/Free Software community to gather and share information about fun and exciting existing and upcoming Linux and Open Source Software. Attendees of all skill levels are invited to share their experiences to benefit all users of Linux/Free and Open Source Software. Atlanta Linux Fest is the place to learn, make new friends, and have fun!.”

Location: Atlanta, Georgia, U.S.A.

PayPal Innovate Developer Conference
“For two days, you’ll have the absolute inside track on how to capitalize on all of PayPal’s products. You’ll be in the mix with hundreds of other passionate developers — front and center as the possibilities of innovation are explored in over 35 interactive, technical sessions and Code & Build Labs. You’ll see how some of the most innovative developers in the world are building business on the PayPal platform.”

Location: San Francisco, California, U.S.A.

Scotch on the Rocks
“Scotch on the Rocks, established in 2005, is a conference based out of Edinburgh, Scotland concentrating on all things ColdFusion. Incorporating keynotes, technical sessions and tutorials, as well as the most innovative and successful ColdFusion experts and companies, Scotch on the Rocks is a must-attend conference.”

Location: Edinburgh, Scotland

OSCON Open Source Convention
“OSCON brings together over 3,000 experts, visionaries, and hackers in the trenches to explore all that open source has to offer. OSCON is the premier gathering place to gain exposure to and evaluate the new projects, tools, services, platforms, languages, software, and standards sweeping through the open source community.”

Location: U.S.A.

DrupalCampLA
“DrupalCampLA is the annual FREE conference organized by LA Drupal to unite and improve the Drupal Development Community in Los Angeles and the Greater Southern California Area. DrupalCampLA is an unconference-style Drupal training, founded in the style of BarCamp. While there are some differences (DrupalCamp does more pre-planning on the sessions), they have the common goal of bringing smart people together in an environment that is accessible to everyone.”

Location: Los Angeles, California, U.S.A.

WordCamp Wordpress Convention
“WordCamp is a conference type of event that focuses squarely on everything WordPress. Everyone from casual end users all the way up to core developers show up to these events. These events are usually highlighted by speeches or keynotes by various people.”

Location: Los Angeles, California, U.S.A.

Ruby on Rails Conferences

The following list consists of events and conferences focused on the Ruby programming language and Rails web application framework.

RubyConf
“RubyConf 2009 is the premier gathering of Ruby developers, experts, and innovators.”

Location: U.S.A.

EuRuKo
“EuRuKo is an annual conference about the Ruby programming language with an informal atmosphere and lots of opportunities to listen, to talk, to hack and to have fun.”

Location: Barcelona, Spain

Aloha On Rails
“The Aloha on Rails Conference is the premier destination event for Ruby on Rails and Web Development. This unique, intimate three day event (2 day conference and 1 day tutorial) unites the community’s top speakers and talent with motivated and excited attendees for an unforgettable conference in beautiful Hawaii.”

Location: Hawaii, U.S.A.

RailsConf
“RailsConf, co-produced by Ruby Central, Inc. and O’Reilly Media, Inc., is the largest official conference dedicated to everything Rails. Through keynotes, sessions, tutorials, panels, and events, RailsConf is an interactive meeting ground for the most innovative and successful Rails experts and companies.”

Location: U.S.A.

WindyCityRails
“Join us for a one-day conference packed with an abundance of Rails knowledge at WindyCityRails. Sharpen your technical skills, network with other professionals, and meet some of the top minds in the Ruby on Rails community. Developers, designers, entrepreneurs, and investors all find value in WindyCityRails.”

Location: Chicago, Illinois, U.S.A.

acts_as_conference
“Want to know what the future of Ruby on Rails looks like? Come to acts_as_conference … and find out. This annual two day event is dedicated to Ruby on Rails and the happy developers that use it (or wish to use it) in their daily lives. Come learn what’s to come.”

Location: U.S.A.

Scottish Ruby Conference
“Whether you’re interested in finding out what Ruby and Rails can deliver, or already convinced and keen to hang out with some of the foremost thinkers in the community, this conference is for you!”

Location: Scotland

The Rails Edge Conference
“The Rails Edge is a unique conference where we bring some of the best minds in the Rails and Ruby communities together with you in a single-track environment, so that we can all sharpen our edge. We hope you’ll join us!”

Location: U.S.A.

Flash & ActionScript Conferences

The following list consists of events focused on Adobe Flash animation, ActionScript development, and related technologies.

Flash on the Beach
“Flash on the Beach conference is the place to go for design, technical and inspiration if you are a web developer. It has grown quickly and gained fantastic status as the ‘must go to’ conference around… Flash on the Beach brings together the most creative, technical, inspirational, awe-inspiring, educational and entertaining industry leading speakers in the rich media industry.”

Location: Brighton, U.K.

FITC Design & Technology Events
“FITC has produced events for the last 7 years with over 700 presenters and 14 000 attendees through countless cities around the world. From Flash to Motion Design, FLEX to AIR, Mobile and more, FITC events each stand as unique and exciting experiences that inspire, educate and challenge.”

Location: Multiple cities worldwide

The ActionScript Conference
“The ActionScript Conference (TAC) is a community conference with the focus on Flash Platform. Attendants will see themselves immersed in a day of learning, knowledge exchange, and networking. TAC aims to bring topics on ActionScript 3.0, Flash development, Enterprise Flex 3 and 4, AIR, Integrating of Flash and other Platforms, and building Rich Internet Application to its audience.”

Location: Singapore

Flash on Tap
“The Flash on Tap conference is blurring the lines between business and pleasure. Experience the excitement of a beer festival while soaking in presentations by top tier design and technology professionals. It’s a three-day event, by Flash professionals for Flash professionals. Who’s talking? We have rounded up a great mixture of talented, Flash and beer-loving speakers.”

Location: Boston, Massachusetts, U.S.A.

Flashbelt
“The mission of Flashbelt is to bring together new media designers, developers and enthusiasts to share knowledge, inspiration and build community. It’s about professional development and creative inspiration.”

Location: Minneapolis, Minnesota, U.S.A.

360|Flex
“360|Flex is a community driven event. The sole purpose of the show is to bring the best of the Flex community together in one place to share war stories from the trenches and to allow the experts to share their deep technical knowledge with the community at large. Another benefit is finally being able to put a face, voice and personality onto the bloggers, flex coders and article writers that you’ve come to depend on.”

Location: Brighton, U.K.

Most of us create identities across the web without much conscious thought. We fill in profiles, upload photos, videos, reviews, and bookmarks. Although this information is often public, it’s fragmented into the silos of individual websites.

Glenn Jones built a JavaScript library that can help you do just that. Ident Engine discovers and retrieves distributed identities and profiles from across the web. Simply enter your profile URLs, you would be shocked by the level of detail it found out about you. You can also find out how Ident Engine works on A List Apart: Discovering Magic as well.

Requirements: -
Demo: http://identengine.com/
License: MIT License

Sponsors

Dreamhost: Get $50 Off with Coupon Code: WEBAPPERS

punypng is a free tool that dramatically reduces page load times by reducing the file size of an image without any loss of quality. punypng uses several web optimization techniques to reduce the file sizes of your images. It first analyzes the content of your image and figures out the best image format to use.

Depending on the file, punypng will automatically convert your GIF into a PNG format and then further compress that. For JPEGs, sometimes it’s better to make it a PNG, and other times it’s better to keep it as JPEG and use jpeg-tran to optimize it. punypng makes all those decisions for you and ensures the best possible results.

Requirements: -
Demo: http://www.gracepointafterfive.com/punypng/
License: License Free

Sponsors

Dreamhost: Get $50 Off with Coupon Code: WEBAPPERS

For the past two years, the elegant iPhone has housed some of the most poorly designed applications you could imagine. The hype surrounding iPhone has prompted many designers across the globe to try their skills with the new mobile medium. The result are literally thousands of various iPhone-applications that are often hardly usable and counter-intuitive. However, some designers invest a lot of time and efforts into creating usable and original user interfaces (yes, there are usable and creative UIs).

This article explores the ways in which designers use graphical elements and screen interactions to create iPhone-applications that are easy on the eyes and mind. The aim of this article is to display common trends and design approaches in iPhone app design – please notice that they are not necessarily optimal ones from the design or usability point of view.

1. Mirroring Native iPhone UI Elements

“Tell them what you’re gonna tell them, tell them, and then tell them what you told them.” Creating a whole new OS within your app can be fun, but when you’re dealing with the mobile medium, people just want to get stuff done. Getting stuff done means that the designer has to get into the flow of the OS and create an app that requires zero explanation for the end user to operate. Mirroring the layout and UI elements that the user is already familiar with saves time and energy. So it seems quite convenient to use this approach when designing iPhone-applications.

Facebook (iTunes Link)
In the new Facebook 3.0, you’ll find a grid layout that users can swipe left and right to access more categories. Because it mirrors Apple’s native UI, users do not have to “learn” how to use it all over again. A similar approach exists in Web design: users expect to see a logo in the top left, navigation along the top, etc. Facebook has taken this concept mobile, using large buttons that are easily distinguishable and tap-able.

Where (iTunes link)
Where has a similar concept, allowing users to swipe left and right to access more data.

Tweetdeck [iTunes link]
Tweetdeck is a good example of user interface design on many levels. Notice how the design highlights recent updates. The application could display the updates in a new window, with a categorized or tabbed list. But it doesn’t. Instead, a more familiar dialogue menu is displayed — it serves as a springboard to jump to a specific category or to clear the messages altogether.

2. Simplifying The Interface

Simplifying user interfaces may sound like a mechanical task, but what lies beneath the surface of user interface design? The answer is simple: users. And what do users want? What makes them all warm and fuzzy? How do you deliver what they want so that they don’t even notice how they are consuming information?

Facebook’s first release did a great job of fitting a lot of core functionality into a small space. The problem, of course, is in laying out all that data and creating an intuitive interface. Compare 3.0 with the first release, and you’ll see how they took a “springboard” approach to streamlining the interface, keeping it intuitive and maintaining functionality.

Flickr [iTunes link]
Flickr is another example of how to achieve a good balance between functionality, visual design and the small display area on mobile devices. Think about it: what is at the core of Flickr? Photos. Its users probably do not want to look at big clunky navigational elements; instead, they are looking for pictures. Flickr has managed to fit all of its core functionality without heading down the highway to navigational hell. In fact, most elements in the navigation are handled by interacting with the photos themselves. Simple and smart.

3. Hardware-ish Look

Many utilities are breaking out of the conventional iPhone UI to take advantage of the device’s unique ability to respond to finger gestures. Many of these have hardware-ish interfaces that users are familiar with but come with perpetually shiny exteriors and clicks and pops that maintain their newness from the first to one-thousandth click. Next up, though: an app that gets dirtier the more you play with it.

Convertbot (iTunes link)
Convertbot reminds us of the proportion wheel we all used in grade school, except it’s more distinctive, original and creative.

Little Snapper (iTunes Link)
Little Snapper mimics the wheel that you turn on a typical digital SLR.

iHandy Level (iTunes Link)
iHandy Level simulates the look and functionality of a real, well-used leveler.

Where To? [iTunes Link]
This application looks like it belongs in a Mercedes. Plush leather, matte-finish tactile buttons: quality craftsmanship. We can just imagine how each button press feels solid, requiring the perfect amount of pressure.

4. Rich, Padded And Pretty List Views

You know that you are a geek designer when you get excited about the latest trends in list view design. And what do people do when they encounter a list view? Of course, they skim. And how do we make it easier for people to decide what interests them? That’s right: more visual cues!

Essentially, users are asking for a snapshot of what’s next, and then decide if they want more information. One way to do this is with big pretty buttons. Large and in charge, elegantly designed big buttons give the user a lot of information through their color, icons and typography.

Delivery Status Touch (iTunes Link)
Check out how Delivery Status uses appropriate colors on its big buttons to identify each brand. And it uses typography well to establish a hierarchy of information.

Be Happy Now (iTunes Link)
Be Happy Now’s big buttons convey the “be happy” mantra through a mellow color scheme and light, calm and clear typeface.

Next Read [iTunes link]
The Next Read application allows friends to share books. Here all books about a particular topic are presented, including the title, cover image, review rating and number of people who have recommended it. Notice the padding and a lot of white space for each navigation option; this makes the areas easily clickable and easier to navigate.

Nike [iTunes link]
Nike’s workout application for women includes a nice visual treatment and illustrations that match the brand. It breaks out of the traditional UI just enough to communicate the brand without making it difficult for users to understand the interface and how to use it.

Borange [iTunes link]
Borange is a “social availability” application that helps you coordinate meetings with friends. The list view presents a lot of information: friends you want to hang out with, the meeting location and a nice visualization of friends who are available.

5. Layered Interface

Several applications take advantage of the iPhone’s capabilities by layering the interface and making some elements stationary and others vertically or horizontally scrollable. This approach has several benefits:

1. It reduces the number of traditional navigation elements that are necessary (i.e. fewer buttons help to avoid a cluttered interface).
2. It gives users a faster route to the information they want.
3. More screen space is available for information.

Tweetie (iTunes Link)
Tweetie uses layers to organize information specific to each of your Twitter friends. Just look at all of the information packed into this one screen!

Barnes & Noble [iTunes link]
Barnes & Noble has a layered interface that allows you to quickly slide through new releases at the top or dive into more categories below.

USA Today [iTunes link]
USA Today takes a slightly different approach to layering the interface in its “Pictures” section: it uses sliding panels to display blocks of information. While the interface may look cluttered at the first glance, one can easily get around it. The interesting part is that within each panel you can slide thumbnails left and right to view more images.

myPantone [iTunes link]
Would we expect any less from Pantone? The color picker shown above is a layered interface that lets you pick from a range of colors, sort and scroll as well as open and close detail screens, all without too driving you crazy.

6. Icons For The List View

Icons aren’t just for springboard-loving folks. On small screens, icons can give a huge boost to an application’s usability and navigation. Let’s now take a look at some examples of applications that use icons to their advantage.

iStudiez (iTunes Link)
This application uses various educational metaphors as icons to clearly communicate the purpose of the application. Excellent visual cues tell the student what’s happening today at a glance.

Top Floor (iTunes Link)
Top Floor uses simple and easily recognizable icons to quickly guide users to their category of choice.

New York Times
Isn’t it great when applications just let you do whatever you want to do? For an app with as much information as the New York Times’, users are bound to have their favorite sections. Well, guess what? The New York Times cares: it lets you customize the tab bar’s navigation to include only your favorite sections of the paper. Drag an icon down the tab bar and you are set. The downside of the design is, of course, its lack of visual appeal.

Filemaker [iTunes link]
Here is another example of beautiful icons that aren’t obscure or confusing. Designers should never use icons just for the sake of having icons. As designers, we want icons that illustrate what users are actually going to get when they choose a particular path. Nicely done, Filemaker.

7. Illustrations in use

Applications that rely on graphics not found in the standard user interfaces are increasing in popularity, as developers try to set their apps apart from the crowd. Sometimes it works, but often it doesn’t. The more unconventional a design is, the more likely it is to have usability problems. Please always conduct usability testing before releasing a product with a “creative” user interface.

Magnetic Personalities (iTunes link)
An excellent example of how buttons don’t have to look like standard buttons.

SugarSync [iTunes link]
This interface could have easily followed the traditional list-view route. Instead, the designers played with the concept of “connectivity” to create a visual treatment that communicates the purpose of the app. It is unusual and requires some time to get used to.

Mom Maps [iTunes link]
Another example of how illustrations do a great job of pulling together the whole concept of an application.

8. Using Gestures

Classic linear navigation may look boring: a button that links to other buttons, which leads you to a list of something, which leads you to such-and-such an interaction. Not really spectacular. The possibilities for creative interaction in utility apps are huge and largely untapped (no pun intended).

Mover (iTunes link)
Mover exemplifies how to use gestures for sharing contacts, photos and bookmarks. Open two devices, and flick the shared files from one handset to the other.

ABC Animals [iTunes link]
This application teaches while it entertains. Being able to trace a letter with your finger is another example of how the iPhone responds to touch and movement.

All Recipes [iTunes link]
This applications allows you to mix in various elements to create your next meal using gestures.

Something is missing?

We missed some common design approach or trend? Please let us know in the comments to this post!

About the Author

Jen Gordon is the owner of Atlanta-based iPhone app design studio Clever Twist, which will release its latest app Farm Friends in just a few days. She specializes in usable interfaces, beautiful design and straight talk. She loves her family and the iPhone and periodically dreams that she’s close friends with Dolly Parton. Follow her on Twitter or drop her a line to say “Hi!”.

(al)

---

© Jen Gordon for Smashing Magazine, 2009. | Permalink | 39 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: iphone, showcases, trends

The background debate about whether or not Twitter can actually scale has intensified. More than a year ago I asked “Twitter At Scale: Will It Work?” Today Twitter is far, far bigger. And the uptime woes continue.

The big problem with Twitter is assymetric following without limitations on the number of connections, which means that a single account can theoretically have a number of followers limited only by the total number of Twitter users. This adds massive complexity to the system. Other services solve the problem by forcing both sides to agree to friendship, a one-to-one relationship. Others, like Facebook, limit the connections to 5,000 as well. But Twitter has no limits on complexity. And since they are a centralized, bottlenecked system, it is both hard to scale and easy to attack.

The short messaging format is popular, and it is now part of the web. It should thus be designed and implemented as a decentralized service like most other core web services (email, DNS, blogging etc.). The Internet was built to withstand a nuclear attack, and it is a platform that can’t be owned, attempting to completely centralize a new core service has never worked.

As Twitter grows, it needs to be architected more like the Internet.

New Twitter COO Dick Costolo says that he believes Twitter can scale in a centralized way, meaning the status quo will continue. But he acknowledges that it is a theoretical debate at this point, and he says that he hasn’t ruled out decentralizing Twitter.

We believe decentralizing Twitter solves two problems – it will help the service scale infinitely. And it is potentially a very lucrative source of revenue.

Email Is A Business – The Microsoft Exchange Model (Get Your Customers To Pay You And Do The Heavy Lifting, Too):

Twitter should look at how email, and commercial email servers such as Microsoft Exchange Server, developed. The business generates $2 billion or more in revenue for Microsoft, and powers the majority of corporate office functions (email, calendar, etc.). Businesses pay a few hundred dollars for Exchange, plust $50 or so per year per user. Plus, the businesses handle all the infrastructure costs (servers, bandwidth, etc.).

Twitter should sell Twitter Server just like Microsoft sells Exchange Server. They’d then run their own Twitter node on their own hardware.

Twitter likely couldn’t get $50/user/year out of Twitter Server, but they could certainly get more than the zero they are charging now. And they’d move the burden of scaling Twitter to businesses that want a highly stable solution. And users could still go to Twitter.com to create accounts for free, too. They just wouldn’t have the benefit of controlling the data on their own servers, and having the peace of mind knowing that their uptime was conditioned only on their own infrastructure, something under their control.

There would be some issues to work out, like the namespace and messaging between parties (If we had our own Twitter server, my user name would have to be something like @nik.techcrunch, or we could just use the existing global namespace – email). Twitter could build and sell a kick-ass Twitter server for corporations and those who wish to control their own messaging and their own brand.

But the benefits would be huge. Possibly hundreds of millions of dollars in revenue. And a partially decentralized service that would stay live even if Twitter.com went down.

So there are the benefits – revenue, lower operational costs, higher uptime. And there’s one more benefit, too. A decentralized Twitter would suck the air out of the idea that Twitter needs a decentralized competitor. Twitter could own the micro-messaging protocols and core service for the long term. Twitter owns the protocol, the users, the format, the trademarks, the brand and the name – why does it also need to host the whole damn thing?

Crunch Network: CrunchBase the free database of technology companies, people, and investors

Just yesterday, we wrote about how Facebook was quickly gaining on Google’s social network, Orkut, in places like India where Orkut is still the big dog. One reason for Facebook’s gains is that they’ve been heavily promoting the fact that you can import your Orkut contacts via a special tool. Well guess what? As of today, that tool no longer works.

And that’s not all. Previously, even without the tool, it was pretty easy to export you contacts from Orkut into a CSV (comma separated value) file. But that’s no longer working either. The option still exists on the Friends page in Orkut, but when you click on it, and fill in the CAPTCHA, it simply redirects you to Orkut’s main page.

Coincidence? Maybe. But we’ve already gotten emails from users in India who saw our post and rushed to try and export their friend data to escape Orkut, only to be shot down. And let’s not forget that Google and Facebook have been down a similar road before. Last year, Facebook blocked Google’s Friend Connect from accessing the data on its network. This led to a silly he said/she said spat in which the users were the losers. Could this be payback?

Facebook is undoubtedly increasingly interested in India not only because it is the largest social network in the world, but thanks to Facebook Lite, it’s much more accessible to a wide range of people. Orkut, meanwhile, is, well, a social network that Google seems to talk about as little as possible.

To test the friend export functionality tonight, I logged into my Orkut account for the first time in what must be years. I was shocked to find that there were other people I knew actually on it, that Google was recommending that I friend. So I sent a few requests out, and within minutes, this is the reply I got back (over email):

“what the f**k?”

The message behind that being, “why are you using Orkut?” For some people in India right now, sadly, it appears that they have no choice.

I wonder what Google’s Data Liberation team thinks about this? I have a feeling the official word we’ll get back from Google is “bug.” But given the timing and the fact that two different ways to export your friends broke at once, I’m not so sure that the word they’re really looking for isn’t “hypocrisy.”

Crunch Network: MobileCrunch Mobile Gadgets and Applications, Delivered Daily.

Adrian Chan is a Sr Fellow with SNCR.org and is a social interaction design consultant and strategist. You can follow him on Twitter @gravity7 and at his blog: gravity7.com/blog/media

If you’re reading this, then social media is a part of your life, just like the juice you steal through the wall socket at the local cafe. Your very lifestyle, and odds are your profession, depend on it. You might think you know how it works, because you work on it all the time. You test, tinker, and tweak it. You profess, pitch, and present it. Your social media is always on, and you’re always on it.

But to really know what it means to you, you would have to turn it off. And I suspect it wouldn’t take long before you realized how deeply embedded it had become in even the most banal habits of your daily routine. Which is why, when it comes to social media, usability only scratches the surface. Sociability is where it’s really at. Sociability, in which the emphasis is on the social over use and utility, is equivalent of usability for the social web.

---

Sociability is Social Practices

---

What, after all, is social media used for? The answer isn’t to satisfy information needs or communication demands. Those “needs” are well served by the regular web and the Internet already. Social, when it works, achieves something else. Like beauty, you know it when you see it, but you’d be hard pressed to come up with a simple definition of what it is.

Social media only works when social practices emerge around it, which include the many ways in which we put social media to use, habitually and daily.

---

Different Kinds of Users

---

In social media, many individual users, each different from the next, combine to form a social experience. Those users will have all manner of motives and interests that don’t necessarily overlap. The degree to which your social media efforts capitalize on these user habits results in sociability, and this starts with taking a user-centric perspective. In fact, you need to take multiple perspectives.

For the purpose of developing these different user perspectives, it is helpful to create user personas to describe the different types of social behavior. I like to group users into self-oriented, other-oriented, and relationally-oriented types.

Self-oriented users are those who extend their presence online, building audiences and posting content. Experts, pundits, and those sometimes called “creators” are self-oriented users.

Other-oriented users are those who start with the conversations and contributions of others. Where the self-oriented user talks about him or herself (expresses him or herself), the other-oriented user responds, replies, or comments. What he or she reads and finds interesting provides a springboard for conversation.

Relationally-oriented users gets involved in social activities. They see what’s going on between other users, and may be drawn to these more social interactions. Involvement puts these users in relation to other users, with all the dramatic and nuanced activity this can result in.

These are extremely oversimplified descriptions, of course, but they’re not meant to describe real individuals. Rather, they’re a heuristic model intended to expand your thinking about your users.

---

Get Your Sociability On

---

Sociability comes about when users interact with each other. Interaction between users is what distinguishes social media from other media in which interactions occur between users and the screen. The “social interface” is surrounded by different kinds and degrees of sociability, and social practices, which are the collective user activities that bring your product, service, or campaign to life, come in all shapes and sizes.

They are the social “uses” you help to facilitate. You can develop and increase your sociability by empowering the social competencies of your users. Power to the people.

---

More social media resources from Mashable:

---

- What Type of Social Media User Are You?
- 5 Social Media Lessons Learned From Whole Foods
- 4 Ways Social Media is Changing Business
- What the F**k Is Social Media? Here’s an Answer
- HOW TO: Use Twitter Hashtags for Business

Tags: sociability, social, social media

Here’s an absolutely gorgeous new site aimed at making it easy to get your creative juices pumping.

Pinball comes from the BBC and takes you on a ‘journey’ around different sections of a pinball table, helping you create and refine ideas as you go.

It’s an unusual idea for a site, and one you’ll either be confused by or embrace immediately. Although there is a Help section, you’re encouraged to dive straight in and use the freeform tools in whatever way you see fit.

The four sections of the site all give you different ways of working through the creative process. Dot Dash allows you to quickly and easily build a Mind Map complete with images and customisable colours while Wild Reels mixes up different combinations of text and images to create new combinations. Most instantly enjoyable is Snap Shot, which allows you to quickly and easily manipulate images by drawing on them, rotating and scaling them and more.

What’s particularly useful is that anything you create in one of the site’s sections can be sent to another for further manipulation. Anything you want to save for future use can be exported as a JPG image file or printed for offline use.

Pinball has been developed by magneticNorth, the same company behind Skinni Popcorn, the film review site we enthused about recently. Pinball is set to be improved upon, with additional tools being added in the future.

With some people questioning whether a publicly-funded broadcaster like the BBC should be investing in the web, the BBC needs more projects like this. Unique, innovative and experimental, it’s unlikely that something like Pinball would come from a commercial source. Actually, there’s other one company we could see developing a freeform ideas generator; Google Pinball, anyone?

via Embee

Though many computer applications and operating systems make use of real-world metaphors like the desktop, most software interface design has little to do with how we actually experience the real world. In lots of cases, there are great reasons not to directly mimic reality. Not doing so allows us to create interfaces that enable people to be more productive, communicate in new ways, or manage an increasing amount of information. In other words, to do things we can’t otherwise do in real life.

But sometimes, it makes sense to think of the real world as an interface. To design user interactions that make use of how people actually see the world -to take advantage of first person user interfaces.

First person user interfaces can be a good fit for applications that allow people to navigate the real world, “augment” their immediate surroundings with relevant information, and interact with objects or people directly around them.

Navigating the Real World

The widespread integration of location detection technologies (like GPS and cell tower triangulation) has made mobile applications that know where you are commonplace. Location-aware applications can help you find nearby friends or discover someplace good to eat by pinpointing you on a map.

When coupled with a digital compass (or a similar technology) that can detect your orientation, things get even more interesting. With access to location and orientation, software applications not only know where you are but where you are facing as well.

This may seem like a small detail but it opens up a set of new interface possibilities that are designed from your current perspective. Consider the difference between the two screens from the TomTom navigation system shown below. The screen on the left provides a two-dimensional, overhead view of a driver’s current position and route. The screen on the right provides the same information but from a first person perspective.

This first person user interface mirrors your perspective of the world, which hopefully allows you to more easily follow a route. When people are in motion, first person interfaces can help them orient quickly and stay on track without having to translate two-dimensional information to the real world.

TomTom’s latest software version goes even further toward mirroring our perspective of the world by using colors and graphics that more accurately match real surroundings. But why re-draw the world when you can provide navigation information directly on it?

Nearest Tube is a first person navigation application that tells you where the closet subway station is by displaying navigation markers on the real world as seen through your phone’s camera.

As you can see in the video above, the application places pointers to each subway station in your field of vision so you can quickly determine which direction to go. It’s important to note, however, that the application actually provides different information depending on your orientation.

When you hold the phone flat and look down, a set of arrows directs you to each subway line. Holding the phone in front of you shows the nearest subway stations and how far away they are. Tilting the phone upwards shows stations further away from you.

Making use of the multiple perspectives naturally available to you (looking down, looking ahead, looking up) is an example of how first person interfaces allow us to interact with software in a way that is guessable, physical, and realistic. Another approach (used in Google Street View) is to turn real world elements into interface elements.

Street View enables people to navigate the World using actual photographs of many major towns & cities. Previously, moving through these images was only possible by clicking on forward and back arrows overlaid on top of the photos. Now, (as you can see in the demo video below) Street View allows you to use the real-world images themselves to navigate around. Just place a cursor on the actual building or point on the map that you want to view and double-click.

Augmented Reality

Not only can first person user interfaces help us move through the world, they can also help us understand it. The information that applications like Nearest Tube overlay on the World can be thought of as ÒaugmentingÓ our view of reality. Augmented reality applications are a popular form of first person interfaces that enhance the real world with information not visible to the naked eye. These applications present user interface elements on top of images of the real world using a camera or heads up display.

For example, an application could augment the real world with information such as ratings and reviews or images of food for restaurants in our field of vision. In fact, lots of different kinds of information can be presented from a first person perspective in a way that enhances reality.

IBM’s Seer application provides a way to navigate this year’s Wimbledon tennis tournament more effectively. Not only does the application include navigation tools but it also augments your field of vision with useful information like the waiting times at taxi and concession stands.

Wikitude is an application that displays landmarks, points of interest, and historic information wherever you point your phone’s camera. This not only provides rich context about your surroundings, it also helps you discover new places and history.

These augmented reality applications share a number of design features. Both IBM Seer and Wikitude include a small indicator (in the bottom right corner of the screen) that lets you know what direction you are facing and how many points of interest are located near you. This overview gives you a quick sense of what information is available. Ideally, the data in this overview can be manipulated to zoom further out or closer in, adjust search filters, and even select specific elements.

Wikitude allows you to manage the size of this overview radius through a zoom in/out control on the left side of the screen. This allows you to focus on points of interest near you or look further out. Since it is dealing with a much smaller area (the Wimbledon grounds), IBM Seer doesn’t include (or need) this feature.

In both applications, the primary method for selecting information of interest is by clicking on the icons overlaid on the camera’s view port. In the case of IBM Seer, different icons indicate different kinds of information like concessions or restrooms. In Wikitude, all the icons are the same and indicate information of interest and distance from you. Selecting any of these icons brings up a preview of the information. In most augmented reality applications, a further information window or screen is necessary to access more details than the camera view can display.

When many different types of information can be used to augment reality within a single application, it’s a good idea to allow people to select what kinds of information they want visible. Otherwise, too many information points can quickly overwhelm the interface.

Layar is an augmented reality application that allows you to select what kinds of information should be displayed within your field of vision at any time. The application currently allows you to see houses for sale and rent, local business information, available jobs, ATM locations, health care providers, and more. As the video below highlights, you can switch between layers that display these information points by clicking on the arrows on the right and left sides of the screen.

Layar also provides quick access to search filters that allow you to change the criteria for what shows up on screen. This helps narrow down what is showing up in front of you.

Interacting with Things Near You

First person user interfaces aren’t limited to helping you navigate or better understand the physical space around you -they can also enable you to interact directly with the people and objects residing within that space. In most cases, the prerequisite for these kinds of interactions is identifying what (or who) is near you. As a result, most of the early applications in this category are focused on getting that part of things right first.

One way to identify objects near you is to explicitly provide information about them to an application. An application like SnapTell can identify popular products like DVDs, CDs, video games, and books when you take a picture of the product or its barcode. The application can then return prices, reviews, and more to you.

This approach might eventually also be used to identify people as illustrated in the augmented ID concept application from TAT in the video below. This proposed application uses facial recognition to identify people near you and provides access to digital information about them like their social networking profiles and updates.

While taking pictures of objects or people to get information about them is a more direct interaction with the real world than typing a keyword into a search engine, it only partially takes advantage of first person perspective. Perhaps it’s better to use the objects themselves as the interface.

For example, if any of the objects near you can transmit information using technologies like RFID tags, an application can simply listen to how these objects identify themselves and act accordingly. Compare the process of inputting a barcode or picture of an object to the one illustrated in this video from the Touch research project. Simply move your device near an RFID tagged object and the application can provide the right information or actions for that object to you.

This form of first person interface enables physical and realistic interactions with objects. Taking this idea even further, information can be displayed on the objects themselves instead of on a device. The 6th Sense project from the MIT Media Lab does just that by using a wearable projector to display product information on the actual products you find in a library or store.

Though some of these first person interfaces are forward-looking, most are available now and ready to help people navigate the real world, “augment” their immediate surroundings, and interact with objects or people directly around them. What’s going to come next is likely to be even more exciting.

The next time you are working on a software application, consider if a first person user interface could help provide a more natural experience for your users by bringing the real world and virtual world closer together.

About the Author

LukeW is an internationally recognized Web thought leader who has designed or contributed to software used by more than 600 million people. He is currently Senior Director of Product Ideation & Design at Yahoo! Inc., author of two popular Web design books, and a top-rated speaker at conferences and companies around the world. You can follow Luke on Twitter at lukewdesign or by using RSS.

---

© Luke Wroblewski for Smashing Magazine, 2009. | Permalink | 17 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: ui

Recurring outages on major networking sites such as Twitter and
LinkedIn, along with incidents where Twitter members were

mysteriously dropped for days at a time,
have led many people to challenge the centralized control exerted by
companies running social networks. Whether you're a street
demonstrator or a business analyst, you may well have come to depend
on Twitter. We may have been willing to build our virtual houses on
shaky foundations might when they were temporary beach huts; but now
we need to examine the ground on which many are proposing to build our
virtual shopping malls and even our virtual federal offices.

Instead of the constant churning among the commercial sites du
jour (Friendster, MySpace, Facebook, Twitter), the next
generation of social networking increasingly appears to require a
decentralized, peer-to-peer infrastructure. This article looks at
available efforts in that space and suggests some principles to guide
its development.

Update: a few days ago, OpenID expert Chris Messina and
microblog developer Jyri Engeström published

an article with conclusions similar to mine;
clearly this is a felt need that's spreading across the Net.
Interestingly, they approach the questions from a list of what
information needs to be shared and how it needs to be transmitted; I
come from the angle of what people want from each other and how their
needs can be met. The two approaches converge, though. See the
comments for other interesting related blogs.

The peer-to-peer concept

The Internet was originally a parliament convened among peers. Every
host was a server, almost always providing file downloads and usually
email as well. To this day, ISPs "peer" when they accept data from one
ISP's customer and delivers it to the other ISP's customer.

To peer doesn't mean simply to be of equal status--in fact, that
notion could be misleading, because two systems with vastly different
roles and resources can peer. More importantly, to peer means to have
no intermediary.

When the architecture requires an intermediary, it should play as
unobtrusive and minimal role as possible. For instance, Napster and
Skype have central servers, but they are used just to sign up
participants and set up connections among them.

Napster's and Skype's partial decentralization won them a key benefit
of peer-to-peer networking that Twitter could well take note of: they
offload most traffic from their central servers to the users and the
ISPs that connect them.

But being partially centralized means the service can still be
disrupted as a whole. Napster was shut down by a court ruling; Skype
shut itself down once through a programming error that it never
clearly explained to the public.

The Internet itself quickly developed into this hybrid model as well.
Modems and terminals created a new layer of second-class citizens,
vastly expanded by the PC revolution. These Internet users were tucked
away behind firewalls and blocked from using any services not approved
by system administrators.

By the year 2000, new companies springing up in the dot-com boom found
themselves frustrated by these restrictions, and designed their
innovative protocols to deliver data over port 80 because everybody
kept that open for Web traffic. When the practice started, traditional
Internet developers derided it as "port 80 pollution." Now it's called
Web Services.

As happens so often, the way forward proved to be the way
backward--that is, to restore the democracy of the early Internet--and
also predictably, was pioneered by outlier movements with dubious
legality, ethics, and financial viability. Napster made the first
impact on public consciousness, followed by services that rigorously
avoided any hint of central servers (see my 2000 article,

Gnutella and Freenet Represent True Technological Innovation).

By the end of 2000, the term peer-to-peer had become a
household word. But the movement quickly went into retreat, facing
difficult design problems that were already under discussion in the
O'Reilly book
Peer to Peer,
published in February 2001. I summarized the problems, which remain
ongoing, in the articles

From P2P to Web Services: Addressing and Coordination and

From P2P to Web Services: Trust.

The issue of addressing would arise right away for a social network
developed in a pure peer-to-peer fashion. How would you check whether
your old college buddy was on the network, if you couldn't query a
central server? And how could you choose a unique name, without a
single place to register? Names would have to be qualified by domain
names or some other identifiers--which is actually a step forward
right there. It seems to me ridiculous that a company would plan to
provide a service to the whole world using a flat namespace. And while
we're at it, you ought to be able to change your name and bring along
all your prior activity.

Trust would also become an issue in decentralized social networks. You
could ban a correspondent from your personal list, but you couldn't
inform a central authority about abuse. And the problem Twitter has
recently started to tackle--preventing random users from impersonating
well-known people--would be a challenge.

But decentralization brings many benefits. A failure at one person's
site, or even on a whole segment of the network, would have no effect
on the rest of the world. A misconfigured router in Pakistan could not
keep everyone from accessing the most popular video content on the
Internet. And because each peer would have to obey common, understood
protocols, a decentralized social network would be transparent and
support the use of free software; nobody would have to puzzle over
what algorithms were in use.

Visiting many different sites instead of central server to pull
together information on friends would increase network traffic, but
modern networks have enough bandwidth to stand up to the load. Even in
places with limited bandwidth, service would degrade gracefully
because messages would be small.

The
StatusNet
project, which underlies
identi.ca,
represents a half-way step toward the kind of full decentralization
illustrated by RSS. StatusNet can power a variety of microbloggin
services, each signing up any number of members. The services can
interchange data to tie the members together.

The rest of this article looks at two possible models for a
distributed social network (RSS and XMPP), followed by an examination
of the recurring problems of peer-to-peer in the social networking
context.

Possible models

Many examples can be found of filesystems, version control systems,
and other projects that lack central servers. But I'm just going to look
at two protocols that other people are considering for decentralized
social networking.

When thinking of decentralized systems for sending short messages, RSS
and Atom have to come to mind first. They're universal and work well
on a large scale. And Dave Winer, the inventor of RSS, has created an
enhanced version called

rssCloud,
recently

incorporated into WordPress.

Given the first question I asked about decentralization--how do you
find the people you're looking for?--the RSS answer is "by
serendipity." Like everything else on the Internet, you could come
across new treasures in many ways: surfing, searching, friends, or
media outlets. Lots of bloggers provide links from their sites to
their own faves. And RSS has developed its own ecosystem, sprouting
plenty of aggregators that offer you views into new fields of
information.

rssCloud is meant to carry more frequent traffic and more content than
the original RSS and Atom. It maintains an XML format (making it
relatively verbose for SMS, although Winer tries to separate out the
rich, enhanced data). Perhaps because of the increased traffic it
would cause, it's less decentralized than RSS, storing updates in
Amazon S2.

XMPP was invented about the same time as RSS by a programmer named
Jeremie Miller, who wanted a standard instant messaging protocol with
tags that could support semantics, and therefore powerful new
applications. Most important, his creation, Jabber, made it possible
for individual users to run their own servers instead of depending on
America Online or Yahoo!. Jabber had the potential to complement Tim
Berners-Lee's idea of a Semantic Web.

Because Jabber used XML, it was seen as a bit heavyweight, and the
servers were reportedly hard to configure. But the possibilities were
too promising to pass up. So the IETF formalized it, gave it a clumsy
name suitable for a standard, and released a set of RFCs about it.
Unfortunately, XMPP languished until Google adopted it for their Talk
and Wave services. These high-profile applications suggest that it has
the scalability, flexibility, and robustness for social networking.

The P2P problems, in today's context

Even if decentralized protocols and clients were invented, there will
be a long road to democratizing social networks. The messages are
expected to be lightweight, so photos and other large batches of
content would have to be stored somewhere outside the messages. Most
users wouldn't trust their laptops (much less their mobile devices) to
store content and serve it up 24 hours a day, so they would need a
cloud service, which might or might not be distributed.

A backup service is also necessary in order to recover from a local
disk failure or other error that wipes out several years of your
accumulated identity.

Problems such as impersonation and unsolicited communications (spam)
are hard to solve in decentralized systems because trust is always a
hierarchical quality. This is true everywhere in life, beyond the
level of a family or neighborhood. We expect our professors to be good
because they were hired by the college, and expect the college to be
good because it was accredited by a centralized facility, whose
managers were in turn appointed by elected officials. This system can
and does break down regularly, so mechanisms for repair are always
built in.

Nobody can be banned from a decentralized social network because
there's nothing to ban them from. But there are ways to re-introduce
enough centralization to validate credentials. For instance, the
American Bar Association could register lawyers in good standing, and
you could check whether someone claiming to be a lawyer in the US was
registered. But we wouldn't want to take this process too far and
create a web of accreditations, because that would devalue people
whose skills and viewpoints lie outside the mainstream.

You could still check whether someone shares friends with you, because
one person's claims of friendship could be traced back to the sites he
claims to be friends with. Someone could game the system by setting up
fake sites claiming to be people you know and linking back to them,
but this is a huge amount of work and leaves the perpetrator open to
arrest for fraud. Free software developer Thomas Lord suggests that
identity could also be verified through "a fairly shallow and
decentralized hierarchy of authentication like the system of notary
publics in physical life."

All in all, the problems of finding people and trusting people
suggests that there's role for aggregators, just as in the case of
RSS. And these aggregators could also offer the kind of tracking
services (who talked about me today?) and statistical services (is
Michael Jackson's death still a major topic of conversation?) that get
business people so excited about Twitter. A decentralized social
network could still be business-friendly, because traffic could be
analyzed in order to target ads more accurately--but hopefully,
because peering clients are under the users' control, people who
didn't want the ads could configure their systems to screen them out.

When you set up an account, you could register with aggregators of
your choice. And whenever you connected to someone, you could
automatically register his account with a list of your favorite
aggregators, in case he hadn't registered himself. If people wanted
control over where they're aggregated, I supposed something equivalent
to a robots.txt file could be invented. But it's not sporting
to refuse to be counted. And there's no point in invoking privacy
concerns--face it, if the NSA wants to read your tweets, they'll find
a way.

So those are some of the areas where the problems of P2P and social
networking intersect. Let's remember that current social networks are
far from solving problems of findability, trust, and persistence as
well. I don't check how many followers I have on Twitter; I figure
most of them are spam bots. (Apologies to any of my followers who
actually are sufficiently embodied to be reading this.)

Could
OpenSocial
be used to implement a P2P social network? It's based on a single
object that is expected to query and update a single server. But the
interface could probably be implemented to run on a single user's
system, registering the users or aggregators with whom she
communicates and querying all those users and aggregators as
necessary.

Industry analysts have been questioning for years whether Twitter is
financially viable. Well, maybe it isn't--maybe this particular kind
of Internet platform is not destined to be a business. Responsibility
for the platform can be distributed among millions of sites and
developers, while business opportunities can be built on top of the
platform as services in analytics, publicity, and so forth.

Like Google, Twitter and the other leading commercial Internet sites
have made tremendous contributions to the functionality of the
Internet and have earned both their popularity and (where it exists)
their revenue. But the end-to-end principle and the reliability of
distributed processing must have their day again, whenever some use of
the Internet becomes too important to leave up to any single entity.

Wouldn’t it be great if you could see real-time results for your Google searches? If as soon as something new was published it would appear in your search results?

It’s bound to happen eventually, but for now here’s a great way of narrowing your searches down to results discovered in the past few minutes… or even seconds.

The Omgili Blog has published a guide to editing the URL of your Google search to time limit it way beyond the controls provided as standard.

Here’s how it works…

Search for Barack Obama in the past 24 hours:

http://www.google.com/search?q=barack%20obama&hl=en&output=search&tbs=qdr:d&tbo=1

Notice the URL parameter qdr:d. I assume qdr stands for Query Date Range (sounds about right). All you have to do to search for the query in the past minute is to change the parameter to qdr:n, and for the past second to qdr:s.

Past Minute:

http://www.google.com/search?q=barack%20obama&hl=en&output=search&tbs=qdr:n&tbo=1

Search results from the past minute

Past second:

http://www.google.com/search?q=barack%20obama&hl=en&output=search&tbs=qdr:s&tbo=1

You can also set a time frame in minutes like past 10 minutes:

http://www.google.com/search?q=barack%20obama&hl=en&output=search&tbs=qdr:n10&tbo=1

or past 30 seconds:

http://www.google.com/search?q=barack%20obama&hl=en&output=search&tbs=qdr:s30&tbo=1

It’s as simple as that. If you’re searching for really up-to-date information it’s a useful trick to know. Hopefully it won’t be long before Google makes this officially supported within its Advanced Search controls.