27 Oct, 2009
Tips for iPhone Web App Development
Web Development » CSS, Tutorials, Web Development Blog » Tips for iPhone Web App Development
SEO site checker is the iPhone webapp we launched a few days ago. This is the fourth iPhone web application we’ve developed and we thought it’d be useful to share some tips we learnt along the way.
1. Get inspiration
Before building anything, we like to browse through existing iPhone web apps that are available. There are quite a few iPhone Apps Galleries, but the ones that we often go to are Apple – Web apps, appSafari and iPhone Application List.
2. Gather ideas and information
Now you’ve been inspired by so many good iPhone apps, it’s time to brainstorm ideas for an application that you would like to build. An original idea will always do better than a second-hand idea.
3. Plan
Planning is the most important part of creating a useful and reliable application. We like to write down our thoughts and implementation ideas in a notepad before jumping into development. Have a look at one of our handwritten notes for SEO site checker. Apart from planning the implementation details, also think about a URL and name for the application. When deciding a URL, keep it short because iPhone’s keyboard is not the easiest to type on. For example, for our SEO site checker app, the URL is http://www.anansi.com.au/apps/seo/ rather than http://www.anansi.com.au/apps/seo-site-checker/
4. Develop
One of the advantages that comes with building iPhone web apps as opposed to native apps is that you can use any web programming language. You don’t need to learn Cocoa or get yourself familiarised with Mac OS. Essentially, you are just building another web application, but for a small screen. You can use Javascript, AJAX, CSS, HTML for the client side and any server-side language of your choice; be it PHP, Ruby, Perl, Java, .NET, ColdFusion, or ASP. Download sample code from Safari Reference Library and explore how things are done.
Our tools of the trade:
1) iUI: iPhone User Interface Framework (consists of a JavaScript library, CSS, and images that make your web app looks and feels like an iPhone Native Apps)
2) PHP with a framework (Zend, CakePHP, CodeIgniter or own)
3) jQuery if required (We try to do without unless really necessary because bandwidth is quite precious on mobiles)
4) Safari is the best browser to test your iPhone web app on especially if you are using iUI framework.
5) Google Analytics to track the statistics
5. Test
During development, you may be able to get away with using Safari on your computer to test the iPhone web application, but when it comes to actual testing stage, you have to use an iPhone. There are some errors or bugs that you may only discover when you are using an actual iPhone. For example, when we were developing SEO site checker, we didn’t see the need to put “Please wait… Calculating your website’s score” overlay pop up until we realise how long it could take to load up the result page on an actual iPhone.
6. Release
Once you are happy to release your iPhone web app, it’s time to create a nice little icon and a screenshot of the app to submit to Apple – Web apps directory. Remember to read submission information for the icon and the screenshot. It takes about 2 days to be approved and listed in the directory. In addition to submitting it to the Apple directory, social networking websites are the best marketing channel to promote just about anything these days. Tweet about your app on Twitter, share the app link on facebook, blog about it, bookmark the app on delicious; the options are endless. Once it is released, watch the statistics, obtain feedback from people, continually improve the app and follow the “Release Early, Release Often” principle to ensure the success of your iPhone web app.
7. Read, learn and improve
There is always room for improvement. Read tutorials and books on iPhone Web App Development. Learn new tips and tricks. Improve your web apps. Some of our recommended books on iPhone web development are:
- Building iPhone Apps with HTML, CSS, and JavaScript
“The future of mobile development is clearly web technologies like CSS, HTML and JavaScript. Jonathan Stark shows you how to leverage your existing web development skills to build native iPhone applications using these technologies.”
– John Allsopp, author and founder of Web Directions - Beginning Smartphone Web Development
Mobile application developers and their managers need to learn mobile web technologies because it’s in their economic interest. Time-to-market and opportunity costs are significantly lower for web-based mobile applications than for native ones. In this book, Gail teaches the web standards and fundamentals specific to smartphones and other feature-driven mobile phones and devices. - Developing Hybrid Applications for the iPhone
“For those not ready to tackle the complexities of Objective-C, this is a great way to get started building iPhone apps. If you know the basics of HTML, JavaScript, and CSS, you’ll be building apps in no time.”
– August Trometer, Owner of FoggyNoggin Software, www.foggynoggin.com - Professional iPhone and iPod touch Programming
This book is for web developers who want to build new applications for iPhone and iPod touch. A working knowledge of HTML/XHTML, CSS, JavaScript, and AJAX is necessary.
