Search is really just part of navigation. In many cases information found by running a search routine can also be found by just browsing through the pages. Which serves the visitor best? … is that also what serves the mission best?

Search needs words (also phrases) for searching. When visitors compose their own phrases, will those phrase be effective in searching the website? If not, then search terms should be offered as items in drop-down lists or some similar selection interface.

Next there is the question of what will be searched. A Google-like search can theoretically see every word in the public space of the website. Will this work OK? … will many irrelevant items be returned? … or should that type of “free word” search be used, but restricted to parts of the space with relevant content?

Another approach uses either “free word” input or “selected word” input to search only prepared fields in the database. This allows the web administrators to help or control the search results, but requires maintaining those fields of search phrases.

Many choices and variations are possible. Least expensive is installing one of the free search routines, one that can be limited to just the one website, as Google can. It has quick setup, little maintenance, is familiar to nearly everyone, but in a small website it can be quite imprecise and may often return empty lists.

I recommend a careful discussion with your website’s Information Designer.

In this article, we will discuss approaches to creating charts on the web. Currently, there are two general approaches to creating charts on the web: Image-based versus Scalable Vector Graphics (SVG)-based. There are also Flash-based solutions but we cannot recommend them because Flash is not available on iPhones and iPads and the future of Flash-based solution is uncertain.

Image charts
Here, the server generates a static image (e.g., a JPEG) of the chart from the data and the image gets displayed in the browser. There are a plethora of server-side charting implementations to choose from — a noteworthy one is Google Image Charts: http://code.google.com/apis/chart/image. Since the chart is simply an image, there are no cross-browser issues and the look of the chart is also consistent across browsers. The chart can easily be exported for usage in presentation slides since the chart is just an image file. However, the disadvantage of this approach is that users cannot interact with the chart; they cannot click into a pie chart slice or hover over line graph points to better understand the data being presented. While image-based charts provide a consistent and reliable view of the data, this approach does not give your end users necessary usability needed to make effective use of the information.

SVG charts
Here, the rendering of the chart is strictly on the client browser: There is no server-side rendering of the chart. Data are passed into a JavaScript SVG library which renders the chart as SVG markup (or VML markup if the user is on Internet Explorer 6/7/8). The browser produces a chart from the resulting markup that is mostly consistent across browsers. (We have run into an edge case issue where labels on pie charts get cut-off in Internet Explorer.) Exporting the chart into a file for use in presentation slides is a little trickier — since SVG charts are derived from JavaScript libraries and you cannot create files using JavaScript (at least not easily or consistently across browsers). One possible solution is to post the serialized SVG output back to the server-side and convert into the desired target format (e.g., JPEG, PDF, etc.). These relatively minor issues are offset by the huge gain in chart interactivity. SVG charting libraries allows developers to attach mouse click and hover events to the charts, such that a user can drill down into a pie slice of a chart or hover over line graph points for a more comprehensive view of the data. The SVG charting libraries tend to be relatively easy to use for developers comfortable with JavaScript, relative to the server-side charting tools.

Choosing a solution
When choosing a charting solution, it is necessary to consider the following requirements:

• Does the chart have to be interactive? If the answer is a resounding yes, then SVG approaches are the only options.
• How important is exporting chart into other file format? If very important, then it may be worthwhile to look at image-based solutions or possibly dual solutions of both SVG and static images.
• Are we dealing with tens of thousands of data points? If yes, then it may be neccessary to sacrifice the interactivity of SVG charts for performance of static image charts.

SVG solutions
Below is a brief descriptive of three SVG libraries. This is by no means a comprehensive list.

• gRaphael: http://g.raphaeljs.com
• Only completely free solution of the three.
• Not as mature the others and poorly documented.
• Programming somewhat easy.
• Fewer eye candy.
• Bottom-line: Check back in 6 months; the library is improving rapidly.
• Google Chart Tools: http://code.google.com/apis/chart
• Does not cost money but source code is not available and hard dependency on Google’s server.
• Mature and well-documented.
• Programming not as easy but powerful.
• Better eye candy — see Geographic chart.
• Bottom-line: Good solution but the charts and data security are heavily dependant on Google’s server.
• Highcharts: http://www.highcharts.com
• Costs money (couple of hundreds) but open source.
• Mature; Good documentation.
• Programming is easy.
• Best eye candy — charts will “pop” to your users.
• Bottom-line: Best overall general-purpose charting solution.

