Jalpuna, V4 - a.k.a., How Steve Jobs Wrecked My Website!

Obviously, I kid. Steve Jobs didn't wreck my website. The continuing march of technology made my site's design confusing if not unusable on touch devices. There is no such thing as an image rollover (where scrolling over an image reveals something hidden such as a link) on a touchscreen. Before I get into that, let's take a stroll down web-design memory lane.

Previous Designs:

This was the original design for Jalpuna, launched back in March of 2004. You can see an outdated but still working page based on that design here.

Next, I moved on to my brief flirtation with orange for Jalpuna, Version 2. You can see an outdated but still working (though not orange) page based on that design here.

That brings us to Jalpuna, V3. Ooh, minimal! I loved it! In fact, I've been tinkering with that design since 2005. It held up nicely until iPhones and iPads came along. That's when the design began to break down. The image rollovers don't work with a touchscreen.

Here's the box that used to sit at the top of that design. The photo is random (reload the page for another). Scroll over it and you'll see some hidden "extra" links.

If you're reading this on a touch device, the links look like this when scrolled over:

The links were hidden in an effort to add extra content while still keeping the site's design minimal. The links led to some extra info as well as my other websites. I really liked the effect, and I liked that the way it was built into my site made the overall design look unique. There are a bagillion websites out there. I like mine to look unique.

The "New" Design?

I realize this latest version of Jalpuna doesn't look new, but I coded everything from scratch, changing a few things along the way. The goal was to refine the look and feel of the previous design, which I liked, while making the site usable on mobile devices.

The changes can be summed up as follows:
- a new "Big Pic" header box.
- better left/right menus.
- flickr integration.
- a new media player for playlists.
- it works on mobile devices now!

The most obvious visual change is probably the "big pic" box I wrote about above. On a touchscreen, there was no way to see the hidden buttons, which meant that touching the picture could take you anywhere with no explanation as to where or why. Now, the box is larger, to hold a full image rather than a slice of one, and if you click the image, you get a bit of info about it instead of seeing hidden links. The images and info because they're pulled automatically from my flickr stream.

I also overhauled the left and right page menus. The left is now a "Blog" menu that leads to categories of stuff I've written or posted in the blog. The right is now a "Photos" menu that serves up different categories of my photography, all of which are pulled automatically from my flickr account. Neato!

And, last but not least... the flash audio player I've been using for my playlists is finally getting replaced since flash isn't available on many mobile devices. I've switched over to an HTML5 audio player with flash fallback, meaning that it works regardless of which technology your browser has. Or, more simply, new playlists here will work on mobile devices such as iPhones and iPads. I'll post a new playlist with the new player tomorrow... but here's a link to a previous playlist I converted over to the new player while testing things.

In Closing:

A few geeky details in case you're curious:

Jalpuna still uses Movable Type for serving up posts. I'm using an old version (v3.34) because I think the current platform is bloated to the point of stupidity, not to mention slow and cumbersome. Movable Type V3 was snappy and easy to configure. Sure, the interface is ugly, but I'm the only one who sees that (when I'm posting something), so who cares? I realize most people use wordpress, but I prefer static pages and I absolutely loath the wordpress template system. Movable Type is so much simpler to design for. Well... older versions of Movable Type were simpler to design for.

I'm using jQuery for some of the site's functionality, such as the jQuery based "jPlayer" media player, plus scripts that pull my flickr images and display them on my pages.

So there you have it. New year, new code. Hooray!

::::: | Sunday, Jan 01 2012 at 8:40 AM
::::: |


Jay said:

I like what you've done to keep continuity with the previous design. I've had to redesign quite a bit of my work to make my sites touch friendly. Tablets don't have much of the browsing market yet, but their day is coming.

I think we're going to see a lot of site redesigns in 2012. I'm hoping to have mine done by March.

::::: | January 7, 2012 12:31 AM

(won't be published)


(you may use HTML tags for style)

Spam Blocker:
Please type the letter "u" in this box

::::: | All Content © 2004-2016
::::: | Jalpuna is hosted by DreamHost