Author Archive:

Is your website connected to the web?

By definition it may seem that the answer to this question is yes. It’s simple. A user starts a web browser, enters your company’s domain name, and your website appears. You have hopefully spent some time thinking about those users, but making sure your site is connected to the web means more than viewing your site in a web browser.

Search Engines
The most obvious example is search engines. Companies write software called “Spiders” that visit your site and ask for every page. You have probably invested some money into “Search Engine Optimization (SEO)”. One goal of SEO is to make it easy for the spider to find, prioritize and index the important content on your site. This is accomplished by improving the HTML code behind your web pages.

HTML is one language of the web, but a more powerful language is XML. For instance, to optimize your site for the Google spider you can add an XML sitemap file to the root of your website. This tells the spider where to find content, what content is important, and when content has changed.

XML can take different forms and that’s where it gets interesting.

Feed Readers
Many people read their favorite sites without ever opening a web browser. Instead they use a Feed Reader.

IE Feed Reader Screenshot Many websites offer their content in XML formats called “Real Simple Syndication (RSS)” or “Atom Syndication Format (ATOM)”. A feed reader, which may look like an email application, checks your site for updates and sends the information back to the user. Internet Explorer 7 has a feed reader built-in and you will notice in the screenshot below that the content of the Elexicon blog looks very different in the IE feed reader.

Mashups
As soon as you provide an XML feed, other websites can combine your content with other sources to create a new experience. The richness of your data enables unforseen value as others start to piece it together with additional web resources. Here are some examples:

Widgets: A web feed allows users to put your information on their site. This is great for SEO and for your user. If your company has a dealer network, each dealer site could host your news widget and drive traffic to your site while adding value to theirs. In the screenshot below, you can see a simple widget displaying the Elexicon blog feed on my Google home page.

iGoogle Screenshot Geocoding: If your data has a geographic connection you can include the latitude and longitude. Many digital cameras will geocode and timestamp every photo when it is taken. If you upload your photos to the Flickr website, then sites like flickrvision can combine the Flickr feed with a map and you get a fascinating worldwide photo tour in real-time.

Aggregation: Others may chose to load your data and analyze it for patterns and trends. For instance, Twitscoop reads all the words from the microblogging site, Twitter, and creates a real-time tag cloud revealing the most popular topics of conversation on the web at any given moment.

Here is a Mapdango map of Grand Rapids, Michigan, which pulls together weather, events, photos, history and more.

Sites like technorati are trolling for content and if your information is tagged properly, it will likely be included.

Visualization: Besides aggregation, advanced visualization is another trend. Software is used to analyze data and create new ways of seeing things. SpatialKey is a new company doing some nice work in this area.

Application Programming Interface (API)
Another level of web integration is providing an API. An API allows others to develop even more robust web applications with your data. It will be easier to do business with you and it will offer valuable exposure for your company. A great example of this is the UPS API which provides information about a package in an XML format. Web users have used the API to create multiple ways to track packages, by map, IM via Twitter, and more.

What you can do
It is not enough to think only of people visiting your site with a web browser. You need to think about what rich information you can provide to the web. Organizing your data will benefit your company and you may be surprised what it inspires in the web community. There’s a lot going on; just look at the full spectrum of sites in this analysis dubbed The Conversation Prism.

» Posted in Business, General, Marketing, Information Architecture | No Comments


A CSS Strategy

One requirement of a good web site is the ability to change the look and feel without much difficulty. There are at least two broad strategies for accomplishing this. One strategy is to use templates to generate the HTML for a page. Changing the template(s) changes the site.

Within the last few years, Cascading Style Sheets (CSS) has become a popular method to create radically different looks for the same HTML. The CSS Zen Garden is the poster site for this technique. By submitting a new CSS file and associated graphics, web designers can radically change the presentation of identical HTML.

It is no small task to create clean HTML which is properly prepped for this technique. Web browser compatibility complicates the process further.

Tasks like this require the development of a framework to simplify the decision making process and avoid the need to reinvent the wheel for every site. I believe the use of microformats is one way to tackle the underlying HTML structure.

Google has also come up with an interesting approach called BlueprintCSS, which deserves some consideration. They have addressed some of the common layout and flexible design issues by creating screen and print CSS stylesheets which act on a standardized naming convention for HTML classes. They have also included a “Plug-in” architecture which really make their solution interesting.

The result is a feature set which includes: “an easily customizable grid, sensible typography, relative font-sizes everywhere, a typographic baseline, an extendable plugin system, perfected CSS reset, a stylesheet for printing, compressed version, no bloat of any kind”

This seems like a good starting point and at the very least it can serve as guide when creating a custom framework for your own site.

» Posted in General, Development, Design | No Comments


Implicit Information

