OVERDRIVE INTERACTIVE | 617.254 .5000 | WWW.OVRDRV.COM

Twitter Design GuideSpecs and Best Practices:

April 2014 Revision

© OVERDRIVE INTERACTIVE | 2014 | ovrdrv.com 1

Twitter Design GuideThe major elements covered in this document are:

OverviewThis guide was written for social media users – both marketers and individuals – who are interested in learning

about Twitter design. Included are the essential design elements of the Twitter social media channel and their

specifications.

Originally released in June 2013, this guide has been updated to reflect the new design features that Twitter

announced and began to implement in April 2014. The most important aspects of the April 2014 redesign are

the responsive design of individual Twitter profiles and a large header image that is similar to the cover images

featured on Facebook profiles and pages.

+ Profile image

+ Header

+ Bio

+ Background image

+ Background color

+ Link color

+ Mobile considerations

QUICK REFERENCE ASSET CHECKLIST SIZE FILE SIZE

PROFILE IMAGE 400 pixels wide x 400 pixels high 2 MB (maximum)

HEADER IMAGE 1500 pixels wide x 500 pixels high 5 MB (maximum)

BIO 160 characters or less N/A

BACKGROUND IMAGE 1600 pixels wide x 1200 pixels high 2 MB

Profile Image

Description

Twitter Dashboard

Header Image

© OVERDRIVE INTERACTIVE | 2014 | ovrdrv.com 2

Profile ImageYour profile image appears both near the bottom left-hand corner of

the header image page and at the top of the page, just to the left of

your tweet feed on your homepage.

Specs / Best Practices

+ Dimensions: 400 pixels wide x 400 pixels high

+ File size: 2 MB (maximum)

Twitter will stretch and shrink images that are improperly sized, which

could decrease the quality of your chosen Image. We recommend

creating a high-quality image that is exactly 400 pixels wide x 400

pixels high.

Header ImageYour Twitter header appears at the top of your Twitter page.

Specs / Best Practices

+ Dimensions: 1500 pixels wide x 500 pixels high

+ File size: 5 MB (maximum)

This area can be styled with a header image of your choice. If no header image is selected, Twitter will use a

default solid-colored pattern that reflects your “link color.”

400 pixels

500 pixels

1500 pixels

400 pixels

© OVERDRIVE INTERACTIVE | 2014 | ovrdrv.com 3

Bio & Account InfoThe bio and account information is the section of your Twitter profile that allows you to tell the world a little

about yourself. It appears just under the profile image on the left-hand side of your Twitter profile page. You are

able to provide your name as you would like it displayed, a bio that serves as a brief description of your account

(in 160 characters or less), your location and a live URL (leading to your website, blog or whatever other site you

choose). Twitter automatically pulls the month and year you joined the social network, and displays that data

below your name, bio, location and URL.

Background ImageAs of the April 24, 2014 release of this guide, limited information

has been released about the future of background images for

Twitter profiles. Previously, each individual user’s background

image was visible on his or her main profile page, and remained

static even when scrolling to the bottom of the page. Now, users

may still select a default or custom background image, but it is

visible only in specific instances. Individual users will still see their

own background image when on their own Twitter homepage, on

their Notifications page and on their Discover page. As of April

2014, however, the background of all Twitter profiles appears as

an uneditable grey, yet when any individual tweet is clicked, a new

window is opened that displays that tweet in front of the custom

background of the user who wrote that tweet.

Specs / Best Practices

+ Character limit: Your bio may be

no longer than 160 characters.

+ If you have remaining characters left

in your bio, live links can included in

this section.

Whether default or custom, each user’s chosen background image still shows up on his or her Twitter homepage, Notifications page and Discover page.

© OVERDRIVE INTERACTIVE | 2014 | ovrdrv.com 4

DEFAULT BACKGROUND

The default setting requires no design. Choose from a selection of themes (see below).

When choosing a Twitter background, you have two options:

