Images Optimizing for the Web

Optimization - Who needs it?
After text and hyper-links, images are the most frequently displayed Web entity. Images used on the Web are often combined with text and hyperlinks and can range from low-resolution static images to high-resolution interactive images complete with image maps. Everyone from the new mom making a Web page about her new-born-child to the professional Web Designer/Developer creating an interactive entertainment site for a highbrow client can use images to spice up their Web pages.

Why Optimize?
Optimization is a reoccurring phrase in the Web vernacular. Image optimization is simply creating and using images for the Web that are designed with the Net in mind. This means you consider the way the images will perform on the Net. Performance on the Web usually means how long it takes to load a page. This is a necessary consideration because Web development is out pacing the technology that makes the Web accessible. In other words, our preoccupation with designing various types of Web content (images, text, objects, exc.) leads to advancements in Web authoring that are always technologically ahead of the Internet itself. This creates and maintains a need to design content for the Web that will survive and even thrive under the deficiencies of the Internet.

Don't be fooled by your PC
Unfortunately image file sizes can be quite large. These often-obese files may have a difficult time jogging around on the Net's transfer-rate tracks. They may do well internally on a given computer system but this is like exercising on a stationary bike. There are luxuries an image may enjoy at a spa workout on your PC that are not available while that image is being worked out over the Web's jungle like environment. Applications accessing an image on your hard-drive have the benefit of vast amounts of RAM memory, swift bus speeds and high-speed processors (on most up-to-date systems). However when your system has to access that same image over the Web, it's like making that chunky file get off of the stationary bike and run in the Iron Man Challenge. The conditions are strenuous and the progress of a users file download can be hampered by many different variables, some of which are outside of the users control. Although your PC or Mac may be an expert at getting these hefty files around on your system in-house, the Internet has yet to handle the problem as well.

Putting Image Size into Perspective
They say a picture is worth a thousand words. As a matter of fact, on a computer, a picture in the form of a graphic is worth a whole lot more than 1,000 words. Let's look at the numbers. As an example, let's say a particular image file that takes up about one quarter of a browser screen is around 80K (approximately 80,000 characters). Now, we'll say that the average word is five characters. In addition we'll add a couple of spaces for good measure giving a total of seven characters. If you take an image composed of 80,000 characters and divide that by a word composed of 7 characters you get approximately 11,400 words! This means you could have a text file composed of 11,400 words that was the same file size as 1 image that takes up one quarter of the monitor screen (in theory). Of course this varies depending on the resolution and number of colors the image is composed of, but the lesson is clear. In order for images to share the same page with other images and text while still maintaining decent download time, optimization is a must.

An 80K file, transmitted to a browser across a 28.8 KBPS connection, takes about 40 seconds. A good rule of thumb (until broadband becomes a standard) is to estimate that the average home user is getting about 2K (2,024 characters) per second transfer speeds from their Net connection. This problem gets worse when International connections are taken into consideration. Some countries have very poor connection speeds due to out-dated phone lines and inferior phone equipment.

Why use the "ALT" Tag
Many advanced Web users who don't have broadband access turn off their automatic image load feature. They navigate to the desired information, and then request image loads for specific pages. Many Web Designers/Developers use the ALT option with images so that a browser operating in text mode will display a text message concerning the image or a text substitute for the image. Without the ALT option, a user might not comprehend the objective of your page. This is especially true if the image has text in it that is part of a company logo or if the image has important information that is not included elsewhere on the page. Therefore a Web Designers/Developers work should always make sense even when images are not available. The ALT option makes sure the user gets your point or message even if the image did not make an appearance onto the display. Note that the text used in ALT cannot include HTML markup. Tags like STRONG, header tags, and so on, are unusable. The ALT option uses regular text or special characters and no tags!
Read more…

Search Engine Marketers and their LSI Myths

As with many IR topics, LSI is a subject that from time to time surfaces in the search engine marketing industry through forums, conferences and events. Often, these discussions are limited to partially quoting or interpreting IR papers and patents.

At the time of writing this industry doesn't provide its members with stepwise how-to instructions for implementing LSI even when most of the information is available online. Consequently search marketers don't understand LSI. In particular, they don't seem to grasp the advantages and limitations of the technique, what is/is not LSI or what this can or cannot do for them or their clients.

The result is the dissemination of inaccurate information. For instance, some marketers have assigned a meaning to the terms "latent" and "semantic" that is not in the LSI literature. Others have become "experts" at quoting each other hearsays. In an effort to sell their services, even others have come with "LSI-based" software, videos, "lessons", tools, etc., that are at best a caricature of how a search engine or IR system implements LSI. Whatever these tools score probably is not what a search engine like Google or Yahoo might be scoring.

Some of these marketing companies even display a tag cloud of words and try to sell the idea that they have a real or unique "LSI technology". Such clouds are easy to construct and link to search result pages. These can be constructed from any lookup list, thesaurus or search log files. No SVD is needed. In an effort to save face and avoid litigation from consumers, some of these
purveyors of falsehood as other crooks and their friends play with words and call theirs "LSI-like", "LSI-based", "LSI-driven" technology or use similar snaky phrases. The funny thing is that other SEOs, bloggers, and marketers fall for these tactics. And how to forget the "LSI and Link Popularity" half lies and half crap promoted by those that offer link-based services? As usual, SEO bloggers repeat such hearsays like parrots since most of these don't really know how to SVD a simple matrix.

Since there is now a crew of search marketing firms claiming to sell all sort of
LSI-based SEO services and making a profit out of the ignorance of consumers, I am making public my case against these firms in the post

Latest SEO Incoherences (LSI) - My Case Against "LSI based" Snakeoil Marketers

Stay away from such marketing firms, their claims and businesses.

By providing an SVD-LSI tutorial, complete with step-by-step how-to calculations and examples, I hope to put to rest the many myths and misquotes disseminated by these search marketers. Here is a list of the most common misconceptions:

Latent Semantic Indexing (LSI) ...

is a query operator, like a proximity operator ("~").
is limited to English documents.
is limited to text.
is theming (analysis of themes).
is used by search engines to find all the nouns and verbs, and then associate them with related (substitution-useful) nouns and verbs.
allows search engines to "learn" which words are related and which noun concepts relate to one another.
is a form of on-topic analysis (term scope/subject analysis).
can be applied to collections of any size.
has no problem addressing polysemy (terms with different meanings).
is a kind of "associative indexing" used in stemming.
is document indexing.
can be implemented by a search engine if the system can understand the query.
is really important only when you have several keywords that are related by category.
is not too computationally expensive.
is a Google update.
is implemented as LSI/IDF.
is an anchor text thing.
is a link building thing.
scores differently regular text and anchor text (text placed in anchor tags).
looks at the title tag and the textual content of the page that your link is on.
ensures that anchor text variance will not dilute a link popularity building campaign.
scores differently links from specific url domains.
is applied by search engines by going to each page and analyzing the importance of a page as per a matrix of words.
accounts for word order (e.g., keyword sequences).
grants contextuality between terms.
is co-occurrence.
compares documents against a "master document".
is disconnected or divorced from term vector theory.
is Applied Semantics's CIRCA technology.
can be used as an SEO optimization technique to make "LSI-Friendly" documents
was invented by Google.
was patented by Google.
is ontology.
can be used by SEOs to improve rankings in SERPs.

This list of misconceptions, myths or plain lies was recopilated from
SEOBook, SearchEngineWatch, Cre8asiteforums, SEOChat, SEOMOZ, SeoRoundTable, Webmasterworld and similar forums. A sample of the Latest SEO Incoherences ("LSI") is available online.

This spreading of incorrect knowledge through electronic forums gives rise to a bursting phenomenon that in the past we have referred to as
blogonomies. In our view knowledge, citation importance or link weight transmitted through such bursts can be considered corrupted. Thus, this tutorial pretends to dispel search marketing blogonomies relevant to SVD and LSI.

The fact is that query operators are not part of LSI. In addition to English text, LSI has been applied to text in Spanish and to text in other languages. LSI makes no presumptions regarding words in documents or queries -whether these are or should be nouns, verbs, adjectives or other form of tokens. LSI is not on-topic analysis or what SEOs like to call "theming". Current LSI algorithms ignore word order (term sequences), though a Syntagmatic Paradigmatic Model and Predication Algorithm has been proposed to work around this.