As we go about our daily activities we generate a large amount data. We go places. We have conversations. We spend money and buy particular products. We work on various tasks. Often we would like to remember that information, and in some cases, such as criminal investigations ideal to have “total recall” with video if possible.

Before computers, recording this information was a manual process with pen and paper. Most modern gadgets have simply replaced the pen and paper with stylus and touch screen. However, there are some devices and software that simply record your activity without any assistance. The information is available and the right solution can just gather the data as it happens. Then it provides useful and structured searching and reporting of the information.

Here are some of my favorites:

  • Trackstick: This inexpensive device records where you go and provides a means to record way points for future notice. The information can later be displayed on Google maps. You can record jogging routes, sales trips, fishing expeditions (with hotspots) and more. I think this space is going continue to grow. I suppose cellphones will take over here since I think they already offer real time GPS.
  • Nike pedometer: Any pedometer is a great example of gathering implicit information. The Nike implementation is clearly robust since it works with the iPod to track steps and more. I am not sure if it records velocity or impact, but it should.
  • TimeSnapper: This great product takes a picture of your desktop at regular user-defined intervals. It also records the active application at the time the image is taken. The user can then replay the day. This implicit diary refreshes the memory of what happened. It also aligns activity to time for reporting. If an important text-based document is lost, you can often jump back to the day you worked on it and use the OCR capabilities to recover the information.
  • SenseCam: This is a “life recorder” that Microsoft Research is developing.
  • IBM and Maersk Logistics: These companies have developed real-time cargo container tracking. Each container device can talk to other containers to leap frog information back to a central computer as a mesh network. The container is aware of the lighting changes which implies intrusion. It detects geo-location, moisture levels and more.

I would like a system that keeps track of what I buy down to the product. Costco knows exactly how much I spent with them last year. Now I just need it in an itemized report so I can track expenditures more accurately.

For better or worse, with little intervention, computers will dig deeper and deeper into the information we create to provide us with a thorough look at what we do.

» Posted in General, Information Architecture | No Comments


There’s a lot to see in Google maps

Providing web-based mapping applications like Google maps has had various–mostly-positive–unintended consequences. The level of detail is such that some cities even have street level images available.

Some people feel their privacy has been violated by the prying cameras, which have caught many people in awkward situations to say the least.

However, others are using the tool to explore the earth. One person found an ancient Roman villa. Others are now combing the globe looking for evidence of man’s imprint on the landscape.

I was recently poking around Google maps and found a plane in flight which I thought was entertaining so I am posting a picture of it here before Google updates their data.

If you find anything interesting, there are sites cropping up where you can post your link or browse what others have found. One site that seems to be on the right track is MapOfStrange.com, which offers image tagging and location pins.

» Posted in General, Cool Posts | No Comments


Find the Best Blog Posts

I just stumbled across aideRSS. It is a site which helps users find the best posts from a particular RSS feed by providing a “PostRank”.

Because blog posts are often their author’s random streams of consciousness, it is hard to wade through the many posts to find the few where an author was particularly clever. This is where aideRSS steps in. aideRSS helps you determine the signal to noise ratio of a particular feed.

