Since that time, I’ve been freelancing here and there as a user interface designer, usability analyst, and information architect. I’ve even given a lecture to an ad agency on mobile technologies. So to support my freelancing efforts, I’ve just launched a new web site:

www.hand-interactive.com

I put selections from my mobile design portfolio on the web site and have started writing a series of articles on mobile design to help draw an audience.

Hand Interactive Mobile Edition

When I launched the site, I also committed to ensuring that each page is viewable both in a desktop web browser and on mobile phones. After a bit of trial and error (and spending a lot of time testing the site in the Verizon and T-Mobile stores in Harvard Square), I’m glad to say that the mobile version of the site looks awesome! So if you have a mobile phone, point your browser to:

www.hand-interactive.com/m/

I decided not to automatically detect mobile devices and send them to the mobile version of the site at launch. Maybe later, I’ll add the feature in. The real difficulty comes when trying to track the user’s preference. Because the web site allows the user to easily switch between the standard desktop version and the mobile version, I’d have to track whether the user had elected to view the standard edition so that he wouldn’t be caught in an automated loop (mobile to standard, then auto-redirected to mobile). It would take a bit of programming and testing to do it right without upsetting the user, so maybe I’ll add that feature in later. After all, my philosophy is that it’s better to remove a feature than to add in a poorly implemented one!

The programming tools are great and there is a lively community of companies making innovative (and some not so innovative) components that you can easily plug into your own software. For example, I use third party components in my software teleprompter program, FloPrompter, to support the robust word processing, spell checking, and thesaurus functionality.

Unfortunately, Microsoft has really screwed up some of the security foundations for Vista which makes life really difficult for little companies like FloSpace. Almost immediately after publishing FloSpace FloPrompter version 3.0, we started getting reports from current and prospective customers that the product would crash on Windows Vista compuers. It works great on Windows XP computers, however. What the heck??

The source of the problem was apparent immediately: Vista doesn’t like the code we use that provides the mirrored text functionality. However, it took about a month to figure out an acceptable solution. The bad news is that there’s no silver bullet to fix this problem. The moderately good news is that I finally figured out how to write a “patch” that, when run on a Vista PC, will fix the problem.

It’s only a “moderately good” solution because ideally, customers shouldn’t have to jump through any hoops at all, like running a second patch program. You should be able to just run the installer once and have it work on all Windows computers automatically.

I posted an entry on the FloSpace blog detailing the problem and new patcher solution. Check it out:

www.flospace.com/blog/?p=45

By the way, I organized the colors in this palette in no particular order other than I thought it was nice. 

Making matters worse, there is precious little decent technical documentation on how to create .ICO files well, and for most graphic designers, it is a total mystery.

Fortunately, I’ve figured out how to do it with a mix of trial & error and a few clues uncovered here or there. First, let’s cover some background.

Q: What is an .ICO file?

An .ICO file is basically a fancy (and undocumented) file archive, kind of like a .ZIP file. Microsoft created it as a specialized container to hold multiple image files within a single logical file. During the software installation process, a program like FloSpace FloPrompter will register an .ICO file with Microsoft Windows. This process is similar to saying, “Hey, Windows! When you show my program or one of my files on the desktop, use one of the images from this .ICO file so that people can look at it and recognize it as mine!”

As a container, the file holds multiple files, each at a specific size and color depth. The bit depths are 4 bits, 8 bits, and 32 bits. At each bit depth, sizes range from 16×16 to 256×256. Put that into a table with the three bit depths for columns, and eight special sizes for eight rows. Three times eight – that means the table has 24 cells. That’s 24 unique images to create and pack into one single .ICO file. Yes, it does take some time! (Click the table below to view it at full size.)

(I think you can optionally ignore the 64×46 and higher images for the 4 bit column… but unconfirmed!)

Wikipedia offers a more in-depth look at the .ICO file format at: http://en.wikipedia.org/wiki/ICO_%28icon_image_file_format%29

