Over the past week I’ve been doing some iPad development. While working I’ve noticed a few things. It’s really nice to only worry about one browser, especially a new one like Safari 4. It feels weird to code something, see it work, and then not have to cross-check it everywhere. I feel like I’m cheating.
On the other hand it is a pain to figure out what features will actually be supported since it hasn’t been released yet. There is an SDK from Apple that contains an iPad simulator, however you need a membership in their Developer program… and you also need a Mac. Neither of which I have.
Anyways, from my tinkering, here are some of the pros of iPad development:
- CSS gradients – a great way to cut down on HTTP requests and also make your code more extensible
- CSS rounded corners
- CSS transitions
- nth-child
- Multiple background images – say goodbye sliding doors
- Embedded fonts
And what’s a list of pros without some cons:
- Difficult to test working solely on a PC. I just use Safari 4.0.4, and then when I have access to a simulator I check how key browser features are implemented so I know what to code against.
- Not a lot of documentation or community yet.
- Fixed positioning isn’t supported. Apparently because it doesn’t play well with resizing the viewport.
- Hard to make a scrollable region on the page. This leads to tracking down some sort of JS workaround. For example: http://cubiq.org/scrolling-div-for-mobile-webkit-turns-3/16
- Embedded fonts are huge! iPad doesn’t seem to support .ttf (like 20kb in size), but instead SVG fonts. Converting a .ttf to .svg nearly triples the file size in my tests. You might be able to trim down the character set to just include Latin characters… but the site I’m doing is localized so that’s not an option.
So far developing for the iPad has been a positive experience, but it would definitely be easier if I had one to test with!
