Making your web app iPhone ready

Note: you can visit the example used in this blog post from your iPhone here.

The most well-known and really most important meta tag you need to know about is the viewport meta-tag. It allows you to define the minimum and maximum zoom-level and whether or not the user is allowed to zoom into the view. You disable zooming by setting the minimum-scale to the same value as maximum-scale. At the same time you can define the viewport width and height by setting the “device-width” or “device-height” properties. If you have a website with a width of 960px and you want it to be zoomed in to fit exactly that width, all you need to do is to set width to 960. Since your website should run on several devices though with different resolutions it is not recommended to set an absolute width and instead use the predefined device-width and device-height values. This ensures that your viewport has exactly the size supported by the device.

Now lets get to the juicy part. When creating an HTML5 app for the iPhone you can define an icon which you will see on the start screen of your iPhone. Once you set this meta tag, the user won’t be able to see a difference between a native application and a web application on your iPhones homescreen.

To add even another level of detail you can define a startup screen for your application. This is especially useful when your application supports offline mode using cache manifests.

All of those features wouldn’t be complete if you couldn’t hide the browsers chrome once you start your application from the homescreen. To disable the chrome just insert following tag:

Now after you have added this meta tag you want to be able to differenciate between the user launching the app from the homescreen of the browser.

Last but not least you can even control the look and feel of the status bar on the top. You can either use the default status bar or a black status bar or a semi translucent status bar:

These are the most important things you need to know to make a simple website be HTML5 app ready on your iPhone (note: this only works on the iPhone but won’t hurt other devices and platforms). A “normal” user won’t be able to differentiate between a native or a HTML5 app anymore. Do you know of similar features of other phones? Do you think we should standardize the discussed features? (Some are already).

If you need support getting your website or web application HTML5 app ready, feel free to contact us.

Enjoy

Dowload

• Source
• Docs

Enjoy the short video we prepared to give you an impression of what EventNinja can do

EventNinja in Action

The EventNinja widget contains multiple pages, as you are used to from mobile applications. The home page shows all the events, allows you to search and filter them. Along the top bar you have the search bar, the “Help” and the “About” pages linked.
Clicking on the icon to the right of each event takes you to the details page of the event, from where you can go to multiple other places, like the map, to see where it exactly takes place, the schedule of the event. If the event has twitter tags saved for it can go to a page which shows you all the latest twitter messages flying in. Try it on EventNinja.net and explore the features.

EventNinja Features

User Features

• List of web developer events
• Searchable and filterable by tags, location and full-text search
• Exact location of the event
• Watch all twitter messages for each event
• Find out about details of an event

Technology Features

• Events are stored, retrieved and filtered by a Google Calendar
• Everything built on top of the Dojo Toolkit
• pure HTML, CSS, JavaScript based widget
• using PhoneGap to run on iPhone, Android and Blackberry
• Plugin architecture, allows for a modular enhancement of the widget
• Fully customizable via client-side templates and CSS of course

As you figure right from the list of features and cleverly combining them we can hook this widget onto any calendar, customize the features (via plugins), style and brand it the way we like it and have your custom widget.

This gives customization a far broader meaning. Just imagine combining the two components 1) base of the widget and 2) the twitter plugin. You get a widget which shows you all tweets for a certain event -that’s just a new widget itself, without writing a line of new code. Which again is a very different use case, than the widget you get here. Just hook in another plugin which allows replying via twitter and you get a full blown twitter client in the context of events.
The limits of what is thinkable is just limited by the plugins you can write.

EventNinja for the mobile2.0 Conference

Mobile2.0 is the first conference where you can really use EventNinja to get all the info possible, the schedule, twitter messages, etc. There surely will follow many more conferences and events that EventNinja can and will be used at. See the screenshots below to get a feeling of what it looks like for this conference.

Are events missing?

EventNinja for webdevelopers is driven by the great amount of community events.
If you see that events are missing, please contact us and we will add them immediately. If you organize events yourself let us know as well. You can send any kind of info about the event, e.g. name, location, tags, speakers, twitter tags, schedule details, price, and much more.

You want an EventNinja?

Send an email to eventninja _ at _ uxebu.com if you are interested in a customized version of EventNinja, are interested in the technology or simply want to chat. At the mobile2.0 conference you will recognize us easily when you look for the guys with those caps, hurry, because we are spreading caps and maybe there will be many more wearing this cap :-).