RSS MAD

iLounge includes Delivery Status among the top 100 apps and games for the iPhone

This was a nice surprise today: iLounge, arguably the top site for iPod and iPhone reviews and news, released their 2009 iPod + iPhone Buyers’ Guide. Among other things, the guide includes their “100 Best iPhone and iPod touch Apps and Games”, and I’m proud to see Delivery Status touch on that list! It’s very flattering to be listed alongside other top apps like Twitteriffic and Facebook.

I’d missed it previously, but they also published a review on their site a couple weeks ago, including this kind quote:

“Simply put, this interface is as nice as any we’ve seen for this functionality—Apple should really include this app with the iPhone OS.” — iLounge

Very generous praise! They gave it an A-. Maybe with the big 2.0 update we can get that up to an A+!

Filed under: iPhone and iPod touch

Introducing Junecode 3.0 (formerly Tense Code)

After a year and a half of work, I’m excited to present the first beta of Junecode 3.0, my web site content management system. In short it’s a piece of software that makes creating, editing, and maintaining a web site easier. You may know it better as Tense Code, which is what I was calling it until about a month ago. I’ll explain more about the name change in the future, but for now let’s talk about what’s new in Junecode 3.0. The list is very, very long, but here’s a quick rundown of the best of it:

• All new design and improved navigation. Many areas have been tweaked to make it easier to get around and edit your sites. It’s also fully optimized for the iPhone and iPod touch, so you can access nearly every feature from anywhere.
• Re-order categories just by dragging them around.
• Unlimited metadata. It’s now easy to add various extra fields to your entries. Add a text field for the music you’re listening to, a pop-up field for a star rating, a checkbox for whether or not you want a muffin right now, or anything else you can think of.
• Automatic Google Sitemaps.
• Fully customizable contact forms are now as easy as editing a template (which is as easy as editing HTML).
• Display RSS feeds on your site. (I use this along with the clippings feature in NetNewsWire to post news I find interesting on my site.)
• Bookmarklets (or Favelets) for quickly posting stuff you find online to your own site.
• Take your site down for maintenance with a couple clicks if you’re working on a new template, rearranging categories, etc.
• Improved features for dealing with spam: spam detection is improved. You can delete multiple comments at once. Moderation emails look nicer and they’re easier to use. Contact forms have spam detection and they’ll present a captcha if they’re suspect.
• Many different languages are now supported, including Japanese, Chinese, Arabic, and more. Junecode’s own text is presented only in English, but you can use it to create a site it any language now. Various special characters are automatically dealt with too, which makes life a lot easier if you’re pasting it text from a Word document, for example.
• Much better compatibility. Among other things, it longer relies on DOCUMENT_ROOT. I’ve tested myself on Dreamhost and GoDaddy servers, but it should work just as well with many other web hosts. Installation is much easier too!
• Optional caching. On average pages will load 3-4 times faster when they’re cached, because it’s just displaying a file instead of doing a ton of database lookups and parsing templates.
• Many many bug fixes and security enhancements.

Aside from all that, and all the little features I didn’t mention, there are a couple of other big things in the works:

• Online store support. Adding a product is now as easy as adding an entry. You add different formats for things like shirt sizes, CD vs. MP3, and so on.
• Download sales are supported so it’s easy to sell songs or other files online.
• Payments can be handled by PayPal or through the mail. PayPal Payments Pro is supported too, so you can accept credit cards directly on your site.
• FedEx can be used for automatic shipping calculation (or you can enter set prices for shipping if you prefer).
• Mailing list support. You can now manage all your contacts right alongside your site, and create beautiful HTML emails as easily as creating any other template. Custom tags are supported in emails so you can automatically insert your latest entries, products for sale, or whatever you want.

These store and mailing list features are not included in this beta. They’re currently undergoing a private beta, and they will only be available with a paid license. The rest of the software will continue to be free for personal and non-profit use!

Of course there’s also a new Dashboard widget for Mac users:

Aside from the new look, the widget also has some new features:

• You can now drop multiple files onto the widget at once (and then open them all in your browser with a single click).
• You can now copy the URLs of the uploaded files after they’ve uploaded (using command-c). Due to a bug in Dashboard this feature probably won’t work for most people right now, but once Apple updates Safari it should start working.

If you’d like to try it out you can download Junecode 3.0 beta below. I’ve been using this for a while now myself and I think it’s pretty solid. However it hasn’t been widely tested, so I recommend some caution. If you’re upgrading from Tense Code, I strongly recommend that you back up your database and your files before you proceed. Also please note that the help has not been updated yet. Most of it is still true, but you’ll probably find many things are missing or inaccurate.

Updated in beta 2 on November 12th, 2008

• The Junecode logo will now display correctly in Internet Explorer
• Miscellaneous bug fixes
• Added a juneindex:audio tag
• Added a hidden argument to the juneindex:files tag (a comma-separated list of file names to skip, including extensions but not paths)

Downloads

Download Junecode 3.0 beta 2 (see instructions for requirements)
Download Junecode widget 3.0 beta 2 (requires Mac OS X 10.4.3 or later)

Let me know what you think in the comments below!

Filed under: Junecode

Business Cards

My new business cards finally showed up today, and they look awesome.

Same as with the site, Holly Tickner drew the illustrations, and I designed the rest. I wanted to use the robot illustration on the front of the cards, but I couldn’t work out a layout I was happy with. The paper airplane fit in perfectly, but my initial thought was that it seemed a little inappropriate to have on the front of my business cards… I guess because it’s been overused as a way to show a kid goofing off in class, someone that doesn’t take things seriously. Eventually I realized it was a perfect symbol: it’s just a plain piece of paper, but with a little ingenuity it can fly as far 112 feet. That’s exactly what Junecloud aims to do: start simple and make something amazing.

I had wanted to order them from Moo but I got a bit frustrated with their system—I don’t think it’s an ideal setup if you already have a precise, finished design. Their cards are also a non-standard size (at least in the US) and I already had finished art at 3.5 x 2 inches.

So I ended up getting them from PSPrint—we had some postcards printed there for Tense Forms and those came out great, so I was pretty sure I’d be happy with the quality. Like Moo, they have an online tool to upload your artwork, but in this case you’re expected to supply the art in a precise format, and you have fewer options for making adjustments in your browser. It made me feel more confident they would come out as I expected. I ordered 250 cards on 13 pt., 100% recycled matte, color on both sides. 250 was the minumum to have them printed on an offset press, which seemed preferable to a digital press to me. Total cost with shipping: $46.13. Not bad at all!

