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!