Create iPhone Web Apps With Knox iPhone Template

Monday, August 20th 2007

If you want to create a web app for your iPhone or port a current site that actually looks and behaves like an actual iPhone app, then look no further.

Two ways to build iPhone webapps:

Code it with a template (here)
Create iPhone websites via WordPress theme (oh-so-easy)

So, here I’ve built a template to help web developers create applications for the iPhone. Notice that it uses the Apple resource images for the ‘Home’ and ‘Contact’ button. Included are all the source files to make basic apps to interactive ones, with all the needed source files. Also within the template are instructions on how to incorporate other iPhone apps such as google maps and the media player. Tap-to-call is implemented easily as well - basically everything you want in order to make a nice functional site or to port an existing website.

You’ll be able to:

•Build Deep Menus
•Add AdSense
•Add Images
•Add Audio
•Add Video
•Add Google Map Integration
•Add Tap-To-Call
•Add Personalized “Web Clip” icon
•Direct Browsers to iPhone friendly pages
•Add “Purchase” buttons
•SEO for search - fill in the tags
•Integrate Tap-To-Email
•Choose Page Styles & Add More
•AND CUSTOMIZE

I’ve tried to write this in a manner that you can follow the code and make sense of the structure so that you can create comprehensive menu systems.

This template uses javascript to simulate the page turning within the hierarchy too. Replace the email address in the code with yours and a desired subject line and the ‘contact’ button will work as expected. All the code examples are built into the package.

The package includes the code, examples and source files to perform everything described. For the cost of a couple beers you can make your own iPhone web apps! (and make money doing it)

This is a HTML template. Open the index.html file in code view to see how it’s structured, I’ve added some notes to aid the learning curve and help keep track of the hierarchy.

But If you don’t want to code, you can use WORDPRESS TO PUBLISH TO IPHONE as well with my specifically designed theme to work with Wordpress - Check it out!

BloglinesDiggdel.icio.usFacebookMa.gnoliaRedditStumbleUponTechnorati

Possibly Related

62 users responded to this post

Luke said on September 5th, 2007

ive been looking all over for something like this, your a god!

Mike said on October 12th, 2007

Thank you for this. I have been looking for something like this for a while!

Ricardo said on October 14th, 2007

NICE!!!

Just one question… how do we install it or make it like an installation package for the i?

Thanks man!

Knox said on October 14th, 2007

It’s a web-app. I WAS porting to be an app to work with jail-broken phones, but decided battling Apple with their firmware updates wasn’t how I wanted to spend my time.

Sorry ’bout that. Feel free to tinker with it and share what you create though.

Maybe I’ll get to that and I’ll email you if I succeed.

Ricardo said on October 14th, 2007

Cool anyway. Thanks for sharing!

Claus Bay said on October 16th, 2007

This is f…… great KNOX

Is it possible to make it one layer deeper in the subpages ?

keep it funky from

Claus

Knox said on October 17th, 2007

Sure Claus, just repeat the routine for the “subs” and make unique #links.

Claus Bay said on October 17th, 2007

Super … I’ll drop You a link when my demo is ready to show

Just one more … how do I get text to render nice and stay inside the 320 frame ?

thanks for Your fast answer!

Claus

Claus Bay said on October 17th, 2007

and just to keep You busy

Is it possible to place “back” and ”contact” button at the end of the page, so they won’t overlap the title ? and with the same graphic as the top bar …

Knox said on October 18th, 2007

I’ll be posting and responding to come queries about this.

I am aware that the width is 100 percent with the text and not always (now?) totally viewable within some pages. This is odd to me and has only become an issue after the firmware update from apple.

I have not had time to investigate it but am confident that it can be adjusted in the css sheet included in the download.

If you’re savvy enough to use the template or even search for one, I think you would be able to adjust values in the css, no offense intended.

Honestly, I’m swamped with work and will revisit this with a new version asap.

‘Til then, this web-app template is 99% cool

Knox said on October 18th, 2007

Oh, Claus, the title font size can be decreased in the stylr sheet too to help with the “overlap”. As far as putting the bar at the bottom, I think it’s it’s possible but it would take amending the .js file as well as the css.

I’ll certainly write a custom app for some $$$

Thanks for the comments! Good luck with your app and I’ll be updating this in time as well.

Keep in touch.

Knox said on October 21st, 2007