As for the rounded corners: PSPrint does offer die cutting, but their minimum order is 500. To get what I wanted it would have cost me $250… I’d have twice the cards, but it’ll likely be years before I even get through 250 of them. Fortunately I have a Marvy Corner Punch I picked up at a craft store a few years back. Doing one corner at a time is a little tedious, but since I go through cards slowly there’s no need to do them all at once. I knocked out a couple dozen in a few minutes. Well worth saving 200 bucks, and the end result looks great.

Filed under: Design

Displaying a password or text entry prompt on the iPhone

I needed to display a password prompt in Delivery Status touch and quickly found that there was no ideal way to do it. There are some unsupported methods, but the workaround below—adding a UITextField as a subview of the alert—is the proper method for a third party app, according to Apple.

Aside from the basic technique of adding a UITextField as a subview, there are two other things I struggled with. First, if the text given for the message was too long it would wrap to a second line and appear partially underneath the text field. I worked around this problem by adding my own UILabel subview. The custom label is a single line so you’ll get the standard ellipsis (…) if the text is too long. For the message text I just supply three blank lines, which makes the alert large enough to display the contents. It’s a clunky way to resize the alert, but it works.

The other thing I struggled with was getting the text field to match what Apple uses. The standard beveled edge looks okay, but Apple’s own password prompts have a field that’s customized specifically for alerts. My solution was to insert an image, and display the text field, without a border, on top of it. Here’s the image I’m using.

Using those tricks, here’s the complete code I’m using to display a password prompt:

UIAlertView *passwordAlert = [[UIAlertView alloc] initWithTitle:@"Server Password" message:@"\n\n\n"
delegate:self cancelButtonTitle:NSLocalizedString(@"Cancel",nil) otherButtonTitles:NSLocalizedString(@"OK",nil), nil];

UILabel *passwordLabel = [[UILabel alloc] initWithFrame:CGRectMake(12,40,260,25)];
passwordLabel.font = [UIFont systemFontOfSize:16];
passwordLabel.textColor = [UIColor whiteColor];
passwordLabel.backgroundColor = [UIColor clearColor];
passwordLabel.shadowColor = [UIColor blackColor];
passwordLabel.shadowOffset = CGSizeMake(0,-1);
passwordLabel.textAlignment = UITextAlignmentCenter;
passwordLabel.text = @"Account Name";
[passwordAlert addSubview:passwordLabel];

UIImageView *passwordImage = [[UIImageView alloc] initWithImage:[UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"passwordfield" ofType:@"png"]]];
passwordImage.frame = CGRectMake(11,79,262,31);
[passwordAlert addSubview:passwordImage];

UITextField *passwordField = [[UITextField alloc] initWithFrame:CGRectMake(16,83,252,25)];
passwordField.font = [UIFont systemFontOfSize:18];
passwordField.backgroundColor = [UIColor whiteColor];
passwordField.secureTextEntry = YES;
passwordField.keyboardAppearance = UIKeyboardAppearanceAlert;
passwordField.delegate = self;
[passwordField becomeFirstResponder];
[passwordAlert addSubview:passwordField];

[passwordAlert setTransform:CGAffineTransformMakeTranslation(0,109)];
[passwordAlert show];
[passwordAlert release];
[passwordField release];
[passwordImage release];
[passwordLabel release];

You can see the result of this code in the screenshot above. It can be customized fairly easily, if you need another type of text entry, more lines of text, or some other change. (Remove the secureTextEntry line or change the keyboardAppearance to customize the text entry field.)

I spent quite a bit of time getting it as pixel-perfect as possible. The only real difference is that it’s a few pixels taller than Apple’s, because of the imprecise way I’m sizing the alert. I think it’s fair to say most people would never notice! I’d love to see a more simplified, official method for creating these alerts, but in the meantime I’m pretty pleased with this solution. If you have any suggestions for improvements, let me know in the comments!

Filed under: Code, iPhone and iPod touch

A Preview of Delivery Status touch 2.0

Delivery Status touch has been available for just over a month now, and we’ve had quite a few emails with suggestions already. I actually had a lengthy to do list before I even submitted the initial release to Apple, and most of the things people have asked for are already on that list. I’m very happy with version 1.0, but I very much consider it a foundation to build on further—it’s a beginning. So here are some things coming soon to Delivery Status touch:

View full delivery details directly in the app. Tap the icon on the left side of a delivery and the page will peel up to show the complete details. A single tap will take you back. With services like Amazon and Google Checkout, you don’t even have to waste time logging in again.

Full, automatic syncing. When you add a delivery to the widget, it will appear in Delivery Status touch next time you use it. When you add a delivery to the app, it will appear in the widget’s history. Automatically. You can also add deliveries using any web browser, or sync your widget history between multiple computers.

A new icon. The response to the delivery truck icon has certainly been interesting! Some people really love it, and some people absolutely hate it. We thought the idea of a delivery truck was fun and unique, but some people though the truck looked more like a bus or even a garbage truck—just they just didn’t see the connection with a package tracking app. After a long debate we’ve settled on a new icon, and I have to say I like this one even more. It looks great on the iPhone home screen.

Re-order deliveries. Currently, new deliveries are added to the top. Thanks to the delivery history, you can remove an item and re-add it at the top with a couple of taps, but that’s certainly not ideal. Soon you’ll be able to re-order items anywhere you like—just tap the info button and drag them around.

A more welcoming empty view. Currently when you don’t have any deliveries, you’ll get a dark grey screen with dark text on it. We had thought it made sense to have a very empty-looking view and leave the focus on the info button, but we realize now that this isn’t a very friendly way to welcome new people to the app. I think the new screen above is much more clear and nicer to look at.

Easy password entry for synced deliveries. Some people using our current delivery transfer option have been confused when an Amazon or Google order comes up as “not found”. The first time you use an account, you need to tap the info button, tap the delivery, enter the password, and save it. We realize this isn’t as simple or clear as it could be. In the future when you get a “password required” message, you’ll be able to just tap the delivery for a password prompt. Couldn’t be simpler!

We’re not stopping there, either. These are just a few of the big items you’ll see in the 2.0 update. This update will have many other improvements, and we have even more planned for the future. If you’ve used the Dashboard widget for a decent length of time you’ll know we put a lot of work into it. It’s come a very long way since its simple beginnings as Apple Order Status, nearly three years ago—and we plan on putting just as much effort into the iPhone app.

Thanks for all your support and we hope you’ll look forward to the update! It’s currently in beta testing, and we plan to release it in November. If you buy Delivery Status touch from the App Store now, this will be a free update.

