Posted by: digdug2k | November 28, 2012

Making great things on the mobile web

I love Firefox for Android, but find myself frustrated sometimes with the mobile web. I wanted to highlight some great things out there and point out ways you can work to make your (and others) mobile web better!

Splendid Apps

Twitter has a pretty awesome web app that showcases a lot of what makes the web great. The webapp is designed to work well on small screen devices (needs some work on tablets), and makes use of indexedDB to store data and startup up quickly, as well as including visible throbbers (since webapps have no browser chrome to tell users what is happening) and heavy use of AJAX to load content in the background. They’ve used touch events to implement a nifty pull-to-refresh implementation, have a nice fixed position header to provide easy navigation for the site, and use history apis to make it easy to navigate back and forward between “screens” of the app. If you’ve enabled posting with your location, they’ll use Geolocation to identify where you’re tweeting from. The version of the site they send as their app currently is only lacking support for photo uploads, but they work well if you visit http://m.twitter.com in Fennec (i.e. I assume they just haven’t been uplifted to the webapp yet). In short, its pretty awesome, easy to install, updates faster and more often than apps, and its safe! I’d highly recommend it to any of our Aurora/Nightly users. You can install it straight from the Firefox Marketplace! Or just bookmark the website on your Android desktop by loading it in Firefox for Android, long tap on the urlbar, and select “Add to Homescreen”.

Exquisite Hacks

For those sites that are… lets say less enlightened… the great thing about Firefox for Android is you can make the web what you want it to be! Writing extensions that extend or change sites is not much different than writing the same extensions for Desktop! Not long ago, a version of Stylish was even written that works on Firefox for Android, and today I threw up a style on userstyles.org that adds a much needed fixed position header to Facebook.com.

Learning Stuff

Unfortunately, Facebook users still can’t upload photos from the webapp. Facebook currently shows our users a message reading “Sorry, the browser you’re using doesn’t support uploading photos” along with a sell for their Android app. To be clear to our users, this isn’t true at all! To all the web developers out there who don’t know, Firefox for Android already supports taking photos right from web pages! All you have to do is add a file input with an accepts attribute set to “image/*”. i.e.

<input type=”file” accept=”image/*”>

You can also use “audio/*” or “video/*” for audio and video uploads respectively (I’m looking at you YouTube!).

GetUserMedia can also be enabled in some builds for photo uploads, and video support for getUserMedia is in the works, but for the simple, “upload a photo” case, HTML input’s are perfect (and will deprecate well in browsers that don’t support accept attributes).

I’ve looked into Facebook a bit and it looks like they’re depending on some proprietary api’s (opening a special fbrpc: url) they created for their native apps. Fixing this is definitely doable but is non-trivial hacking that would be fun for someone looking for a fun addon to write! Happy to help anyone interested.

I’ m hoping to keep this up for the next bit, calling out sites or apps that are doing a great job on mobile, and continue to point out things other authors can do to make their mobile pages better. If you know of any you’re especially impressed with, send ‘em my way.

About these ads

Responses

  1. mobile technology sphere and the routes that can be followed to further stimulate growth.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: