dtsn · I build cool stuff for the web. Hi I'm Daniel and I blog about design, JavaScript and CSS. Find out more about me and subscribe to my feed.

Archive for the ‘Twitter’ Category

TweetTabs & @Anywhere

This was presented at Devnest 9

Developers of Twitter probably heard of @Anywhere when it was launched at Chirp, it includes componants which will enhanch a web page. Which for twitter increases the engagement for their users. These componants are cool, but hardly anything to get excitited about. @Anywhere contains a fantastic secret underneth it’s hood and thats a fully JS-API. Thats right a method to interface with the Twitter API entirely in JavaScript. This is because @Anywhere provides the means to authenticate a user via OAuth using their new Twitter Connect window.

Authenticated users can achieve a lot more using the API, therefore the JS-API now lets you practically do anything that the regular API can. This is really exciting because it means that i can finally turn TweetTabs into a fully Twitter client built entirely in JavaScript.

Here’s a quick example of how easy it is to post a status update using @Anywhere:

twttr.anywhere(function(T) {
if (T.isConnected()) {
T.status.Update(‘hello world’);
}
});

You can find a lot more information regarding @Anywhere over on the @Anywhere dev page. You can also get a full list of support methods.

TweetTabs

So how does this all fit in with TweetTabs? Quite simply TweetTabs was never quite finished, i always intended it to be a fully Twitter Client and not just the search client that it became, this is because Twitter at the time of writing TweetTabs didn’t support any methods of OAuth through JavaScript. But now it does, so i’ve implemented it.

You can check out a very alpha version (which is my proof of concept) at http://beta.tweettabs.com. Please give feedback, I fully intend on integrating @Anywhere fully into TweetTabs.

Downsides

The real big problem with the JS-API part of @Anywhere is that it is not supported (at all), there is very little documentation and most of it has changed since it was released. So it really is down to trial and error!

Slides

Here are the slides from the talk.

The 61px Standard

The TweetMeme button is one of the most successful social media buttons, it is served to millions of websites around the web. One of the more unusual points about the TweetMeme button is it’s height, 61px. This height has now been adopted by facebook and digg.

Why 61px?

“Cause everyone knows that 61 pixels is such a normal dimension in the world of social networking – I mean everything’s 61 pixels, right? Cause it’s…a prime number!”

- Twittown

I would like to say that it was due to lots of research and investigation, but it was more of a accident. The button was originally designed to be 60px high but in the quest to fit an extra digit onto the button the font size was decreased and the button height was increased to 61px.

The Standard

The TweetMeme button had a massive adoption rate, and was installed on millions of sites across the web therefore it became the one to beat! Large sites have now put pressure on the other social media sites to produce their buttons to the new standard. Therefore the 61px standard (if you have a better name let me know) is now the default for all social media buttons on the internet.

How Would I Improve Twitter’s UI

Twitter is quickly gathering pace and is fast becoming one of the most popular social networks. I have been using Twitter for nearly 2 years, mostly through their use of 3rd part applications like TweetDeck or Tweetie. I thought to myself why do I, and many other ‘power’ Twitter users not use the web interface? So here are some of my suggestions on how I would improve the Twitter UI.

twitter_-_home

Twitter home page design at the time of writing the article, including some reference points.

I will be focusing on a number of parts of the home page, the main ‘tweet box’, the implementation of the ‘lists’ area, how the data is presented and the integration with search. This is not meant as a critique of Twitter, but more as some helpful suggestions on usability.

Tweet Box

For lack of a better word, the tweebox is the textarea located at the top of the twitter homepage. I would really love to see it improved in a number of really simple ways:

  • The ability to press enter to submit a tweet. Tweets aren’t multi lined and there is nothing else to do so why not make enter submit the form instead of press the button. Twitter has this problem in a number of other area’s as well, OAuth screen!
  • Autocomplete the usernames in the textbox.
  • Auto shortening. Twitter has already partly done this for really long links, but it would be nice if you could have the option to do it on the shorter links as well.

Page improvements

The live update of tweets, you know the little yellow box which tells you how many are waiting, is a fantastic addition. But I think they are missing the key points, why wouldn’t you show the tweet? I just find it really annoying.

The page is currently geared up to just tweeting. Users probably use the Twitter interface more to manage their tweets and accounts, maybe the front page should be geared in that direction.

Other

The lists nor retweets seem to be fully integrated into the UI they just appear to be something strapped onto the edge. It would be great if you could, for example, have tabs across your timeline which listed your most popular lists.

It would be great to hear your thoughts on how you would make twitter better, you never know maybe Twitter is reading this.

Better Twitter

Hopefully my recently released Firefox plugin Better Twitter will solve most of these issues.

Better Twitter

There are a lot of things wrong with the Twitter homepage, that’s why i created Better Twitter. Which is a Greasemonkey script which will fix some the things which really bug me with the Twitter UI. I have converted the Greasemonkey script into a standalone Firefox plugin as well using this user script complier.

bettertwitter

Install Plugin or download the Greasemonkey Script

Release 0.1

  • Fixes the tweet box, allowing you to press enter to submit the tweet
  • Focuses the tweet box when the page loads

Installation

There are two options for installing the script.

  1. Download the Firefox Plugin, this requires Greasemonkey to be installed (i think)
  2. Download the Greasemonkey Script

Feedback

If you have any thoughts or feedback on this script, or would like to contribute please leave a comment below.

Twitter T-shirt Version 2

My previous Twitter tee design was a huge success selling 33 t-shirts, over the period of 9 months! I have decided to expand my range and not only offer more types and colours but also more designs. Here is design one of Twitter tee version 2.

Design

I didn’t want to have another bird, even though Twitter has changed their bird since the last one, so I looked at the other icons or characters which are synonymous with twitter, including the fail whale, the ice cream and caterpillar and the robot, which I finally settled on (mainly because i love robots). The twitter ‘something is technically wrong’ robot is a fantastic design, and I have always been impressed with it. However how do I convert it into a T-Shirt?

image

I really needed to block the design out so it can easily be printed in one colour. I wanted to make it my own style, but while still making it look like the twitter robot. Please let me know whether you think I have managed to achieve this?

Here is the first draft of the design, it has a big section so you can write your twitter name (like the previous T-shirt) or anything you want easily.
robot tshirt-design1

Don’t forget you can still buy the Twitter T-Shirt design here.

Please let me know what you think!

Reading Twestival

image
Photo by Benjamin Ellis

We held Reading Twestival on the 10th of September and it’s great to say that it was a fantastic evening, and the culmination of over 4 weeks of intensive planning by me and the team. The turnout wasn’t as huge was we expected but we did manage to reach our goal of raising over £1300 for our charity Daisy’s Dream.

I hope everyone enjoyed it, and I would really like to thank everybody who helped me to organise it, Amy, Katharine, Jim, Ben and Claire. I would also like to put out a huge thank you to our sponsors DediPower, TweetMeme and to our venue Mix Cocktail Bar, I think everyone agreed that it was a fantastic venue.

Don’t forget that we run regular tweetups called rdgtweetup every other week at Glo, check out the website for more information.

Twestival

I would just like to say thank you to @RDGTwestival and @simonster for organising the Reading Twestival and say it was great meeting some of the local Twitter crowd, we should all do it again – how about Wednesday?

(more…)