Filed under: iPhone and iPod touch

Delivery Status touch has been submitted to Apple!

Delivery Status touch (for iPhone and iPod touch) is complete—I sent it off to Apple last night. Hopefully it will appear in the App Store next week, but don’t be surprised if it takes longer. It will be available initially for an introductory price of $1.99, so I recommend grabbing it quickly if you’re interested! Keep an eye on the site, as I’ll be posting an update when it’s available.

This initial release is just the beginning. Assuming it sells well, I already have a big list of features I’d like to add in the future. There are a couple of other package trackers in the App Store already—ours won’t be the first and it looks like it won’t be the cheapest. I do aim to make it the best though, and from what I’ve seen we have a good head start. I hope you’ll consider supporting us!

In the meantime, you can download Delivery Status 4.4 for your Mac right now. Along with various fixes and enhancements, this update includes a feature that will let you send deliveries to Delivery Status touch, on your iPhone or iPod touch. Just flip the widget over and click the new arrow button in the bottom-left corner.

Just to clarify: while you can send deliveries to your iPhone or iPod touch now, Delivery Status touch is required to open them. I decided to release the widget update in advance so you can have it ready once the app is available in the App Store. Sorry for any confusion!

Updated on September 19th: Delivery Status touch has been approved for sale, and should be available in the App Store very soon!

Updated again: Delivery Status touch is now available in the App Store! Thanks everyone for your support, I really appreciate it. If you decide to buy the app, please take a moment to write a review!

Filed under: Mac OS X, iPhone and iPod touch

Welcome to Junecloud!

When I first started running my own business full time a few years back, I really wasn’t sure how long it would last. It’s been stressful, it’s been hard work, but it’s also been fun and rewarding. I’ve had the opportunity to work with a lot of great people. I’ve also spent more and more time on my software—it started out as a hobby, but now I’m making a fair amount of income just in donations. (Thank you!)

It’s clear now that I’m in this for the long haul, and I won’t be giving up my business any time soon. So I figured it was time to make it all a bit more official. After a good month or two I finally came up with a company name that both sounded good and had an available .com address: Junecloud. June was my grandmother’s name and the month my mother and I were born in. Cloud brings to mind some beautiful images and it’s also a symbol of that nebulous thing that’s at the heart of what I do: the internet. I think it’s perfect. On August 15th, 2008, the paperwork was filed, and Junecloud LLC was formed.

Right now I’m the sole employee of Junecloud, but my hope is that this is just the beginning. I’ve been hiring Holly Tickner for contract work more frequently—she created the charming illustrations above. Hopefully I’ll find more talented people to work with in the future. (If you’re interested, drop me a line).

Thanks everyone, for all of your support. Here’s to many more years of great design and software!

Cheers,

Mike Piontek

Filed under: Design

Where Ideas Come From

Someone asked me today about the creative process. Where I get ideas.

For more commercial work, I start by talking to the client as much as possible. I get anything I can out of them… I ask them a lot of questions about their company, their product, if they have anything specific in mind that they want me to do, and so on. If they have any pictures or copy I get those from them.

For less commercial work—if it’s for a band, for example, or any project where they want something a bit more abstract, or don’t have a specific direction—I’ll look elsewhere for inspiration. A lot of times I’ll look through photos I’ve taken in the past, or take new ones. Even if they’re abstract or having nothing to do with the subject matter, they can serve as a good starting point. I get inspiration from just about anything…. Movies, music, architecture, video games, other sites, random stuff lying around, whatever. I always keep an eye out for things that just look interesting to me. I should add that I do this even for commercial work, just to a lesser extent.

Preferably—time permitting—once I’ve gathered all these materials and have a good grasp on what I’ll be doing, I just like to let it sit for a little while. I keep it way in the back of my head while I do other things. Often ideas will come to me while I’m doing something completely different… Those are usually the best ideas. If I’m forced to get going right away, it’s always more difficult.

After the initial process of mulling things over and looking at materials, I usually go through fonts. If they already have a logo it may not be necessary—I’ll just pick what works well with the logo—but often that isn’t the case. I just flip through all the fonts I have and mark ones that feel appropriate for the subject matter. I narrow those down to a dozen or two at most, and load them up.

I should add here that sometimes I’ll do some sketching by hand. If they just want a web site, usually I won’t. It can be an important step, and I’d recommend it to anyone, but I’ve gotten to the point where it often isn’t useful for me. Even if I come up with a sketch that I like, it isn’t necessarily going to look like that when I actually put it together on the computer. I’m comfortable enough with my programs that I can “sketch” very quickly directly in them, and I usually find that more effective. But if they want something like a logo, or an illustration, or just a site that’s more organic, then I’ll definitely start by sketching.

If not, it’s into Photoshop (sometimes FreeHand) next. Here I take all the fonts, sketches, photos, copy, and whatever else I’ve gathered and just start experimenting with it. I’ll take some colors, maybe out of a photo or just something that’s appropriate for the subject, and block in some basic shapes. I’ll try out different fonts, in different sizes, capital and lowercase, kerned tightly or loose, placed in different spots on the page, etc. I’ll look at my photos and the opportunities they present… Experiment with different ways to crop them, fuss with the hue, saturation, or color balance, perhaps apply different effects to them, try them at various sizes, and so on. I may bring a few photos together, or even layer them on top of each other. I try random things that come to mind, even if they might look terrible.

That step, all that screwing around in Photoshop, is often where my ideas come from. Sometimes I’ll have a very specific idea before I start work at all, but most of the time that just isn’t the case. So the best thing you can do is just experiment. Don’t worry about refining your ideas too much. You don’t want them to be sloppy, but you can fuss with the details later. Let yourself get really into it, and just try everything that you can. Within reason of course… You don’t want to waste time on something that’s totally inappropriate for the subject matter. On the other hand, I do think it’s good to push the limits… you don’t want to do something totally expected; I definitely try to go off in some unexpected directions. It’s sort of a way of testing the boundaries… Even if it’s terrible or the client hates it, it can help you figure out what they are looking for, and what does really fit the subject matter. Otherwise you’ll never know. You might find something that works, but perhaps it could have been a lot better if you went further in a certain direction.

Throughout the process of experimentation, I’m always hitting Save As. You could just save everything on different layers in folders, but saving separate documents gives you more freedom… You don’t have to worry about whether you’re screwing up a previous version, and you don’t have to waste time organizing your layers.

