Optimizing websites for iPhone and Android
Making mobile-friendly web pages with some CSS
There is a lot of small bits and peaces on the net about optimizing/designing web pages for mobile devices like iPhone or Android. Reading some articles and making some tests on iPhone and Android emulators - you can quite easily "optimize" web page for those platforms using CSS. There is something like media type for attaching CSS files for various reasons like for printing. handheld is used to attach CSS file for mobile devices, but it isn't used by Android and iPhone. They use the default (screen) media type.
To use two CSS files of "screen" media type, one for iPhone and Android, and second one for desktop use something like this (google code search is the key!):The only screen and (max-device-width: 480px) apply to mobile screens. screen and (min-device-width: 481px) is used to prevent desktop CSS from being loaded by the mobile browser. As usual there are some IE issues which can load both CSS (so we use if !IE) or not support min-device-width, so another hack is required:
Here is an example of such CSS combo in action. Let say we have a site with two DIV columns. Without any extras for mobile devices it would look like this: But if we add CSS for iPhone/Android and change that columns doesn't float but are one after another etc. then it will look much better out of the box:
To play with Android emulator you need Android SDK, free from Google. It works on MS Windows, OS X, and Linux (32-bit, and some 64-bit distros with 32-libs). You can use the eclipse integration to configure the emulator (different displays and orientation), or use for example Titanium Developer. To use iPhone emulator you need iPhone SDK from Apple (free download after registration), and it works only on OS X :) Palm Pre also has SDK and emulator but I didn't played with it yet...