Embed Size (px)
DESCRIPTION
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: www.ovrdrv.com/twitterdesign . 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.
Citation preview
1
.
Get the guide:
www.ovrdrv.com/twitterdesign
2
.
Overview This 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 guide:
www.ovrdrv.com/twitterdesign
3
.
The major elements covered in this presentation are:
+ Profile photo
+ Header
+ Bio
+ Background image
+ Background color
+ Link color
+ Mobile considerations
Get the guide:
www.ovrdrv.com/twitterdesign
.
Profile Elements
Get the guide:
www.ovrdrv.com/twitterdesign
5
.
Profile Photo
The profile photo appears at the top of the page on the
header image and in your Twitter feed (timeline).
Specs / Best Practices
+ Dimensions: 128 pixels wide x 128 pixels tall
+ File size: 700 KB
Twitter will stretch and shrink images that are improperly
sized; this could decrease the quality. We recommend
creating a high quality image that is exactly 128 pixels
wide x 128 pixels tall.
Get the guide:
www.ovrdrv.com/twitterdesign
6
.
Header
The 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 is selected, Twitter will use their default black fabric pattern. The Twitter header will have white text overlaid on top. Make sure the image itself is dark enough and does not contain too much detail that would leave the text illegible. Twitter automatically adds a black gradient to header images to remedy the legibility issue, so make sure you factor that into the color scheme.
Get the guide:
www.ovrdrv.com/twitterdesign
7
.
Bio
The bio will be placed on top of your header image. You are able to include a bio that 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 guide:
www.ovrdrv.com/twitterdesign
8
.
Background Image
Specs / Best Practices
+ Dimensions: 1600 pixels wide x 1200 pixels tall
+ File Size: 800 KB
When choosing a Twitter background, you have two options:
+ Default background–requires no design
+ Custom background
DEFAULT BACKGROUND
The default setting requires no design. Choose from a selection of themes.
Get the guide:
www.ovrdrv.com/twitterdesign
.
Creating a Custom Background
Get the guide:
www.ovrdrv.com/twitterdesign
10
.
Custom Background
Left and Center vs. Right Aligned
Before 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 alignment to avoid any scrolling issues and minimize the risk of images being obscured by the browser window. We also find center alignment acceptable. Therefore, right alignment will not be covered in this section.
Get the guide:
www.ovrdrv.com/twitterdesign
.
Creating a Custom Background- Left Aligned
Get the guide:
www.ovrdrv.com/twitterdesign
12
.
Left Aligned (Recommended)
If your background contains important sidebar information, it will always be anchored to the top left corner. The left aligned treatment is our recommendation.
Specs / Best Practices
+ Dimensions: 1600 pixels wide x 1200 pixels tall
+ File Size: 800 KB
Side information or images you want visible will fit along the left side between
66 pixels and 194 pixels wide (size suggested by Twitter).
Get the guide:
www.ovrdrv.com/twitterdesign
13
.
Design for Left Aligned
When using a custom image as a background, dither or fade along the right and bottom edge of the image and match it to the selected background color (see background section). This allows the edges to blend with the background and create a seamless effect.
Get the guide:
www.ovrdrv.com/twitterdesign
.
Creating a Custom Background- Center Aligned
Get the guide:
www.ovrdrv.com/twitterdesign
15
.
Center Aligned
A centered background is Overdrive’s second recommendation after left aligned. The difference is the background image will always be centered along with the profile page regardless of browser width. This allows you to display information and graphics along both sides of the page.
On a 1600 pixel wide image, each content area needs to begin 188 pixels from the edge of the background image and extend to 194 pixels wide. This will leave a 836 pixel wide space in the middle to accommodate your profile.
Get the guide:
www.ovrdrv.com/twitterdesign
16
.
Design for Center Aligned
Once the browser expands past 1600 pixels wide x 1200 pixels tall, the edges of a centered background will show. Apply the same dithering/fading treatment to the left edge of the image as well as the right and bottom for the same seamless effect.
Get the guide:
www.ovrdrv.com/twitterdesign
.
Background/ Link Color
Get the guide:
www.ovrdrv.com/twitterdesign
18
.
Background Color
This section applies to all alignment settings. Once the browser expands past 1600 pixels wide x 1200 pixels tall, the edges of the background image will show. To keep a seamless design, the background color of the page (which can be adjusted in the settings panel) must match the edges of the background image.
Enter a color code that matches the edges of the background image (see below).
Get the guide:
www.ovrdrv.com/twitterdesign
19
.
Link Color
The final step is to select the color for the links in your Tweets.
Get the guide:
www.ovrdrv.com/twitterdesign
.
Preparing Design for Mobile Devices
Get the guide:
www.ovrdrv.com/twitterdesign
21
.
Mobile Considerations
If the above specs/best practices are conformed to, Twitter’s
responsive layout will typically present your design properly in any
mobile or tablet environment. However, Overdrive highly
recommends a quality control process to test your designs in both
IOS (Apple) and Android (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:
+ The 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.
Get the guide:
www.ovrdrv.com/twitterdesign
22
.
Mobile Considerations Continued
+ 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: https://support.twitter.com/articles/15357
Get the guide:
www.ovrdrv.com/twitterdesign
.
Thank You
Socialize with us:
Like us:
www.facebook.com/OverdriveInteractive
Follow us: www.twitter.com/ovrdrv
Contact us:
Call: 617.254.500
Visit:
www.ovrdrv.com/contact_us
Get the guide:
www.ovrdrv.com/twitterdesign