Once I feel I’ve exhausted my ideas, or I’ve just plain put together a ton of different ideas, I’ll stop. Then I’ll open up all the files I’ve saved and look through them. I’ll weed out the ones that really aren’t working. The rest I’ll show to the client to get their feedback. If it’s just for me, or something I’ve been given total control over, I’ll use a combination of my own judgment and other people’s opinions to narrow it down.

Often the creative process starts winding down there… One layout is decided on, and then I take that and spend a lot of time refining it, just playing around with the details. But sometimes it keeps going… Maybe the client doesn’t like what I’ve done, or they do like it, but something gave them an idea for something a bit different. Possibly even something completely different. Then it’s another round of experimenting…. Usually it’s more controlled, since you have a better idea of what they’re looking for, but I still spend some time testing the boundaries.

I’ll add here that I think it’s my job—within reason of course—to disagree with the client. It’s important to please them, but it’s also important that I’m happy with the final design. Why? Because I’m the one with training and experience. I know how to design a site better than they do, and that’s why they hired me. It’s like any other job… If you asked an architect to do something specific, he wouldn’t just do what you’re asking without considering the issues. It may not work as well as you think when it’s finished, or it could even be dangerous. It’s his job to take those suggestions and make them work, and that’s your job as a designer as well.

I’m not saying that I’ll ignore their requests, quite the contrary. But I will push things a bit… I’ll show them one thing that’s exactly what they want, and one that’s just a bit closer to what I think works best. I’ll argue my reasons if I feel it’s necessary. If I don’t give them something we’re both very happy with, I just feel like I’ve cheated them. It would be easier and faster to just give them exactly what they’re asking for, but if I don’t think it works well, I’ll keep going. It’s not done until I’ve met their requirements and I think it’s a solid design.

I bring this up because that’s where a lot of great ideas come from. It’s that process of give and take, of debating over what works best… That’s where you really find the core of what you’re doing. Often I’ll come away from a discussion like that with new ideas for a solution. It almost always results in something we’re both very happy with.

Some comments on being in a rut: I think there are two ways around it. Either you work through it, or take a break. Sometimes you just need to keep going… Even if the stuff you’re doing sucks, it can really help to just get it out. If you’re trying that and it’s not working, do something else. Don’t think about that project at all. Work on something else, or if you’re struggling with all of it, don’t work on anything at all. I wouldn’t recommend just sitting around doing nothing though. Do something else… Sometimes I find just going to the store for groceries can be a good break. Getting out of the house is definitely good, in any case. I think it helps to do something productive, if possible, something active.

“…I come up with ideas only after I’ve devoted myself to a day of hard work. If we’ve been relaxing all throughout the day, we hardly ever come up with any new ideas.” — Shigeru Miyamoto

Filed under: Design

Stupid Things That Web Sites Do

Far too often I see a site do something that just doesn’t make sense. Here are just a few of these blunders.

Playing music automatically… and then playing a video without pausing it. It’s amazing how often I see this with Flash movie web sites. You go to the site and music starts playing. You click a button to play the trailer. A new window opens. The trailer starts playing… and the music continues to play, clashing with the trailer horribly. You’re then forced to go back to the main window and hunt for the little control to turn the music off. One site didn’t even show the controls for the movie, so you couldn’t pause it while you’re digging for the off button, nor rewind once you’ve found it.

Budweiser gets it right. When a commercial opens in a new window, the main Flash site is paused entirely, and dimmed out slightly with a “reactivate” button.

Working against habit. Cingular.com is a great example here. To check your account there is a series of three small fields to enter your phone number. After you type the first three digits, it automatically jumps to the next field. It seems helpful, because it’s annoying to deal with three separate fields. The problem is that many people are used to hitting tab to go to the next field. The result is that I hit tab at the same time it skips to the next field… and I end up missing a field entirely. It’s difficult to undo habits, and that’s too much for a site to be asking. They’ve tried to patch up a problem when they should have fixed the problem itself. They could easily use a single field, with some simple error-checking to transparently remove any non-number characters. They could also provide an example next to the field, showing an example of how the number should be entered (if they’re worried people will leave out the area code, for example).

Changing form values without bothering to tell anyone about it. Even worse if it’s a password! This isn’t a common mistake, but it’s such an obviously bad thing that I can’t believe anyone would do it. I placed an order at ClubMac.com today. My password had special characters in it. It replaced these characters with spaces, without saying a word. Fortunately I was able to email the password to myself to find out what it had done. I don’t like doing that though, as email is not secure. This situation would be far better resolved with an error message saying the password cannot include special characters. Better yet, revise the code so that special characters don’t cause problems!

Using javascript:history.back(); for a “previous page” link. Come on now. I want to get to the previous page on your site, not the last page I was looking at. Everyone knows how to use the back button, you don’t need to provide one for us.

Trying too hard to protect your content. I was at Pictage.com looking at photo’s from a friend’s wedding. The site is poorly designed and I wanted to keep my “favorites” open in a second window, to make sure it was actually marking the photos I told it to. (It wasn’t.) On right-clicking I was presented with a dialog telling me how to use the shopping cart. I clicked OK. I tried again. Same thing. Then I realized: they’ve tried to disable right-clicking to prevent people from saving the photos. The photos aren’t even high-quality… They’re over-compressed and watermarked.

Face it: if you’re letting people download your content to a browser, they can just as easily save it to disk. Whether viewing the source for the address of the image, taking a screenshot, or just dragging it to the desktop like you can in many browsers, there are plenty of ways to save an image, no matter how hard you try to stop it. If somebody really wants to steal your content, they’ll get their tech-savvy buddy to help them out. Simply focusing on a quality site design would do much more to ensure sales. The site was so frustrating to use that I was tempted not to bother.

Filed under: Design

Internet Explorer and Flickering Background Images

I ran into this issue recently (it had never shown up on my PC at home) and found it rather frustrating. I have little new to contribute, but I’ve seen a lot of conflicting reports on why it happens and how to fix it, so hopefully I can help clarify the issue for some people. The article Caching in IE by Dean Edwards explains the problem well, and the circumstances under which it happens. Minimizing Flickering CSS Background Images in IE6 by Ryan Carver has some more information.

It basically comes down to this: if you assign a background image to a link using CSS, give it certain properties, and set Internet Explorer 6 to reload “every visit to the page”, the images will reload every time you move the mouse over them, causing them to flicker. This happens even if nothing is supposed to happen when you move the mouse over the image! The good news is that “every visit to the page” is not the default setting. Supposedly it can happen (less often) on other settings, though as I said I have never seen it at home (with the “Automatic” setting). For one of my clients it happens on every computer at his office, and quite a few other people use the setting I’ve found, so I felt it was well worth addressing.