+ Default background–requires no design

+ Custom background

Before the April 2014 design update, each user’s chosen background image was displayed on his or her profile.

With the April 2014 design update, the background of all Twitter profiles was changed to an uneditable solid grey.

When clicked on to expand, all individual tweets are displayed in front of the custom background of the user who wrote the tweet.

Specs / Best Practices

+ Dimensions: 1600 pixels wide x 1200 pixels high

+ File size: 2 MB

© OVERDRIVE INTERACTIVE | 2014 | ovrdrv.com 5

Left vs. Center vs. Right Aligned

Before designing a custom background, you must choose an alignment.

There are three ways to align your background:

+ Left (default)

+ Center

+ Right (not recommended)

Background images remain left-aligned by default, and may be manually switched to center- or right-aligned. To

the best of our knowledge, Twitter has not yet released information about the future of background images, as

of April 24, 2014.

CUSTOM BACKGROUND

Background Color This section applies to all alignment settings. Once the browser expands past Twitter’s standard 1600 pixels

wide x 1200 pixels high, the edges of your background image will show. To keep a seamless design, the

background color of your page (which can be adjusted in the settings panel) must match the edges of your

background image.

Enter a color code that matches the edges of your background image (see below).

Theme Color The final step is to select the color for the links in your tweets. Twitter calls this the theme color.

© OVERDRIVE INTERACTIVE | 2014 | ovrdrv.com 6

If the above specs and best practices are conformed to, Twitter’s responsive

layout will typically present your design properly in any mobile or tablet

environment. However, Overdrive Interactive highly recommends a quality

control (QC) process to test your designs on both iOS (Apple) and Android

mobile (Google) devices. Be sure to view your Twitter profile in both the app and

the browser environments.

Below are some other resources that you can use to test your Twitter designs:

+ Firesizer for Firefox – This simple add-on shows up in the bottom

status bar of the Firefox browser. Not only does it show you the current

dimensions of your browser window, but right-clicking the resolution lets

you see a pre-defined browser size. Your window will be resized as soon as

you select your choice for the screen dimensions. You can also customize

the extension to add your own pre-set sizes.

+ Window Resizer for Chrome – This extension shows up in the Chrome

toolbar. Clicking the button lets you select from a dropdown list of various

browser sizes or device types. You can customize the listing and it is easy

to use.

+ ResizeMe for Safari – This lets you quickly change the size of your

browser window. It works as a toolbar button, and clicking the button can

either auto-change the size to a selection of your choice or give you the

option to select various sizes.

For more information on customizing your profile design, visit the Twitter Help

Center, and be sure to check Twitter’s official blog for the latest information

about changes and updates made to the channel.

Mobile Considerations

© OVERDRIVE INTERACTIVE | 2014 | ovrdrv.com 7

About OverdriveOverdrive Interactive is a digital marketing agency based in Boston that helps clients grow their businesses with

highly creative and measurable digital marketing programs. We specialize in eliminating the blurry line between

online media, search engine marketing and cutting edge technology to create social media marketing platforms

and campaigns that encourage engaging experiences, create lasting consumer connections and drive profitable

customer relationships.

DIGITAL MARKETING SERVICES

+ Social Media Marketing

+ Search Marketing (SEO and SEM)

+ Online Media Planning, Buying and Management

+ Website and Application Development

+ Digital Creative Services

+ Inbound Marketing

+ Email and Marketing Automation Management

NEED HELP WITH YOUR DIGITAL MARKETING?

Take action and see why some of the world’s leading brands turn to Overdrive Interactive to launch, manage

and measure their online marketing channels:

Call Us: 617-254-5000

Email Us: help@overdriveinteractive.com

Visit Us: www.ovrdrv.com

Like Us: www.facebook.com/overdriveinteractive

Follow Us: www.twitter.com/ovrdrv

Download this white paper: www.ovrdrv.com/twitter-design-guide