Another misconception is that latent semantic is co-occurrence. Actually is not; at least, not first-order co-occurrence. LSI works great at identifying terms that induce similarity in a reduced space, but research from Dr. Tom Landauer and his group at the University of Colorado (19) indicates that over 99 % of word-pairs whose similarity is induced never appear together in a paragraph. Readers should be reminded that synonyms or terms conveying a synonymity association don't tend to co-occur, but tend to occur in the same, similar or related context. While LSI itself is not co-occurrence, term co-occurrence is important in LSI studies.

A persistent myth in search marketing circles is that LSI grants contextuality; i.e., terms occurring in the same context. This is not always the case. Consider two documents X and Y and three terms A, B and C and wherein:

A and B do not co-occur.
X mentions terms A and C
Y mentions terms B and C.

:. A---C---B

The common denominator is C, so we define this relation as an in-transit co-occurrence since both A and B occur while in transit with C. This is called second-order co-occurrence and is a special case of high-order co-occurrence.

However, only because terms A and B are in-transit with C this does not grant contextuality, as the terms can be mentioned in different contexts in documents X and Y. For example, this would be the case of X and Y discussing different topics. Long documents are more prone to this.

Even if X and Y are monotopic these might be discussing different subjects. Thus, it would be fallacious to assume that high-order co-occurrence between A and B while in-transit with C equates to a contextuality relationship between terms. Add polysemy to this and the scenario worsens, as LSI can fail to address polysemy.

There are other things to think about. LSI is computationally expensive and its overhead is amplified with large-scale collections. Certainly LSI is not associative indexing or root (stem) indexing like some have suggested. It is not document indexing, but used with already indexed collections whose document terms have been prescored according to a particular term weight scheme. Furthermore, understanding a query; i.e., the assumption that the query must be of the natural language type, is not a requirement for implementing LSI.

In addition, the claim that terms must come from a specific portion of a document like title tags, anchor text, links or a specific url domain plays no role and is not a requisit for implementing LSI. These false concepts have been spreaded for a while, mostly by those that sell link-based services,
who conveniently don't provide mathematical evidence on how LSI works since they cannot do the math.

True that some papers on large-scale distributed LSI mentions the word "domain" in connection with LSI, but the term is used in reference to information domains, not url domains or what is known as web sites. True that LSI can be applied to collections that have been precategorized by web site domains, but this is merely filtering and preclassification and is not part of the SVD algorithm used in LSI.

Let me mention that the technique of singular value decomposition used in LSI is not an AI algorithm, but a matrix decomposition technique developed in the sixties; though SVD has been used in many environments, including AI (1-14). Roughly speaking, SVD itself is just one matrix decomposition technique. Certainly there are more than one way of decomposing and analyzing a given matrix. Plenty of alternate techniques are available online (e.g., LU, QR, etc.).

True that SVD as NMF (non-negative matrix factorization) has been used to conduct email forensics. True that SVD has been used as an eavesdropping tool for identifying word patterns from web communities (15-18), but LSI is not a secret weapon from the Government designed to read your mind --at least not yet. :).

Another misconception is that LSI is CIRCA, a technology developed by Applied Semantics (acquired by Google). As mentioned at this IR Thoughts blog, this is another SEO blogonomy. CIRCA is based on ontologies, not on SVD. LSI is not based on ontologies, but on SVD.

When you think thoroughly
There is No Such Thing as "LSI-Friendly" Documents. This is just another SEO Myth promoted by certain search engine marketing firms to market better whatever they sell. In the last tutorial of this series (SVD and LSI Tutorial 5: LSI Keyword Research and Co-Occurrence Theory), we explain in details why there is not such thing as "LSI-Friendly" documents and why SEOs cannot use LSI to optimize for ranking purposes any document.
Read more…

Image Optimization for Visual Search Results

You've been optimizing the text-based content of your web pages for the search engines for years now. But that's not enough anymore. The web is growing more visual every day, with the consequence that searchers now want to be able to find images and video as easily as they can find articles and other word-based content. That means you will have to start optimizing your images. Keep reading to learn how.

There are two kinds of image optimization techniques. The first, which has been around since the web was able to display images, deals with optimization for displaying on the web. This usually involves making the image's file sizes as small as possible so that they render quickly in a browser across HTTP. Slicing is often involved.

The other kind of optimization, which has only really begun to matter since people were able to search specifically for images, deals with optimizing your images for search engine indexing. So now, in addition to all of your usual SEO practices, you also have to make sure that your images are optimized in both ways. This is not going to get any less important either, with the emergence of new and improved search engines designed solely for images, yotophoto being an excellent example. Optimizing your images is only going to matter more.

Just as optimizing your images for easy and fast viewing over the Internet is simple, optimizing your images for SEO is not a major headache either. There are a few simple rules to follow and a little investment of time. This is something you should have been doing already for a long time and doesn't really come under the SEO umbrella.

1. Image Optimization : Make Use of Your File Attributes
2. Make Use of Your HTML Attributes
3. Image Optimization : General Presentation
Read more…

Image Optimization : Make Use of Your File Attributes

As well as the HTML attributes used in your mark-up code, you can also use several properties of the actual file itself for your SEO needs. On a page displaying lots of images, each image should of course be fairly small and optimized for viewing across the Internet, but each of these images should be thumbnails that link to a larger, full size image, on a page of its own if necessary. Bigger image files are seen as more important and tend to do better in image focused searches.

Linking to a full-size image also has the benefit of providing us with a link tag that can be optimized as well, giving us another opportunity for keyword placement. So the size of the image is one property, or attribute, that can be turned to our advantage and the link to the larger image is another.

The obvious choice of file attributes that we have control over is the filename. Some people choose to match the filename with the alt attribute. While there is no reason not to do this, unless your alternative text is more than a couple of words, you have to remember that the filename is not used in any way for accessibility and is therefore fair game for some keyword placement. This will be reflected in your HTML code in the SRC of the image tag, thereby being visible to bots and crawlers.

Remember to always give images meaningful names, so avoid "image1.png" at all costs. Also, don't use spaces in an image name at all; use a hyphen instead, which most search engines will interpret as a logical space.

The last important attribute of the image file to think about is the file extension, which denotes the format of the image file. For web images this is likely to be either .jpg, .gif or .png. For relevancy, always ensure you use an appropriate format for the image you're displaying; so for photographs use jpg and for logos, line drawings or other non-photographic imagery stick with gif or png. This isn't as important for SEO but is definitely a current best practice.
Read more…

Make Use of Your HTML Attributes

If you aren't using the alt attribute with all of your images already, you need to stop and ask yourself why. Alt, or alternative text defined as an attribute of the image tag, has been a requirement to meet accessibility standards for as long as there have been accessibility standards. SEO often goes hand in hand with accessibility and nine times out of ten something that's good for accessibility is good for SEO. Using alt text with images is no exception.

Just to clarify things for anyone that doesn't already know, the alt attribute is used to display some text when the picture they are associated with fails to load for some reason. Reorganizing your web site's directory structure is a prime candidate for causing this. It's also used to display some text when the picture is not loaded at all, such as when viewed with a text-only browser or screen reader (hence the accessibility requirement).

As for the actual text content making up the alt attribute, this should primarily be something that adequately describes the picture, but should also, where possible, include the keywords for which you are optimizing your page or site. This will raise the keyword density of the page slightly, but provided you aren't totally squeezing every keyword possible into the page content already, this shouldn't go against you. I don't need to tell you not to use alt text as a poorly disguised vehicle for keyword spamming.

Another attribute that can be put to good use here is the title text. This is the attribute that makes a little tool-tip appear when the mouse pointer hovers over an image. It is sometimes confused with the alt attribute, but unlike the alt text, it can be used with many other elements, not just images. This is another place where a strategically placed keyword will help you. Like the alt attribute, its textual content should be relevant and descriptive.

One final attribute you can make use of for SEO purposes is the longdesc attribute. This complements the shorter alternative text with a longer description in a separate file. The content of the longdesc attribute is normally in the form of a URL, which links to the page containing the long description. This is one more place for you to insert a keyword if appropriate (and the page it links to is obviously prime real estate for plenty more!)

Because these attributes are primarily used within the accessibility framework that exists to make the Internet a better experience for people with low-vision, blindness or other disabilities, the use of keywords should take a back seat to relevant and informative text. Use them to enhance your SEO where possible, but don't use them at the expense of accessibility and definitely don't overuse them.
Read more…