A common suggested fix is to double-up the images… For example, if you attach the rollover image to the surrounding element, and simply hide the link’s background image on hover, it will reportedly fix the problem. I don’t like this solution myself, because in many cases it adds excess tags as well as styles. The beauty of using CSS for rollovers is in its simplicity, so it seems like a step backwards. And according to some, the images may still flicker, though I can’t verify whether that’s true.

Thankfully the Caching in IE article has a much better solution. I’m using a slight variation on the suggestion there. I have simply added these lines to an .htaccess file on my Apache server:

ExpiresActive On
ExpiresByType image/gif A18000
ExpiresByType image/jpeg A18000
ExpiresByType image/png A18000

If you prefer you can add this to your httpd.conf file. These lines tell the browser to cache GIF, JPEG, and PNG images for 5 hours, which Internet Explorer will respect. It requires Apache’s mod_expires module to be enabled. You can do this by un-commenting these two lines in httpd.conf:

LoadModule expires_module libexec/httpd/mod_expires.so
AddModule mod_expires.c

The article also suggests adding some other lines to .htaccess or httpd.conf, but I found they were not necessary, and didn’t seem to affect the issue at all.

It’s worth noting that if you have images that update frequently (a web cam perhaps) this fix could have an adverse effect. You may want to try a shorter time, or use another .htaccess file with different settings in the directory with the frequently reloaded image(s).

If you’re using IIS rather than Apache, Dean Edwards suggests this article on changing the cache settings on a IIS server.

Filed under: Code

An Office Away From Home, Part One

A continuous string of events has led me to spend an entire month away from home, in order to cut my traveling down to a manageable portion of what it would have been otherwise. I had a birthday to attend, then Christmas, and a wedding to finish it off, all spread across two states, neither of which I reside in presently. I won’t mind spending new year’s eve with my friends in Michigan either, which is where I’ll happen to be at the time.

I’m currently in the middle of this journey, having just arrived in Michigan, by way of Illinois. I first left home, in North Carolina, on December 12th. Working away from home has been an interesting experience thus far, with a lot of things that I thought were worth sharing.

With an eMac as my main computer, and only an aging, deathly slow iBook for a portable, I wasn’t quite prepared at first to spend a month working away from home. I could add some RAM and buy a new battery for my lovely, key lime, clamshell iBook, but then I’d be out $220 and still stuck with an 800x600 screen. Not entirely ideal for a month’s worth of web design work. After mulling it over a week or so, followed by an hour drive to the nearest Apple store, I was quite settled on buying a new 12” iBook, with the hard drive bumped to 60GB, the internal Bluetooth module added, and an extra stick of RAM from DataMem.com, for a total of 768MB.

Now I’ll admit I’m an Apple fanatic, but I am with good reason. I have used their computers for years (18 of them), and they have rarely failed me, and regularly made even mundane tasks unexpectedly enjoyable. Meanwhile Windows computers have failed me slightly more often, and made even enjoyable tasks unexpectedly mundane. It would be fair to say that perhaps I haven’t spent enough time using Windows computers, because I haven’t used them nearly as much. But I’ve spent enough time to know how to use them quite well, and even solve serious problems, which I am asked to do frequently by various family members, friends, clients, and acquaintances, who also sometimes send other people to me with their problems. The fact is I have spent several years using Windows and I still just don’t enjoy it. Yet I fell in love with my first Macintosh immediately, when I was only ten, and had no idea at all about how to use a computer. I love my Mac just as much today. Doesn’t that say something?

I bring this up because I do not think my new iBook is merely an excellent Mac, I think it’s an excellent computer. I’ve found very few people who own one that would have any interest in disagreeing. Many of those people even have a Windows PC as their desktop computer. It is not the most powerful machine—it’s the low-end Mac portable after all—but in terms of what it can do and how well it can do those things, it is entirely amazing.

With the 60GB hard drive I custom ordered from Apple, I was able to copy everything I could possibly need from the 160GB hard drive in my eMac at home. Before I left I spent quite a bit of time testing various synchronization apps, to keep my files and settings in sync between my two computers. File Synchronization came close, but simply failed to work far too often. It would repeatedly fail to recognize that files had changed. ChronoSync made things slightly more complicated to set up, though in its defense that does make it more flexible. Aside from that it is easy to use, and has performed flawlessly.

My computers at home (eMac, Windows PC, and iBook) are wirelessly networked. With my new iBook I had AirPort Extreme (802.11g) in two computers for the first time, and wow, what an improvement in file transfer speeds. I still used Firewire Target Disk Mode for transferring the bulk of the 40GB I copied over, but for typical use the speed is impressive and entirely adequate.

Which brings me to another point: I have yet to do a single thing with my iBook’s network settings. I’ve gone from AirPort to ethernet without so much as clicking a button. Admittedly I did have some infrequent troubles as a result of frequently swapping an ethernet connection between two computers, but I don’t think a Windows PC would have fared any better. On the one occasion it was necessary, a quick restart resolved the problem.

I wouldn’t always have internet access during my travels, and even being tied to an ethernet cord can be a pain, so I took some time to set up a server on my laptop. I use a lot of PHP and MySQL, as well as server tricks like mod_rewrite, so I can’t always test a site just by dragging HTML files to a browser window. I had used the PHP and MySQL installer packages (and instructions) from Entropy a couple years ago, and found them fairly easy to use. I continued to hear good things about them, so I went straight back this time around. They’re even easier to set up now; a novice would have no trouble getting them installed and running.

A few years back, before OS X was released, I set up my own server. I used Apache running on Red Hat Linux, and since I had already spent a couple of years maintaining a Linux server over telnet, I never bothered to install a GUI. It was initially frustrating and I ended up buying a couple of books to get everything sorted out, but in terms of what I could do, and how flawlessly it ran even on an old hand-me-down machine, it was impressive. About a year later, Comcast decided they really didn’t want people running web servers at home, so I was forced to pay for web hosting elsewhere. I’ve come to appreciate not having to deal (directly) with the occasional—but often frustrating— issues that arise, so I haven’t run my own server in quite a while. As mentioned I did set one up in the early days of OS X, but I never did much with it.

