Twitter iPhone apps head to head

190707

Firstly. Woah. Second blog entry for the night. Right now the serious stuff.

I needed a break from actually working on Hahlo, so I thought I’d do a little research. Now that there are two extra competitors for using Twitter on the iPhone I thought I would put them head to head with Hahlo and see how they all compare, and what conclusions can be drawn from my findings….oh and I just wanted to play with the cool web inspector in Webkit.

What I did

Nothing too fancy really. First up I had to set a custom user agent string in Webkit so that I could actually access Pockettweets, since they seem to be doing user agent detection and you can only view it with the iPhone user agent, I’m curious to know their reason for this.

The ‘testing’ I did was just a simple loading test, to see how the relative speeds compared, and how much data was downloaded for each. My weapon of choice for this little exercise is the Web Inspector in the latest Webkit builds. If you’re a web developer and you haven’t played with it yet, I think you should.

I based all my tests on the load time of the public timeline, except for thincloud and m.twitter where I tested the friends timeline because the public timeline isn’t accessible. I did a ‘hard reload’ for each one so (hopefully) it didn’t retrieve files from the cache and mess things up…

The Challengers

Hahlo - http://hahlo.com
Hahlo 2-beta - http://beta.hahlo.com/iui/ Update: Hahlo 2 is now live at http://hahlo.com
PocketTweets - http://pockettweets.com
Thincloud Twitter - http://twitter.thincloud.com
Twitter - http://twitter.com
Twitter Mobile - http://m.twitter.com

A picture tells (more) than 1024 bytes.

Have a look at the result for your self, draw your own conclusions. Feeling adventurous then have a play with Webkits Web Inspector yourself and see what you find.

Hahlo
Hahlo.com

Hahlo 2.0
Hahlo 2.0 - iUI Prototype

Twitter mobile
m.twitter.com

PocketTweets
pockettweets.com

Thincloud Twitter
Thincloud Twitter

Twitter
Twitter.com

Transfer Size (as reported by Web Inspector)

  1. Twitter Mobile - 4.51kb
  2. Thincloud Twitter - 101.64kb
  3. Hahlo 2-beta - 107.49kb
  4. Hahlo - 143.4kb
  5. Twitter - 261.3kb
  6. PocketTweets - 323.24kb

Twitter Mobile comes out a mile on top basically because it is far and away the simplest of the interfaces. Its just one document and a tiny image. Thats all. I guess its pretty safe to say that this would be the quickest to access via any type of connection.

Things to consider. All except Twitter Mobile include images which make up on average around 60kb. All except Twitter Mobile include Google Analytics code which as to load.

Transfer Time

Even though this is reported by Web Inspector, its not really all that useful in my mind. For starters the transfer speeds I get here through the universities network are completely different to what you would get through the iPhones wifi not to mention EDGE. Secondly, even though the connection here is fairly fast, it hasn’t been particularly consistent or reliable lately.

The best way to test out the load times is to use these apps on your iPhone and see how they go. I would do this but, thats a little hard without an iPhone.

Javascript

All the tested interfaces except for the Twitter Mobile include some sort of javascript. They all include GoogleAnalytics urchin.js which is approx. 7kb.

  1. Hahlo 2-beta - 29.75kb
  2. Thincloud Twitter - 34.23kb
  3. Hahlo - 54.9kb
  4. Twitter - 131.39kb
  5. PocketTweets - 238kb

Reducing the size of my javascript is something I have been very aware of while working on Hahlo. As you can see I’ve almost manged to halve the size of the JS used by version 2, although it might grow just a little since the version tested is not feature complete.

Hahlo currently includes part of the mootools framework, which is only need for the AJAX status updating, and was chosen mainly because the file size was so much smaller than prototype. With version 2 I am now using Joe Hewitt’s iUI which is much smaller, includes AJAX functions and doesn’t contain anything that isn’t needed. I am also now processing the JSON feeds server side, which removed the need for a bunch of javascript.

Thincloud don’t appear to be using any big framework, choosing to just stick with the basics and have put their own javascript together to just what they need.

Twitter are using prototype (including effects.js and application.js), but this is more than understandable since this is their primary site, and not the mobile-optimised site. Still 130kb of JS is a lot…and not something you would want to load over EDGE too often.

PocketTweets are using prototype (including effects.js, dragdrop.js, controls.js and application.js), lightbox and pngfix. Over 200kb all up, and I’m wondering how much of it is actually used. In particular pngfix which according to the comment at the start of the file is for “Correctly handle PNG transparency in Win IE 5.5 & 6.”, and since PocketTweets only works in browsers with an iPhone user agent I’m fairly certain that there is no need for pngfix, or do they know something we don’t. Lightbox is nice, just maybe not on a mobile device. Sure it does some cool things, but its 800+ lines of code for an effect that doesn’t seem to be used. But wait…it does.

You see if you visit Pockettweets in Firefox (or another non-iPhone browser) you get an information site about the app. This page uses lightbox, and would also use the pngfix. The question is, if you’re serving a user-agent specific page couldn’t you also only load the files needed by that user-agent specific page.