The major contenders when it comes to mobile operating systems are Android, iOS (more commonly known as iPhone, iPad and iPod), and Windows Phone 7 – all fantastic mobile operating systems, it is hard to even begin to compare them to their predecessors.

But why were we suddenly (these past few years) imbued with these brilliant new OS’es?

The answer of course is advances in hardware – lower cost, more computation power, high resolution displays and multi-touch, more storage, faster wireless networks, longer battery life… and on top of all that, advances in nanotechnology has made everything smaller and lighter, too.

My point with this little article, is to share with you an observation that has surfaced in a few of my conversations lately: that these new mobile operating systems are part of a transition towards “real” operating systems running on mobile devices. In fact, I’ve taken to referring to them as “transition operating systems” myself.

The evolution of mobile hardware does not cease. What made these new OS’es possible, is the fact that mobile devices are now almost as fast as “real” computers – and that same progress will put an end to them, too.

Soon, mobile devices will be fast enough to run “real” operating systems – and when that time comes, why would you want a dedicated mobile OS, or even a mobile device dedicated to wireless communications, such as your phone? If you could run a real Windows, OSX or Linux OS on your device, why wouldn’t you? At least two of the major players in mobile hardware, NVidia and QualComm, are currently racing to bring quad-core processors to market this year, so it may be more imminent than you think.

I suspect certain companies, such as Apple, are already having the same realization – it was recently rumored that certain features are being migrated from iOS to OSX. My guess is, they’re getting ready to add support for iOS apps to OSX, with the intent of running OSX on a mobile device in the no-too-distant future.

This is all speculation, of course – and either way, it doesn’t diminish the value of the mobile “transition” operating systems, which paved the way for new advances in user interface / user experience development, and have set new standards for human-machine interfaces overall.

And it certainly doesn’t mean that you should hold out on your business ideas – waiting for real operating systems to hit your cell phones – the new mobile platforms are already embedded in our lives, and they are inevitably here to stay, in some form or another.

There are several steps in planning.

• Needs Assessment
• Platform Analysis
• Information Analysis
• Wireframing
• Prototyping
• Work and Phase Planning
• Budget Planning

All of these save money and improve the quality of the product. As consultants we also know that involvement and review with the client is a critical part of each planning step.

One of my favorite steps is wireframing because this is where the idea first takes graphic form. There are many small apps for making wireframes.

The wireframing tools that we have used within our office, here are some we like:

