Posted on 14-11-2008
Filed Under (Mobile) by Jorge

Getting your web site up and running on the iPhone isn't hard. That is of course due to the fact that most any web site is supported with the built in iPhone web browser, Safari. Having said that, you can take some quick steps to get your web site a little more iPhone ready with a few simple steps.

First, you'll want to make sure you have a custom iPhone favicon so that when users add your site to their home screen it will look like it belongs along next to all those killer iPhone apps. This is super easy and Apple does all the fancy work behind the scenes to make it shiney for us.

To get your very own all you have to do is create/choose an image, scale it to 57 x 57 and save it as apple-touch-icon.png then save it to the root directory of your web site and your done. Go to your site on the iPhone and add it to your home screen to see it. If you want no shine then save it as apple-touch-icon-precomposed.png.

Once you get your web site accessible via the home screen with your fancy new favicon you can next control how your site launches into Safari. You can set meta name apple-mobile-web-app to yes and this will launch your web site without the regular Safari controls.

<meta name="apple-mobile-web-app-capable" content="yes" />

This may not be ideal since links that you click on will then open to the regular Safari browser. You can check out this link for thoughts on how to address that with a little JS magic.

You can also control a couple other basics with additional meta tags.

The status bar appearance can be customized to be either gray, black, or black-translucent.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

The viewport has several variables that can be set on launch as well. You can get more info from apple's web site.

<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

Images supported on the iPhone browser are GIF (including animated up to 2MB), JPG, PNG, and TIFF up to 8MB in size. JPG can be rendered with subsampling so much larger images can be viewed. Subsampling uses 16 times fewer pixels with corresponding memory savings. Pretty slick.

The iPhone Safari browser has resource limits in place to ensure that the iPhone doesn't hog up to many of the phones other resources that need to be available for the iPhone to remain at its very basic level, ready to be a phone. i.e. ring when someone calls you. Web pages are limited to 10MB, JavaScript is limited to 5 seconds with allocations limited to 10MB.

If you use the Safari on the iPhone enough you will eventually run into sites that simply crash the browser. Safari just shuts down and returns you to your home screen. That is typical of a site that hogged up too much memory.

PDF and quicktime is supported. Flash and Java are not.

In general, use standards. Valid HTML, XHTML, CSS, and JS. Stay on top of the latest developments in browser technologies by keeping up to date with what the WHATWG and HTML5 initiatives have going on.

(0) Comments    Read More   
Posted on 31-10-2008
Filed Under (Mobile, Projects, Social Networking) by Jorge

We think a lot about mobile.

Developing a social networking web site such as ESPN's Profiles has naturally led us to the burgeoning frontier that is mobile. Yes, mobile phones and mobile web consumption has been around for some time. I've been able to do some sort of web surfing via WAP available web content for years now. But with the launch of Apple's iPhone 15 months ago and the rivals in the industry that have since followed suit with aggressive web based offerings such as mobile applications and built-for-mobile-device web sites the field of play has changed.

RIM's new Blackberry Storm is a direct assault on the iPhone with a touch screen interface, built in camera, GPS, and more. Google's Android OS will debut on T-Mobile's G1 with an application offering similar to Apple's App Store, only Google is calling theirs the Andorid Market.

iPhone applications are developed with Objective-C and the Blackberry and Andorid apps are built with Java. Safari, which is built right into the iPhone, is doing some super cool things with the latest in CSS3 (transformations) and HTML5. I'm looking forward to diving into these and many other mobile related topics and will share some of findings along the way.

Mobile, in short, is huge. More and more people are accessing content from the smart devices they keep in their pockets rather than the ones they keep on their desktops. This is a great opportunity for web developers and we're excited to say the least.

(0) Comments    Read More