Updated to reflect the channel’s April 2014 redesign, this practical guide will help you quickly wrap your head around Twitter design specifications and best practices. This guide includes: - The six major elements of Twitter design - Mobile considerations - Visual examples Visit Overdrive active's website to download the PDF version of the Twitter Design Guide (April 2014 Revision) for free, from: http://www.ovrdrv.com/twitter-design-guide.

1. OVERDRIVE INTERACTIVE | 617.254.5000 | WWW.OVRDRV.COM
Twitter
Design
GuideSpecs and Best Practices:
April 2014 Revision

2. © OVERDRIVE INTERACTIVE | 2014 | ovrdrv.com 1
Twitter Design Guide
The major elements covered in this document are:
Overview
This 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

3. © OVERDRIVE INTERACTIVE | 2014 | ovrdrv.com 2
Profile Image
Your 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 Image
Your 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

4. © OVERDRIVE INTERACTIVE | 2014 | ovrdrv.com 3
Bio & Account Info
The 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 Image
As 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.

5. © 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

6. © 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.

7. © 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

8. © OVERDRIVE INTERACTIVE | 2014 | ovrdrv.com 7
About Overdrive
Overdrive 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