Are there any resources or guidance out there on how to make iPhone friendly web applications?
In my case specifically, I'd like to use ASP.NET MVC, but since that all runs on the server, I know it'll boil down to just markup/css/javascript considerations.
edit: as I find other resources not mentioned here, I will update the question text :-)
CSS-Tricks ScreenCast on Designing for the iPhone
There’s an iPhone article on Sitepoint (which usefully shows you how to target stylesheets at just the iPhone, whilst hiding them from Internet Explorer—Apple's documentation doesn't).
Craig Hockenberry wrote Put Your Content In My Pocket at A List Apart.
A Flickr developer posted some lessons learned: http://code.flickr.com/blog/2008/10/27/lessons-learned-while-building-an-iphone-site/
+1 for Apple’s documentation as mentioned by Boot To The Head—horses’ mouth and all that: they have pretty comprehensive stuff on neat CSS properties that are only really supported by Safari, like CSS animations and CSS Transitions.
Scot Hanselman had a great presentation at Mix 09. Click here link.
Also look at the Mobile Device Browser File=>LINK. It is open source at codeplex.
"What is the Mobile Device Browser Definition File?
The Mobile Device Browser Definition File contains capability definitions for individual mobile devices and browsers. At run time, ASP.NET uses this .browser file, along with the information in the HTTP request header, to determine what type of device/browser has made the request and what the capabilities of that device are. This information is exposed to the developer through the Request.Browser property and allows them to tailor the presentation of their web page to suit the capabilities of the target device." - Codeplex
The definitive resource is Apple's Safari Dev Center.
Related
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
which control should i use to make my company's website to iphone look ...
so that when it open it iphone then it look a different that it look in normal browser...
actually i am an iphone developer and i have to give this answer to the web designer of my group...
There's also a great WordPress plugin called WPtouch which I've seen a lot of blogs use. That is, if most of your company's site is a WordPress blog...
Have a look at http://www.jqtouch.com/ or http://code.google.com/p/iui/ or one of the similar toolkits available for doing iPhone web applications.
The actual detection of an iPhone browser depends on your backend framework. A bit more information can be found in this question
Instead of starting from scratch, I was wondering if there were any ready made iPhone functionality for presenting a store's item lists (small picture and main info) and detail pages (all images and full info).
All data is already stored in an online database and setting up Web Services or the like for communication is not a problem, but iPhone development experience is limited.
Do you know of anything of that nature that I might utilize?
Sounds like the perfect opportunity to develop a web application specifically for the iPhone. I can't remember the name of the book off the top of my head, but do know that it's offered by O'Reilly. The other upside is you will now have an app that's accessible by other devices also.
Here's the book, it even includes the hooks to interface natively to the iPhone.
A good place to start is looking through some of the code examples available at Apple's iOS developer site. I believe there is a 'Recipe List' example that might be similar to what you are looking to do. Hope that helps!
What would be the best way to write an app for the iPhone OS and the Android OS that allows access to a web blog (posted on blogspot.com)? Are there ways to manipulate the incoming data from the website to fit the UI of the phones, or will I have to re-do a lot of the blogs?
Any help would be nice! And thank you in advance!
The easiest way in both would be to integrate the browser in the web app but perhaps restrict it to the blog.
For example, your app would open and have its own UI, but displaying the actual blog content would be done in an integrated browser (such as a WebView in Android).
Doing it this way isn't the best as it wouldn't be the best experience for the user, but it has the added benefit of keeping all the blog's design and extras, as well as javascript functionality.
"Manipulating incoming data from the website" (otherwise known as scraping) would be tricky for modern blogs since they usually contain so much customised content and are nowadays more like websites with blogs than just regular blogs.
I guess your best bet is to use Phonegap open source framework.
Since it basically creates local webapps and both platforms have very similar browser capabilities this should be a good fit for your intended application.
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!