iBackpack is code (mostly CSS) that optimizes Backpack pages for use on the iPhone and iPod touch. The iBackpack code is hidden from other devices, so it won’t change the way Backpack looks or works on other devices.

Try it Out!

Add a Divider to a Backpack page with the following code as the title:

<a href="http://violetpixel.com/ibp/">iBackpack</a> <meta name="viewport" content="width=320, user-scalable=no"><link media="only screen and (max-device-width: 480px)" href="http://violetpixel.com/ibp/ibp.css" type="text/css" rel="stylesheet">

Note: Putting the Divider at the top of the page improves load times on the iPhone/iPod.

Now, visit that page on your iPhone or iPod touch. Nifty, isn’t it?

You can visit the iBackpack page for more information.

Questions? Comments? Suggestions?

Well I just tried it out on my iPod Touch and it seems to work great. Quicker than normal backpack, and much easier to add and edit stuff. For large pages (like my home page), it still takes an absolute decade to load it all up on the iPod Touch, but that’s a device fault.

Great work Justin!

wow, that’s great stuff, thanks!

OT: btw, your iphone is obviously hacked (screenshot app), so what is that little “sun” icon in the lower right corner?

do you think this could work in campfire as well? I added the same link to the “topic” field of the top-most chat in my campfire-account, and it shows as a link on the front page… the css doesn’t work since it’s tailored for backpack, but that could be done. to start with, only formatting the chat-windows for the iphone screen-width would be super!

Wow. This is very cool. At first, I was confused by the layout, but I like the way the sidebar is stacked atop the main page content.

I am going to play around with the placement of the divider. It would be nice to get it out of the way a little more.

Very nice work.

Justin:

This seems like something that would be feasible for Highrise as well.

I’m assuming that the CSS is similar across 37signals sites?

Many people want a similar ibackpack function for highrise. Perhaps ihighrise?

Thoughts appreciated,

Josh

Thank you all for your feedback!

@Oskar: The little sunburst in the lower right corner is called “Dock.” It’s an application launcher, but I primarily use it to take screenshots without fiddling around with the command line program. You can find out more about it here: http://cre.ations.net/creation/dock

As far as getting it to work in Campfire… no idea. I’m thinking probably not, but I’ll look into it when I have some free time.

@Isaac: Yeah, the divider, while the least distracting element I could think to use, is still somewhat distracting. Beyond having the code incorporated as part of Backpack itself (which I would be happy to work with you on, 37s :), it seems to be the best option available at this point.

@Josh: Highrise would be difficult; there’s no way to inject the code. Again, it would be awesome to work with the 37s crew on something like this, but they might already be working on it themselves for all we know.

This is terrific, Justin. Thanks for sharing it with us.

Justin, the new update has broken the edit feature for me. And is there any way that we can reorder stuff on the page?

Will the snippet work with my n800? I guess I could give it a try, but there are so many other distractions.

The February 2008 changes to Backpack seem to have broken iBackpack on the iPod Touch for me. I can see the frame with the pages but cannot scroll through it and there are other formatting quirks.

Is it just me?

Same here.

and same for me. Any available update of iBackpack ?

iBackpack has now been updated to account for the recent Backpack updates. Current users should see the changes immediately (if not, try reloading the page).

Let me know if you find any more bugs or have any other comments! ibackpack at violetpixel dot com.

@YinHoNg: Could you provide me with more details via email?

Thanks!

it works, thank you !!

Is there any chance that we have something like iBackpack for HighriseHQ ?

Fantastic – thanks!

@Thierry

Unfortunately, I can’t find a way to inject code into any other 37signals products like I can do with Backpack. I’m afraid the only way it’s going to happen is if 37signals implements it on their own, or if they hire me. ;)

Glad the changes seem to be working for everyone!

that’s great stuff, thanks!