Windows Mobile Note: As you might have noticed from the table above, you’ll want to create a separate .ICO file for the Windows Mobile version of your application. The good news is that you can use a sub-set of the same image files! The only slightly bad news is you have to create image files at two mobile-specific sizes: 22×22 and 44×44. To help keep the total file size down, only package the necessary images as noted above into the .ICO.

Microsoft Resources

When learning how to create .ICO files, start by reading two very important web pages on Microsoft’s web site. One page provides some detailed information on how to create .ICO files for Windows XP, while the other provides additional information for people creating software for Windows Vista.

• XP Info: http://msdn.microsoft.com/en-us/library/ms997636.aspx
• Vista Info: http://msdn.microsoft.com/en-us/library/aa511280.aspx

Read this third link if you’re creating an .ICO file for use by Windows Mobile applications.

• Windows Mobile Info: http://blogs.msdn.com/windowsmobile/archive/2007/03/02/320×320-revisited.aspx

Get the Right Tools For the Job

Next, I recommend that you purchase the right software for the job. I’ve tried using a few different software products and Photoshop plug-ins and they all pretty much suck. In my opinion, most are completely useless and unusable, with incomprehensible user interfaces.

One product that stands out as being both fairly usable and easy, is Gamani GIF Movie Gear. As you might expect from the name, it works really well for creating animated GIFs, as well. In my opinion, it’s also the most straightforward software program for creating .ICO files. Even better, it’s also really affordable, just $25.

www.gamani.com

In summary, use Gamani as an ICO packaging utility once the graphics are already created – not as a utility for actually creating graphics!

Step 1: 32 Bit Color Images

First, create the 32 bit color images at each of the magical sizes from 16×16 to 256×256. Yes, you should create the images all the way up to 256×256! Given that your software will probably run on both XP and Vista, just do it.

Whether you create each image file in Adobe Illustrator or Photoshop, here is what you want to do. Export the image in PNG format for best results. The easiest way is to click on the Save for Web menu item, then choose PNG-24 from the Settings drop-down, and make sure that Transparency is checked. (Click to view the screenshot in full size.)

Don’t forget to give each file a good name! Something like “MyLogo_XX_32bit.png” is good, where XX represents the size (e.g., “MyLogo_16_32bit.png”).

Another thing to keep in mind is that the two smallest sizes, 16×16, and 24×24, will probably need hand tuning. So open those PNG files back up in Photoshop, and do any necessary clean up before moving on.

Windows Mobile Note: If you’re creating an .ICO for use on Windows Mobile devices, you don’t need any 32 bit color images in the .ICO archive. Most windows mobile devices can’t display that many colors.

Step 2: 8 Bit Color Images

Now to create the 8 bit images!

Open up one of the 32 bit PNG files which you just created. To convert it to an 8 bit image, the easiest thing to do is simply save it as an 8 bit image. Here’s how:

Click on the Save for Web menu item again in Photoshop. This time, select PNG-8 from the settings drop down. Now, adjust the color settings, dithering, diffusion style, etc., to maximize how well your image looks. Save the image with a good name, such as “MyLogo_XX_8bit.png.”

Now repeat this process for all of the images. And again, you may need to re-open the smaller files in Photoshop to do some hand tuning.

Step 3: 4 Bit Color Images

Creating the images for the 8 and 32 bit colors is easy. Creating them for at 4 bit color depth is more complicated and time consuming.

First, you want to get a special color palette file for Photoshop which will make it easy for you to use the right colors. It turns out that Microsoft Windows is exceptionally picky about WHICH 16 colors you’re allowed to use for the 4 bit depth image files. You can only use the special Windows colors — no other colors are acceptable. Download the Photoshop color palette file (CLUT) from Gamani’s info page.

www.gamani.com/support_icon.htm

Direct file download: www.gamani.com/download/4bit.act