What impressed me most was how easy it was to replicate my server environment on my iBook. Virtual hosts? No problem. I opened NetInfo Manager and in a few clicks added three new aliases for my machine: emma (my iBook’s name) to serve as a home site for phpMyAdmin, Tense Log, and so on, as well as mikepiontek.emma and tinyforest.emma for the two sites I’m coding at the moment. From there I opened up Terminal, and using pico (a command line text editor) I edited my httpd.conf to let Apache know what files those domains should point to. I couldn’t quite remember the commands to kill and restart Apache, but no worries… I simply opened System Preferences, clicked Sharing, selected Personal Web Sharing, clicked Stop, and then clicked Start. Within minutes I had three different web sites running on my computer. Unlike Linux, I had a gorgeous GUI to do it all in, and apps like Photoshop and Flash were just a click away.

Now honestly, I can’t say whether this is any easier than it would be in Windows. I can’t even say for certain whether it’s any more stable. But in both cases I really, really doubt it. OS X takes everything I loved about Linux and marries it to a gorgeous Mac interface with absolute grace. I’ve never seen this sort of elegance from Microsoft so I don’t see why they’d choose to display it here. And I already know quite well that Apache isn’t integrated into Windows, so the Mac OS has a huge advantage from the start.

I forgot to mention, I do have one complaint about the iBook itself. The trackpad button. It just feels a little clunky, and it’s a bit loud. This problem is spectacularly minor.

More soon.

Filed under: Design

An Office Away From Home, Part Two

I’m at the end of my travels now, after spending an extra week at my girlfriend’s apartment. All in all it went remarkably well. I got a fair bit of work done and barely missed my home setup. The large screen and my Mx700 were missed a little bit, but only slightly.

Last week I decided to buy Virtual PC for my iBook. I have a Windows PC at home, but I hadn’t had access to that for over a month, and unfortunately it just isn’t possible for a web designer to get away without using Windows for long. Even if you can account for the slight differences in font sizes, even if you’re aware of the majority of CSS issues that might arise, Internet Explorer is just too unpredictable. Since the majority of your audience will be using it, you’ve no choice but to test in it. Other Windows browsers are very close to their Mac counterparts, but it doesn’t hurt to test in them either.

It was a bit strange to boot up Windows on my Mac, but the installation and setup process was surprisingly simple. Setting up a network in particular was even easier than setting it up on a real PC! I’ve also found it a bit nicer to switch between programs than it is to switch between two different computers, particularly since I can cut and paste between the two, and take Windows screenshots that automatically appear on my Mac. My virtual PC is a bit slower than my real one, but overall I’m tempted to say that I prefer the virtual one. There are some quirks… Switching between the two doesn’t quite work smoothly, for example. If I press command-tab, select Virtual PC, and click on something in Windows, the display doesn’t update until I tap the command key. Another quirk is that with Virtual PC in full screen mode, you have to press the command key to make the menu bar and dock appear. The problem is that forces you to command-click dock icons, which is not the same thing as a normal click. If you simply want to open an app from the dock, it can’t be done. I’m hoping these issues are fixed soon with a minor update, but I’m not holding my breath.

I haven’t mentioned that early in my trip I bought a Vyper XS sleeve from Booq. A couple of letters were missing from the name printed on the side, and I don’t quite like how the sides bulge out just a little bit, but overall it’s a great sleeve and I’m very happy with it. It’s nice and slim—a perfect fit—yet my iBook feels adequately protected. One thing I would have really liked was a handle… I actually assumed that it had one from the photos, but the rubber, handle-sized bit on the side is quite firmly attached all around. I will say that once I got over the initial disappointment I’m not really bothered by it. It’s easy enough to get a good grip on the sleeve itself.

I also picked up a MacMice The Mouse BT around the same time. I wouldn’t say that it’s perfect, but it works well enough. It has a good feel to it, and I greatly appreciate the on/off switch, something a lot of other Bluetooth mouses are lacking. It was a breeze to set up; there was hardly anything to it. However, I ended up barely using it at all. I found the iBook’s trackpad surprisingly adequate. I also found that in most situations, various key commands for scrolling were just as convenient as a scroll wheel, since I could keep my hands in one place. Control-clicking isn’t quite as convenient as a right-click, since the control key is a little too far from the trackpad button. The main reason I right-click is to open a link in a new browser tab though, which can also be done by command-clicking, a combination that’s much easier to press.

That’s Apple’s own wired mouse next to it, for comparison. The design of The Mouse BT isn’t quite as elegant, and the plastic seems a bit cheap in comparison. Still, it looks pretty good.

Something else that proved to be a real adventure while I was traveling: finding wireless hotspots. At one point I was staying in a motor coach for a couple of weeks, with no internet access to be had. Beforehand I did some searching on Google and compiled a list of hotspots in the area. Unfortunately I had a hard time finding any one site that stood out as being fairly complete, so I don’t have any specific recommendations.

I thought of a great way to keep my list of hotspots handy: I put them on my iPod, in the notes section. That way wherever I was I could just open my notes, scroll to the city I was in, and pick a location. It worked out really well… Score one more for the iPod.

There are a few chains that offer wireless access, but only one that really deserves a prize: Panera Bread. Unlike Borders and Starbucks, Panera offers wireless access for free. I wound up at Borders a couple of times and had to pay six bucks just for an hour online through T-Mobile. If you’re someone that’s constantly on the road you can pay 30 bucks a month or whatever, but if you’re also paying for access at home that adds up to ridiculous pretty fast.

My best experience was at a local library. Nice comfy armchairs with a tray that swiveled around for a laptop or book, a fireplace across the room, and a quiet, friendly atmosphere made it perfect. In Panera I felt a little self-conscious spending an hour on the internet; at the library I felt right at home.

Going back to the iPod, it was also remarkably helpful being able to sync my calendars and other information. I used it quite a bit for reminders, shopping lists, and driving directions.

On returning home, I faced one last hurdle: using ChronoSync to get my eMac synced up to my iBook. I had used it before I left, but just for some small things. This time I was syncing a major portion of my hard drive. I had some problems here and there, but for the most part it worked well. I had no trouble setting up a set of rules that did everything I wanted to… Syncing all of my preferences, but skipping the Exposé settings and startup items, for example.

So all in all it was a remarkably pleasant experience. I can’t wait to leave again.

Filed under: Design

Friendlier JavaScript Links

There are two common ways of using JavaScript in a link:

<a href=“javascript:doSomething();”>Do Something</a>
<a href=”#” onclick=“doSomething();”>Do Something</a>

