Webmonkey » iPhone

The iPhone Monoculture Is in Your Mind

Scott Gilbertson — Tue, 21 Feb 2012 21:02:39 +0000

Photo: Ariel Zambelich/Wired.com

In the recent kerfuffle over the prevalence of the -webkit CSS prefix and the lack of corresponding prefixes for other browsers, we told you that the problem was with developers, not WebKit browsers. Instead of writing code that will work in any browser many developers are coding exclusively for WebKit and that’s a problem.

But mobile expert Peter-Paul Koch, better known in the web developer community as just PPK, argues that the real problem is not WebKit, nor is it even web developers’ fascination with WebKit. The real problem is the developer-created monoculture of the iPhone.

According to Koch, “web developers don’t care about WebKit…. They care about the iPhone.”

The interesting thing about Koch’s argument is that he doesn’t claim there is actually a monoculture of the iPhone on the web. In fact, he cites some of Mozilla’s web crawler stats which seem to say just the opposite. Instead Koch believes the problem is in our heads, so to speak.

“What we have here is an iPhone monoculture; not in the stats, but in web developers’ minds,” writes Koch. “This is the fundamental problem we must address.”

The cure, says Koch, is to diversify tutorials and examples. “Start talking about testing in mobile non-WebKit browsers (i.e., Opera),” he writes. “Start talking about other platforms besides iPhone (and Android). Start talking about mobile diversity, instead of showing the iPhone over and over and over again.” What do you do if the only phone you have to test on is the iPhone? Well, there are emulators available for most phones, including Opera’s very powerful mobile emulator which can simulate all kinds of phones and connections. And don’t forget that Opera Mini is available for the iPhone if you’d like to at least test your site in something other than Mobile Safari.

Adobe Releases Its Own HTML5 Video Player

Michael Calore — Fri, 22 Oct 2010 17:02:06 +0000

Adobe has released an embeddable video player that plays HTML5 native video in browsers that support it, and falls back to Flash in browsers that don’t.

It’s cross-browser and cross-platform, so it works on iPhones, iPads and other devices that don’t support Flash. Using Adobe’s new player, these devices can show videos in web pages without the Flash plug-in.

There are already several players out there that use the HTML5-with-Flash-fallback method, such as Vimeo’s new player and the slick one from Brightcove that can handle video ads. All of these players, like Adobe’s, are based on open web technologies and can be customized with CSS and JavaScript. But this newest one, being from Adobe, is sure to be a bigger deal.

The company has come under fire in the past year over concerns about the stability and performance issues related to its Flash Player browser plug-in, and Flash technology itself. Apple’s iPad ships without support for Flash, and Apple initially disallowed apps created in Flash from being sold in its app store. Apple rescinded after a few months, but the damage was already done — Google began pushing HTML5 video over Flash by releasing WebM, a new open video format, and developers got busy looking at HTML5 as a replacement for Flash, at least when it came to embedding videos.

With its new player, Adobe is responding to their developers’ wishes for solutions that play well on the open web. It comes on the heels of last week’s release from Adobe, which lets artists using Illustrator export their drawings as HTML5 Canvas, and its earlier pack of HTML5 tools for Dreamweaver.

HTML5 video adoption among browsers has gone tremendously so far — Chrome, Firefox, Safari and Opera all support native video, and baked-in support is coming to Internet Explorer 9 next year. But it’s still a bit of a mess, with different browsers supporting different formats. So developers posting HTML5 video still need to encode their files in at least two of the three major formats — the widely-used H.264, the newer WebM, or the older Ogg Theora — to guarantee all HTML5 capable browsers will be able to see their videos.

With the proper file formats in place, Adobe’s new player will play native web video in all the newest browsers, and will switch to Flash playback mode for all your poor visitors stuck with IE6 or something equally stone-aged.

The new HTML5 video player is incorporated into the workflow of Dreamweaver Creative Suite 5, so if you’re already using Adobe’s tools to build your site, you can drop in a player using Dreamweaver’s “Customize Widget” function.

If you’re not a Dreamweaver person, you can still generate all the code you need using Adobe’s free Widget Browser app. One caveat — the Widget Browser is an AIR app, so you’ll need to have Adobe’s Flash-based runtime to use it, though AIR apps will install AIR for you if you’re lacking.

To develop its video player widget, Adobe used open source code from Kaltura, repurposing a popular library that’s found at the heart of several HTML5 video players.

See also:

Video: Watch Flash Hand HTML5 a Beating on Mobiles

Michael Calore — Mon, 20 Sep 2010 18:19:02 +0000

We’re not trying to throw gasoline on the fire or anything, but here’s an interesting video of Flash and HTML5 duking it out on two different mobile devices.