Next, we’re going to create some transitional files. These will NOT be added to the final .ICO file, but will help us get one step closer to proper 4 bit images.

Okay, open up one of the 8 bit image files. In the Layers window, add a new layer and position it UNDER the image so that it is the background. Fill this new background layer with a weird color completely unrelated to any other color in your image. For example, if your logo is mostly blues, set the background color as magenta.

Make sure than when this is done, the background color is unique (such as the magenta in the screenshot) and present in the top leftmost pixel.

Click on Save for Web menu item again, and this time select GIF 64 No Dither. Uncheck the transparency. Restrict the number of colors to something very low (such as 3 or 4). Remember that you do not want any anti-aliasing effects along the color borders. Just flat colors. No beveling or other effects. Just a small number of unique colors.

Now, save this image as a GIF. Give it a good name, such as “MyLogo_XX_Temp.gif.” Repeat this process for all image sizes.

Okay, now we can move on to creating the actual 4 bit images for use in the .ICO!

Open one of the temp GIF images. Click on Image > Mode > Color Table. In the Color Table Dialog, click on the Load button, and load in the 4bit.act file you got from Gamani. Your image may look pretty screwy! So now you need to hand tune each image file to use ONLY one of the 16 colors shown in that color table dialog. And again – this file should not have anti-aliasing or transparency effects.

When you’re done hand tuning the file, click Save for Web and choose GIF with the absolute minimum number of colors necessary, no transparency. Give the file a good name, such as “MyLogo_XX_4bit.gif.” And repeat this process for the rest of the sizes.

Step 4: Package the .ICO File

Now you’re finally ready to put it all together!

Launch Gamani GIF Movie Gear. Gamani launches into a “blank new project” state.

Let’s test one of the 4 bit GIF image files to make sure that it was done right. Open the folder containing all of your fabulous new images. Drag one of the 4 bit GIF images (“MyLogo_XX_4bit.gif”)onto the GIF Movie Gear window. Hover your mouse pointer over it and Movie Gear will show a tool tip confirming the bit depth. If Movie Gear does indeed show 4 bit, you ought to be fine.

Now, let’s save the project as an ICO file (we’ll add in the rest of the images in a moment).

Click File > Save As. Select “Windows icon (.ico)” from the Save As Type drop down.

Now that it’s saved, let’s continue.

Next, drag the rest of your 4 bit image files onto the Gamani project window; then add all of the 8 bit images. Click on the File > Save button again to make sure that all is well and good in the world. Gamani does an error check to make sure that there is only one file at 16×16 for 4 bit, and one file at 16×16 for 8 bit. A common error is that designers will have accidentally saved what should be a 4 bit image as 8 bit instead, so Gamani will catch that if it’s the case. If Gamani saved the .ICO file and didn’t complain, then it means you created all of the 4 bit images properly! If it complained, then you have some illegal colors in one or more of the 4 bit images or it’s the wrong bit depth, so you’ll need to go through Step 4 again.

Finally, drop all of the 32 bit images onto the file. Save it! When you’re done it will look something like this:

Don’t freak out if you see some of your 8 bit and 32 bit PNG images with what looks like non-transparent backgrounds. Gamani GIF Movie Gear gives transparency a color for some odd reason, and you can change that color if you like.

Now Breathe…

And with that, you’re all done!

It took awhile, but I finally launched an official blog on the FloSpace.com web site:

www.flospace.com/blog/

Nowadays, I think it’s really important for companies to have blogs, especially small companies like FloSpace. It’s a great channel for communicating directly with customers — something that the main part of the web site isn’t great for, since web sites tend to be more like catalogs.

As a result, I won’t post much about FloSpace FloPrompter in this blog any more. Well, maybe just to let any InfoTart readers know that there’s a new posting on the FloPrompter blog…

A customer contacted us to request a continuous loop feature in the teleprompter, which I wrote about a few days ago. It’s a great idea and I think that a lot of other customers could benefit from it, as well.

