LaunchPad Blog

Thanks, Matthew, for the great welcome, and your willingness to partner in creating the greatest possible iPhone app launcher.

In spite of many negative reactions, I was excited when Apple announced that iPhone apps would be web-based. As a web developer, it was thrilling to see my favorite technologies embraced for such an preeminent device. I started planning my app launcher right away. I have used a number of different launchers on my old Treo 650, so i had plenty of ideas on what it should do.

Read the rest of this entry »

Its no secret that the EDGE network isn’t exactly zippity do dah when it comes to speed. Because of this, I’m putting together a series of articles on how to optimize your web apps for the EDGE network. To kick off the series, we’ll start by taking a look at EDGE and trying to understand a little more about the network itself. Later in the series, I’ve got some killer techniques which will help make your apps fly on EDGE!

Read the rest of this entry »

After getting a hold of the iPhone’s original UI images (links can be found in this thread and special thanks to Kai Cherry for finding them!), I noticed a technique Apple is using to create their buttons. It seems they are placing an entire button into one PNG, then scaling the middle of the image so that the corners of the button are not distorted.

So for example, the image to the right is an original image from the iPhone. Its width is 29px. That breaks down to there being 14px on the left and right, defining the rounded corners and a 1px sliver which is the body of the button. So, in theory, if you were able to keep the left and right sides of the button stationary while expanding the 1px center piece, this would create a horizontally-scalable button with only one image.

But alas, how would we do this using only CSS? Well, I started digging around Safari’s ‘-webkit’ innards, and was able to to use the -webkit-border-image to accomplish exactly what I wanted.

Read the rest of this entry »

Yes, that’s right ladies and gentleman, LaunchPad has a new team member–Brooke Riggio. That brings the grand total to 2 on the team. And just wait till you see what this dynamic duo will produce!

A week or so ago, when I initially launched the LaunchPad demo, Brooke contacted me and expressed interest in working on the project. We swapped a few emails and I determined Brooke would be a great fit for the project. Brooke has a strong background in PHP, database development, and AJAX. I bring to the table a strong emphasis on usable design/user experience/usability. Seems like a great fit to me. Plus, neither Brooke nor I are looking to become millionaires off LaunchPad. In fact, we’re doing our best to give it away for free!

Brooke and I both share a passion for the web and technology in general. So, we’re teaming up for this project to show everyone out there the true potential of an iPhone web app. We’re confident that we’ll be able to put out a product that is going to “launch” web apps to a new level. (pun intended)

I can’t wait to show you more of what we’ve been working on… we’ll be posting screenshots soon.

Plus, be on the lookout for our upcoming private beta! If your interested in taking part, make sure to fill out your email address on the form to the right and you’ll be the first to know!

Pages in Safari for the iPhone operate much like tabs in the OS X version. When developing you may wish to launch a new tab. With LaunchPad, we’d like to make it so that it stays open while the web apps are launched.

The trick? Just a plain old

target="_blank"

will do the trick. Enjoy!

It seems that with ‘iSafari’, the :active state does not work. In our web app, LaunchPad, there is a toolbar at the bottom of the screen, mimicking the iPhone’s iPod toolbar. Upon click of each of the toolbars buttons, the selected button is to become highlighted.Initially, I was using the :active state so that when the user pressed a button, it would highlight.  It worked just fine in Safari for OS X; however, in the iPhone environment, it seems to ignore :active. When replacing :active with :hover, I discovered I was able to achieve the desired result.One interesting thing to note, is when a link is clicked on, the link remains in the :hover state until another link is clicked.You can view an example here: http://www.launchpadhq.com/experiments/test2.html 

As it’s being discovered, position:fixed is not working in Safari for iPhone. Obviously, the desire to have a fixed toolbar at the top or bottom is going to almost a requirement for many web app developers.

So, the first thing that came to my mind was to manually keep positioned elements fixed via JavaScript. No luck here either! If you pull up http://www.quirksmode.org/viewport/experiments/scrolling2.html in your iPhone, you’ll note that neither of the following work:pageXOffset and pageYOffsetdocument.body.scrollTop and document.body.scrollLeftHas anyone found a work around?

Come on Apple, if you’re going to state that Safari for the iPhone is as powerful as the desktop version, please enable it to do basic CSS2 and JavaScript functions!

Update: I’ve found a workaround which uses an auto-scrolling div. The catch is, in order to scroll, you must use two-fingers, identical to the way you’re able to do with MacBook trackpads. This seems like a viable solution, however, there are several trade-offs:

One, the slick physics behind the iPhone scroll are no longer present, and two, there are obvious usability issues with this solution. For almost all webpages, the user is able to scroll using just one finger. How then, would they know that for certain pages, two fingers were necessary. Not a very desirable solution to me.

Check out our example here: http://www.launchpadhq.com/experiments/test1.html