Stylesheets - CSS

Again Twitter mobile doesn’t have a stylesheet either, it’s styles (of which there aren’t many) are just included in the header of the html page.

  1. Thincloud Twitter - 1.05kb
  2. PocketTweets - 5.73kb
  3. Hahlo 2-beta - 11.04kb
  4. Twitter - 11.87kb
  5. Hahlo - 16.16kb

Both PocketTweets and Thincloud seem to be using gzip on their css (and their js for that matter), currently I’m not using it on Hahlo, but it will be turned on soon, so hopefully that will reduce the size of the transfer for Hahlo even more.

Images

As mentioned already all of the tested pages, except Twitter mobile, have to load a bunch of user avatars which make up about 60kb. These tend to be the slowest part of the page load, as can be seen by the loading graphs. I will be definitely looking at adding an option for users to choose to show/hide avatars by the time version 2 is finished.

  1. Twitter Mobile - 0.62kb
  2. Hahlo 2-beta - 64.29kb
  3. Thincloud Twitter - 65.62kb
  4. Hahlo - 67.16kb
  5. PocketTweets - 76.07kb
  6. Twitter - 84.76kb

The current Hahlo is using probably the largest number of different images, due to the way some of the buttons and UI elements are created, but because most of them are tiny pngs of only a few hundred bytes the damage isn’t too bad.

PocketTweets is simliar in that it is using a number of images, but none of them are particularly large.

This is the one area where all of the sites are fairly close in the total size of images, but it is pretty clear that the majority is made up of user avatars, which are beyond the apps control.

Use of API feeds

Hahlo is currently using the JSON feeds from the API, and the processing is being done client side. For version 2 I am now processing the JSON feed server side, mainly because I hadread reports that the javascript execution time on the iPhone isn’t too flash, and I figure the less strain I put on the device itself the better.

Thincloud are also using the JSON feed and processing it client side, however looking through their javascript, it looks like it might be a little more efficient than my original stuff.

PocketTweets appear to be doing the processing server side, and the response time is pretty good.

Obviously both Twitter interfaces just access the information directly, which means that they too are doing any processing server side.

Functionality

I can’t do this little head to head without at least touching on the functionality of each app.

Thincloud Twitter

  • Nothing accessible unless logged in
  • Buttons both top and bottom, main toolbar at bottom
  • Friends timeline
  • Update your status
  • Replies timeline
  • Browse friends
  • Add a new friend
  • No links in tweets
  • Font is quite small on my laptop screen…must be almost unreadable on the iPhone

PocketTweets

  • Public timeline accessible to all
  • Buttons both top and bottom - main toolbar at the bottom
  • Friends timeline
  • Replies timeline
  • Direct Messages
  • Archive
  • Able to favourite tweets
  • Able to reply to tweets
  • Able to update status
  • Has links in tweets.
  • Help page - although its more an ‘about’ page than ‘help’, but better than nothing
  • Can only be viewed in browser with iPhone user agent.

Hahlo

  • Buttons both top and bottom, main toolbar at bottom
  • View User Timeline
  • View Friends Timeline
  • View Public Timeline
  • View Replies Timeline
  • View Direct Messages Inbox
  • View Direct Messages you’ve sent
  • Update your status
  • Send a direct message
  • Reply to tweets
  • Alphabetic Friend list, with last update
  • Friend avatar view - not really too useful just looked good.

Hahlo 2.0

Still a work in progress, but in addition to the features that v1 has.

  • URLs in tweets are links
  • usernames for @ replies are link to that users timeline, just like on Twitter
  • more…like I said, its a work in progress.

Twitter Mobile

  • Very simple
  • Very quick
  • Just displays your friends timeline
  • And lets you updates your status

Twitter

What is there to list. This is the main site, of course it has everything, and of course it all works the best on twitter.com

Roundup

I’m not going to make any grand judgments. Everyone will have their own preference. I’m of course bias towards my own app, Hahlo.

Thincloud Twitter looks alright but its a bit lacking on functionality at the moment I guess this will change, and they’ve very heavily tied themselves to twitters logo and colors, could trick some into think this was an official twitter product.

PocketTweets has its good points, but honeslty I’ve not a fan of the interface. It would look awesome if a similarly style site was available for full screen, non-iPhone use, but on the iPhones small screen, it seems likes its wasting a lot of space. But thats just my opinion, I know there are plenty of people who will disagree with me.

Well thats about it I think. I would love to hear your feedback and comments. Which one do you use? How does it perform in the real world on the iPhone? Let me know.

