Over the past 4 years, I have spent a lot of time working through specific usability challenges of mobile web development for the iPhone. Over that time I have spoken to countless people who wanted a quick and easy way to turn a given website into a personal app they could use and share with their friends. Today I will show you a way to create a 1-page app that bypasses the need to go through the Apple Store altogether.
When the iPhone came out in 2007, there was no way to create a native app; all iPhone applications were web applications or “webapps”. One main problem was, the top and bottom navigation bars took up about 1/3 of the screen space. There was a major upside to web application development though, Apple had no say in what you put in your application.
Apple has a very ambiguous approval process as you may know, and it’s often difficult to get an app approved even after you pay the $99 annual developer fee (not to mention investing whatever time and money it costs to actually create the application). For this reason, I was looking into in ad-hoc and other small scale means of creating simple presentations when I came across this simple combination.
Step 1: Making a “full screen” web app
This will remove the bar at the top and bottom of the screen, allowing you to make a full screen presentation. This is achieved by using a special Meta tag that tells the iPhone this page is mobile web app capable.
| <meta name=”apple-mobile-web-app-capable” content=”yes” /> |
Step 2: Create a homescreen icon
I’ve covered creating and adding the homescreen icon for your application previously.
Step 3: Upload the files
Simply copy the files to your server using an FTP program and view the page from any iPhone or iPod touch.
Step 4: Adding your “App” to the home screen.
- Load the page in MobileSafari on your iPhone
- Hit the “+” button at the base of the Safari app
- Select the “Add to Home Screen” option
- Save the Page to your Home Screen
- Tap the icon that was just saved to your Home Screen
- The site should load in full screen without the MobileSafari Chrome.
That’s all there is to it. When you click your logo your app will launch in a full screen window and function similar to a native application. One drawback is that opening links brings you back to the browser, but you can tap into many native iPhone applications such as the phone, maps, mail, sms and store applications.
If you’d like to know more about developing web content for the iPhone, check out my book “Secrets to creating Killer iPhone Websites“. I hope this article was helpful, please comment below and share it with your friends.
