Twitter’s new design cuts out marketing messages: redesign your background now

Twitter users who have custom messages in their Twitter backgrounds are suddenly seeing their messages chopped off or no longer visible at all, thanks to the wider width of the page on the new Twitter layout. The old width of the Twitter page had been static pretty much since day 1, and millions of people customised their page backgrounds accordingly, using the extra space on the sides of the floating content panel to display marketing messages, web addresses, email addresses and more. The new Twitter design being gradually rolled out right now is much wider, meaning many messages and images that were previously visible are no more.

Variable width = 20-67% less visible background messages

To complicate matters further, the width of the new Twitter content panel is now variable depending on what resolution your monitor is set to. Users who have a monitor resolution of 1024 pixels wide (aprox 23% of the population*), can now only see a small 48pixel margin outside the main content panel, meaning any messages are pretty much hidden entirely. Previously, these users could see nearly 3times more of the background image (130 pixels).

A small majority of the population (28%) have their monitors set to 1280 pixel resolution. This is the width that most designers used when creating Twitter background images. They banked on the fact that users would see around 180 – 250 pixels worth of the background, depending on which browser they use, and how it’s set up. The bad news is that Twitter’s new content panel expands to a whopping 1040pixels wide if your monitor is set to 1280 resolution or above. This means that users can now only see a measly 120 pixels of the background image: a reduction of more than half on some browsers. And of course that’s just on one side: while most backgrounds were designed to show messages on the left side only, some clever designers used the right side border to show things, too.

Why did they do that?

I can understand why Twitter have made this move: resolutions are getting higher and higher, and 27% of the population have their monitors set at resolutions higher than 1280 wide. Twitter are designing for the future, when most of us will have high resolutions. But the annoying truth is that today, more than half of the people who view Twitter pages will see a lot less of your pretty custom background than they did before.

So how can I fix my Twitter background image?

What can you do if you are one of the millions who have a custom background that’s no longer being seen by half of your audience? The easiest way to fix (part of) the problem is to simply reduce the scale of your background until your important messages fit within a 120 pixel space on the left. This will mean that the 28% of people who use 1280 as their resolution can see it. Sadly, this doesn’t help the 23% who use 1024 resolution. It’s pretty unlikely that your font size will be visible if you scale down far enough for things to fit within the 48 pixels that 1024 users can see, so the only way to get around that issue is to make a new background image.

My top tips for backgrounds that work with the new Twitter design:

• Type your most important message vertically, within a 48 x 500 pixel space (measuring from the top left). Almost everyone will be able to see this. Your brand name, logo or URL should go here if you want the maximum number of people to be able to see it.
• Use the space up to 120 x 700 pixels to place secondary messages such as email address, blog address, cross promotions or anything else you want to convey.
• Make use of Twitter’s new translucent sidebar area on the right: remember that whatever is in the background will show through this transparent area (on non-IE browsers). This is a great place for large, impactful simple shapes such as emblems or logos. Don’t put text or anything small or fiddly on the right because it will look cluttered.
• Remember your high-res users by making a really wide image. You don’t need to put anything aside from simple colours on the far right, but make sure it ends gracefully (with a fade out or something). Also remember that high-res users will also see a lot more of the page vertically, too – ensure your coloured background stretches far enough vertically and doesn’t just end abruptly. NOTE: At present, it seems Twitter doesn’t like images larger that 2600 pixels wide, so it’s scaling things down when they are larger than that.
• Don’t put anything important in the far right or far bottom, but you can use this space for a bit of fun to give your high-res viewers a treat. If your monitor is set to a high resolution, have a look at my Twitter page to see what I mean.

With thanks to Stephen Fry and Pete Cashmore / Mashable… hope you don’t mind me using you as examples

*Monitor resolution statistics from W3Counter.

Updated 28 September following Hugh’s comment: removed scrolling background mention.