The “overlapping” has been corrected and the fix is included in the download. Thanks everyone.

Reeze said on November 2nd, 2007

Thank you sooo much man! The temp. works great. I changed the color to make it look more Fall colors (I made it orange.)

Edward M. Roche said on November 13th, 2007

Great template. Just what I was looking for. I do have a question: Do people just put an iPhone button on their regular site or is there a way to set up autodetection to send an iPHone to the right place?

Once again, many thanks for providing this information.

Mr. Joshua said on November 25th, 2007

Hey Knox.. this is sweet and I’m already building a killer “app” from your template. PHP/MySQL.. it’s in development and i’ll unleash it soon.

I’m having trouble with forms though.. particularly, I have a log in with then redirects to the page that referred it (upon successful login). But doing this loses the “back button” leaving the user stranded. I’m doing a normal POST with a submit button. Is there javascript I should be using instead? A way to trick with the PHP header redirect? Anything would be great.. thanks.

Leo said on November 29th, 2007

Hello. Great work. I have a question to ask you. It’s possible to not include all the content in one page only keeping the effect of transition when you follow a link to another page?

Thanks in advance, cheers!

Leonardo G. said on December 3rd, 2007

Know, great work, thanks for posting this. I have a question to ask you. I’m developing a site in PHP/MySQL and the thing with PHP is that the content of a page is downloaded dynamically (as you should know).

The template you created needs to have all the “sections” in one html file. So, my question is, is there anyway to get the content dynamically keeping the efect of transition between the pages without losing the back button and all those things? Thanks a lot. (I think Mr. Joshua will thank you a lot too)

Knox said on December 6th, 2007

Yes it needs to be in one file a la ajax. If it isn’t then it would require another load.

I have thought about expanding on this a little and will email you guys if I have a more advanced template out.

Thanks for the nice kudos everyone!

knox

Knox said on December 13th, 2007

Edward M. Roche - Yes there is a browser detection protocol that you can insert and it’s available from apple development. A couple google searches will most likely find it. I’ll add it as well in a newer version that addresses a few other questions - but most likely after the year end.

Knox said on December 16th, 2007

ONE OTHER THING - To invoke the iPhone to call a phone number link, set the link for the number to target=self.

-Thanks, John with http://www.movaya.com/ for pointing out that issue. Hope your port goes well.

matt said on December 19th, 2007

i don’t know what to do and how do i put it on the web anyone want to help…… thanks
\

Bdog said on December 19th, 2007

Hey um…How do I upload this template to my web builder?

Yes I know im a noob

Knox said on December 19th, 2007

Matt - Are wanting to port this to be an app for jailbreak installation or make a web-app?
————————————-
Bdog - Any FTP handler will do it. Edit locally and then upload, or upload and edit on the server - it’s up to you.
If you’re on a Mac - I personally I like:
http://cyberduck.ch/ and it’s free.

matt said on December 20th, 2007

i want to publish this on the web. any idea of a website creator and how to do this

matt said on December 20th, 2007

an im using windows xp

Knox said on December 25th, 2007

Matt, just ftp it to your host. If you already have a site there put it all in its own direcory. Open it in dreamweaver or another html editor, even notepad, change it the way you want and upload it.

Contact me above if you need further help with basic file uploads.

sorensilk said on January 16th, 2008

Very nice. This helped me out quite a bit. It saved me some time. Thanks.

Knox said on January 17th, 2008

Sorensilk - thank you very much!

mark said on January 18th, 2008

can i use this template with Net Fusion 10????
PLEASE RESPOND!!

Knox said on January 19th, 2008

mark - stop yelling at me, try it yourself.

Russell said on January 22nd, 2008

Hey - how can i use this in dreamweaver to see the GUI layout of the site??

Knox said on January 23rd, 2008

Russell - it only renders correctly on iPhone/Touch safari, but if you the take out the css call in the header while building it, you will see the lists in Dreamweaver, then just add that line again when done before uploading.

Knox said on January 24th, 2008

Many of the q’s asked here are now included - I updated the template today.

Roman said on January 26th, 2008

Knox, awesome template, thanks very much.
When I link to another page in one of the list items, it loads that page, but seems to keep the style of the template. Even if it’s just a plain old HTML page which I want to render regularly. Any ideas?

Knox said on January 26th, 2008

Try using a new css call in the header for the new page.

u2u2u2 said on January 28th, 2008