They use an algorithm based on relevance, content, and people’s reaction to it. For instance, it shows how many times a particular post is referenced in digg, del.icio.us, or Bloglines (They should add Diigo to the list.

I think this will help me find the best posts from a particular feed and also, determine whether it is worth it to subscribe to the feed at all.

This is a great idea that I think will only get better. For instance, it would would be nice if user’s could rate posts. However those ratings should only be a portion of the formula, otherwise spammers and group-think could skew results. Also I think I would like to be able to subscribe to filtered feeds. The posts may need to be delayed a couple days, but that would not bother me, if I could get a better ratio of quality content.

Beyond that, they use sparklines in their UI, which you gotta love.

» Posted in General, Information Architecture | No Comments


Browser Plug-ins

I use the Firefox browser and Internet Explorer 7 at a ratio of about 60% to 40% respectively. The plug-ins really make Firefox sing.

Here are the plug-ins I use:

  • Firebug indispensable add-in for web developers who need to debug JavaScript, examine the HTML source of a page, examine CSS and modify it on the fly, and much more
  • All-in-One Sidebar much more robust tool panel
  • ColorZilla excellent tool for snagging the HEX values for colors in a web page; it will send the RGB values to the clipboard in a variety of formats
  • Firefox Showcase provides thumbnails view of all tab content
  • Netcraft Toolbar provides information about a site’s hosting company, server OS and web server as well as site uptime and more
  • Professor X quickly view a consistent presentation of the head section of a web page include title and meta-tags
  • SEOpen includes many tools for analyzing a page with search engine optimization in mind
  • Forecastfox provides compact access to weather information in the status bar
  • PicLens provides a sweet slide show view of Google image results as well as other image feed sites like Flickr, Facebook, Picasa, and more
  • SafeCache isolates your web cache on a site by site basis so sites can’t pilfer your browsing history
  • User Agent Switcher changes how your browser appears to a website; Some sites change content based on user agent; For instance, a site might let the GoogleBot browse the site but deny IE and Firefox
  • View Source Chart provides an alternate visualization to reveal nesting complexities in a web page’s HTML
  • Diigo provides annotation and bookmarking capabilities right in the browser; It can also send you comments and links to other bookmarking sites as well as to your blog

Internet Explorer 7 has some nice plug-ins as well.

  • Web Accessibility Toolbar helps reveal how accessible your web site is; reveals problems with color selections, compatibility with text readers, and more
  • Microsoft Developer Toolbar provides many powerful page manipulation and analysis tools
  • IE7Pro makes IE as usable as Firefox; My favorite features include, in-line search instead of that annoying window, weather, undo close tab, spell-check, save page to image, user agent switching, disable MySpace clutter, and more.

I am sure there are others worth noting. Feel free to pass them along in the comments.

» Posted in General, User Experience | No Comments


The Same Color Illusion

This is a fascinating illusion that was new to me. Amazingly, the squares labeled A and B are both the same shade of gray. Click the image to learn more.

The Same Color Illusion

Here are some other related fun links:

» Posted in General, Design, Cool Posts | 2 Comments


Website Showcases

I have a lot of fun clicking through showcases of web designs. It has been a popular “Web 2.0″ activity to create showcase sites.  Here is my showcase of the showcases.

I think it has been around a while, but I recently discovered Patrick Haney who has a nice Flickr feed of sites he has found interesting.

Others include:

Enjoy.

» Posted in General | No Comments


Computer Users in Film

As one who is very interested in usability and intuitive interfaces, I had to laugh at this list of top 10 usability bloopers in film compiled by Jakob Nielsen.

I think filmmakers avoid showing real email and other software applications to avoid product placement costs, but that certainly doesn’t account for the fact that there will always be one lead character that can walk up to any computer and instantly operate the interface, guess the password, find any document in seconds, and immediately send it to their mobile device. That’s how things work in real life, right? I have trouble finding documents on my own machine.
No matter how smart you are, some things just can’t be done without an esoteric knowledge of the system, so–for intimidated computer users everywhere–blame it on the computer not yourself.

» Posted in General, User Experience | No Comments


The Internet Is a Series of Tubes or Is It Pipes

Senator Ted Stevens has taken a lot of ribbing over his “Series of Tubes” comment in his now infamous speech. There are many entertaining remixes of the occasion on YouTube. Frankly, for me this is a po-ta-toh/po-ta-tah issue because Internet bandwidth is limited, and his speech did reflect the sputtering that the market is experiencing trying to figure out ways monetize Internet content and cope with it’s increasing pervasiveness.

Both tubes and pipes are defined as hollow cylinders used to transfer liquids or gas. Wires are the tubes of the Internet through which the data flow. Their capacity is limited; however, technology and fiber-optic cables are continually increasing the amount of data that can be transfered in a given period of time. Just like increasing pressure can force more water through a hose, data can be compressed to improve performance. This capacity is also known as bandwidth.

Recently, Yahoo! introduced a new service called “Pipes” which draws attention to a different set of pipes on the Internet. In computer programming there is a concept known as piping. It is the technique of using the output of one program as the input to another program. Yahoo! is putting this to use in an Internet context, but what are the inputs and what are the outputs?

One aspect of the Web 2.0 revolution is the concept of the programmable web. At one time, web sites were written in HTML and people looked at them with web browsers. This is still true, but not for much longer. The machines are now talking to each other and people are using widgets and RSS readers to consume Internet content. The languages of the web are becoming XML, JSON (jay-sahn), and XAML (zam-mel). These are the outputs of the new web applications.

The most popular consumable output is probably RSS, which is an XML format for delivering all kinds of content including netcasts (podcasts), videos, photos, articles, weather, search results, you name it. All these outputs or data pipes make great input for the Yahoo! Pipes application.

With Yahoo! Pipes you can select, filter and combine these inputs to create one output that you can consume or share with others.

Here are some examples of pipes that have been made and are available for you to use:

  • Merge many news outlets into one concise list of news. [view pipe]
  • Find deals on ebay. [view pipe]
  • Modify this pipe to monitor news on you favorite subject or even your company name. [view pipe]

You get the idea. If you are not producing an RSS output of your website content then you may miss out on all the users who will be using Pipes to aggregate their content.

Yahoo! is not the first to do this–I have been using feedblendr for a while–but they have definitely raised the bar. Look for more in this space and start thinking of some new ways to use this new service.

» Posted in General | No Comments