Image Optimization : General Presentation

Try to avoid setting images using CSS or JavaScript if SEO is an important factor. When using images as part of the content of your site always embed them directly on the page with a standard HTML image tag. If your image is set dynamically with either CSS or JavaScript, the spiders indexing your site will not know that the image is there and it will therefore be impossible for them to index and pointless for you to optimize. This obviously doesn't apply for images that are used in your site that don't form part of the page content, things like roll-overs in a navigation menu for example, or heading images.

You should also make sure that the image has appropriate and relevant text in the near vicinity, especially on pages with a lot of images on them. Crawlers will also look at the elements surrounding an image, so a nice block of descriptive text, in addition to a linked full-size image and perhaps a caption, will ensure that the search engines know what the picture represents.

The directory structure, or folder hierarchy, of your web site is also important if your want your images indexed by the search engines. First of all, make sure the folder or folders that your images reside in on the web server is accessible to bots and spiders. Make sure a permissions entry or robots.txt file is not obstructing them in any way, and try not to make the paths to the files too deep. Something like www/mysite/images is going to be more accessible than www/mysite/content/images/products/cameras/Kodak/8mp/ for example.

To Conclude

I'm sure it goes without saying that the page your optimized image is being used on has also been optimized for search engines, but if it's not then it should be as all of your efforts optimizing the image will be wasted. Optimizing images is almost always secondary to optimizing that actual content on the site itself, and why go to the trouble of optimizing images on a poorly optimized site?

If your image appears high in the SERPs for an image search, this will often lead to a visit to your site from the searcher and forms another route into your site from targeted traffic, so having your images rank well in image SERPs can only be a positive thing for your site. Optimizing images needs only a little thought and preparation. By applying the rules as the image is created you can save yourself time and effort later on, so follow these simple rules to keep your images in favor with the search engines and your visitors.
Read more…

25 Web Sites to Watch

What's tomorrow's YouTube? The Web's next breakout hit may be one of these innovative, useful, and fun new sites.

Think that all of the great Web sites have already been invented? Think again. The Internet is evolving in new and inventive ways thanks to mashups that pull data from all over the Web and to AJAX-based interfaces that give sites the same degree of interactivity and responsiveness that desktop apps possess.

To keep you ahead of the curve, we've rounded up 25 innovative Web sites and services that are well worth watching. Some of them help you design your own personalized Web site mashups; others enable you to create video mixes, build wikis, share personal obsessions, and more. But take note: A number of these sites are works in progress, and user-generated sites depend on developing a critical mass of content, which doesn't happen right away. With that in mind, check out the following dot-com destinations. One of them may become the next big Web hit.

Popfly

If you haven't already discovered the world of mashups, Microsoft's
Popfly is a good place to start. Mashups combine multiple Web-based sites or applications to produce all sorts of useful things, such as an overlay of traffic information over Google Maps. With Popfly, you can create your own mashups--and you don't have to know a lick of code to do it. Just drag prefab building blocks, connect them, and you have an instant mashup that you can add to an existing Web page or turn into its own site. For example, you can easily produce a mashup that grabs pictures from a site like Flickr and then displays them in a rotating cube.

Yahoo Pipes

Like Popfly,
Yahoo Pipes lets you create your own mashups or "pipes." As with Popfly, you drag and drop prebuilt modules, and then create connections between them. But Yahoo Pipes is much harder to use than Popfly, and the way to go about building your own mashup isn't always obvious. But if you're willing to do some digging and learning, you can build very useful stuff, such as a mashup that uses Yahoo maps to show the locations of all apartments for rent in a certain neighborhood.

BuzzDash

Are foreign movies better watched with subtitles or with dubbed dialog? Is it okay to cry at work? Who is the best center fielder of all time--Willie Mays, Joe DiMaggio, Mickey Mantle, Ty Cobb, or Ken Griffey, Jr.?
If these are the kinds of issues that keep you awake at night, we have a Web site for you.
BuzzDash lets you participate in, comment on, and see the results of numerous quick opinion polls. The polls are organized by topic, such as movies, football, and politicians; and if you have a burning question you want answered, you can create your own survey.

Wayfaring

If you're obsessed with cartography, wander over to
Wayfaring.com. Here you can easily create personalized maps for a walking tour of London, say, or a wine-tasting trip through Napa or a pub crawl through Seattle. The site provides the tools you'll need to build annotated maps--complete with descriptions, Web links, and photos of your favorite stops--and then post them for others to view and discuss. It's fun to check out the maps other users have created. One of my favorites: a map of shipwrecks in the Great Lakes, including links to Web sites that discuss each wreck.

CircleUp

Anyone who has ever tried to organize an event--or to get a group of people to respond to a simple question like "Who can drive the kids to Little League this week?"--knows how tough it is to filter and organize the answers into coherent, usable form. That's where
CircleUp comes in handy. Use this site to send an e-mail or instant message to a group of people; then wait for it to return a consolidated summary of responses to you. It's simple, it's free, and it will liberate you from the recurring feeling that you're herding cats whenever you try to coordinate an activity involving more than two people.

Pageflakes

The Web is just as chaotic as the world--but
Pageflakes can organize both of them for you. This super-customizable version of a home page enables you to pick the news and information feeds you want to read, and to specify the "flakes," or applets, you want to include. Flakes let you add all sorts of cool stuff to your page--movie times, to-do lists, a notepad, e-mail, a horoscope--even sudoku or a personal blog. If you're looking for one-stop browsing, this is it.

SpockIf

you spend more time than you should googling folks, you need to check out
Spock.com, a search engine designed to dig up information about people. Start by typing in a name, or a search term that describe a group of people--for example, Motown Singer, or Rastafarians. The site then searches through various social networking sites such as MySpace and Friendster, along with more-general Web sites, and reports on what it finds.

For many searches, you'll get multiple categories of links. For instance, type in Barack Obama, and you'll get groupings like 'Democrat', 'Senator', and '2008 Presidential Candidate'. Click any link, and you'll find pages related to both Obama and the larger category. There are also links to photographs, tags, Obama's Wikipedia entry, his Senate site, and so on. Spock is currently in beta form (its public launch is scheduled for sometime before September), and at the moment you need an invitation to gain access to it, but with luck you can wangle one by filling out the form on the site.

Swivel

Data and graph fanatics, you have a home.
Swivel, holds a mind-boggling array of charts and graphs--from a line graph illustrating the relationship between wine consumption and crime in the United States over the past 30 years to a pie chart showing the percentage breakdown of bird flu cases in 14 Asian countries. But the site's most outstanding feature is its ability to integrate different charts containing seemingly unrelated data. Want to compare the national murder rate to the cost of a first-class stamp, or to total hours of media use in U.S. households, over the same period of time? Now you can.

Clipmarks

The Internet is the best research tool in existence. That's the good news--and the bad news. Though finding information online is easy, keeping track of it all can be tough. Most people end up copying and pasting information from Web sites, printing it out, or bookmarking pages--with no good way to keep it all organized or find what they want fast.

Clipmarks solves the problem neatly by installing a toolbar that hitches on to Internet Explorer or Firefox. As you surf the Web, use the Clipmarks toolbar to clip and save sections of a page--text, graphics, and even YouTube videos. Clipping something automatically archives it under your Clipmarks profile, though you can also save it directly to your blog or send it via e-mail. You can even share your clip collections, or look at archives that other users have assembled.

OpenDNS

One reason the Web sometimes feels poky, even when you use broadband, is the Internet's Domain Name System. When you type a URL (such as www.pcworld.com) into your browser, DNS servers must translate that alphanumeric information into a numeric IP address (such as 70.42.185.10) that Web servers and your PC can understand. Typically your ISP's DNS servers handle the translation work.

But
OpenDNS speeds up the translation (called "name resolution") by handling the process on its own high-speed DNS servers. The service includes other cool time-savers, as well, such as the ability to create keyboard shortcuts. For example, instead of typing www.pcworld.com each time, you might arrange to type in the letter p and jump immediately to your favorite online destination.

Trulia

There are plenty of real-estate sites on the Web, but this one comes with a twist. By combining social networking with mapping and search technology,
Trulia gives you a high-tech way to find the home of your dreams. Use the different sliders and checkboxes to focus your search (price, square footage, and the all-important number of bathrooms), and Trulia will display qualifying homes that are for sale in the specified area, overlaid on a map. The site includes useful, city-specific real estate guides containing additional data on average home sale prices, most popular neighborhoods, crime statistics, and the like.

The Trulia Voices section hooks you up with other people to discuss neighborhoods, housing issues, or real estate in general. Trulia is relatively new, so that section is as yet quite sparse. But if the site gains traction, Trulia Voices may prove to be the most useful tool of all.
Tip: To view some cool
time-lapse maps showing how an area (such as Las Vegas) has developed over time, hop to Trulia Hindsight.

PopURLs

If you're an information hound, you probably spend lots of time jumping from Digg to Del.icio.us to YouTube to Fark to Google News to anything-dot-com. With
PopURLs, you no longer need to waste time hopping around the Internet. An aggregator of all things informative, PopURLs features massive lists of headlines, videos, blogs, and content from all of those sites, as well as plenty of others.

One nice bonus is that you can search some of the sites--Del.icio.us, Flickr, and Wikipedia, among others--straight from PopURLs. It's also easy to tweak the way PopURLs looks and works, too, including customizing the layout of the feeds so you can put the ones you view most regularly on top. The scrapbook is a particularly useful feature; just click the 'Add to Scrapbook' button next to any headline, and PopURLs will save it (and up to 19 other favorite items).

Goowy

For several years, observers have speculated that the Internet will become, in essence, a vast operating system, with applications built on top of it. To a great extent, that's the premise underlying
Goowy. Create an account, and you can start building your own desktop, with applications for e-mail, contacts, instant messaging, file management, and more. You can also add prebuilt widgets, called "minis," to your desktop, for news, stocks, weather, and other tidbits of information.

Don't expect the site to replace your desktop at this point: Goowy lacks full-blown applications and doesn't access your hard drive. Still, it's a glimpse into what may be the future of the Internet.

BlogBackup

OnlineIf you have a blog and you aren't sure that your blog provider will always have a backup in case of a crash, head over to
BlogBackupOnline pronto. The site is straightforward: Log in, enter information about your blog, and the site diligently backs it up every day (provided that you use one of the 11 supported blogging services--Blogger, Friendster, LiveJournal, Movable Type, Multiply, Serendipity, Terapad, TypePad, Vox, Windows Live Space, or WordPress). The site is also a great tool if you ever decide to move your blog from one platform to another. After you've backed up your blog, BlogBackupOnline can bring all of your old entries into the new service.

Ma.gnolia

If you're a fan of the social bookmarking site
Del.i.cio.us but wish that it were a little more social--and a little less geeky--check out Ma.gnolia. As with Del.icio.us, you can save and share bookmarks and tags. But Ma.gnolia presents a far more appealing design, and it has a few nice extra talents, such as the ability to let you save snapshots of your favorite pages.
Ma.gnolia excels on the social networking front. You can join groups, share bookmarks, and browse groups and discussions for more bookmarks on topics that fascinate you. If you're strictly interested in bookmarking and tagging, Del.i.cio.us remains the best place to go. But if you want to share your findings with others, Ma.gnolia is worth a taste.

Yodio

Of course your friends and family want to see all of your pictures from your Venetian vacation--but wouldn't it be better if they could also hear your voice, telling you cool details about what they're looking at, or narrating a story regarding some gondola hijinks?

Yodio lets you combine photos with sound files to create an audio postcard. To make a recording, call a special Yodio phone number and start talking (or you can record your own MP3 file and upload it). Once you've transferred photos to the site, you can add sound and publish your postcard on the Web for others to admire. The site also has a scheme for making money from your productions, though we wouldn't bet the farm on it.

Meebo Rooms

You may have heard about
Meebo, the Web-based instant messaging program that lets you communicate with people over various IM services, such as AOL Instant Messenger and Yahoo. (See our review of Meebo.)

Well equally cool is Meebo's newest launch,
Meebo Rooms, which lets you participate in multimedia chats. You'll find chat rooms on everything from sports to SpongeBob Squarepants, and the rooms support videos and photos that you can discuss with fellow fans. If you can't find a topic you're interested in, simply create a new room and post visuals for others to discuss. You can even embed rooms into your site or blog, and use them to lure people to your own Web destination.

Squidoo

Got an obsession or special passion you want to convey to the world?
Squidoo is your ticket. Using the site's simple tools, you can build a "lens" (aka, a Web page) that includes information on any topic that's close to your heart, whether it's cats or Kafka.

A lens can be quite different from a blog. With lenses, you share links to resources, book recommendations, YouTube videos, Flickr photos, eBay auction items, and other cool Web content related to a single subject. Even if you don't build your own lens, the site is worth visiting to see what others have done. You can learn a lot more about lemonade or laptop bags than you ever thought possible.

SplashCast

For anyone who has ever dreamed of becoming a broadcast mogul, here's a quick (and free) way to get a taste of what it might be like.
SplashCast lets you create your own streaming media channel that combines video, music, photos, text, narration, and RSS feeds. A wizard walks you through the steps of building your channel. Start by uploading media files from your hard drive, or point to files on other sites. Add captions, commentary, and RSS feeds, and your channel is ready to go. Once you're done finessing your channel, you can send it to friends and family, or syndicate it to blogs and social networking sites. So far, there's no way for you to make money from your channels, but the site plans to start a revenue-sharing model.

Eyespot

To create a video all you have to do is point your cell phone, digital camera, or camcorder at something, press a button, and stay focused. The result: an instant movie. What's not so easy, though, is organizing, editing, and combining your video clips to create something aesthetically pleasing.
Eyespot simplifies this process. Upload your videos to the site, and then use its tools to crop and mix them either with other clips you supply or with free video from the site. You can even add effects, transitions, and titles before publishing your video mix for the world to see.

Approver.com

Anyone who has collaborated with multiple people on a document knows the true meaning of frustration. You have to distribute the file to the entire group, convince every person to review it by a certain date and time, and get them all to sign off on it.
Approver.com lowers the pain quotient considerably. Upload the document you want to track, and the site routes it to everyone who needs to see it. It also lets you set deadlines for reviewing the document, and keep track of approvals and comments. Approver.com works with a number of apps, including Microsoft Office, Adobe PDF, and Open Office; alternatively, you can use the site to create documents, and have your colleagues read them online.

Pbwiki

Though the whole world seems to know about Wikipedia these days, many people and organizations don't realize how useful it can be to build their own wiki. In business settings, it's an ideal way to share information within a group. For individuals, it's perfect for planning a get-together, organizing a fan club, or sharing memories with family members.
Pbwiki makes creating miniature versions of Wikipedia a breeze. The site's simple, Web-based tools are perfect for building a wiki--you don't need to have any HTML know-how--and getting others in on the editing action.

MyPunchbowl