Hello, it’s so cool template!!! I have question, if I want to add movie, mp3 files, pictures, etc… what code should I use. I want to store some mp3, picture (non-copyright stuffs) files in my web server so that I could play with them. Do I write the name of the file, or do I need to link to the actual file? It’s very different from the regular site building…

Please help!

Thank you in advance!!!

Knox said on January 29th, 2008

u2u2u2:
Thanks for the beer
Grab another copy of the template everyone - I added some more “stuff”. Amended the CSS to add a button for Media in the images - a method for adding mp3’s and movies that open the media viewer in the phone. Take a look at the template (on your phone) for an example.

Remember, edge is kinda slow, so mp3’s can be slimmed down in QuickTime Pro to make a 32 rate acc .mov file. (The example I use is NOT an acc, just a plain mp3) Just link to the url of the media file using the code in the template, my example is ‘audio.mp3′ and is hosted in the template site folder.

Adding an image is simple, there’s an example on the About page in the template.

Thanks, u2u2u2, for reminding me to add this obvious feature! And thanks to all the nice email I’ve received from everyone.

Luis said on February 4th, 2008

I plan on using this for my podcasting community, along with these wallpapers.

Thank you, I’ll have a credit on the about page when it goes live. Great website, by the way.

Harry Zink said on February 12th, 2008

I found your site by looking for iPhone styled templates, and guess where it led me? I absolutely love your iPhone Web Template - it is exactly what I am looking for. Well, actually, it is 95% exactly what I am looking for, and I’m writing to ask you for some help for the other 5%

It’s a great template as a starting point for a general hierarchical web app for the iPhone, but I was trying to do a minor change to it - which I think might be handy for a bunch of other folks as well.

Essentially, instead of having the template start out with the hierarchical menu with pages that can either be plain, striped, or more hierarchies , I am looking for something that starts with a ’splash/welcome’ screen (plain, or striped), and offers the two navigation buttons on the top (’Home’, and ‘contact’)

I tried making that kind of splash screen the ‘home’ screen, but that results in the proper screen, just without the ‘Home’ button on the left.

How can I have this damn cake, and eat it too

Knox said on February 16th, 2008

Hey Everyone!

This is Knox and I ask you all for some help.
I’m in a contest and if you have a website you can help me out - mention it in your forums or something:)
If iPhone app has helped you maybe you could help me.
Basically it’s a contest to see who can rank in google for “The Greatest Real Estate Agent in the World” and I need a few links with that phrase linking to my article at:
http://www.ebaspace.com/2008/02/15/greatest-real-estate-agent-in-the-world/

If any of you could show me the love I’d REALLY appreciate it. The contest end on May 1 so it’s kinda getting close.

Thanks in advance everyone!

Knox

michael said on February 17th, 2008

Hey knox thanks for the template!!

I’ve done some minor skin tweaks to it but it’s really cool. When I try to put another link on the “home” it won’t link properly. I’m not trying to link to somewhere inside of the index.html file. it’ll have “a href=http://www.asdf….” etc but when you click the link it won’t work. Do you know how to fix this?

Thanks,
Michael

Knox said on February 17th, 2008

Micheal, link to the absolute URL and set the link target to ’self’ or ‘blank’ depending on your project.

Doug said on February 22nd, 2008

Hey Knox,

Great work on the template and trimmed down iui.js. You’ve also done an excellent job rolling the comments here into your January ‘08 update. Nice. The one question that seems to remain is how to create some ‘content before navigation’. I was thinking of content either above or below the ul items. I’ve tried writing a new class and using a div to abs position a small amount of text content below the menu list, but I can’t seem to get it to show.

Since I just bought you a couple of beers, I was hoping maybe you could throw us a couple of bones here… a little somethin’ somethin’ to help figure out how to put some content on that home screen??

btw, I’m a Guinness man myself. Cheers!

Doug said on February 22nd, 2008

… oh, and btw, I added your “Best Agent” link text to my homepage footer, and already seen some traffic to it. Since I’ve got a resume on CL right now I’m getting some pretty good traffic. Thought I’d let you know in case it might motivate you per my request above…

Knox said on February 22nd, 2008

Doug, sent you an email, I’ll be postin’ some stuff about that and send you an example. Thanks for the “vote” as well:)

Phantom said on February 26th, 2008

Great app… Wondering why the back button doesn’t show up any time I make a change to the code…even a minor change like adding my own email address to the contact button causes it to stop showing up.

