Category Archive for ‘Internet’

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.

10 Comments

Habari: next generation blogging

160107

There is a brand new blogging platform thats just starting to poke its head above the horizon. Habari which is the Swahili word for ‘news’, is being built from the ground up by some well known names in the blogosphere. This is how its described on the Habari Google code site:

Habari represents a fresh start to the idea of blogging. The system is fast, easy to use, and easy to modify. New users should have no problem using and enjoying Habari. Advanced users should have no problem tweaking Habari to do exactly what they need it to do.

Habari relies on PHP5 with PHP Data Objects (PDO), and your choice of SQL database (MySQL, PostgreSQL, SQLite). Habari is strongly object oriented, and implements the full suite of the Atom Publishing Protocol. User-created plugins make Habari do nearly anything imaginable, and a robust theme system permits the use of several popular templating solutions.

The first mention of Habari, at leas the first I saw about it, was by Chris J Davis early in the new year when he announced that his blog was now powered by Habari. They have also set up the beginnings of a wiki as well as a couple of Google groups for those who are keen on being involved in the project in anyway. The source is currently available via svn for those who want to give it whirl, simple installation instructions can be found in the wiki. I setup up a copy on my dev server this afternoon, only took a couple of minutes.

Obviously there is still alot of development to go, but if you think you might have something to offer then have a look at joining the Google groups. Thats what I did, and I hope that I can contribute in some way to the development, even if its just small thing like bug testing etc.

One of the running discussion is regarding a logo for Habari. Several people have put forward there own suggestions, and I just could resist, I had to try something for myself. This is the first thing that came to mind while looking at some of the other suggestions.

Habari logo concept 1

Initially I really liked this idea, but the more I looked at it the more I could see other logos within it. For example, the speech bubbles inside the letter ‘a’, is very much like the old Vodafone logo. And while unintentional, the black and white version of the logo is similar in idea to the Wordpress logo. Habari really needs something a little more unique. This was my second shot which I whipped up this afternoon. There are a few variations.

Habari logo concept 2

Trying to move away from the “letter inside a circle”, but still using the letter ‘h’. I also tried to think of some sort of generic icon/logo that could be used instead. The only one that I was really happy with was the ‘asteriks’ which I added a touch of colour too…very Web 2.0…I also played around with a few font faces for logos. This combination was my favourite.

Habari logo concept 3

So maybe you’re tired of your current blogging platformand looking to try something fresh and exciting, or maybe you are just curious, as I was, and want to know more about this exciting new project. Check out the Habari site for more info.

Comments

Unwakeable 1.2

070107

http://www.longren.org/unwakeable/

Tyler Longren has released version 1.2 of his Unwakeable theme for Wordpress. This theme also originated from K2, and is what I actually used as the starting point for Redoable. Its a very clean and simple design, is packed with support for numerous plugins, and is sidebar module ready.

Comments