Tweetbot and the updated Twitter Display Guidelines

Update: This post seems to be getting a lot of attention for some reason. Let me just clarify a few things. Tweetbot was updated a few days after this was published, and many of the changes below have been implemented. Others have not, and I suspect that Twitter will probably not care enough to say anything. Specifically, some of the display options like timestamps and username display style are optional in Tweetbot, even though they are specifically required to look a certain way by Twitter. The branding note in the last section seems to have been ignored entirely. There is no Twitter logo anywhere adjacent to the Timeline. Again, I don’t think Twitter will make a big fuss over it.

 

Per the above request, I’ve decided to make a list of all of the user-facing changes that will need to be made to one of the most popular Twitter clients on the market to comply with Twitter’s latest demands. I’m only covering the iPhone version here, but most changes will apply to the iPad and Mac versions as well. These changes must be made by March, 2013.

This list is by no means guaranteed to be exhaustive or 100% accurate, but to the best of my knowledge is fairly complete and accurate. What I won’t be covering here is changes that only apply to the backend and don’t impact users at all. I’ll go through section-by-section of the Display Guidelines.

Also, In case you’re wondering why I keep capitalizing “Tweet” in this post, it’s because that is also required by the Display Guidelines. I know, I know: ugh.

1. Tweet Author

a. The author’s name and @username should be displayed on one line horizontally or stacked one above the other vertically, with the name first.
b. The @username must always be displayed with the “@” symbol.
c. The avatar must be positioned to the left of the name, @username, and Tweet text.

No more name display options

Currently Tweetbot lets you show the name of a Tweet’s author one of two ways: their full name (Mike Beasley) or their username (@MikeBeas). The iPad and Mac versions also include a third option that shows both in the form of “Mike Beasley @MikeBeas.” Only third option is allowed by Twitter in the new Display Guidelines. The other two will need to be removed.

Right-side avatars are going away

As dictated by section 1c, avatars must appear on the left side of the Tweet content. Currently Tweetbot shows avatars for your own posts on the right, making it easier to quickly distinguish your own posts and follow conversations. Sadly, this is going away forever.


2. Tweet Actions

a. Reply, Retweet and Favorite Tweet actions must always be available to the user when interacting with the Tweet on the timeline. e.g., select, hover, touch, swipe.
b. For applications on mobile platforms, you may choose to link the entire Tweet area to the Individual Tweet within your app or on Twitter to provide users access to Tweet actions.

No changes needed


3. Tweet Timestamps

a. Tweet timestamp should be displayed in the top right corner.
b. For Tweets that have been sent in the last 24 hours, use the short form timestamp relative to the current time, for example “20s” for a Tweet sent 20 seconds ago, “3m” for 3 minutes ago, “5h” for 5 hours ago.
c. Tweets older than 24 hours should show a short form date including the day and month, e.g., “6 Jun”.

“Long form” dates are no longer allowed

There is currently an option in Tweetbot that allows you to show long-form timestamps on the timeline. This option will have to be removed.


4. Tweet Permalink

1. The Tweet timestamp must always be linked to the Tweet permalink.
2. For applications on mobile platforms, you may choose to link the entire Tweet area to the Tweet permalink.

Timestamps will now be links

Currently timestamps are too small to tap. This is actually true even in Twitter for iPhone. However, both Tweetbot and the official Twitter app will need to be updated to make tapping on the timestamp open the full tweet view. Because section 4a says “the timestamp must always be linked to the Tweet permalink” (emphasis mine), there is no exception for cases where the timestamp is too small to tap. Section 4b provides an alternative where the entire Tweet body can be tapped to open the full Tweet detail view, but regardless of whether section 4b is implemented in any given client or not, the timestamp must also be linked to the full Tweet URL.


5. Retweet Indicator

a. If the Tweet being displayed is a Retweet, the name of the user who Retweeted it and the Retweet icon must be displayed above or under the Tweet text. e.g., “Retweeted by Josh Brewer”. The name should link to the the Retweeting user’s profile, unless your application is displaying Tweets on a mobile platform that has clear physical or technical limitations.

No changes needed


6. Timeline Integrity

a. Tweets that are grouped together into a timeline must not be rendered with non-Twitter content. e.g., comments, updates from other networks.

No changes needed


7. Branding

a. It must always be clear to the viewing user that they are looking at a Twitter timeline, and that the content is from Twitter.
b. The Twitter logo must always be displayed directly adjacent to the timeline (e.g., top of the timeline).

More in-app Twitter logos

Section 7b says that the Twitter logo must always be present on the timeline page and in some way directly connected to it. In Twitter for iPhone that means putting a Twitter logo in the bar across the top of the Timeline view. This doesn’t seem to apply to Mentions or other views, as Twitter for iPhone does not include the logo on those pages, and this section of the Display Guidelines is a bit vague on what qualifies as a “timeline.”

Section 7a is even more ambiguous. Who decides what is and isn’t “clear” to someone? I have a feeling this will be further leveraged by Twitter in the future to combat unique display styles that may not necessarily break any of these other rules.


8. Linking to Twitter

When linking from an avatar, name, @username, Tweet entity, Tweet action, Tweet permalink or the Twitter logo, you must use one of the methods below when linking:

  1. Link directly to the correct twitter.com URL e.g., https://twitter.com/jack/statuses/20
  2. Use Web Intents

However, for linking an avatar, name, and @username, hashtag, you may also choose to link to an internal representation within your application. However, this internal representation must have a link back to the core experience on twitter.com or an official Twitter client in some manner.

“View on Twitter” buttons

This section mandates the addition of a button on each user profile, Tweet detail view, or hashtag search results page that leads to the equivalent page on Twitter’s website or the the official Twitter app.


I should mention that there are some other rules, which I can’t find now, about not being able to remove content from a feed. In Tweetbot’s case, this could potentially be the end of their comprehensive mute filters.

There is also a rule that no new Tweet actions may be added to Tweets in the timeline. It is very likely that this means the “Award Tweet of the Day” button will be removed. I’m not sure about the option to Retweet something from another account, but that’s also possible. Emailing, translating, viewing a Tweet in Favstar, and potentially even copying the URL to a tweet will all possibly need to be removed as well. I’m not sure about the last one, but the rest will almost certainly need to be moved to another location separated from the regular “Tweet actions,” or removed entirely.

So there you go. A fairly comprehensive guide to what’s changing for you in the upcoming version of Tweetbot.