7 Responses to “Twitter iPhone apps head to head”

  1. Ben
    Ben

    Speaking as someone who has an iPhone and has used all of the apps above, here are my findings:

    Twitter Mobile is definitely my go-to stand-bye. It’s crazy fast, even over EDGE, it gets the job done, and it updates INSTANTLY when I make a post. (None of the others do that.)

    I really like Hahlo 1.0. In my tests it loads slightly faster than PocketTweets and I just like the interface better. It feels cleaner and less cluttered. I REALLY like the way the “reply” and “direct” interfaces works. I only have two quibbles: #1) for some reason (I suspect something with the input field syntax perhaps) the text in the input fields is not “selectable”–that is, you can’t use the little iPhone text-select magnifier at all. Frustrating if you get to the end of a sentence and have to go all the way back to change “bog” to “big” or whatever. :-) and 2) when I click the “circle” button in the bottom right, it activates the “view” prefernce dialog, but I have to scroll all the way back up to the top of the list to actually get to the dialog. (for a long time I didn’t even think the button worked because nothing seemed to happen.)

    My biggest comment re: Hahlo is this: I beg the developer to scrap the plans to use the “iUI” template for v.2. Homogenization is not necessarily a good thing. The current version is clean, unique, beautiful and works well. And so far at least (and I know it’s still in progress) version 2 is really really slow, buggy, and frankly not as fun to use. I’ll likely stop using Hahlo entirely if v.2 is iUI-ified. I think with a few tweaks to improve speed and some continued refining, Hahlo with interface v.1 would definitely be my app of choice.

    That’s my 2¢.

  2. Justin Williams
    Justin Williams

    For PocketTweets, I lazily include all the JavaScript files in our /js directory, which is shared between both the iPhone UI and the Web homepage.

  3. dean.j.robinson
    dean.j.robinson

    @Ben: Thanks for that feedback its very useful. I’m not sure whats stopping text selection in the input fields, although I’ve heard this is happening on a number of iPhone webapps, I’ll have dig through the iPhoneWebDev group and see if I can find any way to resolve this.

    The problem with the ‘preference’ panel, is because of the fixed positioning. I hadn’t actually realised that I still hadn’t correct that. I’ll have a look at it later and try and fix that, I’ve got a couple of ideas. I guess the update panel suffers in a similar way, but becuase you’re already at the top its not as big a problem.

    Re. your comments about v.2, I tend to agree in some ways, I have noticed that the speed is just a little slow, but I’m not sure which part is causing the bottleneck. There are certainly a lot of things for me to consider while looking at version 2, whether it uses iUI or not.

    @Justin: I figured that was the case, I was a little surprised at just how much js is included thats all.

  4. Andrew
    Andrew

    I tend to agree with Ben, in that the iUi seems more clunky than 1.0. The only feature I think is missing in 1.0 is the links in the Tweets. That is the entire reason I tried the beta to begin with. Add hyperlinks to url’s and I say keep 1.0.

  5. Ben
    Ben

    Ditto what Andrew said about the hyperlinks. I don’t mean to sound like a broken record, but I thought I’d describe exactly WHAT it is about v.1 that I like or don’t like (in case it helps clarify).

    1) Distinctiveness. I like that it doesn’t look and/or feel like all the other iUI apps popping up. I really don’t mind the “typical” page refresh vs. the iUI “swipe”.

    2) The menubar(s). I like the v.1 buttons. They look good IMO. I like the way they “highlight” on click, and they are clear and easy to understand. (One minor suggestion: The star icon is slightly misleading. On Twitter.com, the star implies a “favorite”, and in Hahlo it means, “new tweet/direct message”. I’d go with something else for the “new” icon — perhaps something super-simple, like a Plus sign or a pencil icon or whatever.)

    3) Friend icons…or not. I like the current configuration, using the small friend icons. Over WIFI it’s no problem at all. However, over EDGE, it slows things down. It would be GREAT if there were a simple preference for “Text View vs. Icon View” — which would allow the user to choose to view a text-only version (sans friend icons) if they prefer. I think this is the main reason that http://m.twitter.com is so easy to use. It loads almost instantly from anywhere. And as much as I wish it didn’t–speed counts. If I’m at a stop-light and want to post a tweet before it turns green, I can usually do it on m.twitter.com, but maybe not on Hahlo or the others. Fast fast fast. I’d sacrifice stuff for speed (maybe even Google Analytics). People will appreciate it.

    4) No rollover on iPhone. I’m sure you know this, but there is no such thing as rollover on iPhone. The reason I mention this is, again, is in the speed category–you could shave down the size of your graphics a tiny bit. Right now you’ve got three states (for example on http://hahlo.com/resources/images/options_toolbar.png). Instead of three states, this could be two (maybe even one) and it would save you a few kb.

    5) I’m not sure if you’re already doing it, but have you considered gzip compression. (I’ve heard that the iPhone supports it, and it might help reduce the size of the CSS file and possibly the JS files??) Here’s a link: http://www.fiftyfoureleven.com/weblog/web-development/css/the-definitive-css-gzip-method

    Anyway, hope that helps a bit. Great job overall. I love Hahlo.

  6. Gary Learned
    Gary Learned

    I have to agree that as they look now, I much prefer the Hahlo 1.0 interface.

  7. Fatima
    Fatima

    I agree with Greg.

3 pingbacks and trackbacks

  1. Twitter iPhone apps head to head at hyperLunkQuote
  2. emilcar » Twitter en el iPhoneQuote
  3. Innovating Twitter - How is the community improving Twitter? | BlogSchmogQuote

Leave a Comment



Quote selected text