New Twitter Backgrounds: 2 Custom Areas

With the layout of the new Twitter page come new dimensions, new behaviors, and new ways of sneaking artwork-based information about yourself out from behind Twitter’s new content box.

There are four measurements we can make right off the bat:

  • A 42-pixel-high black bar across the top, containing Twitter’s logo, a search box, and navigation menu. Not customizable.
  • A 21-pixel-high top margin between the black bar and the two-part content box. The background begins at the first pixel beneath it.
  • A 42-pixel-wide left margin between the content box and the edge of the window.
  • The left side of said content box, a fixed 540 pixels wide. It has an opaque white background, and contains the tweet-stream.
  • The right side of the same box, which varies in width from 380 to 500 pixels, as your visitor widens or narrows the browser window. The color is your choice and about 30% transparent, and contains a mini-avatar, tweet stats, Following and Followers, and a few other links. This content stops about 280 pixels from the bottom of the black bar.

On a large monitor, your visitor can stretch the browser window so the content box, a combined 1050 pixels wide, can float in the middle. But many of your viewers will have small monitors; a window showing as few as 1004 pixels in width (42 + 540 + 380 + 42) will still see everything without having to horizontally scroll. Regardless, the left margin may get above 42 pixels wide, but never less. Here’s Safe Area #1. Good for putting a line or two of text up the side. Better keep the depth limited to 600 pixels. Not much to work with.

But there’s another place to have some fun. The right half of the box, under the content. In your usual Twitter page, when you’re monitoring your own tweets, it’s full of all kinds of trends, lists, and items Twitter wants you to know. But in your profile, it’s all blank. If you put a well-contrasted photo of yourself, and select the fill color carefully, you can have a bigger photo than your avatar, or a different one. You could also put a logo, which I chose to do on my page. I suppose you could pick a white background and put black text behind it, letting size make up for the lowered contrast due to the fixed transparency. It’s up to you. Be careful, though: too much complexity will make the main page difficult to work with, for you.

The area starts 582 pixels from the left and 280 pixels down, and is 370 pixels wide. The most important part (like your head, if a portrait) should come within the top 300 pixels of height, but the rest of you can and should continue down, with no border. This is Safe Area #2. (The sneaky Safe Area.)

Hope that helps!

Similar Posts

4 Comments

  1. This is great information, Rick. One thing I want to know (and I’m not sure if the information is available yet), what does a profile look like if you aren’t logged in? I don’t think we’ll see that until it’s rolled out to 100% of the users.

  2. I’ll do a “Part 2” of this, measuring three more pages Twitter gives us:
    • that non-logged-in profile page to which you refer.
    • the page for a single tweet.
    • the page for a tweet that replies to someone else’s tweet, both of which are shown.
    Busy busy busy.

  3. Since the background is anchored to the left and the main Tweet area moves to remain centered as the monitor width increases, you have to be careful how you position anything in the transparent right sidebar or it will either be covered partially at some resolutions. Also, it needs to be further down than you’ve indicated. You need to look at your background without being logged in as yourself so you can see what I mean but on your profile page other people will see more stuff, like who you’re similar to, in the sidebar. Right now your name is covered by a bunch of text and at 1280×1024 is partially covered by the white part of the left tweet area.

Leave a Reply

Your email address will not be published.