Twitter Design Guide by Overdrive Interactive


Published on

This practical guide will teach you all you need to quickly wrap your head around Twitter design specifications and best practices. The guide includes the six major elements of Twitter design, mobile considerations, visual examples and more. To download this document as a PDF, click on this link: .

Overdrive Interactive is an award-winning Boston-based digital marketing agency that helps leading companies compete and win in the online space. Founded in 2001, the agency has developed into an integrated digital shop that delivers brand building, customer acquisition and lead generation programs utilizing search marketing, social media marketing, online media buying, analytics and world class creative services.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

Twitter Design Guide by Overdrive Interactive

  1. 1. 1.Get the
  2. 2. 2.OverviewThis presentation is for marketers who are interested in learning about Twitter design.Included are the essential design elements of the Twitter channel and their specifications.Get the
  3. 3. 3.The major elements covered in this presentation are:+ Profile photo+ Header+ Bio+ Background image+ Background color+ Link color+ Mobile considerationsGet the
  4. 4. .Profile ElementsGet the
  5. 5. 5.Profile PhotoThe profile photo appears at the top of the page on theheader image and in your Twitter feed (timeline).Specs / Best Practices+ Dimensions: 128 pixels wide x 128 pixels tall+ File size: 700 KBTwitter will stretch and shrink images that are improperlysized; this could decrease the quality. We recommendcreating a high quality image that is exactly 128 pixelswide x 128 pixels tall.Get the
  6. 6. 6.HeaderThe Twitter header appears at the top of the Twitter page.Specs / Best Practices+ Dimensions: 1252 pixels wide x 626 pixels tall+ File size: 5 MB (maximum)This area can be styled with a header image of your choice. If no header image isselected, Twitter will use their default black fabric pattern. The Twitter header will havewhite text overlaid on top. Make sure the image itself is dark enough and does notcontain too much detail that would leave the text illegible. Twitter automatically adds ablack gradient to header images to remedy the legibility issue, so make sure you factorthat into the color scheme.Get the
  7. 7. 7.BioThe bio will be placed on top of your header image. You are able to include a biothat will display your name, location, a description and URL.Specs / Best Practices+ The bio needs to be 160 characters or less.+ The URL and location are separate inputs in your settings.Get the
  8. 8. 8.Background ImageSpecs / Best Practices+ Dimensions: 1600 pixels wide x 1200pixels tall+ File Size: 800 KBWhen choosing a Twitter background, youhave two options:+ Default background–requires no design+ Custom backgroundDEFAULT BACKGROUNDThe default setting requires no design.Choose from a selection of themes.Get the
  9. 9. .Creating a Custom BackgroundGet the
  10. 10. 10.Custom BackgroundLeft and Center vs. Right AlignedBefore designing, you must choose an alignment.There are three ways to align your background:+ Left (recommended)+ Center+ Right (not recommended)Overdrive recommends left and center alignmentto avoid any scrolling issues and minimize the riskof images being obscured by the browser window.We also find center alignment acceptable.Therefore, right alignment will not be covered inthis section.Get the
  11. 11. .Creating a Custom Background- Left AlignedGet the
  12. 12. 12.Left Aligned (Recommended)If your background contains important sidebar information, it will always be anchored to thetop left corner. The left aligned treatment is our recommendation.Specs / Best Practices+ Dimensions: 1600 pixels wide x 1200 pixels tall+ File Size: 800 KBSide information or images you want visible will fit along the left side between66 pixels and 194 pixels wide (size suggested by Twitter).Get the
  13. 13. 13.Design for Left AlignedWhen using a custom image as a background, dither or fade along the right and bottomedge of the image and match it to the selected background color (see backgroundsection). This allows the edges to blend with the background and create a seamlesseffect.Get the
  14. 14. .Creating a Custom Background- Center AlignedGet the
  15. 15. 15.Center AlignedA centered background is Overdrive’s second recommendation after left aligned. Thedifference is the background image will always be centered along with the profile pageregardless of browser width. This allows you to display information and graphics alongboth sides of the page.On a 1600 pixel wide image, each content area needs to begin 188 pixels from the edgeof the background image and extend to 194 pixels wide. This will leave a 836 pixel widespace in the middle to accommodate your profile.Get the
  16. 16. 16.Design for Center AlignedOnce the browser expands past 1600 pixels wide x 1200 pixels tall, the edges of acentered background will show. Apply the same dithering/fading treatment to the left edgeof the image as well as the right and bottom for the same seamless effect.Get the
  17. 17. .Background/ Link ColorGet the
  18. 18. 18.Background ColorThis section applies to all alignment settings. Once the browser expands past 1600 pixelswide x 1200 pixels tall, the edges of the background image will show. To keep aseamless design, the background color of the page (which can be adjusted in the settingspanel) must match the edges of the background image.Enter a color code that matches the edges of the background image (see below).Get the
  19. 19. 19.Link ColorThe final step is to select the color for the links in your Tweets.Get the
  20. 20. .Preparing Design for Mobile DevicesGet the
  21. 21. 21.Mobile ConsiderationsIf the above specs/best practices are conformed to, Twitter’sresponsive layout will typically present your design properly in anymobile or tablet environment. However, Overdrive highlyrecommends a quality control process to test your designs in bothIOS (Apple) and Android (Google) devices. Be sure to view yourTwitter profile in both the app and the browser environments.Below are some other resources that you can use to test yourTwitter designs:+ The Firesizer for Firefox – This simple add-on shows up inthe bottom status bar of the Firefox browser. Not only does itshow you the current dimensions of your browser window, butright-clicking the resolution lets you see a pre-defined browsersize. Your window will be resized as soon as you select yourchoice for the screen dimensions. You can also customize theextension to add your own pre-set sizes.Get the
  22. 22. 22.Mobile Considerations Continued+ Window Resizer for Chrome – This extension shows up in theChrome toolbar. Clicking the button lets you select from a dropdownlist of various browser sizes or device types. You can customize thelisting and it is easy to use.+ ResizeMe for Safari – This lets you quickly change the size ofyour browser window. It works as a toolbar button, and clickingthe button can either auto-change the size to a selection ofyour choice or give you the option to select various sizes.For more information on customizing your profile design, visitthe Twitter help center: the
  23. 23. .Thank YouSocialize with us:Like us: us:Call: the