Eclipse with a Wireframe Sketcher plug-in ($75 or $37.50 for students). We have a GORGES license, and there is a downloadable standalone version available (http://wireframesketcher.com). You can probably try before buying.

Omnigraffle Pro (Mac-only application). We have an office license, but since it is Mac-only only a few developers use it here.

Pencil (free Firefox Browser plug-in, http://pencil.evolus.vn). Feature-limited and sometimes awkward, but the price is right.

Balsamiq – online version; useful for working remotely. We used this a few years back when it was in free beta stage. http://www.balsamiq.com.

Microsoft Visio – my least-favorite tool because of cost and clunkiness, but perhaps the leading prototyping tool thanks to Microsoft’s influence.  http://office.microsoft.com/en-us/visio/.

JS has been around since the late 1990s. Like a house with several owners with different tastes, it’s been added on to over the years. It’s really easy to write ugly JS, chock full of bugs, that no other developer will ever want to or be able to read. You can accidentally open memory leaks that crash the browser. You can accidentally put a variable in the global namespace and cause the rest of the program to come to a crashing halt, or behave mysteriously.

At the same time, the core of JS is a beautiful language that, if you stick to the “good parts,” can support the richest of rich client apps with grace and aplomb. That is where CoffeeScript comes in.

CoffeeScript (CS) is a language that compiles into JavaScript. It makes it easier and less tedious to do good things with JS, and harder to do bad things. Because CS only turns into JS when the i’s are dotted and the t’s are crossed, it is harder to write buggy JS.

Line Noise Reduction

Programming languages based on C or Java, such as JS and PHP, are filled with parentheses and semicolons to tell the computer where each block of code starts and ends. Keywords such as “var” and “function” tell the computer which are variables and which are functions. The programmer’s eye gets used to them, and may even come to rely on them to interpret code on the screen.

Oftentimes before I write a paper I begin with an outline. Top level items are on the left, and each layer of sub-item gets one level of indentation. My word processor responds when I press the TAB key, and has an indent button. There is no facility to write an outline like the following, nor is there a word processing facility for doing so outside of a code editor:

I. The Industrial Revolution {
    A. Origins {
        i. deforestation in 17th century England
        ii. proximity of coal and iron deposits
        iii. accumulation of capital from overseas trade
    }
}

Therefore if you want to make code more human readable, replace the braces with indentation, and let the compiler put them back in for you to make the computer happy. CS does this, calling it “syntactic white-space”:

class App
  ...
  initUI: ->
    if $('#controls').size() is 0
      $('#title').append render('searchControls')
      JKT.earth.addControls() if (JKT.earth)
    ...

becomes:

App = (function() {
  function App() {
    ...
  }
  App.prototype.initUI = function() {
    if ($('#controls').size() === 0) {
      $('#title').append(render('searchControls'));
      if (JKT.earth) {
        JKT.earth.addControls();
      }
    }
  }
  return App;
});

I personally find the CS more meaningful, and the compiled code to be cleaner than the code I would have written to do the same thing (although it’s not fashionable to admit that your code isn’t always the cleanest and most awesome code anyone has ever written).

Notice that the -> stands for “function”, and function name colon: means “add this function to the object prototype.” Please read the CS documentation a few times before you try CS – this is just the beginning of the stuff you can do.

The bottom line is that “line noise reduction” removes as much computer-oriented meaning as possible from the code, while leaving the human-oriented meaning. The principle is that while programmers write code for computers to run, unless it’s one-time only throwaway code, they’re also writing code for other programmers (including themselves when they come back to it three months later to add a new feature). The less time it takes a programmer to figure out what is going on, the higher the business value.

Meaningful Code is Cleaner Code

The code snippet above isn’t necessarily fair, because it doesn’t show JS “before I started writing CS.” I see that it has benefited from the other thing I most like about CS: to make it easier to debug, you have to break it down into smaller parts. Smaller parts that do one thing only are cleaner parts.

That’s right. In the old regime, I might have a JS file with several hundred lines. When a error pops up, Firebug will tell me what line it’s on, and I can jump to it in the code editor and fix it. Maybe right there I will add some more code, and pretty soon I’ll have a large JS file that is hard to edit without Firebug, with lots of interconnected parts and mixed behaviors.

Since CS makes working with the JS object model so easy, I find myself using it. I would take that 500 line JS file and break it into a half dozen or more constituent parts. I have development mode set to deliver these to the browser individually, so if an error crops up, it’s easier for me to find it in the CS. Production mode combines and minifies the JS into one file for speed of delivery to the user.

If you’re coming from Ruby or Python, you’ll recognize the philosophy of human oriented code. You’ll also recognize that CS is 2/3 Python and 1/3 Ruby. Therefore CS will be easier for you if you know one of those; likewise if you hate Ruby, stay away from CS. (And if you don’t know JS yet, don’t try CS…)

Gotchas

I must admit that CS came with some pounding of my head on the table, especially when I started. Here’s where I got stuck, and what I did to get unstuck:

1. I started by opening a JS file and “saving as” a coffee file. DON’T DO THAT! Create a new coffee file, copy the JS from the JS file, and paste it into the coffee file. The paste action will get the indentation right.
2. Your code may look indented to you, but it may not be so for coffee. You may have SPACES mixed in with your TABS.

When you make changes to coffee but nothing seems to happen in the browser:

1. First check that you are running the compiler. I have a shell script that starts coffee’s compile-on-edit mode. Sometimes I forget to run it. By the third alert statement, I check for that.
2. Second, check the compiler output. You may have a syntax error in CS. It won’t compile at all if there’s a problem with the CS. If you see “cannot use a pure statement in an expression”, it usually means there’s a rogue space in your tab indentation. Redo the indentation and try again.
3. Third, if the CS compiled but weird things are happening such as it says a function doesn’t exist when you know it does, check the compiled JS. Sometimes there is an indentation issue that doesn’t break the compiler, but causes it to misinterpret where classes end and begin.

In a perfect world

CS is new. Therefore it is not integrated into most IDEs yet. Since Rails 3.1 uses CoffeeScript, it shouldn’t be long before you see CS support in Aptana. There is an IntelliJ plugin for RubyMine and PHPStorm. I use the TextMate bundle. My colleague Jim uses Eclipse and edits it with plain text, as he finds it still easier to read than JS.

Getting started

I recommend going to the CS website (http://jashkenas.github.com/coffee-script/). Read it a few times before you do anything. Bookmark it. Then install node, npm, and coffee.

When I started on CS, I had a few thousand lines of JS already written. Most of it was for a prototype, and I dreaded having to whip it into production grade and add the rest of the features to it. I started learning CS by porting some of the easier JS files. When I was comfortable, I took on the hairy part. It emerged as a piece of code I’m proud of and like to work with.

In a nutshell, CoffeeScript makes it fun for me to write clean JavaScript, and delivers business value by helping me to write maintainable JavaScript faster that it otherwise would. If you’re not using it yet, it’s time to start.

References/Additional Resources

1. The CoffeeScript web page: http://jashkenas.github.com/coffee-script/
2. My presentation to the Ithaca Web Group: http://www.slideshare.net/davidfurber/real-lifecoffeescript
3. Tongue in cheek presentation of why you’ll hate CS: http://www.slideshare.net/tim.lossen.de/coffeescript-7-reasons-you-are-gonna-hate-it
4. The PeepCode screencast, “Meet CoffeeScript”
5. The PragProg book (written by yours truly), “CoffeeScript: Accelerated JavaScript Development”
6. The CoffeeScript Cookbook wiki (new, but promising)

First, you need to establish a clear goal for your site.  While we build many websites and web applications that aren’t strictly for sales, such social networks, tracking systems, content management systems, and customized back-office tools; this article will focus on websites that are cultivating relationships and selling products or services.

Your product or service has to solve your visitors ‘problem or need’, or they won’t buy it. Keeping your content up-to-date and fresh is very important.  New content can be provided by the website administrators, site visitors, or automated feeds.  Stale websites are easy to detect and quickly turn away potential customers.

With that in mind, you need to make sure that when you are designing your marketing plan, you allow for a series of action steps.

Incorporate those steps from the beginning into your web marketing plan, and watch your sales grow as you achieve a positive return.

There are four concepts to follow so that your website starts to bring you business, which will, in turn, lead to sales.

ATTENTION:  Once a visitor to your website has arrived, you have a very short amount of time to grab their attention.  The content on your landing page should prominently display an offer or promise.  Keep the graphics and colors minimal and professional.  Make sure the site loads FAST.

INTEREST: You have caught your visitors attention, now keep them interested.  Offer information and links that keep them engaged.  Show problems or needs paired up with your solutions to make your offering relevant to their situation.  Offer a new benefit or feature or idea they hadn’t considered and they will keep reading.

DESIRE: Their interest has been secured, so now it is time to create desire. Motivate them to take action of some kind.

ACTION: Your website’s first action should be to ask your guest to identify himself or herself, and be sure to get some sort of contact information to begin to build a relationship. Get your guest interested in something that you are offering free of charge.

You want your website to work for you.  In order for that to happen, the web marketing plan needs to be built into the website, or given sufficient priority if happening later in the life cycle of your website.

Your website needs to acquire the visitors attention, stir up interest, cultivate desire intelligently, and get them to take some action.  This first action doesn’t need to cost any money.  Establish communications, usually via email or auto-responders that are thoroughly planned.

Try to put yourself in the shoes of your target customer. If you were visiting a website, what would you want to see there? What would fulfill your needs?

Remember that if your visitor visits your website and she doesn’t leave you with any way to contact her, your website has not been successful in this most-important first step.

If you want your visitor to connect with you, tell him or her. Let your visitor know in clear and simple terms how much you want to interact with him or her and make it easy.  There are many ways in which to successfully use your website. You just need to put those ways to work and you will start to enjoy more and more success for your business.

Check more about our Web Marketing Services.

Google has kind of answered that question too; you google it. But, what do you get in the data return. “Mary Kay Smith” returns 2,160,000 records, most of the top ones being from services offering to help you find your own Mary Kay. Maybe this is a good start when on the open Internet, but what if Mary Kay Smith works in the Kansas City branch of your company, even with some filtering words like, Kansas City and your company’s name, the return is still going to be front-loaded with helpful services.

This type of search is called a “Free Word” search. It has exception value. Most of us use it more than daily. But, it is not the only way to search and it is often not the appropriate way.

Assuming your company has an employee database you could use an in-house search tool, maybe still a Free Word search tool accessing just that one database. The return would show you all the Mary Kays in your company. Assuming only a few, you quickly click the one showing the KC address and there is her phone and fax number.

We could save a click. Why not have a drop-down list of all the employees? Let’s assume a few thousand. Yeah, the drop-down is too long. So maybe we have instead two “controls”. One is a radio button set asking “First Name” or “Last Name”. The other is an alphabet list. So now we get all the Matts, Marys, Marthas, and so forth. Right, what if we add one more control to limit us to Kansas City. Now we have a “Structured Search”.

You have probably thought of a still better or different way to find Mary Kay using a Structured Search, or maybe even, a combination of Structured Search and Free Search. This is Information Design – the search aspect of Information Design.

Let’s ask a polar question, what is the essential difference between Free Search and Structured Search? Answer is Capital Cost. It will always cost less, even much less, to setup a Free Search. But what about Operational Cost. If employees are searching each other out all day, how much is saved by providing a quick and certain search method? How much is saved by shipping the printer to the right Mary Kay?

Structured Searches cost more upfront because someone has to imagine them, organize a database, setup strict methods for adding, editing, and deleting from the database, and provide a set of controls for making the search. Not all of these costs are avoided by choosing Free Search, but many are.

It’s finally a User Interface decision involving cost, scalability, and accuracy. This is a favorite subject of mine. Call me for quick discussion or to arrange analysis of your search needs.

So why am I inviting you into these inner circles? An information system known as the Internet has pushed its way into your space. You have a website and you may or may not be prepared to deal with anything called Information Design. Here is some help.

Tufte alone has written seven books touching this subject, so I will not presume to encapsulate it here. My goal is to alert you to the existence and depth of this field, while also providing the rudiments for evaluating Information Design in your business application, database application, or website.

Here are two websites by GORGES that show just what Information Design deals with. The first site, http://birdsandbayous.org, is so simple that information design is little more than not making basic mistakes or omissions. There are only a few “information points” and only a basic navigation is needed to reach these points and return from them. This information design is analogous to the chapter ordering in a very small book.

The Martha Stewart site, http://www.marthastewart.com, is on a different planet. Every graphic and text object on this home page is a link to something, and amazingly, it all makes sense. It is visually organized to lead the visitor comfortably through dense information.

Note further, that much of the home page information is layered on top of other information and the visitor is invited to interact with it – to engage.

So it is dense, multi-layered, diverse, and interactive.

Your website’s complexity probably lies somewhere between the Birds and Bayous website and Martha Stewart’s. What can you learn from these two sites to help you evaluate your website or work with your website designers? Here’s one thing:

Insist that when presenting a design to you the designer makes at least three systematic passes across the demo pages in some carefully ordered, slow-paced way.
• In the first pass you should be told both “how” and “why” the information design suits your information set.
• In the second pass you should be told both “how” and “why” the graphic design suits you information set, as well as “how” and “why” it is appropriate to your brand and your communication intention for each of the audiences you have identified.
• In the third pass the designer needs to explain how the graphic design and information designs reinforce each other.

For the best result, allow the designers to make the points above without interruption and then go through it all again in a question and answer format. Good designers seek good criticism.

Here’s one more information design evaluation thing:

Ask two or three innocents to do the “What do you see?” test. With the page hidden, tell them you are going to ask them what they see first. Show the page. Then ask what they see second. You will get variation from person to person, but not much. Do this for the home page and for several subordinate pages. Does the visual prioritizing match your message plan?

My next posting will be also about Information Design – searching for information.

When designing and critiquing Websites or Software the User Interface (UX) needs explicit and systematic attention. Designers and Clients need to use checklists and apply them in prescribed ways. Here is a small part of one of my Content Checklists. This applies to data presentations and forms.

A) When the number of the rows, also called records, in a page reaches more then XX, a pagination bar should appear above and below the list. It looks like this:

First  Previous  1  2  3  4  [5]  6  7  8  9  10  Next  Last  [optionally,
All]

You just need to click on the page number of where you want to go.

B) The page numbers must be easy to read and click on. The font size must be readable and there must be enough spacing between each number so that clicking on the number you want is faultless.

C) An appropriate number of rows is a complex decision. It depends on the content and the user’s need to compare data row-to-row. Typically it can be 10 or 25. The number of records is also a consideration.

D) In some cases it may be necessary to provide an option for showing “ALL” records, or even showing a page of records “Beginning with Record # XXX”.

E) Unless budget constraints are very tight, the records should be sortable by their header titles. It is important for the current sort order to persist while the various record set controls described above are changed.

You may be doing many of these already, others you’ve heard of but haven’t done, and there may be a few that are new to you.  There are thousands of articles on this very topic on the Internet.  I can’t claim to have read all of them, and the items in this article aren’t really earth-shattering, but perhaps will represent a kind of a summary for you to help you focus and get more traffic.

Search Engine Optimization (SEO) Strategies

The most important, and inexpensive strategy is to develop high rankings for your preferred keywords in the ‘organic’ searches, for instance on Google.  So let’s start with ways to deliver to search engines concise information about what your website is all about.

1) Write a keyword-rich title for each page

Use keywords in your titles.  The title of a page is very important to Google.  So take great care here.  Don’t use common words such as ‘and’ or ‘the’ if you can avoid them.

2) Write a description META tag

While META tags aren’t as important as they once were for search engine rankings, they still matter.  A description is  a sentence or two describing the content of the web page, using the keywords that page is focusing on.  The first 60 characters or so will appear in Google when that page is being returned in a search result.  Every page in your site should have distinct title and META description.

3) Include your keywords in the headings and sub-headings of your content

Search engines look at the headings and sub-headings (H1, H2, H3 etc) tags, to learn more about the content of your page.  So craft keyword-dense headings as part of your content development efforts.

4) Position your keywords in the first paragraph of the body text

Search engines read content the way humans do, top down, so put the most important keywords and phrases early on in the content.  More is not better, be judicious, but make sure you use them.

5) Include descriptive keywords in the ALT attribute of image tags

Taking this step will help your site be more useful to visitors with sight-impairments, and also helps your images find their way into the Google image library, which can bring you more traffic.

6) Use keywords in hyperlinks

Help the search engines understand what is important by using your keywords in all links.  Go a bit further by using your keywords in the actual page names.

7) Make your navigation system search engine friendly

You want search engine robots to find all the pages in your site. JavaScript and Flash navigation menus that appear when you hover are great for humans, but search engines don’t read JavaScript and Flash very well. Therefore, supplement JavaScript and Flash menus with regular HTML links at the bottom of the page, ensuring that a chain of hyperlinks exists that take a search engine spider from your home page to every page in your site.

8 ) Create a site map

A site map page with links to all your pages can help search engines (and visitors) find all your pages, particularly if you have a larger site. You can use a free tools to create XML sitemaps that are used by the major search engines to index your webpages accurately. Upload your sitemap to your website.

9) Develop web pages focused on each of your keywords

Google ‘sees’ each page in your site as separate from the rest, so tune up each page to focus on a few specific keywords.

There is much more to SEO than this, but this should give you a good start.

Good luck in your quest for ever-higher rankings!