Planning a party, but unsure of what date works best for your friends?
MyPunchbowl is basically Evite with a little extra kick. Like any self-respecting online invitation site, MyPunchbowl lets you create party invitations and then track who's coming, who's not, and who has yet to respond. But the site also enables you to send pick-a-date e-mail messages to see which day works best for people, set up message boards (useful for organizing things like who's bringing the vino), and produce a map of the shindig's location using Google Maps. You can also create an after-party message board where people can share comments, photos, and videos--if, um, appropriate.

Picnik

You probably have hundreds or thousands of digital photos on your PC. And a lot of those photos would probably benefit from a little tweaking. But that doesn't mean that you have to download and install photo editing software.
Picnik supplies a nice suite of tools for editing photos online. All you have to do is upload your photos, or have Picnik grab them from a site like Flickr (which doesn't have editing features), and then get to work. Picnik offers tools aplenty for performing simple editing--cleaning up red-eye or resizing photos, say--as well as doing more-extensive work, such as changing the exposure, fixing a color cast, or applying special effects.

Quintura

Quintura provides a new way for you to search for things on the Internet. When you enter a search term, Quintura returns an ordinary list of results on the right-hand side, while on the left it offers a visual map (or "cloud") of related terms. Click any of these words, and the list of results changes to encompass the new term as well, which can help you narrow your search. The process may sound clunky, but it's surprisingly effective.

Read more…

1000 Type Treatments

A great book - the best I have found on modern typography

This book is about 24cm square and literally as it title says shows 1000 type treatments. If your typography is becoming a little stale this is a real eye opener. All though some of the designs are very ultra modern - if you applied similar styles to your traditional clients they would think you had gone completely mad (type overlaid so it looks great but highly illegible - so it works as an image rather than type) It is ideal if you want inspiration to try create something fresh and modern. There are of course more subdued corporate styles too.

Each page consists of a few pages of a brochure with close up of elements, the look of the book itself is also well designed. I was so impressed by this book I went out and bought another in the series - 1000 graphic elements, again a good book but not as good as this one.
Read more…

Freelancing and Time Management

How do you manage your time when you work out of your home?

Usually I am pretty self motivated, If I have a reasonable amount of work I will try and be in my office by 9.00, earlier if I am really busy. If I am quieter I will start a little later. I will generally stop for about 20minutes for lunch. One of the great things about working from home is that if you are busy you at least haven’t got to worry about travelling times and can fit work around things if necessary.

Do you have a set schedule that you have to stick to, otherwise you won’t get your work done?

I do set myself a “moving” schedule each day/week. I will plan in what I intend to do each day of the week and always so my best to at least get done what I planned for that day. I call it a “moving” schedule as timing does move. Sometimes I get things done quicker than expected, or slower if I have computer problems or an urgent job crops up. At the end of the day I will revise the schedule for the rest of the week accordingly. Its amazing how having a schedule can stop you panicking. If I get given a lot of work at once with tight deadlines I, like most people panic a little, but as soon as I have it down in black and white and see that it is in fact feasible I feel much better.

When is it time to quit for the day? Strict 8 hour workdays, or does it go until the job’s done?

If possible I try to finish at a reasonable time, usually about 6.00pm, if its quiet sometimes I finish earlier, if I am busy I’ll start at 7.00am and work until I get the job done. As of yet I have never missed a deadline. I do have a really bad habit of keep checking my email in the evening though or sitting with a sketch pad and scribbling ideas for a project while watching TV. One of the bad things about working from home is you never quite escape from your work, luckily I have a specific room/office for work at home which helps.

Are you ever tempted to work 16 hour days to make more money? This is not in terms of productivity, but more like advice to a new freelancer and how s/he might arrange the workday/schedule.

For about 6 months I really overdid it on the work front. I had a lot of work for a particular client and ended up working late and weekends and receiving a lot of calls from them out of hours too. I did very well financially but in the end had to take a step back and decide enough was enough as I was just becoming completely stressed from overwork. If it had been the type of work I could easily have subcontracted out I would have done, but there was too much management involved.

On a couple of occasions when I have been really busy I have tried subcontacting out the work but neither time as been very successful. I subcontracted out a newsletter when I went on holiday but wasn’t happy with the results, type just didn’t line up how I wanted it too. I also tried subcontracting some advert designs to a friend of a friend who’s portfolio looked really good, but when the adverts came out they had jut done slight variations of what I had done before rather than fresh new layouts I had asked for. I ended up redoing the adverts myself. I think subcontracting could be a good answer if you are really busy its just finding the right people at a price where you can still make a margin.

I think you have to make sure you get a balance between work and home life. There is no point earning a lot of money but being completely tired and miserable. There will be times you have to put extra hours in (we worked on my accounts this weekend) but there will be quiet times too.

I would love to hear what other freelancers think too.
Read more…

10 Best Intranets of 2007

This year's winners emphasized an editorial approach to news on the homepage. They also took a pragmatic approach to many hyped "Web 2.0" techniques. While page design is getting more standardized, there's no agreement on CMS or technology platforms for good intranet design.

The 10 best-designed intranets for 2007 are:

American Electric Power (AEP), United States
Comcast, United States
DaimlerChrysler AG, Germany
The Dow Chemical Company, United States
Infosys Technologies Limited, India
JPMorgan Chase & Co., United States
Microsoft Corporation, United States
National Geographic Society, United States
The Royal Society for the Protection of Birds (RSPB), United Kingdom
Volvo Group, Sweden
Nine winners are traditional company-wide intranets. The winning Comcast design is an extranet that supports both internal marketing staff and external vendors, affiliates, and marketing partners.

Contrary to last year, when most of the winners hailed from outside the US, this year 6 of 10 winners are American. Of the four winners from other countries, three come from countries that have generated many past winners: Germany, Sweden, and the UK. Given the size of Germany and the UK, it's not surprising that they've had so many winners. Sweden's continued top placement, however, is striking. Maybe there's something to the claim that Scandinavians emphasize good design. (Then again, other Scandinavian countries have never produced a winner, so maybe Sweden rules in intranet design.)

Most of this year's winners are from countries that have fostered previous winners. However, we also have a new country represented this year: India. Although the World Bank Group used an Indian design agency when it won in 2002, the bank itself is a multinational organization headquartered in the US, so we counted its intranet as US-based. Thus, Infosys is the first winner truly based in India. Having India join the ranks of winning countries is a clear symbol of its growing might as a software superpower.

Rise of Usability in Manufacturing

We typically have several winners from the financial services industries. This year, we have only one: JPMorgan Chase.

Compared to past years, we have many more manufacturing companies in this year's top 10. Viewing "manufacturing" broadly, this sector has four winners: AEP, DaimlerChrysler, Dow, and Volvo. Last year, we noted that "manufacturing companies have historically focused on physical concerns and thus have less experience in creating good screen-based designs." Of course, in the modern world, manufacturing is highly intertwined with computers because it's a highly knowledge-intensive business. We can hope that the prominence of manufacturing companies among this year's winners symbolizes this important sector's embrace of the value of usability, and that the previous poor showing of manufacturing intranets is truly a thing of the past.

While most winners are big companies, we also have two winners from the non-profit sector: National Geographic Society and The Royal Society for the Protection of Birds. As this shows, you don't have to be a large organization or a traditional company to benefit from intranet usability. Well-designed intranets support employees and volunteers in achieving non-profit missions just as well as they improve productivity -- and thus profitability -- in for-profit businesses.

Multimedia, News, and Ratings

A trend from last year was even more pronounced this year: intranets are going multimedia. On the simpler end of the scale, "photos of the day" grace many homepages, and beautiful bird photos illustrate many top stories on RSPB's intranet. On the higher end of the multimedia spectrum, video is proliferating -- often for training purposes, but also for executive communications. AEP has its own TV studio for intranet productions, offering both streaming video and live webcasts. National Geographic has webcam feeds that would be the envy of most organizations, including one focused on Alaskan grizzly bears.

Many intranets have long offered news feeds, but this year's winners have taken extra steps to make their news offerings more relevant to employees, both for internal news and for industry-related external news. Labeling and categorization are more extensive than before, and several intranets let users rate and comment on stories.

Star ratings and user comments have long been found on public websites -- from Amazon.com to weblogs -- but they become much more useful on intranets, where they're not degraded by the Bozo effect. Employees of the same company have shared goals and interests, they have passed the quality filter of getting hired, and they have their reputations to protect. For all these reasons, ratings and comments from colleagues are likely to be much more useful than those of random blog readers.

In addition to providing news on its intranet, Microsoft offers its employees a range of email newsletters and the ability to get stories through a newsfeed (RSS). Email newsletters are a simple way to reach beyond the intranet to give employees news on their mobile devices. This only works, however, because the messages are formatted for mobile devices, which is rare.

AEP doesn't use an automated feed for outside news. Instead, an editor reviews the available stories and posts only those that will be of most use to the company's employees. Such extra work is amply rewarded in employee productivity by saving people from long lists of irrelevant news. For example, at JPMorgan Chase, the intranet homepage is viewed 620,000 times per day, so even one superfluous headline that required one second to scan would cost the company the equivalent of 22 full-time employees in lost productivity. The JPMorgan Chase intranet team is equally selective, displaying only the most important news on the homepage.

Of course, in some cases, you just have to provide the news, even when it's not particularly work-related. For example, DaimlerChrysler provided the latest scores during the soccer World Cup in Germany. If they hadn't, employees would surely have spent much more time following matches on external sites.

In terms of respecting employees' time, perhaps the ultimate design feature comes from the Volvo Group. The company's 5 Minutes Only area gives people the most important information they need that can be consumed in five minutes.

Most of the winners support users in several countries and several languages. The predominant approach is to select one or two primary languages and use them for the company-wide features and content, and then supplement this with country-specific information in the user's own language.

For example, DaimlerChrysler offers global content in German or English, automatically setting the initial language based on the language preference settings in the user's browser. It's somewhat rare to see browser language preferences used correctly on public websites, so it's great to see this feature making inroads on intranets.

Dow uses English for most global content, but translates the most important content into six other languages (Dutch, German, French, Italian, Portuguese, and Spanish). It also translates selected content into Chinese, Greek, Japanese, and Thai.

Although translation is important, it's not sufficient for a true multinational user experience. Dow's intranet shows how to further achieve this with its employee recognition application. Users can nominate employees in other countries for a recognition award, and if the award is approved, recipients are notified in their local language. Even better, the awards are appropriate to the recipient's culture, and can be redeemed locally. Without this true internationalization of the underlying features, consider how difficult it would be for, say, a German manager of a cross-functional team to give an award to a deserving employee in Brazil. Such a manager is not only unlikely to know Portuguese, he or she is unlikely to know what a Brazilian might appreciate receiving as an award or which local vendors might offer redeemable certificates. At Dow, the intranet comes to the rescue, thus encouraging more cross-cultural employee recognition.

Several intranets featured a simple, but highly useful design element to help users work with overseas colleagues: a world clock. Calculating time zones and understanding the International Date Line's effects are difficult for humans but trivial for computers. Let them do it, and you'll never again call clients or colleagues at 4 a.m. on a Sunday, thinking it's their Monday afternoon. As an added benefit, a prominently placed world clock serves as a tangible reminder of an organization's worldwide status.

Technology Platforms

The 10 winners used a total of 49 different products for their intranets' technology platforms. Clearly, intranet technology continues to be an unsettled field.

The most-used products were: Windows Server, Google Search Appliance or Google Mini, SharePoint, SQL Server, Google Maps, Omniture, and Vignette.

Some people might claim that it's "unfair" to include Microsoft products on this list, given that Microsoft's own intranet was one of the winners this year. Obviously, Microsoft tends to use Microsoft products, but many other winners did so as well. Also, IBM won last year's competition, and many other technology companies have won throughout the years. In each case, we gave the awards for the quality of user experience on the intranets, not for the product lines. The profile of Microsoft's intranet serves as a valuable case study in how to design a great intranet while building on Microsoft products -- just as last year's IBM intranet profile is useful to the many companies that employ IBM products.

Standard UI, No Standard CMS

For several years, we have noticed a trend toward firmer standards for intranet pages. In the early years of intranets, it was a free-for-all, with each page author creating his or her own design. Gradually, more and more intranets have become template-based, which ensures consistency in the user interface across the intranet.

Standardized navigation bars, menus, and page footers are the most common elements in consistent intranet user interfaces. Centralized style sheets (using CSS) further enhance commonality in page appearance. Beyond pure technology, design style guides are also becoming common, and JPMorgan Chase even has an Intranet Design Review Board to interpret and expand its user interface standard. The board also grants exceptions to the standard in those few cases where it's sufficiently warranted.

This year, all the winning intranets were template-driven and relied on a content management system (CMS). Strikingly, most intranets used their own homemade CMS. Thus, even though there are standards within each intranet, there's no standard across intranets, even in the choice of CMS.

Web Trends Without the Hype

Intranets tend to avoid the over-hyped fads that wash across the Web. Several winners have weblogs this year, but the blogs are restrained, emphasizing useful information instead of "what I did on my last date." Microsoft even has a blog for its intranet's managing editor to discuss features and news coverage.

Ajax was widely used this year, but -- fittingly for intranets -- it's applied as an add-on feature that's integrated into useful contexts as opposed to being used for its own sake. Often, users won't even notice it's there. For example, Comcast displays nicely designed content previews that look like super-tooltips when users roll over lists of brand assets. Similarly, AEP updates the user's custom list of links without refreshing the rest of the page, DaimlerChrysler updates its homepage stock ticker, and Microsoft shows the results of employee polls (a popular feature on many intranets) as soon as the user has voted.

Slightly more noticeable, but still with an emphasis on utility rather than glitz, is the use of Ajax maps on the RSPB's carpooling page. When users click on a map marker, it brings up a photo and other information about the employee who's driving from that location, without otherwise changing the map or the rest of the page.

The employee directory search (the people finder) is a killer app on most intranets. Microsoft uses the over-hyped Internet concepts of social networking and degrees of social distance in a pragmatic manner to make its employee search even better, sorting results by degree of distance from the user. Often, it makes sense that users would want to find people closely related to them; such sorting can be very helpful in a big organization where many people may have similar names or the same job titles.

Is there anything more hyped than wikis? We started to see some wiki use on intranets in 2005, and this year National Geographic Society employs many wikis in a highly useful manner. Is there anything more pragmatic than an acronym explainer? Internet hype meets intranet utility in National Geographic's NG Lingo wiki, which explains the Society's many internal acronyms and specialized terminology ("base camp" = the headquarters buildings). Such an intranet feature is especially helpful for new employees; this year's winners included many more features to facilitate the "onboarding" (new employee) process.

Breaking Web Usability Guidelines

In general, an intranet is a type of website, and most Web usability guidelines apply to intranets. But different usage contexts create important differences as well. All usability depends on two big questions: who are the users, and what are their tasks? The answers to both questions differ between websites and intranets: Web users are customers, while intranet users are employees, and their tasks differ accordingly. Most important, any given company has only one intranet -- at least that's what we recommend -- meaning that users won't surf past the intranet on their way to another one, as they do with websites.

AEP provides an interesting example of the implications of these differences: Its intranet collaboration area, The Agora, is a blatant violation of the Web guideline to avoid made-up terms as navigation options. (Granted, "agora" is not literally made-up; it's Greek for "meeting place." Still, the number of electricity company employees who know Greek is small enough that, for all practical purposes, it may as well be made-up.) On a public website, this type of navigation would be a sure-fire recipe for having users overlook the feature. Few people have time to click on things they don't understand. By contrast, on an intranet, employees see The Agoraevery day, and will click it eventually.

In most cases, however, it's better to stick with established Web design conventions. For example, Comcast's customization form includes a Save & Continue button that is correctly placed at the bottom-right side of the form -- the same place that 99% of e-commerce sites and other functionality rich websites place their equivalent buttons.

Intranets Becoming Established

Across the first three Intranet Design Annuals (2001-2003), the winning intranets were 4.3 years old on average. Across the three most recent Annuals (2005-2007), intranets were 7.5 years old on average.

Looking back, it seems that most intranets were founded in the 1990s, then left to grow haphazardly. In contrast, the current decade is one of consolidation and emphasis on (finally) making the intranet work well as a business tool.

Intranets are definitely getting bigger. Across the first three Design Annuals (2001-2003), the average intranet contained 200,000 pages; across the three most recent Annuals (2005-2007), the average intranet contained 6 million pages.

Intranet budgets are also getting bigger, though we had one winner this year with an annual budget of only $8,000, so it's still possible to design a great intranet on a shoestring. Mainly, though, the winning intranets have gained substantial management support and have reasonably big budgets.

Averaged across the winners, there was one intranet team member for every thousand employees. This ratio means that intranet team efforts are magnified a thousand times. Such a high degree of leverage is why intranet design can have such a tremendously high return on investment (ROI) when done well.

Big intranets mean big numbers. For example, Microsoft's intranet homepage is viewed 5 million times each month. With this much use, it's more critical to get the design right than it was back when intranets were toys for a few pioneers. Intranets have become critical resources that companies rely on to run the everyday business.

Who Owns the Intranet?

Intranets tend to have one of three homes in the organization. Of the 2005-2007 winners:

35% were in Corporate Communications
27% were in Information Technology or Information Systems (IT/IS)
19% were in Human Resources (HR)
The remaining 19% of award-winning intranets were based in a variety of other departments, including Web Marketing, Public Affairs, and the corporate library.

If you had to select a single organizational placement for all the world's intranets, statistics imply that Corporate Communications is the best place. But in reality, we won't make that recommendation, since 2/3 of great intranets are based elsewhere. The only recommendation we can make is to consider the history and culture of your own company and consider Corporate Communications, IT, and HR as the three most likely candidates.

Intranet Branding

Last year, we noted a dramatic upswing in the number of winning intranets that were branded (that is, they had a separate name, as opposed to being called something like "the intranet"). We also warned that one year doesn't a trend make.

Indeed, this year, the proportion of branded intranets among the winners is back down at 60% -- very close to the long-term average of 62% we've recorded over the years. In other words, more good intranets are branded than left nameless, but there are so many good unbranded intranets that we can't recommend branding for its own sake.

Intranet names this year include: AEP Now, Comcast Store, MSW (Microsoft Web), NG Insider, Sparsh (meaning "touch" in Sanskrit), and Violin.

ROI

The ultimate imperative for usability is to "show me the money." What's the benefit to the business of improving the user experience? Sadly, most intranet teams continue to have weak data on their work's monetary value. The exceptions to this rule are impressive:

Comcast's marketing extranet has reduced versioning and distribution costs by 50-60% and reduced delivery time even more.

Infosys has experienced a 65% drop in help desk calls since launching its redesign. When you consider the cost of running a help desk, reducing calls this much is a major savings.

Almost all intranets see increased use when they improve usability. If something is bad, people tend to avoid it; when it's good, they use it more. Improving usability will often double use across the entire intranet, but improving individual features can produce much bigger gains. For example, after its redesign, Infosys had 1,100% more submissions to its organization-wide news section -- that is, eleven times more submissions -- and 588% more entries to its Team Spirit section.
Read more…

Test your web site before go live

You just finish your website, and you are excited to see it "live". But first you should test if everything on your website works correct. Remember that the website is your corporate identity on Internet. Testing your website gives you a chance to fix errors before they destroy your business reputation.

Now, what you should check first? I would start from the basic.

Spell Check & Grammar Errors

Proof read your site ... no meter how careful content creator was, you will always find few misspelled words or grammar errors. If you don't, be sure that your customers will.

Check Links

Next thing is to check if all your links on all your pages works. You can do it manually if you want, but on larger sites, it can be teddy task. For large projects, you can use Xenu's Link checker. The good news is that it's free and better than most other link checking software.

Forms - E-Mail

We all want feedback from our website visitors, right? To ensure that you will get some, check if forms on your website work as expected. Make a habit to test forms on your website from time to time.

Web site visitors many times enter wrong input in form fields. If you use Java Script to validate form input, check your scripts in IE and Firefox at least. Not all scripts works in all browsers.

Page Titles - Meta Tags

Web developers use different software to create web pages. If your webmaster forget to add Meta tags on your website, in the title will write: Untitled Document.

How can anyone forget to add Meta tags, I am hearing you asking.

Well, search on Google for: Untitled Document and 35.000.000 results will be returned. For the search term Untitled Document 1, there is much less competition. Google return "only" 1.650.000. I guess that you will agree that your company name is better title than "Untitled Document".

Meta tags are useful (especially title and description) for both, your website visitors and for search engines. So do the check.

Screen Resolution

You are looking your website on your monitor, and it looks great, right? How it will looks on other monitors and other screen resolutions? You website should look acceptable and on 800 x 600 and great on 1024 x 768 and higher.

How your website look in different browsers?

It is easier than you think, so continue reading. One of the things that you should definitely test is how your website looks in different browsers. The reason is: Each browser can display Web pages slightly differently, and you want to make sure your pages look good in the most popular browsers.

I have only one browser installed, how I can do this, I hear you asking. Search on Google for "view your website in different browsers", and you will find different websites which allow you to preview your website in almost all known browsers. And yes. It's free.

Usability - Can your website visitors find what they are looking for?

Ask few people to visit your website. Your friends or relatives, doesn't mater. Ask them what they think about your website. Let me clarify. It is not important did they like the colors or the layout of the site. Important thing here is: Can visitors find what they are looking for on your website within few clicks?

And the most important: When they look at your home page can they understand what your company is about? How comfortable they feel your navigation, did they understand the terms that you use on your website? Can they reach your contact page?
Read more…

Web 2.0 for Designers

In Web 1.0, a small number of writers created Web pages for a large number of readers. As a result, people could get information by going directly to the source: Adobe.com for graphic design issues, Microsoft.com for Windows issues, and CNN.com for news. Over time, however, more and more people started writing content in addition to reading it. This had an interesting effect—suddenly there was too much information to keep up with! We did not have enough time for everyone who wanted our attention and visiting all sites with relevant content simply wasn’t possible. As personal publishing caught on and went mainstream, it became apparent that the Web 1.0 paradigm had to change.

"The Web of documents has morphed into a Web of data. We are no longer just looking to the same old sources for information. Now we’re looking to a new set of tools to aggregate and remix microcontent in new and useful ways."

Enter Web 2.0, a vision of the Web in which information is broken up into “microcontent” units that can be distributed over dozens of domains. The Web of documents has morphed into a Web of data. We are no longer just looking to the same old sources for information. Now we’re looking to a new set of tools to aggregate and remix microcontent in new and useful ways.

These tools, the interfaces of Web 2.0, will become the frontier of design innovation.

The evidence is already here with RSS aggregators, search engines, portals, APIs (application programming interfaces, which provide hooks to data) and Web services (where data can be accessed via XML-RPC, SOAP and other technologies). Google Maps (in beta) provides the same functionality as similar competing services but features a far superior interface. Flickr’s interface is one of the most intuitive and beloved around. Del.icio.us offers personal and social functionality, and reaches far beyond its own site. Interfaces like these are changing the way we store, access, and share information. It matters very little what domain content comes from.

Web 2.0 has often been described as “the Web as platform,” and if we think about the Web as a platform for interacting with content, we begin to see how it impacts design. Imagine a bunch of stores of content provided by different parties—companies, individuals, governments—upon which we could build interfaces that combine the information in ways no single domain ever could. For example, Amazon.com makes its database of content accessible to the outside world. Anyone can design an interface to replace Amazon’s that better suits specific needs (see Amazon Light). The power of this is that content can be personalized or remixed with other data to create much more useful tools.

There are six trends that characterize Web 2.0 for designers. In this introductory article we’ll summarize each of those trends and give brief examples. In upcoming articles we’ll explore each trend in more detail.

Writing Semantic Markup: Transition to XML

One of the biggest steps in realizing Web 2.0 is the transition to semantic markup, or markup that accurately describes the content it’s applied to. The most popular markup languages, HTML and XHTML, are used primarily for display purposes, with tags to which designers can apply styles via CSS.


and XHTML give us only a glimpse of what it means, there is one technology demonstrating clearly the power of semantic markup. RSS is an XML format for syndicating content. It is an easy way for sites to tell people when there is new content available. So, instead of browsing to your favorite site over and over again to see if something is new, you can simply subscribe to its RSS feed by typing the RSS URI into a feed aggregator. The aggregator will periodically poll the site, notify you if something is new, and deliver that content. It’s a real timesaver.

Providing Web Services: Moving Away From Place

During the early years of the Web, before content had semantic meaning, sites were developed as a collection of “pages.” Sites in the 1990s were usually either brochure-ware (static HTML pages with insipid content) or they were interactive in a flashy, animated, JavaScript kind of way. In that era, a common method of promoting sites was to market them as “places”—the Web as a virtual world complete with online shopping malls and portals.

In the late 90s and especially the first few years of the 21st century, the advent of XML technologies and Web services began to change how sites were designed. XML technologies enabled content to be shareable and transformable between different systems, and Web services provided hooks into the innards of sites. Instead of visual design being the interface to content, Web services have become programmatic interfaces to that same content. This is truly powerful. Anyone can build an interface to content on any domain if the developers there provide a Web services API.

Two great examples of the shift away from place to services on the Web are Amazon.com and eBay, both of which provide an immense amount of commercial data in the form of Web services, accessible to any developer who wants it. An interesting interface built using eBay’s Web services is Andale, a site that tracks sales and prices to give auction sellers a better idea of what items are hot and how much they’ve been selling for.

Remixing Content: About When and What, not Who or Why

Associated Press CEO Tom Curley made an important and far-reaching keynote speech to the Online News Association Conference on Nov. 12, 2004. In it he said, “… content will be more important than its container in this next phase [of the Web]… Killer apps, such as search, RSS and video-capture software such as TiVo—to name just a few—have begun to unlock content from any vessel we try to put it in.”

Curley was specifically addressing journalists and the media industry, but this insight applies equally to the design profession. Web design during Web 1.0 was all about building compelling places (or sites) on the Web. But content can no longer be contained in a single place—at least not without going against the nature of the social Web and locking up your content in a secure site.

Web design in Web 2.0 is about building event-driven experiences, rather than sites. And it’s no coincidence that RSS is one of the key building blocks. RSS feeds enable people to subscribe to your content and read it in an aggregator any time, sans extraneous design.

Searches can also be mixed with RSS to let people subscribe to content via topic and tag RSS feeds (from PubSub or Feedster, for example). These so-called “future searches” not only let people mix content from various sources, but end up being yet another way for users to bypass a site’s visual design.

Because content flows across the Web in RSS feeds and can be remixed along the way, Web designers must now think beyond sites and figure out how to brand the content itself.

Emergent Navigation and Relevance: Users are in Control

As a result of the remixing aspects of Web 2.0, most content will be first encountered away from the domain in which it lies. Thus, much of the navigation that is used to reach a specific item might be far removed from the navigation specifically designed for it. This “distributed” navigation might come in the form of a feed reader, a link on a blog, a search engine, or some other content aggregator.

One of the side effects of this is that the sources of and pathways to useful information will continually change, and users won’t necessarily know where to go to find it. Fortunately, content aggregators have a built-in answer for this—they can track what people are doing. By recording what pieces of microcontent are most often visited, aggregators can use past user behavior to predict what users will find most relevant in the future. This is very apparent in Daypop, Del.icio.us, and Blogdex feeds. What people have found relevant in the past is likely to be useful in the future.

With relevance decided within these third-party interfaces, users might even be able to read content without ever visiting the domain it comes from. Navigation schemes, as we know them, will be used less. The most traveled navigation paths will emerge from user behavior instead of being “designed” specifically for it.

Adding Metadata Over Time: Communities Building Social Information

One feature of Web 1.0 that seemed to change everything about publishing was the ability to make changes to the primary publication at any time. There are no “editions” or “printings” on the Web like there are in the print world. There is simply the site and its current state. We are used to this paradigm now, and an optimist can hope that Web content will only get better with time: metadata will be added, descriptions will get deeper, topics more clear, and references more comprehensive.

What we see happening in Web 2.0 is a step beyond this, to where users are adding their own metadata. On Flickr and Del.icio.us, any user can attach tags to digital media items (files, bookmarks, images). The tagging aspect of these services isn’t the most interesting part of them, though. What is most interesting are the trends we see when we put together everyone’s tags.

Let’s say, for example, that we tag a bookmark “Web2.0” in Del.icio.us. We can then access del.icio.us/tag/Web2.0 to see what items others have tagged similarly, and discover valuable content that we may not have known existed. A search engine searches metadata applied by designers, but Del.icio.us leverages metadata applied by folks who don’t necessarily fit that mold.

Shift to Programming: Separation of Structure and Style

In Web 1.0, there were two stages to visual Web design. In the early years, designers used tricks like animated GIFs and table hacks in clever, interesting and horrible ways. In the last few years, CSS came into fashion to help separate style from structure, with styling information defined in an external CSS file. Even so, the focus was still on visual design—it was the primary way to distinguish content and garner attention.

Enter the Web 2.0 world, which is not defined as much by place and is less about visual style. XML is the currency of choice in Web 2.0, so words and semantics are more important than presentation and layout. Content moves around and is accessible by programmatic means. In a very real sense, we’re now designing more for machines than for people. This may sound like we’re in the Matrix, but in the words of Amazon.com CEO Jeff Bezos, “Web 2.0… is about making the Internet useful for computers.”

What does this mean for Web designers? It means designers have to start thinking about how to brand content as well as sites. It means designers have to get comfortable with Web services and think beyond presentation of place to APIs and syndication. In short, it means designers need to become more like programmers. Web 2.0 is a world of thin front ends and powerful back ends, to paraphrase Bezos.
Read more…

Breadcrumb Navigation Increasingly Useful

Breadcrumbs use a single line of text to show a page's location in the site hierarchy. While secondary, this navigation technique is increasingly beneficial to users.

Not all design decisions are a matter of website survival. Of course, it's important to get the big things right, or you won't have any users. But getting the small things right enhances usability and fosters user comfort. A perfect example here is the breadcrumb trail.

Breadcrumbs won't help a site answer users' questions or fix a hopelessly confused information architecture. All that breadcrumbs do is make it easier for users to move around the site, assuming its content and overall structure make sense. That's sufficient contribution for something that takes up only one line in the design.

Breadcrumbs have always been a secondary navigation aid. They share this humble status with site maps. To navigate, site visitors mainly use the primary menus and the search box, which are certainly more important for usability. But from time to time, people do turn to the site map or the breadcrumbs, particularly when the main navigation doesn't quite meet their needs.

Despite their secondary status, I've recommended breadcrumbs since 1995 for a few simple reasons:

Breadcrumbs show people their current location relative to higher-level concepts, helping them understand where they are in relation to the rest of the site.

Breadcrumbs afford one-click access to higher site levels and thus rescue users who parachute into very specific but inappropriate destinations through search or deep links.

Breadcrumbs never cause problems in user testing: people might overlook this small design element, but they never misinterpret breadcrumb trails or have trouble operating them.
Breadcrumbs take up very little space on the page.

So, despite the merely mid-sized benefits, the overall cost-benefit analysis comes out quite strongly in favor of breadcrumbs. Their downside is incredibly small: while they do take up space, that space is minute. When you divide a mid-sized numerator by a tiny denominator, the resulting fraction is substantial.

The main argument against breadcrumbs is that many users overlook them. So, why do something that only benefits a minority?

As I've long argued, breadcrumbs are different than most other little-used design elements for the simple reason that they don't hurt users who ignore them.

Growing Popularity

The case against breadcrumbs is crumbling. Every year we see more people use breadcrumbs in our studies. Because breadcrumbs are not important enough for a dedicated study, I don't have an exact number for the current percentage of breadcrumb users. But it's definitely growing over time.

In testing an e-commerce site last month, for example, one user complained: "This is missing a feature to go back to the previous page."

I found this apparent request for a Back button puzzling, since the button was featured prominently in the browser and the person had easily used it earlier in the test session. Also, for six years, it's been an established guideline to avoid duplicating browser functionality in the page design.

It quickly became clear, however, that the user wasn't asking for a duplicate Back button. Elaborating on the previous complaint, she pointed to the place on the page where breadcrumbs typically appear and said she wanted the list of links to higher-level pages.

In other words, the user wanted breadcrumbs. She'd seen them before, but didn't know what they were called, so she asked for them using words that -- if taken literally -- would have been easily misinterpreted.

This is a great example of the hard-won lesson of usability: don't comply with user requests. Give more attention to what study participants do than to what they say.

Hierarchy or History?

I'm sometimes asked whether website breadcrumbs should follow the fairytale model of Hansel and Gretel. In that story, the children walk through a bewildering forest, dropping breadcrumbs behind them in hopes that they might later find their way out.

In user interface design, it's often dangerous to take metaphors too far, and breadcrumbs are again the perfect example. Offering users a Hansel-and-Gretel-style history trail is basically useless, because it simply duplicates functionality offered by the Back button, which is the Web's second-most-used feature.

A history trail can also be confusing: users often wander in circles or go to the wrong site sections. Having each point in a confused progression at the top of the current page doesn't offer much help.

Finally, a history trail is useless for users who arrive directly at a page deep within the site. This scenario is when breadcrumbs show their greatest usability benefit, but only if you implement them correctly -- as a way to visualize the current page's location in the site's information architecture.

Breadcrumbs should show the site hierarchy, not the user's history.
For non-hierarchical sites, breadcrumbs are useful only if you can find a way to show the current page's relation to more abstract or general concepts. For example, if you allow users to winnow a large product database by specifying attributes (of relevance to users, of course), the breadcrumb trail can list the attributes that have been selected so far. A toy site might have breadcrumbs like these: Home > Girls > 5-6 years > Outdoor play (note that the links should be colored as well as underlined, but I don't do this here to avoid confusion with these dummy links).

Looking ahead, people will use breadcrumbs even more because they're an important navigation tool in Windows Vista. Most users don't distinguish clearly between the operating system, applications, and content or websites. Users will thus transfer their understanding of Vista's interaction techniques to your website.

If you don't have breadcrumbs, it's time to start planning for them. They'll improve your usability a bit now, meet increasing user expectations in the future, and -- most importantly -- they won't hurt.
Read more…