• Continuous Loop: Press the Loop button (grouped with the playback buttons like Play and Next, circled in red above) to loop the content. When pressed, the player will loop through all of the segments automatically. The player will pause at the bottom of the current segment for the number of second set for the loop delay in the Options Dialog, then switch to the next segment. It will also pause at the top of the next segment for the same amount of time before continuing with the auto-scroll.
• Stored File Settings: If you elect to save and use file-specific teleprompter settings (see the Options Dialog), then the continuous loop setting will be saved and applied, as well.

Upgrade Recommendation: If you wish. This is a “soft recommendation” to upgrade. The loop enhancements made to version 2.3.1 were fairly minor, so most folks won’t notice the difference. If you decide to upgrade, this is, of course, a free upgrade for all FloPrompter customers! FloPrompter customers are always requested to download the latest version on the FloSpace Downloads page.

NOTE: Anyone who has NOT upgraded to version 2.3 yet should definitely upgrade today! Version 2.3 introduced many enhancements to the word processor, including find & replace, spellchecking, a thesaurus; direct import and export with Microsoft Word, HTML and (for export only) PDF; and an automatic software update checking utility.

Many thanks to the customers who requested these feature enhancements. As you can see, your comments are heard and result in direct improvements to the software!

Every morning, a couple of students make the announcements over the school’s PA system. They also tell the weather, maybe a brief news report. That sort of thing.

The media specialist acts as director and producer, helping the students set things up and deliver the announcements successfully every day. She color codes the text for each student so that one reads text in one color, the other reads text in the other color. She said that FloPrompter helps the kids a lot. When they read from sheets of paper, their heads are facing the desk and it’s hard to hear them. Now that they’re using FloPrompter, they’re keeping their heads up, they’re speaking more clearly, and they’re having a lot of fun. “They really enjoy it,” she said.

That’s fantastic! I love hearing stories about how our customers are using FloPrompter in innovative ways. Public speaking skills are incredibly important in life and the kids at this elementary school in Michigan are getting a head start.

The IT director loves FloPrompter’s smooth scrolling. They had been using a PDF scrolling program before, but it tended to be jerky sometimes and had a few other issues. He said that the courthouse would like to use FloPrompter to share the judges’ daily schedules with the public. They could put the schedules for judges A – G on one segment (or tab page), H – M on another, and so on. If FloPrompter just had a continuous loop feature, he said, then he could simply enter all of the judges’ schedules into a file in the morning, set it on “loop”, and forget it for the rest of the day. That sounds like a perfectly reasonable request — and like it could be really helpful to other folks, as well!
I did some research into what it would take to put this feature into FloPrompter, and I think it would be pretty quick to implement. So even though we just published version 2.3 a few days ago, I’ve decided to schedule version 2.3.1 with the continuous loop feature for this weekend.

Thanks for the great idea, Mr. D., and for helping to make FloPrompter not only the most innovative PC-based teleprompter, but also the most responsive to customer requests! (Well, we would like to think we are, anyways! ) Check back next Monday to download version 2.3.1 of FloPrompter with the continuous loop feature.

http://www.amazon.com/FloSpace-FloPrompter/dp/B000VQBNAO 

It will even show up in search results for “teleprompter” when you type that into the text box at the top of the page.

Call me just a trifle thrilled to see the fruits of my labor being sold on one of the largest online marketplaces in the universe!

What’s cool is that you can program the device to activate any key on your computer’s keyboard. He got the three-pedal foot switch and set it up to activate these keys:

• Left Pedal: Activates the F8 key to scroll the teleprompter slower.
• Center Pedal: Activates the F12 key to stop and start scrolling the teleprompter window.
• Right Pedal: Activates the F9 key to scroll the teleprompter faster.

The customer reports that the foot switch works fantastically with FloPrompter. How cool is that!

Kinesis Corp. Savant Elite Programmable USB Foot Switches: www.kinesis-ergo.com