Developer Chris Black shows us two versions of the same animation, one done in Canvas and JavaScript and one done in Flash. He first runs it on a brand new iPod Touch (HTML5) and then on an Android Nexus One (HTML5 and Flash). The framerate is much higher and steady on the Flash version — 57 frames per second versus 40fps in Canvas on the Nexus One and 22fps on the iPod.

A few huge caveats here: The animation is very simple, and is hardly on par with most web animations. Also, the JavaScript code is not optimized as much as it could be, which may be hurting the framerate numbers in the HTML5 portion of the test. Lastly, it’s only an experiment. The HTML5 test measures the rendering speed of the mobile browsers being used, so it can’t be taken as a true head-to-head Flash/HTML5 benchmark. Read the comments on Black’s post and you’ll see people reporting different results across different Android devices. To that point, he uses an iPod Touch, roughly the same as an iPhone and not as fast as an iPad (none of which can play Flash content).

So what’s the purpose, then? Black says he’s trying to take the temperature of the different choices to decide where it makes the most sense for him to focus his efforts as a developer. Here’s his rationale, in the comments of his post:

The bottom line is that I need performance out of new technologies that match that of existing technologies. I’m quickly growing tired of coding down to new technologies. I need code to work in both HTML5 and Flash, not one or the other. When I can build Flash in a quarter of the time that outperforms the same JavaScript, I begin to wonder where we should draw the line.

We found this video on the blog of John Nack, Adobe’s product lead for Photoshop who also has a long history of dealing with vector graphics in browsers. His thoughts:

Now, does this mean that HTML5 sucks or shouldn’t be used? Of course not! … All these implementations are new, and I expect they’ll all improve, especially as developers figure out what techniques work best for each. Competition is great. For things that HTML5 does best, use it; same goes for Flash.

So, add a teaspoon of salt and stir.

See Also:

Yahoo Mail Switches to HTML5 on the iPad

Michael Calore — Wed, 18 Aug 2010 00:22:27 +0000

Yahoo recently revamped its webmail site to deliver a richer, HTML5-powered experience to iPhone users, and now the company has done the same for iPad users.

Go to the Yahoo Mail website on your iPad and you’ll see the new, fully juiced-up HTML5 version instead of the older mobile version.

Yahoo mail the world’s largest webmail site — it has over 275 million users — but the site lags behind second-runner-up Gmail when it comes to innovation with HTML5 on the iPad and other touchy-swipey browsing devices.

Still, the new Yahoo Mail looks pretty slick. Scrollable photo previews now appear inside e-mail messages, and it supports offline local cache so you can keep working even when you’re out of range.

iPhone ‘Pull To Refresh’ in JavaScript

Michael Calore — Mon, 02 Aug 2010 17:58:44 +0000

When it first arrived in iPhone apps, the simple “pull to refresh” action was instantly hailed as a genius bit of user interaction engineering.

It’s an ultra-intuitive way of refreshing the displayed page content by simply pulling the page down with your thumb, then releasing it — sort of like pulling a lever on a slot machine. The official Foursquare and Twitter (nee Tweetie) apps use it, so if you’re into social networking, you’re already familiar. But so far, its use has been limited to native apps.

Now developer Wayne Pan has created the same behavior in JavaScript for use in web apps. It’s just a proof of concept implementation at this time, and he’s found some of the limitations.

Point your mobile browser at waynepan.com/s/pull to test it. It’s a little jerky, but it does work. And his code doesn’t rely on any JavaScript libraries, so with a little tweaking, this behavior can be integrated into any web app and will work on Android and iOS devices. Nice work!

[Hat tip to Dion]

See Also:

Firefox Home Syncs Your Faves to Your iPhone

Michael Calore — Fri, 16 Jul 2010 17:24:21 +0000

Mozilla’s new Firefox Home app for Apple mobiles is now available for download. You can get Firefox Home for the iPhone and iPod Touch in iTunes. It’s a free download.

As we mentioned when we first told you about it, the Firefox Home app is not Firefox on your iPhone. It’s a companion to Firefox.

It securely syncs your bookmarks, browsing history, user preferences and open tabs from the last time you used Firefox, and it brings them down to your iPhone or iPod Touch so you can access that stuff on your mobile. It works in tandem with Firefox Sync, Mozilla’s hosted, cloud-based service that keeps all of your installations of Firefox synced up with one another.

Browsing my Firefox bookmarks on the iPhone

It’s especially welcome now, as most of us use multiple screens every day — one or two computers, and at least one smartphone with a web browser. Firefox Sync tied our work machine and our home machine together by syncing all of our browser data in the cloud, and Firefox Home completes the circuit for iOS users, making all the hard-to-remember stuff — your myriad “starred” favorites and bookmarked URLs — available in your pocket.

