But that’s okay – our survey software is now iPhone & iPad-enabled! At any account level, you can now optimize your surveys for iPhone, iPad, and other mobile platforms.
Enterprise and Dedicated accounts also have the ability to auto-detect mobile browsers and serve up an appropriate mobile version of an existing survey. This means you can show different versions of the same survey to someone on a desktop and someone on an iPad or iPhone.
Lastly, you can manage your online surveys from your iPad or iPhone. Our site is optimized for mobile browsers, so whether you’re using an iPad, iPhone, or something else, you can still get realtime updates on the go.
Creating and managing iPhone and iPad surveys is now easier than ever. Grab your iPad and give it a try!
A few days ago we got iPhone fever with the rest of the world. We decided to build a SurveyGizmo Mobile Poll application for the iPhone, which you can view at mobile.surveygizmo.com. We learned a few things about developing Web 2.0 applications for the iPhone worth sharing!
Various sources like Gizmodo, FiGMA, and MyiTablet and were reporting iPhone development tips from the recent Apple Developer Conference (WWDC). These tips were helpful but a little misleading. Actually playing with an iPhone changed our approach. Here are some tips we picked up.
10 (+1) Tips for iPhone Applications
#1 Content width
Web pages on the iPhone default to a birds-eye view. This is great when you are browsing CNN.com, but iPhone applications should fill up the entire screen without requiring the user to zoom in and out. Many of the content apps are created to take 100% of the screen and scale down appropriately, but we found this didn’t work well for iPoll, which is just a small page with a form. Here’s the solution, set the viewport metatag. This allows the developer to work in a div of fixed size and tells the iPhone how to render the page.
<meta name=”viewport” content=”width=320″ />
#2 Content height
The iPhone browser is designed to scroll with your finger not browser or div scroll bars, so this means that you don’t want to use fixed height designs. We had a lot of trouble with overflow CSS property. We suggest you leave that property alone and let the iPhone do the work.
# 3 Increase the size of form controls
The iPhone uses fingers for making selections. It’s very intuitive but it also makes spacing and sizing your form elements very important, especially for radio buttons and checkboxes. Here is some good news. Safari on the iPhone accepts width and height settings for radio and checkbox controls! It makes them larger and easier to select with your finger. Yes, you can do this with images too, but consider your bandwidth. iPhone apps should be written to work on EDGE.
# 4 Label Tags – still do not work in Safari
Sadly the label tag still does not work correctly on the iPhone. It would be nice, but you’ll have to code around this.
#5 Cache? — Kinda
The iPhone browser does cache content… but it doesn’t help the download speed much. We will do more testing on this, but it seems that every page load creates separate requests for cached content for every external resource (even if previously cached). Likely to do header checks. That’s fine and dandy, but on EDGE it slows things down and your page will not render until all external resources are loaded. So keep your external resource links to a minimum. Use modern design tricks for displaying multiple images from one file, only include the JS libraries that you need, etc.
We also suggest building multiple UI’s into a single file and using JS/CSS to navigate between them rather than moving between pages.
#6 Web 2.0 Javascript libraries – use with caution
The iPhone speed over EDGE can be slow, very slow. We wrote our first version of our Mobile Polls app with Prototype and script.aculo.us, but loading 50-100k of JS proved to not be terribly practical, at least for us. The application was too sluggish to be effective.
#7 Web 2.0 Animation effects
We experienced latency issues that seem to negate the benefit of web 2.0 animation effects like color highlighting, slides, accordions, etc. The effects didn’t seem to keep up and made some UIs unusable.
This is not a problem with the iPhone, really, but be aware that effects occurring after the “onload” event may not render well. They will be competing with whatever mechanism the WebKit uses to thumbnail the page, and you’ll get choppy animation.
#8 Use tab-enabled form elements
The iPhone makes good use of tabbed form controls. The keyboard has a “next” and “back” button for tabbing between them without losing focus on the keyboard. So, use elements like form fields and anchors for interaction rather than divs with onclick handlers. Your users will thank you!
#9 iPhone HTTP User Agent identification
As Mac Rumors reported the iPhone sends this header.
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A538a Safari/419.3This allows for serving custom content or alternate styles sheets etc. iPhone Geek has already created a helpful php iPhone detection script.
#10 Hover Effects — don’t bother
Since there is no mouse, hover effects don’t work. You’ll need to build UI’s that provide other kinds of clear feedback or at least don’t rely on it. Make your interactive elements very clear.
Bonus Tip (just added) – The “Share” button alternative
The iPhone browser has a feature that Safari does not, a ‘Share’ button that emails your current web address to contacts in your iPhone. Dandy! Sadly, though, the button only appears when editing an URL, not when browsing. Our application needed this functionality (actually, we wanted access to the contact database so we could generate text messages), but we didn’t want to teach people to use the Share feature.
So, remember this ‘old’ trick? Use an old fashioned “mailto” link with &subject= and &body=. This allowed us to provide the same function with a single click on the web app itself, plus we could include some default text.
If you want to use multiple lines you need to use <BR> tags, not escaped line breaks. The iPhone email client is HTML based… it doesn’t respect \n breaks passed in the URL.
Happy iPhone Developing!
Tags: iphone application, iphone survey
Feb. 1 
Jan. 31
1
Great tips!!!!!!!!!
2
For a list of iPhone applications check out http://www.iPapplist.com or iPapplist.com. You can also add your own application for others to discover.
3
I need to know how to size the polls in order to embed on our pages. It seems the templates have a 700px width and no matter if I set this to 230, it remains 700, and consequently the poll is unusable. I must say however, that this poll is the best I’ve seen in my searchings and has the features we need – except for the inability to resize – or maybe I’m missing something….???
4
Please can you comment further on #7
“his is not a problem with the iPhone, really, but be aware that effects occurring after the “onload†event may not render well.”
I’m working on emulating that smooth slide effect from one page to another via scrollLeft. It beutiful with minimal designs but it bogs down to just a few frames per second with more complex pages. Is there some way to overcome this by preventing the onload event from firing?
5
Hi Andrew,
Well, you can always override the onload handler with a null function (a function that does nothing).
A better idea (granted, you should test this) is to assign the onload handler to a new variable. Then override it with a setTimeout. So the onload handler will not trigger for a few extra miliseconds (or seconds) until after the page is loaded.
If you want, feel free to post a link to your work and I’ll take a look when I get back into the office next week. I only have a spotty connection right now ;)
-Christian
6
Christian –
please email me directly and I may be able to share some code with you but not publicly untill our initial release. The problem I’m facing is very poor animation performance to swipe from one apge to another ala iui. iui works fin on very simple pages but throw in some images and some fairly complex canvas items and youre lucky to get a cuple disjointed frames of animation. I optimized as fara s I think possible, animatin the scrollLeft property and am able to do a 5 frame animation in rougly 700ms. I have seen various js performence tests for the iphon and it just seems to be slow. Do you think preventing the onload event would even have a positive effect on this?
7
We have just released a beta of our iphone weather application. http://iphone.my-cast.com Please take a look at it and let me know what you think. We are trying to get around the gif animation resolution limitations with javascript animation but it seems to interfere with interactivity. Also you will see that panel animation either runs slowly or with very few frames displayed. We are trying two types of animation and neither is optimal. I am still unsure as to how I would implement the animation optimization you’re referring to, any specific advice about that and what you think could be done on improving interactivity during a javascript animation loop would both be greatly appreciated. Thanks!
8
Hover tips does work.. just have to put your finger down and hold over what you want to click for the hover tip to appear (assuming that what your clicking has a hover tip)
9
Thanks! I am confused now between “web apps scaled for the iPhone” vs. iPhone apps developed using the SDK. When would one use the SDK over the the good od’ web?
10
Hi Steve,
Our http://iPoll.surveygzimo.com uses the web interface (and is consequently usable by other phones or even desktop browsers). The SDK is much newer and is going to provide a better way to sell apps through or store user info locally the phone without relying so heavily on cookies.
11
Hello Friends
I am a beginner . I have developed a widget in C# dot net ( Mobile application ) I want to know how to install my application ( cab File ) My client tried with the cab file but no luck
Please anyone tell me how to accomplish my task
thanks and regards
Sindhu tiwari
Software Developer
12
Hi Sindhu,
I can’t help you there. I haven’t worked in C# for mobile applications yet. However as Cab is a Microsoft convention I suspect that your user will have to be using Windows CE to use your application. This page is about iPhone applications (well, iPhone Web Apps).
Good Luck!
-Christian
13
Hi,
I was curious if anyone has experience creating a system (ideally for both the IPad and Iphone) that would integrate medical information and survey data? For example, one could collect clinical info and than email the patient a survey would after completion could be integrated in the folder of “patient” information?
Thanks. Jonathan (necheles@gmail.com)