http://blog.wolfire.com/2009/06/web-comic-viewer/
By Jeff on June 14th, 2009
http://www.wolfire.com/comic
Since launching the Overgrowth webcomic a few days ago, a lot of people have been asking about our custom viewer. Here’s a brief outline of all of its features and some insight on how each of them work.
Preloading and AJAX
When you navigate in the comic viewer, it doesn’t actually load a new page, it simply loads the necessary image. This is much more efficient, because it is a single HTTP request, instead of having to load the entire page again. Additionally, when you access the webcomic, it begins preloading the next several panels in the background. This minimizes the load time as you navigate because the images will already be in your browser’s cache. If all goes well, you shouldn’t see a single panel loading. Many sites use the old fashioned model because it racks up many pageviews, which results in more adviews. Luckily, we don’t have to worry about that.
I tried to optimize the comic as much as possible, for instance, combining all of the images into sprites, and following all of the best practices.
High definition
HD is always cool.
I think that this is my favorite feature. Aubrey draws all of the art at an extremely high resolution. I wrote a script that downsamples them to two resolutions, 800×500 and 1280×960. By default, the viewer displays all of the comics at the lower resolution, but if you click the HD button in the bottom right, the comic viewer dynamically resizes and all of the images are swapped out for the higher resolution versions.
High resolution images are relatively heavy on the bandwidth, but it is actually way smaller than even a small video. The comic is hosted on Google App Engine, which means means that the comic can scale pretty much indefinitely and also costs about $0 to run.
Dim the lights
This is a feature inspired by Hulu. If you click the lightbulb button, the background becomes desaturated, becoming less distracting. This effect looks a lot more complicated than it is. The background is desaturated beforehand and I simply fade it in as a layer above the regular background.
Referral system
One thing I was really worried about is that Aubrey and David would spend a lot of effort making a sweet comic, and everyone on the blog / forums would say “noice comic!” but then that would be that. Instead of begging people to pass the comic on to their friends, I thought a small incentive (seeing the upcoming comics early) would be a lot more effective. So far about half of our views are thanks to referrals, so thanks guys, for spreading the word!
Bookmark
As you navigate through the webcomic, the bookmark slider will remember your furthest location. You can drag and drop the bookmark to change the location. This is stored clientside with a simple cookie. This feature should be a huge convenience as more and more slides get added to the comic.
Quick navigation
If you click on the slider bar at the bottom of the viewer, you can quickly jump to any panel. I got a little carried away with making the animation. It will actually scroll through all the intermediate panels when you click on it, but way too fast to actually see them.
What other features would you like to see in a comic viewer?