Needless to say, this app is only going to be useful to you if you’re a Firefox user with an iPhone or iPod Touch. Android users have had Mozilla’s mobile version of Firefox available on their phones since April.

You also need to have Firefox Sync set up to use it. If you don’t have an account, you can sign up when you install the app on your phone. You will also need the Sync add-on for Firefox (newer versions of Firefox will ship with Sync pre-installed). As Charlie Sorrel notes in his Gadget Lab post, this is a bit more work than syncing your desktop Safari data to your iPhone, which just involves checking a box in iTunes (and you can keep Safari and Firefox in sync — and by extension, the iPhone — using Xmarks, but only on the Mac). Opera’s mobile browsers have easy syncing as well. But unlike those choices, this isn’t a new browser or a half-way-there solution, it’s a direct line to the same browser data that’s on your desktops and laptops.

Once the app is set up, you can search your history, access your Firefox bookmarks and see the tabs you most recently had open when you walked away from your computer. All of this info is accessible from within Firefox Home’s search bar, which is sort of a miniature version of the “Awesome Bar” in Firefox. It will search both page titles and URL strings, and it will auto-suggest results as you type.

Searches use the Awesome Bar approach

Just like using the Awesome Bar in Firefox, everything shows up in a single list as you type, and a little icon shows up next to each item to tell you what sort of result it is — a bookmark, a piece of history, an open tab.

Click on an item and the page opens inside an in-app browser. It’s your standard iOS WebKit browser in a pretty blue wrapper, and it performs about the same as the built-in browser inside other popular apps like Twitter.

So Firefox Home is not Firefox on your iPhone, which is something we’re not ever likely to see. Mozilla’s brass has made it clear that Apple’s app policies are too restrictive for Firefox, and the company doesn’t want to dumb the browser down for the iPhone. For people who use Firefox as their primary browser everywhere else, this app is the next best thing.

You can read Mozilla’s announcement for more links, troubleshooting tips, and feedback channels.

See Also:

YouTube Launches New HTML5 Mobile Site

Michael Calore — Thu, 08 Jul 2010 21:12:12 +0000

The mobile version of Google’s video-sharing website received an upgrade Thursday. The new m.youtube.com has a bunch of new features, including high-quality video playback in the browser using HTML5.

Surf to YouTube’s mobile site with any modern mobile with a browser that supports HTML5′s tag (works great on iPhones, iPads and Android phones) and you’ll notice that when you click on a video thumbnail, the video loads inside a new browser-based player.

The old site on an iPhone used to launch the YouTube native app, taking you out of the browser. In fact, the first time you visit the site on an iPhone, you’ll be prompted to “install” a bookmark on your home screen. This is likely a step to move people away from the YouTube iPhone app and toward the web-based app.

The switch to an HTML5-based mobile experience comes only a week after YouTube published a public memo stating several places where HTML5 falls short when compared to Flash for delivering video. But Flash currently isn’t an option on mobiles. So, while HTML5-based video playback may not be YouTube’s first choice on the desktop (even though the company has been experimenting with it), it makes perfect sense on mobiles.

The whole mobile YouTube site has been optimized for the small screen, and the experience on the phone is now much tighter. For one, the video quality is markedly better, and the web-app’s interface has been updated to look like a native app, with big, touchscreen-friendly button icons.

There are also new features that aren’t in the YouTube iPhone app. The library is easier to navigate, the search box suggests results as you type, videos can be bookmarked like web pages, and favorites and the new “like”-style ratings have been added.

The mobile site defaults to H.264 playback, which is curious since Google recently helped launch the new WebM video project. WebM, which is already enjoying support in browsers from Opera, Microsoft, Mozilla and Google, is intended to provide an open source alternative to H.264 (and possibly even a recommended standard) for video on the web. But it’s not too surprising, considering that H.264 is more widely supported than the brand-new WebM on mobiles. And given Apple’s loyalty to H.264, which is the native format in QuickTime and iTunes, the chances are slim-to-none that Mobile Safari or Safari will support WebM in the near future.

Here’s where web apps win — If Google were to decide to start serving both flavors of video, it would just be a matter of throwing a switch. YouTube can add whatever features it wants much more quickly, since it just has to update a website instead of a native app that requires a download.

Watch the video demo starring some soccer player guy using both an iPhone and a Nexus One:

See Also:

Gmail Mobile Is Always on the Move

Michael Calore — Mon, 21 Jun 2010 17:54:11 +0000

Google has updated its mobile Gmail interface for iPad users. The company announced the update Monday on the official Google Mobile blog. To see the updated interface, just surf to Gmail using Safari on your iPad.

Gone is the split-screen interface for composing e-mails. Now, you get a tasteful, lightboxed modal overlay — fewer distractions, cleaner and more room for the text of your e-mail. A screenshot is above. The changes will only show up for iPad users, and the new site (for now) is only available to English-language users.

