iBackpack - Backpack Pages Optimized for the iPhone and iPod Touch

Note: Development of iBackpack has ceased due to the abundance of native Backpack apps in the App Store. If you want to take over development of this code please send an email to justin at this domain name. Thanks!


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.


Saturday, February 23rd, 2008

iBackpack has been updated to account for the recent changes made to Backpack, and everything should be good to go now!

Current iBackpack users should see the update immediately (if not, try reloading the page). If you're not using iBackpack yet, scroll down to find out more, it's free and fun and stuff! :)

If you find any bugs or have any other comments please let me know! ibackpack at violetpixel dot com

Tuesday, December 18th, 2007

I updated iBackpack with a few new features, including an independently-scrolling list of pages, increased line height, and other minor bug fixes. The screenshots below do not yet reflect these changes!

Remember, because the CSS is hosted on my server, if you're already using iBackpack then you're already using the new version! If you're not using iBackpack yet read the rest of this page and give it a shot, it's absolutely free!


Here's what Backpack normally looks like when you first load it on an iPhone or iPod Touch:

Normal Backpack Page

Not very user-friendly, is it? You have to zoom in, pan around, pinch out, pinch in, deal with oversized form controls, etc. Is it usable? Sure. Is it friendly or easy? Not at all.

Enter iBackpack:

Backpack Page with iBackpack

Much better. Note that this screenshot is taken immediately after loading the page. Things are instantly readable. You can make a new page, search, tap on another page, or scroll down a bit to find...

Backpack Page with iBackpack Scrolled Down

... your other pages. Click to add a List, Note, whatever. Of course, if you're on one of the paid Backpack plans the ads won't show up.

Need to add an item to that list?


Note the iBackpack Divider above the list? That's where the magic happens; all the code needed for the transformation is contained in that single Divider.

Perhaps you'd like to edit that note? Just tap on it, and the edit controls appear. Note the enlarged trash icon and expanded spacing to ensure you tap what you intend to.


Form inputs have been resized to account for the width and height of the iPhone/iPod's screen, as well as the keyboard.


Use it Yourself

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? Of course, your pages will display the same way they always have on other devices, including your Mac or PC.

The CSS is stored remotely on my server, so you will always have the latest version. The code for the Divider isn't likely to change, but it wouldn't hurt to stop by this page again if things start looking strange.

Credits & Whatnot

iBackpack is provided under a Creative Commons License. If you share the code or make any modifications all I ask is that you credit me for the original code and link back to this page.

Please send any questions, comments, suggestions, and bug reports to ibackpack at violetpixel dot com.

I hope you enjoy it!

© Justin Michael