Can you find me?

No related posts.

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?

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.

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

Please let me know what you think!

Related posts:

1. Twitter T-Shirt Design
2. What’s wrong with Tweetdeck

These posters created by M&C Saatchi in London are Dixons latest effort in advertising on the tube. These adverts do something that most adverts overlook, the recognise Dixons position in the market and how their customers both behave and view them, firmly at the bottom. The cleverest bit of these adverts in to use the easily recognisable fonts of the two major retailers, Selfridges and John Lewis. These, however are really subtle, and without realising this the adverts become really bland. Therefore do they really appeal to everyone, or are they just a bit too complicated, it probably would of been more effective to actually mention these retailers by name.

This problem would become even more apparent if the adverts where only displayed singly, then you wouldn’t get the contrast, and even through the brands which the fonts come from are strong, i don’t think typically consumers easily recognise the font of a brand out of context with their logo.

What do you think?

No related posts.

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.

No related posts.

The initial application was written in about 2 hours entirely in JavaScript, it later went through a number of huge revisions especially over the Easter weekend. It gained quite a lot of features, and then lost them. I wrote an entire OAuth module in JavaScript, then realised that you can’t authenticate headers. The project was basically done apart from one of the most complicated features. Then my life changed, I broke up with my long term girlfriend, of 5 years, and had to move back home with my parents. Even though this didn’t dent my enthusiasm for the project it definitely affected the timescales.

How it works

TweetTabs is a very simple idea, but it takes a very long time to solve the problems it presents. The entire application is written in JavaScript, this gets around the notion of having a API limit for your twitter searches, you are now only limited by your I.P. address, which has a much higher (not declared) limit. For every tab TweetTab hits twitter to fetch the data, this is controlled by our adaptive pollrate. Put simply this means that each tab can work out the optimum time to fetch more data from twitter. We try and limit the number of times TweetTabs hits twitter in the hour, mostly so that you don’t reach your API limit (it is possible, and I did it a lot in testing), and we don’t overload twitter.

TweetTabs Screencast from Daniel Saxil-Nielsen on Vimeo.

Coverage

So now TweetTabs has been launched and has had loads of positive feedback and has been covered on loads of huge sites:

• http://www.techcrunch.com/2009/06/16/tweettabs-is-an-awesome-way-to-search-twitter/
• http://mashable.com/2009/06/16/tweettabs/

Dedications

I don’t know whether this is normally done for releasing products, but I feel it is appropriate, I would like to mention everyone who helped with the process along the way. Starting firstly with @nickhalstead, who supported me the whole way (and sorry it took so long). @nicktelford who was there to bounce ideas of and to find lots of bugs just before we were about the launch. @alexforrow for writing a really good deployment script, which merges all the files and obfuscates them. All the great people that tested it along the way: @chris_alexander, @craigyd, @amykate and @girlygeekdom (who is probably the one who answers @tweettabs questions online).

TweetTabs is built using Prototype and the JavaScript framework, and is powered by TweetMeme, and Twitter.

Related posts:

1. What’s wrong with Tweetdeck
2. JavaScript Halloween Effects
3. Building JavaScript Widgets

Dilbert 404 Error Page

South by Sou’wester

The Mind of a Web Developer mingle²

The Brads - WiFi

Small talk with a web designer – The Man In Blue

Web Development Project Management Cartoon – The Project Management Cartoon via Andy Sowards

Related posts:

1. JavaScript in CSS, Ugly But Interesting

I design lots of user interfaces for varying different types of products on different platforms. So I find it very annoying when I encounter a product which is functionally brilliant but lacks an easy to use interface. I find the user interface for the popular twitter client Tweetdeck is lacking the necessary interface for it to become a brilliant application.

Loading Tweetdeck

When Tweetdeck initially loads up there are no loading symbols in any of the columns, this is also true when you create a new column or a new search. Ideally Tweetdeck would show a loading spinner to give you the idea that the program is actually doing something.

The Tweets

Each tweet is of a uniformed height which really doesn’t make use of the space available. This becomes even more apparent when you switch on the option of narrow columns. Why can’t the columns be resizable? This would allow you to have as many as you want within the viewport of your screen. One of the biggest flaws in Tweetdeck are in the tweets, links do not have a rollover! There is also no way of knowing if you have actually clicked on the link and it’s opening a webpage.

Notifications

The Tweetdeck notification system is not only annoying, it is also useless, they are trying the mimic the GROWL notification system for Mac, but without any of the benefits. The notifications contain no real information, like who tweeted what, it only contains a count. There is also no way for you to choose the location of the notification, by default it pops up in the top right of the screen. The major place, especially on windows, where important buttons are positioned. There is also no setting to adjust the time the notification would display for.

Summary

Don’t get me wrong, I love Tweetdeck, I use it everyday but i would just like to see a number of improvements so that I am able to use it everyday all day, without continually looking for a new solution for the Twitter client problem.

Do you have any problems with Tweetdeck, any little problems which you think would make a big difference? Or have you found a great replacement for Tweetdeck? Let me know in the comments below.

Related posts:

1. Building JavaScript Widgets