The first one is a bit ugly, since the JavaScript shows up in the status bar. More importantly, neither example will do anything at all if JavaScript isn’t available. This may not be a major concern (simply because it won’t happen often), but it is a concern. I can think of at least a few times where I’d turned JavaScript off, forgotten about it, and was confused as to why a link wasn’t doing anything. Imagine the confusion if someone else had turned JavaScript off. Or worse, if the browser doesn’t support it. I’m sure with all the cellphones, PDAs, screen readers, and plug-it-in-your-TV web browsers out there, some of them do not.

If your JavaScript simply opens a new window, there’s an easy solution:

<a href=“dosomething.html” onclick=“doSomething();return false;”>Do Something</a>

If JavaScript is unavailable, the page dosomething.html will simply open. If JavaScript is available, the doSomething function will run, presumably opening the page dosomething.html in a new window. “return false” tells the browser to ignore the standard link in the href attribute. Without that, the script would run and then dosomething.html would open in the current window… Probably not what you want. Another big advantage with this example is that search engines will also be able to get to all of your pages.

There’s a more common situation though… What if the script doesn’t just go to another page? Most of the time, you’ll just see one of my first examples used… Particularly the second, with that lovely # sign. I have a much better solution, one that I’ve never seen anyone else use:

<a href=“javascript.html” onclick=“doSomething();return false;”>Do Something</a>

What you’re not seeing here is that javascript.html is actually a page explaining that JavaScript is required for certain functions of the site. So when JavaScript is unavailable, instead of doing nothing, a new page loads with a simple message explaining the problem. Search engines will see this page, but a simple meta tag will ensure that they don’t index it:

<meta name=“robots” content=“noindex,follow” />

You can see this example in use at my own site. Try turning JavaScript off and clicking the “large” or “small” links to change the text size.

Filed under: Code

Welcome to the New Site

After months of picking at it I’ve finally decided to put my latest site revision up. The basic look is the same, but the design has been heavily tweaked, everything under the hood has been completely redone, and I’ve added a lot of new content. The most noteworthy changes are this journal, the extras section with wallpapers and music downloads, and the style sheet switcher, allowing you to switch between the standard, small text and a larger size that some may find easier to read. Have a look around, and let me know what you think!

Filed under: Design

Navigation Blindness

Navigation Blindness by Henrik Olsen is an interesting article on how most users ignore web site navigation tools, and what to do about it. It’s quite an eye-opener, dismissing practices that many designers consider very important, with studies to back it up. I’m really not sure I agree with all of it, but it’s a great read nonetheless. Why Primary Navigation Must Die talks about similar ideas.

Filed under: Design

Guidelines for Accessible and Usable Web Sites

Guidelines for Accessible and Usable Web Sites: Observing Users Who Work With Screen Readers gives a great look into how people use screen readers in the real world. There’s a lot of good advice to be found here, for both site designers and developers of screen reader software. Thanks to Mike Davidson for pointing it out.

Filed under: Design

Robot vol. 1 by Range Murata et al.

The first volume of Robot arrived at my door today, by way of Amazon.co.jp. It’s a compilation of short manga and illustrations by Range Murata, Shigeki Maeshima, and quite a few others. It’s entirely gorgeous, if a bit disturbing in spots. Sadly, I can barely read a word of it, as everything of consequence is in Japanese.

Filed under: Miscellanea

Special Edition Key Lime iBook For Sale

With much sadness I’ve put my special edition key lime iBook on eBay. It’s a great little computer, and quite honestly I think it’s an awesome collector’s item. With my new iBook though, I just don’t need it anymore, and I’ve been doing my best not to hoard things I don’t need these days. Please help Kiki find a good home.

Update: Kiki has been sold! She’s currently in New York where she’ll be loaned to students who don’t have computers at home.

Filed under: Mac OS X

Missed Marketing Opportunity

I got a couple of books from Amazon today. I read a few pages of one and then tried to find something to use as a bookmark. Amazon sent some ads with my order, but they were on large, somewhat thin pieces of paper. If they had printed them in bookmark form I would have kept them and used them instead of throwing them out just now. As it is I have three pieces of paper in my trash that I never bothered to look at, and no bookmarks.

Filed under: Design

Macromedia makes it clear: Flash isn’t quite there yet

I decided the other day that it was time I bought Macromedia Studio MX 2004. So I headed over to Macromedia.com and went to their store, naturally. Their store is done entirely in Flash. It was, without a doubt, the worst online shopping experience I have ever had.

The first thing that was painfully clear was how slow it was. Now I’ll admit I’m on a Mac, and I know quite well that the Mac version of the Flash plugin is slow compared to the Windows version. But I don’t think that’s any excuse. This is not an old computer, it’s a 1GHz G4… The current low-end Macs are barely any faster. If your site is painfully slow on a similar computer, you’re doing something wrong.

I tested again just now and it took 55 seconds for the store to load. Compare that with Apple’s store, which is far more graphics-heavy… ready in 15 seconds. Or Adobe’s store, in just 7.

The next odd thing that happened was a little window popped up to let me know it was making a secure connection. This was apparently necessary since the page hosting the Flash file is not secure at all. Presumably Flash’s interaction was all going through a secure connection, and they wanted to let me know. But why on earth should I trust a little popup window? Why didn’t they just put the whole page on a secure site? I can’t even imagine.

One of Flash’s biggest flaws showed up quickly: the inability to use the back button. I also use keyboard shortcuts quite a bit to go back. Using the back button (or whatever equivalent) is a habit that’s pretty well ingrained in just about everyone. I had to constantly remind myself that I couldn’t use it, and hunt for another way to get back to the page I was just looking at.

Another standard feature I lost was the ability to open a link in a new tab or window. It would have made up for some of the flaws… I could have kept my place better (since I didn’t have a back button) and it would have helped with the slowness as well. But with Flash it just isn’t an option.

At one point I had something in my cart and I was trying to click on the title to get more information about it. (It was an item it had put there “for my convenience” so I didn’t really know what it was.) It kept taking me to my order history, and I couldn’t figure out what was going on it. Finally I realized I was clicking right through the cart to a button that was underneath it. I hid the cart and there was the order history button.

At one point I got stuck in some bizarre infinite loop where it kept reloading the entire page. While I understand bugs can happen, I feel confident in saying this one is something I’ve never seen before in a standard web page. The HTML would reload, that secure connection window would pop up, and then it would close, and as the Flash finally loaded the HTML would reload again. Over and over. Add to that the painful slowness of it all. It took a fair bit of time just to realize it wasn’t going to stop and then do something about it.