Help!

Thanks,
Phantom

Knox said on February 27th, 2008

I can’t tell you, but can say that’s the first time someone has said that. Must be something else happening.

Dillon said on February 27th, 2008

Man i find you very helpful but still i load all of my i think correct html coding to my web server freewebs.com and i go to it but it never comes out like ur template. it doesnt come out in the iphone style. if you can twll me which web server u use to uplad it to the internet that would be very helpful thanks

Knox said on February 27th, 2008

Could very well be where you are trying to host it, I don’t play over there. I see yo are also trying tripod. I’d suggest actual hosting for real projects. Give hostforweb or inmotion a shot.

JM said on March 8th, 2008

hey knox,

thnx for the great help with your extacy blink..hahaha..im from the philippines… i had 54 small stuck pixels… and two lines.. with your great invention… i was able to remove it, it didnt take just one day… 3 separate days.. but damn,,, its gone… thnx man.. btw, i had some lil discoveries, its easier to remove the dots if you charge it while using the extacy blink of sir knox,,and do some rubbing,

Knox said on March 12th, 2008

JM - I think you meant to leave that comment on the Pixel Fix app post, but thank you.

Frank said on March 13th, 2008

Hey Knox! I’m using your template for my Science Center, and it’s going very well! I’ve downloaded the latest template and I’ve set it up, etc. One problem I’m having is too long page titles. Something like “Science Showcase” is too long and overlaps with the back navigation button. Where do I change the font size of the title=”xyz” and can it be dynamic? ( if title >=15 and backbutton <= 10 char then smaller font size, for example)? Is it in the css or js? Currently, my only solution is to be as pithy as possible.

Knox said on March 13th, 2008

Frank - You control the size in the iui.css file under the H tag. Dynamic size.. that wold be cool:) Shorter titles or smaller fonts is the way it needs to go. :et me see the end project that would be fun.

Knox said on March 16th, 2008

Hey subscribers, you can write to iphone webapps noe from wordpress. Come back to check it out on the sidebar.

Knox

skraM! said on March 21st, 2008

whatsup knox, nice template. I have a question though. Im trying to implement my own Donate button but for some reason the button shows up but it’s not clickable, any solutions?. thanks!

Knox said on March 21st, 2008

Not without seeing your project, you may just need to change the link target to ’self’ - that;s the most common linking issue.

oneighturbo said on March 30th, 2008

knox, anyone… having trouble getting pdf’s to work.. saying something about my .js

what do i need to include?

thanks in advance

Ira said on April 1st, 2008

Hey I just came across this. I have a lot of experience with HTML/CSS, limited JavaScript, limited MySQL, never PHP, etc. I have been working with Joe Hewitt’s iUI for about 2 weeks. It’s great if you only require static development and have everything coded in one static package. I’m developing for my thesis [website given] and need to work dynamically. I’m wondering if your package can help me get from where I am to where I want to go. If anyone has any suggestions on books or sites to help me develop a dynamic site for the iPhone please suggest away! Thank you very much in advance and I’d be happy to purchase your template if it can advance my current prototype. Have a good one!

Knox said on April 1st, 2008

great, Googleing will help you:)
Beware, the Hewitt iui is out of date, the web toolkit changed after 1.1.1 and your pages will scroll left to right, not fitting the 320px standard. The file in here are a streamlined an modified version that would help most. As far you, it may only go as far as you have already gotten.

Check some of the sig links on this thread, there are some ideas to be gathered from that and some are doing what you are talking about using this template. Health IT comes to mind.

Frank said on April 9th, 2008

Knox, I posted the URL to my prototype for my gallery at the Science Center in the above form. It will deliver extra content for the exhibits in our gallery. It’s not totally finished, but you should get the idea. Oh, and I purchased the wordpress theme too! It’s much easier for my staff to update the website using wordpress than parsing html. I assume it will be relatively easy to get my current “cyberville theme” put in wordpress.

John said on April 13th, 2008

This is great! Thanks for all the hard work. My question: is there an easy way to add a drop-down picker? You know, click on it and get a list to choose from. I have the code but I’m not sure how to integrate it into the template.

Thanks.

Knox said on April 14th, 2008

John,
That isn’t a feature specific to iPhones but and and basic dropdown box will invoke it on the iphone. Just build a basic form box as you normally would.