HTML: Mobile Codes for iPhone

Getting through the iPhone SDK is a pain in the neck.  Once you get it, the process can be so incredibly glitchy that half of your efforts are getting it to draw the bandwidth correctly so it doesn't continually crash.  That makes no sense to me, because Safari is more stable, especially if you can accomplish your goal with just HTML code.  Then you have to get it approved for sale in the app store.  Then people have to enter their password to download the app.  


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

 People read webpages all the time.  What is going to make them read your website more frequently?  Probably a button on their home screen.

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.  

 Now your friends can put their web page on their iPhones and make them appear as applications!  Which is much better.  By reading this singular article, you can turn any grouping of HTML pages into what appears convincingly like an iPhone application.

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!

Here's how.

 This is what the site looks like, with the additional code, which pops up at the bottom and points at the "HomeScreen" button.  All you need to add it is go on and visit 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.  

Now people can save your stuff to their homescreen page.
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.