I had a lot of other struggles while I tried to figure out what I wanted, but they all revolved around these same issues: the interface was so frustrating and slow that it took me far too long to do anything. It took me a good while just to figure out how I could buy the downloadable version and still have manuals sent to me, for example. And, well, I never did find out. That is, until I gave up, ordered the boxed version, and it finally arrived… without any printed manuals. (Which is a shame, because I’ve found Flash’s help window a bit frustrating to use as well.)

In the end it took me about an hour and fifteen minutes just to figure out what I wanted and place the order. Which is far, far longer than it should have taken. Honestly, I love Flash… It has allowed me to do some things that I couldn’t have done otherwise. Tense Radio is a great example. The problem is it’s far from ready for what Macromedia is using it for. Next time they redesign their store I just hope they ditch the Flash entirely, or improve it by leaps and bounds. It’s a terrible way to sell their product… and I mean that in more ways than one.

Filed under: Design

Simulating Dial-Up Connections

I often find myself wondering how my sites will work on dial-up connections, and I’ve long been looking for a good way to simulate it in OS X. I recently came across the ip_relay Perl script by Gavin Stewart. It isn’t quite perfect; it seems to have problems with larger files in particular. I was streaming MP3s with it, and it would often cut out for long periods of time, not sending any data at all. Nevertheless it was very helpful, even if it did simulate a far slower connection than I’d asked it to.

It’s very easy to use. Simply download the script, and open the Terminal application in your Utilities folder. In Terminal, type cd followed by a space. Then drag the ip_relay folder (the one that contains the script) to the Terminal window. Hit return. That will change the directory, making things easier. From there you simply type a command like this:

./ip_relay -b 5000 8000:domain.com:80

If everything works as expected, you simply point your browser to http://localhost:8000 and you’ll have a painfully slow mirror of domain.com there.

5000 is the maximum number of bytes per second, so in this example I’m simulating a 40 kbps connection. 8000 is the local port number. You can use something else if you like but you’ll want to make sure it’s not already in use. 80 is the port of the site you’re simulating… Chances are you’ll want to use 80, unless it’s a secure site (use 443) or you’re doing something a bit different.

Domain.com is the domain name, of course… If you want to use it on your own computer’s server, just enter localhost instead. This may be necessary, as many hosts use virtual servers, which rely on the domain name you enter in your address bar in order to show you the correct site. If I enter tenseforms.com, for example, I just get the default Apache page instead of the actual site. Since OS X has Apache built in, it’s relatively painless to set up your own server and test using that instead.

If you have any other suggestions for simulating dial-up connections on OS X, I’d love to hear them. There are a couple of Apache modules called mod_bandwidth and mod_throttle, but I’ve yet to try them. For me the big appeal of ip_relay is that it’s so easy to set up and use. From what I can tell of the Apache modules, that isn’t quite the case.

Filed under: Code

Some Handy Bookmarklets for Web Designers

Bookmarklets (sometimes called Favelets) are just snippets of JavaScript that are stored in a bookmark. Click the bookmark and it runs a script, which can do a number of useful things. Below are a few that I use on a regular basis. In most browsers you can install these by simply dragging the link below to your bookmarks bar.

Validate HTML Validates the HTML or XHTML for the page you’re viewing.
Validate CSS Validates the CSS for the page you’re viewing.
Validate Feed Validates the RSS or Atom feed you’re currently viewing.
Check Links Checks all of the links on the page you’re currently viewing, to make sure they’re in working order.
Create TinyURL Great for pages with long URLs. It creates a very short link that’s easy to email or post on message boards. Not exactly for web design, but nice to have handy anyway!
800 x 600 Sets the browser size to 800 x 600 pixels, for an approximation of how your site will look at lower resolutions.
Full Screen I don’t use this myself, but it’s handy for Safari users who like having a full screen option.
Normal Sets the browser window to my preferred size, which is a little bit shy of the full height of the screen and around 850 pixels wide.

The last three can be easily customized to different sizes if you like.

I keep all of my bookmarklets in a folder, so they’re easy to get at without taking up too much room. It’s not a bookmarklet, but a nice HTML Entity Reference is another thing I like to keep handy.

Filed under: Design

What’s in Your Menubar?

What’s in Your Menubar? is a fun topic over at hicksdesign, particularly for Mac geeks.

Filed under: Mac OS X

Subtle Changes, Drastic Results

In February I made some changes to Tense Radio, a Flash-based MP3 player for Tense Forms (a label and publisher I co-founded). The new player had a variety of subtle changes.

Previously it used a default buffering time of 15 seconds, adding to that as necessary. That’s about all Flash provides for on its own. The result is that users with fast connections had to wait longer than they should have for anything to play, and users with slow connections occasionally had to put up with pauses in the middle of a song while it stopped to load more.

I wrote a new script that looks at how much of the song has loaded and uses that to estimate the download speed. From there it can guess how long the song will take to load, and how long it needs to buffer to ensure uninterrupted playback. The result is that songs play in just a couple of seconds on broadband connections. Over dial-up they may take a bit longer to load, but are much less likely to stop midway through the song.

A volume control was also added to the player. While this is somewhat redundant (I prefer to simply adjust the system volume myself) it seems that Flash will play sound much louder on some systems compared to other applications. The volume control allows users to adjust Tense Radio to match.

Settings are now saved transparently as well. Previously I had opened a new window in order to save cookies through PHP. I now keep track of the cookies with JavaScript and simply save them when the window is closed. The result is much nicer to use and less obtrusive.

Finally, visitors are now asked to choose between HI-FI and LO-FI before they start listening. The HI-FI streams are top quality, whereas the LO-FI streams sacrifice quality for the ability to load quickly over a slow connection. When the player debuted three years ago, it made sense to make LO-FI the default, as dial-up connections were still very common. We recently found that the overwhelming majority of our audience has a broadband connection, yet they were still listening to the LO-FI streams! It was clear they simply hadn’t noticed that there was a high-quality option available.

Previously, only 18% of our visitors were hearing our music at its best. Since the change, an amazing 97% are listening to the high-quality streams. We’ve also made the player much more useful to our visitors… Prior to the change, an average of around 68% simply downloaded the songs, preferring their standalone MP3 player to Tense Radio. Since the change, only 54% have done so. This is good for Tense Forms because it helps our visitors discover more of our music.

Most importantly, there was a 300% increase in the overall number of songs streamed and downloaded. While some of this can be attributed to other sources, it’s clear that much of it is a result of the new player.

So with some subtle changes, we’ve had drastic results. We now have far more people hearing our music as it was intended, as well as more people listening overall. It’s easy to say that this was well worth a few weeks of discussions and development time.

Filed under: Design