Well I’ve lost a good few hours of my life today pondering this question and trying to come up with guidance or a template to help others.

Basics

Let’s start with the basics, though. Instructions for customising the new Twitter profile are here.

Dimensions for new Twitter header and profile pictures

Photos can be in any of the following formats: JPG, GIF, or PNG. (Twitter does not support animated GIFs.) Recommended dimensions for profile photos are 400×400 pixels. Recommended dimensions for header photos are 1500×500 pixels. The maximum file size for the header image is 5MB.

New Twitter Desktop Layout

The new Twitter layout is designed for desktop/web viewing. I think they have missed something here, in that more and more people are using their smartphones for all their internet browsing. I’d guess that twitter is used more than average on mobiles. Surely that is what it was born for? The fundamental problem is you cannot easily get a good image that is going to work as well in a landscape viewing format and a portrait format. Facebook, Google+ and YouTube all have this tricky challenge for anyone interested in branding. You also need to take into account where the profile picture will be overlaid and also the colour contrast between the image and your overlaid text on the mobile formats.

So starting with the desktop browser view (by the way when I say desktop I mean laptop too, anything that isn’t a small phone/tablet). This is what mine looks like at the time of writing.

New Twitter profile design

How does it look on mobile devices?

Screenprint of mobile version of new twitter profileIt took quite a few iterations to get to this point. I was trying to make a template with boxes on where the profile image appeared in both the destop and mobile versions. But quickly I realised I needed to also put a box where the text overlays on the mobile version. The choices of text colour are only white or black and you change these (currently) in Settings, then Design tab and on desktop version scroll down to ‘Overlay’. In the official Android mobile app you can’t get to this setting as far as I can see. Edit profile only gives the option of changing the header image, and the text that appears with your profile ie name, location, web and bio. This is what the same profile as above looks like on my mobile app.

Already I think you will see how I have got my two red vertical lines as the outer limits of what is visible on the mobile (in portrait orientation). I only have one mobile phone so I can’t say what it looks like on an iPhone or if there is a variation within the other sizes of Android and Windows phones available.

I don’t ever look at Twitter on my phone in the landscape orientation but it does rotate on my phone so for completeness I looked at that. The header image dimensions appear to be the same, but you’ll see that in this orientation all of the profile text is overlaid and you can see what I mean about needing to think how that text looks. In the portrait orientation you have to swipe across to the second page to see the profile text.

Screenshot of new twitter profile in landscape view

Template Image

So that you can really understand what is happening with the lines, this is the actual image that I uploaded to the Twitter profile.

Header image uploaded to new Twitter profileNow you may see that some of the image is cropped from the top and bottom in the desktop version.

Desktop Home Page

The other place that you see the header image in the desktop version is when you look at the home page. This has the old background image but as far as I can see you only see that yourself, whereas in the old style that was what anyone looking at your profile page saw. But the header image in the middle column at the top is how it appears to others in any lists (see final image at the bottom of this post). This is what mine now looks like.

Screenprint of desktop view home page new Twitter layout

My Feedback to Twitter Designers

I see what you are aiming for but you have missed some things that need to be addressed. I think you should allow people to upload two header images – one that works for desktop view and a different one that works for mobile app view. But I imagine that would mean a fundamental redesign of the skeleton of Twitter and the API. Therefore I suggest that you need to make the desktop version the same dimensions as the mobile version (oh as it was in the old style!) or give people some better tools to be able to design for both environments. Also it is confusing about where you change things and in particular the overlay text colour option should be part of the ‘edit profile’ options not the setting>design options. The other aspect that really isn’t clear is what you are changing when you change the colour theme in the edit profile options. It would appear to just be the highlighting fonts and there seems to be no control of the background.

Alternative Template

If you want to include a logo or text I suggest that the only safe areas are where I have put text on my image. Here is another version with grey boxes in the no go zones where profile pictures and overlaid text appear.

Template for new Twitter profile header

Hashtags to follow up

If you want to see what people are saying about the new design search for these hashtags: #newtwitterdesign #newtwitterlayout #newtwitterprofile #newtwitter

Other blogposts on this subject

http://socialnewsdaily.com/35074/3-column-twitter-profile-dimensions-how-to-setup-header-and-profile-pic/

Please let me know in the comments if you come across any other useful references that I can add to this piece.

Final thoughts

If you opt for an abstract or plain header with no text or logo most of this becomes irrelevant  but also makes the new design changes pointless. And most of the time all people see of you is your tweets with your profile image and your profile text with your profile image if they are checking you in a list (eg followers or following).

Profile listing in Twitter Followers list

 

Advertisements