Designing For Social Media Sharing Jordan Kasteler

DESIGNING FOR SOCIAL MEDIA SHARING JORDAN KASTELER

Proprietary, Confidential Information & Ideation Owned by Red Door Interactive

BENEFITS OF CONTENT PRESENTATION •  Credibility & Authority

–  Pre-Judgement

•  Increased Engagement –  Decreased Bounce Rate

•  Increased Visibility –  Social Shares –  Links

•  Search Result CTR –  Visual Search Engines (Google Instant Preview is Dead)

•  Portability –  Mobile Phone –  Tablet –  Wearable Device

@JordanKasteler

CONTENT STRUCTURE FOR SHARABILITY


CONTENT STRUCTURE FOR SHARABILITY •  Topics & Keywords •  Titles •  Headings •  Visuals •  Layout •  Length •  Lists •  Copy & Key Points

@JordanKasteler


TOPICS & KEYWORDS •  Don’t make keywords obviously stuffed or overly repetitive. •  Keywords in the title are the most important. •  Including relevant keywords within content is great for SEO. However, remember

that content should be geared towards creating content for the reader, not the search engines.

@JordanKasteler

Keyword-Based Optimization Optimization Action: Incorporate keyword “XYZ” into page copy and important on-page elements.

Intent-Based Optimization Optimization Action: Identify the primary topics and questions users are looking to answer when searching for “XYZ” and create content to address the user’s needs on the targeted landing page.


TITLES •  Capture’s a reader’s interest and announces the content’s main layout and

subject. •  Create curiosity & tap into emotions. •  Set expectations (WIIFM). •  Can elicit clicks, votes, and shares on their own. •  Try using titles that are controversial or make seemingly impossible connections

between two things. •  10 Most Popular Videos That Shouldn’t Be Famous •  How Star Wars is Like Good SEO

@JordanKasteler


HEADINGS •  Create Visual Hierarchy with Headers and Sub-headers.

•  Differentiates headers from body text. •  Plays a huge part in how scannable a layout is.

•  Keep them short, a maximum length of 4-8 words is ideal.

@JordanKasteler


VISUALS •  Break up the content. •  Make it easier to read. •  Help explain key points in a different way. •  Simplify complex concepts and information. •  Gain readers attention, while content assures you keep it. •  Make sure that the images actually enhance the content or the story being told. •  Centered on their own horizontal line vs competing with content length.

@JordanKasteler


LAYOUT @JordanKasteler


LENGTH •  Try not to focus on word count alone.

•  Keep content at 800-2,000 words, depending on the specificity of the topic and the industry. –  Ideal length is 1,600 words or 7 minutes. –  For example, technology-related industry

content will be more in-depth and usually longer than content focused around the entertainment industry, especially celebrity gossip or movie trivia.

•  Break up your content into sections to make long content seem shorter.

•  Explain each key idea or section as succinctly as possible while also being thorough.

•  Include examples but make every sentence count.

@JordanKasteler


LISTS •  Can bring catchy titles. •  Break up the information in a way that makes the content seem shorter than it

is. •  Summarize with bullets and lists.

•  Readers will understand your message much more clearly if it’s separated into single elements.

•  Content with bullet point lists in them get linked to and shared more than similar length posts written in the form of an essay style. –  Have no more than 9 items in a single list. –  Keep lists to a maximum of 2 levels. –  Use numbered lists where the order of entries is important. –  Use bullet point lists where the sequence of entries isn’t important. –  Ensure each list is introduced by at least one line of text.

@JordanKasteler


KEY POINTS •  The top of the content, should have the most

important information there to drive your main point across. –  Don’t wait until the end of the post to make your

main point. •  The middle is additional information that supports

your main points and adds additional value to it. •  The bottom of the content is the nice-to-have

section. This should be reserved for the people who are very into the subject matter and want to digest any additional piece of insight or content you have on the subject.

