I have a software that eventually will have some reports to be accessed via iPhone.
Once I am not willing to develop an iPhone app, I´d like to make these reports accessible via iPhone Safari browsers.
GMail in iPad uses HTML 5, so I guess I can do the same.
My question is where can I find some resources to learn best practices doing so and how can I test it in a PC computer.
Thanks
Here is a similar answer I've given: Exclusive CSS for iPhone/Android
For testing you can use Chrome or Safari, as they are both webkit browsers (which is what the iPhone uses). Safari can even render as the iPhone user agent.
Hope this helps.
Please take a look at PhoneGap, I think that is what you are looking for.
You can emulate the program in xCode, but you will need an Apple for that. For PhoneGap also..
From the app architecture view-point you should also consider introducing app-specific optimization such us:
Simplify the app (show only what you need for mobile)
Minimize Application and Data Size
Aggregate Images into a Single Composite Resource (Sprites)
Include Background Images Inline in CSS Style Sheets
Keep DOM Size Reasonable
Ensure Paragraph Text Flows
Avoid Redirects
Related
EDIT:
See my answer
I saw some interesting frameworks to build applications for mobile platforms like Android and iPhone with HTML and Javascript so you can use your current web-development skills without learning a new platform language. That's very interesting because you can write just ONE application for many platforms. Very easy to maintain.
But, you cannot sell it in the App stores, so I’m wondering if it is possible to use an embedded webbrowser in the application that loads an external/included html file.
I have seen that it is possible to create Android and iPhone apps with flash, that's is easy, so i want to create a simple 'host' application that only loads content and I can use it over and over again to distribute a new app.
So the question is, is it possible to create a simple app with flash that embeds a webbrowser to load a html file?
When it is possible, next question is, it possible to communicate with the embedded webbrowser? Also a question is, will Apple allow such application in it app store?
I hope my question is understandable.
In a very strict sense, yes, you can make an app that is just a simple WebView wrapper pointing to your web-hosted app.
This is usually frowned upon though in the android market community, and i'm fairly positive such an app won't make it through Apple's closed-doors decision committee.
On the iPhone, if your app only consist of a UIWebView it is very likely that you app is going to be rejected. What you could do is ask your users to bookmark your webapp adding an icon to the home screen. Think Basecamp for iPhone.
After all this time i got the answer.
Phonegap uses a WebView to display the HTML content. It is a compiled native App with embedded WebView.
Apple accepts phonegap generated applications but it still not sure if it made it to the AppStore, it depends on what you doing with it. I think simple apps will made it. See also: http://www.phonegap.com/faq
EDIT/UPDATE:
I tried allot of tools/solutions to create crossplatform apps but all of these seem to do the same thing: It's a executable for the specific platform with an embedded browser. None of them compiles HTML to native code.
Flash (Builder) is something different, it requires AIR (can be compiled into the executable). When you using a WebView (only) with Flash, it is overkill because in fact you do not need AIR to display the HTML in a WebView. I think it is better to use phonegap to 'compile' the executable.
Anyone know of any flash equivalent software for the iPhone. Need to do some simple masking, animation...
As others have said, you can use AIR, but I'm guessing you want this to run in the browser, not as some native app. That is, you want something you can put on a web page, not distribute as an application through the App Store.
If that is the case, try Wallaby: http://labs.adobe.com/technologies/wallaby/
Wallaby can export certain Flash features to HTML5, which can be rendered in mobile Safari.
Hope that helps.
Depending on your exact needs (eg. if you want to work with timeline animations) then using the iOS packager part of AIR is a good option. For most uses however I would consider the performance of Flash iOS apps to be sub-par.
A development tool that is fairly similar to Flash programming-wise is Corona SDK:
http://www.anscamobile.com/corona/
Checkout Adobe's AIR. Its a run time that runs on the iPhone. You write in their flash language and then same code can run on iOS and Android.
Can I successfully do iPhone/iPad web development (not native apps) on Windows, and without having an iPhone/iPad device?
I.e. work like PSD-to-iPhone-optimized XHTML/CSS layout.
I’m interested to learn about and make iPhone/iPad optimized websites. Any tips? How different will it be from desktop? What’s different other than the smaller screen?
From experience I will say the only true way to test for the iPad is to test on an iPad. I have been developing a site in html5 specifically for an iPad and we initially used the iPhone to test. The drag function we had implemented with jQuery had worked almost perfectly on the iPhone but after the client had tested on the iPad they came back to us and said the function did not work period and they were correct.
I guess this could change depending on what type of development you are doing. From experience I would say either A. Make some trips to the apple store B. Make friends with iPad owner C. Buy and iPad
yes for an ipohne emulator... try MobiOne.
It's a good application to test the pages in iphone like environment.
http://www.genuitec.com/mobile/
I don’t think you can really do iPhone/iPad development successfully without an iPhone/iPad at all, whether on Windows, Mac or Commodore 64.
If you’re serious about iPhone/iPad development, how could you not try your software out yourself on the devices it’s going to run on? Your clients are going to want code that works on the iPhone/iPad. You need an iPhone/iPad to check that it works.
if your developing a web app then i think you can use this: http://ipadpeek.com/
The answer is: Yes you can absolutely do iPhone and iPad website development on a Windows PC.
However, you really should/must test the result on an actual iPhone/iPod Touch/iPad. Especially if you are integrating in any way with special device features like the dialing feature of the phone. (Yes you can have phone numbers in a webpage trigger dialing when you tap on them.)
However, you can do the bulk of the development on Windows, testing the WebApp in Safari or Chrome, which are the most fully compliant HTML5 WebKit based browsers out there.
Also highly recommend using an HTML5 touch framework like jQuery Mobile or Sencha Touch. This will go a long way to ensuring that your WebApp is optimized for the screen size and touch gestures of the mobile devices.
Remember that you can't deploy a pure WebApp to the app store, only download it from a website. You'll need a native wrapper like PhoneGap for that. And to compile a PhoneGap wrapped WebApp you'll need XCode on a Mac.
But there's a lot of power in adding your WebApp to the home screen on iOS. No native code involved and you get a full screen webapp with a home screen icon, loading image and no browser toolbars. Highly recommended.
I'm beginning the process of learning the ins and outs of developing sites for mobile web browsers. Are there any good resources/communities online that discuss mobile specific site development issues?
My initial understanding is that to cover different phones you need to build one site that is enabled for browsers with the webkit engine (iphone, android, etc.) and another more basic site for other older browsers, is this assumption correct?
Also what does developing for webkit mean exactly? How is it different than just using javascript/css/html? Is it the same except that you limit yourself to webkit specific functions and css? I looked on the webkit site, but it didn't explain it in those terms.
Are there any other snafus I need to watch out for when developing for mobile browsers?
Your assumption is correct, you will need to develop multiple versions of your site targeted at different browser types.
Webkit is the engine used by Safari (mobile Safari), Chrome, and Andriod Browser (mobile Chrome?) you can use standard Javascript, XHTML, and CSS, the main thing, is making your site "fat-finger-friendly" since these devices are all driven by touch screens.
What I mean by "fat-finger-friendly" is that you have large links/buttons that are easy to hit with your finger, most mobile browsers are good at approximating which link you intended to touch, but if you have alot of stuff jammed together, it frequently gusses wrong.
Another consiteration is screen size, and thus the width/height of your site.
The best illustration I have of this is from Ars Technica -- checkout their site in your desktop browser, then check out their site in your mobile browser. Its a very slick version of the site. (http://www.arstechnica.com/)
Webkit is rendering engine designed to allow web browsers to render web pages. It provides the set of classes to display the web content in windows and implement different features which are provided by browser (such as links, fwd/backward etc).
You don't need to build the different sites for different rendering engines such as webkit. Designing of mobile web site should consider the screen size and how different components look/behave in different rendering engines.
Look at this question for more details of how to build the mobile friendly site.
If you want to support older browsers, then you should have multiple sites. But take a look at mobile browser stats first to decide if it's worth it. If you just want to make your existing website work for iPhone/Android or other phones with A-grade browsers, then you can customize with a mobile friendly CSS (for small screens). But to get good performance on mobile devices on slow/unreliable connections, you probably need to have a separate stripped down html.
Apple has a very good guide to help you optimize your site for iPhone. Most of it will also work on modern mobile browsers:
http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Peter Paul Koch has done an excellent research on different mobile browsers. He has several articles, but this one is a good start:
http://www.quirksmode.org/mobile/browsers.html
Like Nate Bross mentioned, you should optimize for touch devices. Unfortunately it's very difficult to know if a device has touch or not, since there is no media query for it. You can do user agent sniffing for some devices, but I don't recommend it. More discussion here: Optimize website for touch devices
For the moment, I detect touch events (with an exception for Chrome). If this returns true, I inject a touch CSS. A bit nasty, but the other options are worse:
function() {
if( /Chrome/i.test(navigator.userAgent) ) {
return false;
}
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
}
You specifically asked for sites for mobile web browsers, but you might also check out the possibilities of creating a mobile web app. It looks like an iPhone app (or Android for that matter), but it's built with the help of HTML5. You can do pretty slick animations with the CSS3 in the webkit image, and iPhone also has meta tags to hide the Safari navigation toolbars. Users can then bookmark your page to their home screen, and it will work just like a normal iPhone app. Of course you're limited to the browser and it's performance. But you can create multiplatform apps :) HTML5 + JS is the only multi-mobile-platform language Steve Jobs approves, and with the help of PhoneGap you can even get it into the AppStore!
If web-app sounds interesting you should check out jQTouch, jQuery CSS Transition plugin and of course Building iPhone apps with HTML, CSS and JavaScript by Jonathan Stark.
If your site is pretty simple (just content delivery) I'd suggest a service like mobify: http://mobify.me/
A lot of big publications use it, and I have too. In fact, Ars Technica (which Nate Bross pointed to in an earlier reply) uses this service to display their mobile content.
You have control over style, and that's about it, so if your site is more complex it might not be for you. Otherwise, it's a good service. You can have a mobile site up almost as quickly as it takes for the DNS for your mobile site's address to update.
I disagree that you need to build multiple versions of a Web site.
One simple HTML5 Web site will work across all mobile browsers and desktop browsers too.
The beauty of the latest developments of HTML5 is that you could use new Iphone/Android features like Geolocation, and older browsers will simply ignore the JS code if you carefully put it within try catch statements.
For "fat finger" type problems you can serve a different CSS which makes buttons bigger if you really must. Good browsers should make default buttons easy to press in any case.
Keep it simple and you won't have to see these fragmented & costly device dependent approaches. Write HTML5 by hand and use a validator. Good luck!
I'm looking to create a mobile version of our website/web app. What's a good way to provide the best, most fully featured version.
Part of the reason for creating it is instead of an iPhone app, so I'd like to offer an iPhone web app that takes full advantage of the iPhone's version of WebKit (so CSS animations, being able to rely on good javascript support etc). However, I'd also like the site to work well on other smart phones as well as more basic mobile phones as well.
Do I create two sites (Mobile WebKit and basic mobile web) and redirect based on User Agent? Can I create one site that degrades well? What are the possibilities, and how do other people handle it?
Also: are mobile web simulators worth a damn? I have an iPhone, so can test easily on that. If I want to test on Blackberry/Palm Pre do I really need a device or are there reliable simulators?
These are some of the iPhone specific libraries that provide a native look and feel on webkit:
iUi
jQTouch
Sencha Touch
iWebkit
Getting it to work on most phones will definitely be an issue with most libraries as they are built around with the iPhone's screen size (320x480) in mind.
To get a wider coverage of devices including Android and J2ME phones, checkout Yahoo Blueprint. It's a markup language that translates for various platforms and devices.
You could either get the mobile view based on User Agent by dynamically switching the stylesheet on your server when spitting the page. This is not a recommended approach though for heavy-duty pages as you will still be sending huge chunks of data that would not be rendered. Alternatively, if you have a clear separation of your views, you can templatize the view based on User Agent and/or other parameters. This has the advantage of keeping your controller logic in one place with only changing views. You could use the above libraries for iPhone/iPod Touch and switch to a simpler mobile version for other smartphones or tweak it as you want.
Creating a separate mobile version of the site can be painstakingly difficult to maintain when changes arise.
The iPhone and Android simulators are as close as it gets to the real deal. The iPhone won't let you do stuff like make calls on the simulator for obvious reasons, but the Android provides mock implementations for basically everything on the device.