Since releasing Leaflets, we've received some feedback regarding the Safari 3 requirement. Generally, there have been two types: First, people wanted to try the demo and were frustrated that the browser check wouldn't let them if they weren't using Safari 3, and second, people were upset that we had designed for only one browser.
The first issue (demo browser-sniffing) was both an accident and a quality-control issue. It was an accident because I wrote the sniffing code late at night just before launch and I completely forgot that, hey, other browsers use WebKit. So searching the user agent string for Safari is pretty stupid. I fixed this a few hours after launch—users can now view screenshots of the various Leaflets and then try the demo, although they'll be warned before it loads the first time if they're not using Safari. The whole reason for the browser requirement in the first place, though, was related to the quality-control issue.
We didn't want to have people without Safari 3 trying to use the demo, because without Safari 3, Leaflets looks odd in places. We rely heavily on Safari 3's CSS3 support and when you view the site with another browser, parts of the navigation are rendered as blank or squares and are unclear (thus, it's difficult to use).
Aside from the use of -webkit-border-radius, which is not a valid CSS property, we aren't using any special hacks or tricks to style Leaflets. In fact, the primary feature of CSS3 we use throughout the site, and which is vital to the display, is multiple background support. Sure, we could design the site without using this (and, thus, support more browsers without visual quirks), but there's a huge benefit to using this feature: Bandwidth savings.
Each of our Leaflets that uses the common top navigation bar has a different color scheme. Some have different button configurations and differently sized breadcrumb elements. We use multiple backgrounds to share a few images to create many differently sized buttons and shapes. And because they're all transparent, we can change the background color of the bar to alter the shade of the images. Not having to download multiple images saves the user bandwidth. And by using multiple backgrounds, we can also cut down on the amount of code structure on each page, adding more to bandwidth savings.
A few complaints were along the lines of "if you had just written Leaflets in standards compliant code, it would work perfectly in every browser." And, of course, we did write it using standards compliant XHTML (validate it yourself). Leaflets does work in other browsers and older phones, it just doesn't look so hot without CSS3 support (see it running on an older Samsung A900). And, to be fair, we all know that writing things using web standards does not ensure things will work in every browser. I wish it did.
We didn't choose to limit Leaflets to Safari 3 because we're elitist jerks or to make it iPhone-only. It's just that iPhone is the only device on the market that has a really modern, nearly fully-featured browser. Javascript, CSS3, full-scale rendering—it all adds up to a great experience, and we wanted to create something that was more than just the average mobile application. Our goal was to take web services people were already familiar with and modify them to fit the mobile context. Fast downloads without compromising user interaction and experience. iPhone allowed us to do that quite well, we think.