Following the inverted pyramid method, you can see how this would look visually in a piece of content.

@JordanKasteler


KEY POINTS •  Use Short Sentences. Long phrases tend to bore the reader and make them

lose focus. By reading shorter sentences, the brain has more time to relax and process the information.

•  Use Short Paragraphs. Social media users tend to get lost in large blocks of

text. Break long paragraphs down into shorter points and your post is much more likely to be read in its entirety.

•  One Idea Per Paragraph. Split the blog post into paragraphs and concentrate

on one point per paragraph.

@JordanKasteler

CONTENT STYLING FOR SHARABILITY


CONTENT STYLING FOR SHARABILITY •  Fonts & Word Styling •  Spacing •  Colors •  Borders & Boxes •  Consistency •  Social Sharing •  Mobile Sharing

@JordanKasteler


FONTS & WORD STYLING •  Use bold, CAPITALS, italics, and underlining to emphasize points.

•  Use sparingly. •  Use a bigger font size for body copy (no less than 11pt)

•  Top 50 blogs use: Verdana, Lucida Grande, Arial, and Georgia (serif) •  Headline font size between 17px and 25px work best

•  Top 50 blogs use: Arial and Georgia

@JordanKasteler


FONTS & WORD STYLING •  Use a serif font to improve comprehension. •  12-point fonts improve read time in body

content. •  Limit number of fonts on a page.

•  Make sure they complement each other. •  Use basic fonts. •  Perception is key to trustworthiness.

•  College essays written Trebuchet (sans-serif) received lower grades on average than serif fonts Georgia and Times.

@JordanKasteler


SPACING •  Line Height - the space between individual lines of text.

–  Too short will cause users to squint. –  Too tall, the text will seem like separate bodies instead of grouped together as

one. •  Letter Spacing - the space between each letter in words.

–  In print layout, negative letter spacing is a common technique to add a more fun feel to the layout, but it should never be used in body text.

•  Line Length - the number of words per line. –  Allows the reader’s eyes to flow from the end of one line to the beginning of

the next very easily and naturally. This largely depends on your current site layout.

–  Ideal width of a paragraph is 40-55 characters or 8-11 words. •  White Space - helps to offset large amounts of text and helps the user’s eyes flow

through the text. It also provides separation between elements in the layout, including graphics and text. –  Good use of white space increases reader’s comprehension by almost 20%

@JordanKasteler


COLORS •  Light background and dark body text. •  Good contrasts will make text easy on the eyes, easy to scan quickly, and

overall more readable. •  Poor contrast will force the user to squint and make reading the body text

almost painful, not to mention a lot slower.

@JordanKasteler


BORDERS & BOXES •  Borders and boxes around quotes and key points can get the attention of

readers.

@JordanKasteler


CONSISTENCY •  Maintaining consistency throughout a piece of content can be often overlooked

and can make a great piece of content look unprofessional. Make sure you stick to a theme of styling and structure throughout the content.

@JordanKasteler


SOCIAL SHARING •  Limit options to 2 or 3. •  Consider testing scrolling social buttons. •  Make it easy to share. •  Make sharing options relevant. •  Social proof (numbers/faces) •  One-click buttons vs links. •  Micro-sharing (e.g. retweet this).

@JordanKasteler


SOCIAL SHARING @JordanKasteler


MOBILE SHARING •  60% of time on the Internet is on mobile devices. •  Response design is critical to social sharing. •  Leverage whitespace and size for finger tapping.

@JordanKasteler


MOBILE SOCIAL SHARING @JordanKasteler

•  Social Media Data •  Pinterest Rich Pins

–  Products –  Recipes –  Movies –  Articles –  Places

•  Twitter Cards •  Open Graph

–  Facebook –  LinkedIn –  Google+

CLICK TO EDIT

§  [Content] o  hsa

•  Hsaj –  Dhsjhas

§  dshaj


QUESTIONS? COMMENTS? THOUGHTS?