So you may have noticed twitter recently tweaked its user interface design, this got us around to thinking that we could use some of that screen real estate for a bit of extra marketing for our business translation service.
It turns out we were a bit late to the party, many companies are already adopting the idea. You may have seen a few profiles that place extra information in their twitter background or design their image to fit around the feed, have you ever wondered how its done? We can show you the ropes, to do it accurately you need a template. This removes much of the trial and error out of getting things lined up as intended.
If you haven’t come across this idea before, you visit our twitter page where you can see the kind of thing we mean (just a sample for the time being).
In the interests of goodwill we thought we’d share the knowledge gained (and a custom template) for doing this. A big shout needs to go out to John Souza & Andrew Macarthy who’s sites provided most of the information we used, if you’d rather build your own template from scratch just follow either of their instructions.
Getting started with the twitter background template
First you need to understand that because of the way twitter works and the number of different screen sizes people use for viewing the internet, you cant design a perfect solution. There will be a proportion of visitors that will not be able to see your background as you intend, but what you can do is design for the majority.
For the sake of argument (as results vary depending where you look), the most common desktop screen resolutions are 1024×768, 1366×768, 1280×800, 1920×1080
You will need some experience of image editing programs such as Adobe Photoshop to properly make use of this template, so if that’s not your thing this might not be useful to you.
(The files are stored in a zip archive that you may require additional software to open, such as winzip)
Load either template (jpg or PSD) into your image editor.
The whole template is 1920×1200 in size, this is because there are very few people using larger resolutions at present (less than 1%). As you can see the middle area is taken up by the twitter feed and other information boxes. This remains the same size regardless of screen size (892px wide) and is always centred in the browser.
The green boxes represent the viewable background area for different resolutions. According to the statistics 1366×768 & 1280×800 account for the most common screen resolutions overall. With this in mind you should ensure that any information you really want to be seen is within these areas.
If you want to be even more precise, ensure that this information is placed within the dotted red lines as it is likely to be visible to around 50% (the most possible as of 2014) of visitors using desktop machines.
Place your imagery over the template making sure to keep key information in the highlighted areas. Don’t neglect your design for the bigger resolutions though, ensure it fills the entire template to have the best overall effect.
When you are happy with your design save it as a Jpeg and upload the entire image to twitter via:
Cog icon (top right) > Settings > Design >Change background – Important: make sure you change ‘background position’ to ‘Centre’ or the design will not position reliably
That’s all there is to it. Feel free to share this page with your friends & make sure to let us know if it helped you in the comments.