Transcript

Social Media Spec Guide

SOCIAL MEDIA SPEC. GUIDE FOR CONTENT DESIGNERS



THE ONLY DIMENSIONS YOU NEED TO KNOW IF YOU ARE DESIGNING CONTENT



f g+ in YouTube



f FACEBOOK



23 px

210 px



COVER PHOTO 851 x 315 px



PROFILE PICTURE

180 x 180 npx

(displays as 160 x 160 px)



658 px



APP IMAGE

111 X 74 PX



TIMELINE IMAGE PREVIEW 403 x 403 px

- View in lightbox up to 960 x 720 px

- Maximum upload 2048 x 2048 px



NEWSFEED SHARED IMAGES

- Displays as 398 x 296 px, 320 x 320 px and 296 x 398 px



HIGHLIGHT POST/MILESTONE 843 x 403 px



TWITTER



90% VISIBLE - First 78 px



67% VISIBLE - Next 204 px



43% VISIBLE - Next, nextt 247 px



21% VISIBLE - Remaining 284 px



SIDEBAR

(scrolls away)

330 px



219 px



81 px



PROFILE PICTURE 81 x 81 px

HEADER IMAGE 520 x 260 px



240 px



TOTAL BACKGROUND SPACE 2560 x 1600 px



GOOGLE+



COVER IMAGE

Min: 480 x 270 px

Recommended: 960 x 540 px

Max: 2120 x 1192 px



PROFILE PICTURE & INFO SPACE 865 x 120 px

(centered horizontally)



PROFILE PICTURE 120 x 120 px

(uploaded as 250 x 250 px)



INITIAL PROFILE DISPLAY 160 px high



in LINKED IN



PROFILE PICTURE 100 x 60 px



COVER IMAGE

646 x 220 px



YouTube YOUTUBE



TV DISPLAY 2560 x 1440 px

(recommended upload size)



120 px



TABLET DISPLAY

1855 x 423 px



TEXT & LOGO SAFE AREA

1546 x 423 px



PROFILE PICTURE

100 x 100 px



MAX DESKTOP DISPLAY

2560 x 423 px

Social Media Spec Guide

shared by ashleighlay on Aug 12, 2013 in Social Media

34,249 views

161 faves

161 shares

14 comments

* Now out of date! - see: http://visual.ly/designing-content-social-media* The only dimensions you need to know if you are designing content for social media.
Category: Social Media

Publisher:

Raidious

Designer:

Ashleigh Lay
Did you work on this visual? Claim credit!

Embed Code

Embeded for hosted site:

Click the code to copy
<div class='visually_embed'><img class='visually_embed_infographic' src='https://visual.ly/node/image/82506?_w=540' alt='Social Media Spec Guide' /><div class='visually_embed_cycle'><span>by </span><a target='_blank' href='https://twitter.com/AshleighLay?utm_source=visually_embed'>ashleighlay</a>. <br/></div><script type='text/javascript' src='https://a.visual.ly/api/embed/82506?width=540' class='visually_embed_script' id='visually_embed_script_82506'></script><p> From <a href='https://visual.ly?utm_source=content-embed&utm_medium=embed'>Visually</a>.</p></div>

Embeded for wordpress.com:

Click the code to copy
<div class='visually_embed'><iframe width='1' height='1' style='width: 1px !important; height: 1px !important; position: absolute;left: -100px !important;' src='https://visual.ly/track.php?q=https://visual.ly/community/infographic/social-media/social-media-spec-guide?action=likes&slug=communityinfographicsocial-mediasocial-media-spec-guide?action=likes'></iframe><a href="https://visual.ly/community/infographic/social-media/social-media-spec-guide/?utm_source=visually_embed"><img class='visually_embed_infographic' src='https://visual.ly/node/image/82506?_w=540' alt='Social Media Spec Guide' /></a><div class='visually_embed_cycle'><span>by </span><a target='_blank' href='https://twitter.com/AshleighLay?utm_source=visually_embed'>ashleighlay</a>. <br/></div><p> From <a href='https://visual.ly?utm_source=content-embed&utm_medium=embed'>Visually</a>.</p></div>
Customize size