It’s not a major update, but it demonstrates a new way of developing the web app that allows Google to respond more quickly to user feedback. Google switched the product over to a more easily-iterative HTML5 codebase last year. The mobile Gmail site gets updated more frequently — usually just small stuff here and there — and is becoming faster and more usable all the time.

On my own iPhone, I switched from the native Apple mail app to Gmail’s mobile web interface long ago, and I’ve never gone back. I still use the native mail app to send e-mails when I have to (from Twitter or Instapaper, for instance) but for everything else, I use the Gmail web app in Safari. In the early days, it was fairly painful, but it’s gotten much faster and much more usable since Google switched to the current iterative approach. The floating control bar, the swipe-to-archive gesture, the menu navigation and the way threaded conversations expand and contract are elegant, innovative enhancements that all web app developers can learn from.

What do you use for mobile e-mail? Native or web app? Let us know and tell us why you chose that route in the comments.

See Also

Firefox Home App Syncs Firefox Faves to Your iPhone

Scott Gilbertson — Thu, 27 May 2010 17:12:30 +0000

Want mobile Firefox on your iPhone? Sorry, that’s probably not going to happen anytime soon (the browser maker has often cited Apple’s SDK restrictions as the primary hold-up). But Mozilla is hard at work on the next best thing — Firefox Home.

The application has not yet been submitted to the App Store, but the early prototype Mozilla is showing off this week looks promising.

Essentially, Firefox Home takes two of the best parts of Firefox — built-in syncing and the “Awesomebar” — and wraps them up in an iPhone app. That means you can easily get to all your bookmarks, favorites, recent browsing history, currently open tabs and other info from Firefox inside of a handy iPhone app. It’s an evolved version of the Weave-for-iPhone idea we originally told you about a few months ago.

If you’ve ever been frustrated trying to remember a long URL for a site you visit all the time in Firefox, but never in Mobile Safari, then this is the app for you. There are already some similar solutions out there — Instapaper is a great way to send URLs from your desktop to your iPhone — but none of them give you access to as much data as Firefox Home promises to deliver.

The pages are viewed within the Firefox Home application, though keep in mind that Mobile Safari is doing the rendering in the background, not Firefox. Still, given that running Mobile Firefox on the iPhone is really close to impossible, Firefox Home is probably about the best solution we’re going to see.

The data syncing is all handled by Mozilla’s servers and is encrypted end-to-end so your data will be kept private even if you’re on a public Wi-Fi network. Naturally Firefox Home will be a free app, provided Apple OKs it.

And why wouldn’t they? Well, who knows, but there’s one possible hitch — it can sync your internet porn, and we all know Brother Steve doesn’t want you to look at porn. Of course Opera’s mobile app was recently approved, so hopefully Firefox Home will be ushered through as well.

Hopefully Firefox Home won’t fall victim to Apple’s capricious approval process, because it certainly looks like a great way for Firefox fans to access their data from the iPhone.

See Also:

Dropbox API Lets You Add Cloud Storage to Your Apps

Scott Gilbertson — Fri, 07 May 2010 17:02:49 +0000

Dropbox, the free, web-based file backup service, has rolled out a new API that gives developers a way to access, edit and save any file in a user’s Dropbox account.

The Dropbox API works a bit like an Amazon S3 storage bucket except that you, not the application in question, have control over your uploaded files.

The Dropbox API uses familiar tools like JSON, OAuth and OpenID, so web developers can essentially offload their user’s storage needs to Dropbox. For users, the usual risks of tying your web app to a cloud storage mechanism are mitigated by the fact that Dropbox keeps a local copy on your hard drive.

While the potential for integration with web apps is very cool — imagine if all your Flickr uploads automatically synced to the Dropbox folder on your hard drive for an instant backup — the first place you’ll likely see the Dropbox API in action is on mobile devices.

Storage limitations and, in the case of the iPhone/iPad, Apple’s imposed restrictions, mean that it’s difficult to build mobile apps that can access local files, let alone read, write and sync.

That’s the basic problem the Dropbox API seeks to overcome — using the Dropbox API means there’s no need for local files on your mobile device and everything is automatically synced back to your PC. The only catch is that you need an internet connection for the syncing to work.

Dropbox has already worked with a number of developers to integrate the new API prior to the launch. For example, Air Sharing, GoodReader and QuickOffice can now tap into your Dropbox account to edit and sync your Dropbox files. The new API ships with client libraries in Objective-C (pretty much required for the iPhone/iPad), Python, Ruby and Java. To create an application you’ll need to register with Dropbox and then, once you have access, you can grab the client library of your choice and check out the online documentation.

See Also: