Twitter recently launched several features to make user profiles more engaging, including a new header image. To take advantage of these additions, Duke’s social media team designed new graphics to use for our Twitter background and header images. Here’s a walkthrough of the approach.
the new @DukeU experience
The header:
The header is a new feature Twitter introduced in September that gives users an additional element of customization and personal branding. However, there are a few constraints:
Size:
Twitter recommends 1200x600px with a maximum file size of 5Mb.
Regardless of what file size you are working with, your final product should have a 2:1 aspect ratio.
Effects:
Twitter will automatically apply a darkening gradient to your header image, and layer white text over that gradient.
Execution:
our recently redesigned undergraduate admissions site
Though the size constraints actually give users a great degree of freedom, allowing users to upload hi-res files, we kept our header simple, which gave us more flexibility when designing the background. More on that later.
For inspiration we referred to the subtle, but graphically intriguing backgrounds on the new Duke Undergraduate Admissions site, and designed the header image shown below:
Twitter also applies a wide white stroke to your avatar and layers that over your header as well. To undercut the off-putting boldness of this effect, we changed our avatar to the blue on white version of our logo. This way the stroke appears to be a part of the image rather than a boundary constraining it.
The background:
Backgrounds are a bit trickier to deal with because different users will see different swathes of your image based on their monitor’s resolution and what browser they are using.
Size:
There are two kinds of boundaries to operate within. First, Twitter allows backgrounds up to 2048px wide (no height limit), with a maximum file size of 800KB. However, regardless of the background dimensions, viewers will only see what portions of it their monitor and browsers allow. While Twitter’s allowances tells us which perimeters we should design for, browser data dictates where we should place important content:
99% of Twitter visitors have at least a 1024px wide resolution. Twitter’s own content occupies 865px, so that leaves you with 132px (a pair of 66px gutters on either side of Twitter’s content) to work with. This is enough space for a logo or a brand name to descend down the side of the canvas, but doesn’t leave much room for other graphic elements.
85.4% of visitors have a 1280px or greater resolution. This gives designers 372px (194px on either side) to work with, and is the option we pursued. (Browser data from W3Schools Jan 2012)
Alignment:
Earlier, Twitter allowed backgrounds to be left-aligned only. This could be problematic for some designs since graphics were anchored to side of the user’s browser rather than anchored to the content, making the right-hand gutter functionless for incorporating further information. With the most recent update, users have the options to left-align, right-align, or center their background images. Centering allows users to make full use of both gutters, and also fixes design to your content.
The various background alignment options Twitter now offers.
Execution:
We created a 1920x1520px background at 72 ppi. We used the left gutter to create a banner 180px wide. For a the rest of the background, we used a high-resolution photograph.
Using a photo can present a few challenges. When using the header image feature, the user needs to be sure that the background and header don’t clash and compete with each other (or the profile photo) for the viewers attention. To negate this issue, we used a subtly patterned header, though the inverse is just as plausible – highlighting a photographic header and utilizing a clean graphic background. Combinations of dual photos or dual graphics work as well; it’s just a matter of finding visuals that compliment each other.
Additionally, because Twitter limits background images to 2048px in width, viewers with a browser resolution higher than this (or than your photo) will see empty canvas space on either side of the uploaded background. Popular solutions include having your background fade into whichever color you set as the background color (or utilizing a background that strongly features that color). However, since our background photograph features a wide range of colors, we selected a clean black from the Duke Style Guide to accentuate and showcase the photo.
A quick look at the 'Save for Web' panel in Adobe Illustrator. Key elements are highlighted.
Lastly, photos are typically much larger files than other kinds of graphics due to their color depth. Our final image was 7.6MB, well over the 800KB Twitter allows. To get our file size under this limit, we used Adobe Illustrator’s “Save for Web” feature to decrease the quality of the image.
By decreasing the file’s quality to 61%, we reduced the file size to 794.1K – right below the 800K mark – while introducing minimal artifacts. Naturally, a user can shift the balance the other way, in which image quality would be prioritized over photographic dimensions – it’s just comes down to what aspect the designer would like to optimize.
For those interested in adopting this background, we’ve provided the following resources:
Duke Social Media Twitter Background
Duke Social Media Twitter Header
Happy designing, and tweet on!
– Jonathan
