All people need to do in order to create a faux app is to "Add Bookmark to Homescreen" which is a fairly simple way of saving a webpage on an iPhone, and it automatically crosses over to any platform. AND you can make simple changes to it using programs like FTP Pro On The Go...!
1. Locking the Screen to a Certain Size
Let's say you want to make a website function like a mobile app. The number one thing is controlling that the screen cannot change size. The best way to turn any HTML page into something that cannot be scaled and is meant to zoom to a certain degree is this:
<meta name="viewport" content="width=device-width, initial-scale=.90, maximum-scale=.90, user-scalable=0">
The meta name is "viewport." You can adjust initial-scale, where .10 is very zoomed out, and .90 is the same thing as 90% zoomed, where 1.0 would be full. I haven't tried it, but I would assume 1.5 would be the same time as 150% zoom.
Initial scale is the opening size. Maximum scale is the largest it can go. User scalable =0 means that you cannot change the size of the screen. I generally set initial-scale and maximum-scale to the same number.
It's a meta tag, and I use it on http://townofnewhaven.org/Calendar/all_mobile.htm, which is the mobile version of the main edition for the calendar. Works great on both iPhones and Androids.
Meta Tags appear after title, at the very beginning of a HTML document.
1. Add to Homescreen
There are two ways of accomplishing this. One is the difficult and arduous task of getting the iPhone SDK *(software development kit) which has been designed intentionally to confuse and cost money.
The other way is to simply press "add to homescreen" and any Safari page will appear exactly the same way that an application does.
There are techniques to encourage this type of thing. Many websites use a code that allow them to float a graphic over the page that will appear for returning visitors. That's the next bit of code that I'd like to describe.
That's what I've done, and I recommend it. As someone with no formal training in computer science, nor ever holding an actual job doing web design, I'd say these techniques work remarkably in making the average web page look above average.
This is my friend's homescreen. He took a screenshot of it for me to demonstrate that he's down with the #Nhv Mobile App.
You can get more people to visit your site!
Cubiq.ORG and grab the code that you see there. Once you download the script:
- Locate the .Css and .js pages in the zip folder
- Save the .Css and .JS pages into the same folder as your index page
- Include the <script> and <link rel> code with your index page.
- Make sure to adjust the location from path/to/ so that it's the right path.
Once you have installed those two files (.css and .js) and modified the index page, you will now see a small "install" button appear whenever a returning visitor sees the webpage.
It's a great way to point some attention to the fact that you can download the web page as an app, without the intermediary use of the Apple App Store.
Big thanks to Matteo Spinelli for Cubiq's script.
And also thanks to wherever I found the <meta> screenlock code.
If you mask your site, it doesn't work right, by the way (so don't mask).
*Masking is a domain setting, not a SpacePirate.