Your SlideShare is downloading. ×
Twitter Design Guide by Overdrive Interactive
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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 …

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. 1.Get the
  • 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.The major elements covered in this presentation are:+ Profile photo+ Header+ Bio+ Background image+ Background color+ Link color+ Mobile considerationsGet the
  • 4. .Profile ElementsGet the
  • 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.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.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.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. .Creating a Custom BackgroundGet the
  • 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. .Creating a Custom Background- Left AlignedGet the
  • 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.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. .Creating a Custom Background- Center AlignedGet the
  • 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.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. .Background/ Link ColorGet the
  • 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.Link ColorThe final step is to select the color for the links in your Tweets.Get the
  • 20. .Preparing Design for Mobile DevicesGet the
  • 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.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. .Thank YouSocialize with us:Like us: us:Call: the