Twitter Design Guide (April 2014 Revision)


Published on

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:

Published in: Social Media
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Twitter Design Guide (April 2014 Revision)

  1. 1. OVERDRIVE INTERACTIVE | 617.254.5000 | WWW.OVRDRV.COM Twitter Design GuideSpecs and Best Practices: April 2014 Revision
  2. 2. © OVERDRIVE INTERACTIVE | 2014 | 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. 3. © OVERDRIVE INTERACTIVE | 2014 | 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. 4. © OVERDRIVE INTERACTIVE | 2014 | 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. 5. © OVERDRIVE INTERACTIVE | 2014 | 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. 6. © OVERDRIVE INTERACTIVE | 2014 | 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. 7. © OVERDRIVE INTERACTIVE | 2014 | 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. 8. © OVERDRIVE INTERACTIVE | 2014 | 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: Visit Us: Like Us: Follow Us: Download this white paper: