Template for the New Twitter Layout – PSD & PNG
I’ve been able to play around with the new Twitter layout since March the 22nd, when I created a new account for a friend.
Since then I’ve been taking screen shots, measuring things and looking for any changes to the layout before publishing this new Twitter template. I wanted to see if the changes I was seeing were final or if the Twitter elves were still refining things…
Twitter Header Photo Dimensions are 1500×500
Update 4/24: The header photo area now gets taller as your screen gets wider. It’s trying to maintain the same 3:1 ratio but it doesn’t do it perfectly. In my tests, the buffer area in my template still works as a guide.
The header photo area starts at a height of 280px and grows to a height of 500px. Not sure if that’s the max height, but that still means that cover photo is being displayed in a 1920x500px window.
On my HD screen of 1920×1080, the top and bottom of the header (still) get cropped off. My recommended buffer zone is the 55px at the top and bottom of the graphic.
One nice thing is that the profile photo is now much larger, it is displayed at 200x200px compared to 73x73px on the “old” layout. Twitter does recommend that profile photos are 400×400 though.
The Transition will be painful
If you still have the old layout and have not updated your header yet, people with the new layout will see your header image but it will be cropped. Same for people viewing your “new” header photo through the “old” layout. You can see by the example here that large areas on the left and right are being cropped off when I’m looking at my new header on my mobile app (iOS).
Not only that, but with the new layout where the profile photo is off to the left, it only makes sense to have graphics that are centered in the space. Unless your profile is being viewed the “old” way, where your profile photo, handle and bio are right there in the center, covering up your banner.
To help withe the transition, I created a layer group you can turn on/off to see how your new 1500×500 header photo will look to someone who hasn’t had their account updated yet. I’ve also added editable name, handle and bio info for a realistic simulation.
New Mobile App Design
Luckily, I’ve seen that the mobile app for Twitter is getting a refresh as well, just no telling when. Check out this post by TechCrunch “Twitter Tests More Inviting Profile Designs On Mobile” for more details.
It will be nice when the mobile apps are updated to match the new desktop layouts.
What About the Twitter Background?
Although the new Twitter design seems to discard the backgrounds we’re all used to, it’s not so…
There is one instance (so far) where your Twitter background will be displayed. When someone is viewing a single tweet by itself.
H/T Hugh Briss @ Social Idendities.
The width of the tweet box is 640px wide. I am including a template for the background with my usual guides for screen widths in the download.
This is a golden opportunity to use the background to add additional information or branding and calls to action. Since someone will probably only ever see a single post unless you send them a link to it, you can probably feel safe using the Twitter background for specific campaigns… as always, you’re only limited by your imagination.
Hope you like the templates.
As always, leave your feedback in the comments.
Download The Templates – PSD & PNG
Simply enter your email address and the download link will be sent directly to your Inbox (we can only send you the download link if you enter a valid email address).