Little pieces of JavaScript you embed onto your website are getting more popular. Every major provider of a service on the web also gives you a little widget that you can put on your blog or webpage to promote what you are doing, for example Twitter, Last FM and Digg all provide widgets which are great for you and great for the service.

I am going to talk you through the development and pitfalls associated with the design and development of widgets.

First and foremost, you need to decide what you want to show with your widget. Knowing this you can make an educated choice about which method you want to use to create a widget, there are basically two methods associated with widget development.

iframe’s

No, iframe’s aren’t dead. They are a major part of widget development. Using a iframe is the easiest way to generate a widget - you host a small file on your web site which contains the information you want to show, like the Digg button for example, and get the JavaScript on the client side to build the URL to it. In the case of Digg the client side JavaScript builds a URL based on the current posts URL.

document.write('');

To install the widget all you have to do is to point the user at your bit of JavaScript:

You can pass any variables you want through to the user at this point by simply making them JavaScript variables, and using the JavaScript to build up the iframe URL based on these variables.

If you want your widget to be able to appear multiple times on the same webpage, you need to remember to set all the variables to null at the end of your JavaScript file.

That’s it! iframe based widgets are very easy to build and to use, however they do come with their downsides. The biggest of these is that the user can’t customise the widget at all - it lives within an iframe and therefore is untouchable by CSS. That’s why certain widgets, like the twitter widget, which are made entirely on the client side in JavaScript.

Client Side

A widget that is built in JavaScript on the client side is definitely the harder option. For this you have to make the JavaScript file create all the HTML, write out a basic style to apply to the HTML and load in the data. When building this try to avoid using frameworks to build the HTML, this only creates more request for your web servers and make the widget slower to load. Instead resort to using the classical JavaScript methods for creating elements.

document.write('


');
var widget = document.getElementById('you_id');
var div = document.createElement('div');
div.innerHTML = 'Hello World';
widget.appendChild(div);

You will have to load your data in from another source, and for this I recommend extending your API to give you a JavaScript variable followed by the JSON encoded data. Here’s an example from tweetmeme.

Pitfalls

There are a lot of difficulties involved in creating widgets and here are just a few of them:

• AJAX won’t work! You cannot post information between domains.
• Don’t use a JavaScript framework - for a simple widget it’s is over kill.
• Try to keep the requests down. These widgets are coming from your servers.
• Anonymise the JavaScript, you don’t want it conflicting with other JavaScript.
• Minimize your JavaScript. This will save on bandwidth for you, and make the widget faster to load. 

Questions

If you have any questions, or want to show off any widgets you have made please comment below.

Related posts:

1. JavaScript Halloween Effects
2. JavaScript in CSS, Ugly But Interesting
3. Scriptaculous ScrollTo

Yep, we have done it again, Tweetmeme has just landed another new feature, a mobile version specifically designed for the iPhone. How did we do it? Well it’s really easy, and just like building a normal website but with a couple of extra snippets of code.

The Design

The hardest part of building a website specifically for the iPhone is coming up with the design. The screen real estate on the iPhone is very limited so you have to start by being creative. Focus on the content, components such as sidebars, large pictures and small text should be avoided, keep in mind that buttons should be big.

If you are using photoshop i have created a template for you to easily visualise your designs, which you can download here, based on the iPhone GUI PSD, if you are not the set the canvas size of your design to 320px width and 480px height. Remember to images to a minimum and that the iPhone uses the WebKit rendering engine which supports some CSS3 tags, like rounded corners.

The Code

Lucky you are still dealing with a HTML page which uses HTML and CSS like any other webpage you may build.

<html>
<head>
    <title>My iPhone Page</title>
    <meta name="viewport" content="320; initial-scale=1.0; maximum-scale=1.0;">
    <link rel="apple-touch-icon" href="images/icon.png"/>
</head>
<body>
</body>
</html>

Notice that line 4 and 5 include some magical meta tags which you may not of seen before. Line 3 sets the width of the viewport so it matches the screen width of the iPhone the second parameter sets the scale of the page.

Line 5 is for creating webclip icons when you bookmark a site. The image should be 57px by 57px in .png format. The iPhone adds the shine and the rounded corners.

Redirect

You want to redirect users on a iPhone to be redirected to the correct version. For this you will need a nice redirect script, normally detecting browser type based on user agent shouldn’t be done, you should detect browsers based on their capabilities.

if ((navigator.userAgent.indexOf('iPhone') != -1) ||
(navigator.userAgent.indexOf('iPod') != -1)) {
document.location = "http://yoursite.com/iphone";
}

That’s it’ really just buy added a couple of extra lines of HTML and a rejig of the design and CSS you can easily optimise your website for the iPhone.

Notes

There are a few things to remember when building a website for the iPhone:

1. It’s a iPhone they are all the same, no multi browser checking, if it works in one it will work in them all! If only all web development was like this!
2. There is no :hover pseudo class in CSS
3. Keep images and JavaScript to a minimum, you don’t want to wait for ages for images/JavaScript to download.

Related posts:

1. If the web was smaller
2. Building JavaScript Widgets
3. JavaScript Halloween Effects

See @BenjaminEllis fab photo’s of RDGTwestival http://bit.ly/sLowO

N.B. You can still buy the T-shirts.

Related posts:

1. Reading Twestival
2. Twitter T-Shirt Design