New Twitter - A new look and functionality

Alexis Wilke's picture

Snap! Twitter Background ImageYou may already have tried the new Twitter, I have with one of my accounts1. I have to say that it is completely different! Well... the tweets are the same and your followers and people you are following... and the messages will be the same. I'm talking about the style and the way things work. It took me a week to get used to it.2

The biggest change is the width: it's twice larger! Yes, twice! (well... at least the right column.) That means the Tweeter output will fill most of your screen up. I suppose that they will keep the smaller view available for cell phones. But on my desktop, that's just plain BIG. In itself, it's not a problem, you get much more info on the screen. But...

The result is that now your background image will "break" (Our Snap! Websites Twitter background is shown on the left, see the result in our screenshots below.) Most people won't see much of it anymore when they are on the new Twitter. Although it is still there, unless the users have a really wide screen, but don't count on it. It will need to be changed...

On that one, I'm wondering how much research Twitter has done. It may be part of their plan of adding advertising interleaved with your tweets... (which I thought they started, but so far I've not seen any of those commercial messages anywhere!) So getting your crap out would be a good side effect3. (This is really my total speculation and I'm probably wrong... )

So... With the new interface you have a menu at the top to switch between your Home area, your Profile, and your Messages. I'll cover those below. (Click on the screenshots to see a large version that you can read!)

Home Area

Snap! Websites Twitter Home Page The screenshot on the right shows you the Snap! Websites Home Area. It includes the usual place to post a message, the messages of the people you are following (your timeline), and stats about your account, favorites, number of lists where you are listed, trends, people you might want to follow and the Twitter dictionary thing (I wonder if they will offer us different widget one day... Personally, I really don't care about their definitions and would not mind something more useful in that corner.)

An interesting new feature about the Home Area is the way to show the last few tweets of a person as you click on one of their tweets in your timeline4. It uses a technology called AJAX to get the data from Twitter and display it on the right side without having to reload a full page. You can see the result on the next screenshot. Obviously this action covers your stats that you probably don't need to see anymore anyway. (Note that the top-right corner has a close button, just in case...) This allows you to read many tweets in a row. Just click on each person's tweet box to read there other tweets.

Twitter Home showing tweets of the people you're followingNotice that as before you can mark tweets as favorites, you can retweet, and you can reply to the author with your own tweet. The links for those actions show up as you move the mouse over a message.

By the way, you may also have noticed how our Snap! Twitter logo looks like... It's mostly hidden by the new Twitter style! I guess I will have to change it with another background which is the picture of a mountain called Le bout du monde5.

Note that although the name of each Twitter accounts on the left is black, it is still a link that will take you to that person's account. This gives you the ability to quickly review someone's stats and to Unfollow them (but who does that, really?!)

Finally, at the top of the list of tweets, you can see a set of tabs. Those are used to switch between different lists:

  • Timeline - What I was just talking about, the tweets of the people you're following.
  • @Mentions - People talking to you via tweets
  • Retweets - 3 different kinds of retweets: by others, by you, and by others retweeting your tweets
  • Searches - a few of your last searches so you can go back to them immediately
  • Lists - lists that you created, lists that you follow and lists that are following you

This menu is definitively making things a lot easier to handle your tweeter account. Everything is in one place!

Profile

Twitter Profile PageThe Profile looks similar to your Home Area: on the left side you see your tweets and on the right side stats.

You can click on your tweets which gives you a page on the right side with your tweet in big at the top and others tweets below selected using keywords found in your tweets (especially if you used #something.)

Like the Home Area, the Profile has a new set of tabs to click to see different lists. By default, you see your Timeline: your latest tweets.

Click on Favorites to see the list of tweets you marked as favorites. Use your Favorites as Bookmarks.

The Following tab shows you the list of people you are following. There is still no way to sort the list in some random way of your choosing... (you know like alphabetical for instance!)

The Followers tab brings you to the list of your followers. There you can see the list of people you might want to follow, and you can interact with them by sending them a thank you for following us note or some similar public or private message. Note that when you click the + sign to follow someone listed in your Followers list, you see them appear under the Following stats at the top on the right side6.

Finally, there is a repeat of the Lists tab as found on the Home Area.

Private Messages

Twitter Private Message AreaThis part changes I like a lot. Before it was somewhat awkward since you could see the list of all your private messages, but clicking on one of them would send you to that person's account and you were likely to forget to come back and possibly missing sending some answers.

The new system works like the Home Area and your Profile: you can click on the message and it appears on the right side with the message and information about the person who sent the message.

That side page makes it very easy to answer your message right there: see the text area at the top of the message?

You still have the New Message button to send a message to your best friend (i.e. that guy whose @ name you know by heart!)

To delete a message, click on it, then hover the mouse over the message on the right side. At that time you see the usual Delete link with a little trashcan icon. Strangely, you'll have to look at the message before deleting it. I think you should also have a Delete link in the list just like with your tweets.

Weird things

URL change

The first weird thing I've noticed is the change in the URL. Instead of the domain name, a slash (/), and your name, they add a #!/ before your name as in:

http://twitter.com/#!/snapwebsites

I'm not too sure why they do that. Facebook is doing the same thing. It may have to do with AJAX because you can change things after a # character in the URL without having to go to a new page. Maybe one day I'll learn more about this one. Note that the old URL still works just as before and will most certainly continue to work for a long time (maybe forever!)

Settings

At the top-right of the screen, you will see your log in name and a drop-down menu. When you go to your settings, at this time, you see see the old interface. A bit of a surprise the first time you go there... but once you come back to your Home or Profile page, it reverts back to the new interface as expected.

So...

Do you use the new Twitter interface? What do you think of it?

Update 2010.10.9

Another problem in the new version, many of the transparent PNG images appear black. That must be a problem on the server since it is black on FireFox which handles PNG images as expected as is (without special CSS trick as for older versions of Internet Explorer.)

  • 1. Twitter, contrary to most social media systems, lets you own more than one account. In case you did not know, Facebook does not allow you have more than one account, even if you have multiple email addresses and they may delete ALL your accounts in case you create more than one.
  • 2. A side note: I could not revert my account back to the old look and feel. That menu option gave me an error. So know that you cannot just test the new look. You'll be stuck with it for a while...
  • 3. Just in case you don't notice, I italicized the word crap. What I mean is that this way they eliminate a certain amount of direct competition.
  • 4. Watch out... Each tweet still has different links that you can click. The text itself will take you to the new Tweet page on the side. The other links still have their usual function such as retweeting or visiting the user's account.
  • 5. Le bout du monde is French that means The end of the world.
  • 6. There is currently a bug in the Follow list. The + will not be changed to the expected checkmark until you reload the list.

Re: New Twitter - A new look and functionality

Hi Alexis,

I think it's not a bad idea :)
Thank you for your contribution

Kind Regards,

- Jefri Liu -

Re: New Twitter - A new look and functionality

Hi Jefri,

Thank you for the note!

Actually, if we had the option to center the background then I could make it work whatever the size of the screen (well... assuming your screen is wide enough to see the whole My-Status.net screen...)

Because that way I could place the logo over "Our Sponsors".

I would think that all you need to do (ha! ha!) is provide a flag that changes the class of the background. Then you can use 50% for the X position in the style sheet file.

Something like this:

  user-background-centered { background-position: 50% 0; }

That would be top!

Best,
Alexis

Thank you.
Alexis Wilke
http://snapwebsites.com/

Re: New Twitter - A new look and functionality

Alexis, Thank you for your nice article about New Twitter.
If I see, New Twitter only changes it's theme (template).
Twitter hasn't added new features, I think.
I like it's 'top menu' color line, Black! looks more professional.

I agree with you about how it's theme has taken more space and leave just a little space for background!
Oh, If you want to put your Snap! Logo, you could put it on the right side.
Place it with your .GIF or .JPEG background image (Le bout du monde).

For better performance, put your LOGO into your background image with parameters:
X position : between 702 pixel (left) - 939 pixel (right)
Y position : between 65 pixel (up) - 255 pixel (down)
just try it.. it match with computer wide screen. You could customize it by yourself.

Hm.. about profile URL, I also have no idea why they use characters # and ! .
But I'll learn it more..


- Jefri Liu -