Issuu on Google+

March 2016


TOC 1

ADP TYPES

4

A. Intro B. Overview of Parts C. Non Featured - Regular (NF-R) D. Featured - Regular (F-R) E. Non Featured - Rundown (NF-RD) F. Featured - Sponsored (F-SP)

2

FRAMEWORKS A. Intro B. Framework A - 1300, 1024, 768, 375 B. Framework B - 1300, 1024, 768, 375 C. Framework C - 1300, 1024, 768, 375

3

MAIN CONTENT ELEMENTS A. Intro B. Hero C. Title D. Text

E. Image F. Listicle G. Quote

RIGHT RAIL A. Intro B. Ad Unit C. Regular Right Rail D. Rundown Right Rail

5

SOCIAL & RELATED A. Intro B. Social Elements B. Related Elements


ADP TYPES 1. Non Featured - Regular (NF-R) This article type has a non-centered, left-aligned hero image, with a regular Right Rail.

2. Featured - Regular (F-R) This article type has a centered hero image, with a regular Right 8A2225Rail. The background of the page has an image BG.

3. Non Featured - Rundown (NF-RD) This article type has a non-centered hero image, left-aligned with a Rundown Right Rail.

4. Featured - Sponsored (F-SP) This article type has a centered hero image, with a NO Right Rail. The background of the page has an image BG. This article type also has a section underneath the title for the sponsor’s logo.


EXPLORE

WATCH

LISTEN

CHANNEL

SIGN IN

Overview of Parts Hero

Just for You

Amanda Edwards // Getty Images

Title

Anderson .Paak Signs To Aftermath, Says “It’s Amazing To Be A Part Of”

Tinashe: A Room of One’s Own (Feb/ Mar 2016 Cover Story)

Hammock talk come soon. Look at the sunset, life is amazing, life is beautiful, life is what you make it. You see the hedges, how I got it shaped up? It’s important to shape up your hedges, it’s like getting a haircut, stay fresh. Find peace, life is like a water fall, you’ve gotta flow. We the best. Congratulations, you played yourself. Surround JAYSON RODRIGUEZ

yourself with angels. Celebrate success right, the only way, apple. Every chance I get, I water the plants, Lion!

Feb 3,2016

Main Rail

To be successful you’ve got to work hard, to make history, simple, you’ve got to make it. You see the hedges, how I got it shaped up? It’s important to shape up your

Nicki Minaj Teases "Down in the DM" Remix

hedges, it’s like getting a haircut, stay fresh. Life is what you make it, so let’s make it. Celebrate success right, the only way, apple. A major key, never panic. Don’t panic, when it gets crazy and rough, don’t panic, stay calm. Special cloth alert. Wraith talk. The first of the month is coming, we have to get

Social Rail

money, we have no choice. It cost money to eat and they don’t want you to eat. The key is to enjoy life, because they don’t want you to enjoy life. I promise you, they don’t want you to jetski, they don’t want you to smile. Stay focused. Let’s see what Chef

Tinashe: A Room of One’s Own (Feb/

Dee got that they don’t want us to eat.

Mar 2016 Cover Story)

Right Rail

Hammock talk come soon. Look at the sunset, life is amazing, life is beautiful, life is what you make it. You see the hedges, how I got it shaped up? It’s important to shape up your hedges, it’s like getting a haircut, stay fresh. Find peace, life is like a water fall, you’ve gotta flow. We the best. Congratulations, you played yourself. Surround yourself with angels. Celebrate success right, the only way, apple. Every chance I get, I water the plants, Lion! To be successful you’ve got to work hard, to make history, simple, you’ve got to make it. You see the hedges, how I got it shaped up? It’s important to shape up your hedges, it’s like getting a haircut, stay fresh. Life is what you make it, so let’s make it. Celebrate success right, the only way, apple. A major key, never panic. Don’t panic, when it gets crazy and rough, don’t panic, stay calm. Special cloth alert. Wraith talk. The first of the month is coming, we have to get money, we have no choice. It cost money to eat and they don’t want you to eat. The key is to enjoy life, because they don’t want you to enjoy life. I promise you, they don’t want you to jetski, they don’t want you to smile. Stay focused. Let’s see what Chef Dee got that they don’t want us to eat.

Look at the sunset, life is amazing, life is beautiful, life is what you make it.

Hammock talk come soon. Look at the sunset, life is amazing, life is beautiful, life is what you make it. You see the hedges, how I got it shaped up? It’s important to shape up your hedges, it’s like getting a haircut, stay fresh. Find peace, life is like a water fall, you’ve gotta flow. We the best. Congratulations, you played yourself. Surround yourself with angels. Celebrate success right, the only way, apple. Every chance I get, I water the plants, Lion! To be successful you’ve got to work hard, to make history, simple, you’ve got to make it. You see the hedges, how I got it shaped up? It’s important to shape up your hedges, it’s like getting a haircut, stay fresh. Life is what you make it, so let’s make it. Celebrate success right, the only way, apple. A major key, never panic. Don’t panic, when it gets crazy and rough, don’t panic, stay calm. Special cloth alert. Wraith talk. The first of the month is coming, we have to get

Related

money, we have no choice. It cost money to eat and they don’t want you to eat. The

Section

Dee got that they don’t want us to eat.

key is to enjoy life, because they don’t want you to enjoy life. I promise you, they don’t want you to jetski, they don’t want you to smile. Stay focused. Let’s see what Chef

RELATED

Future - Thought It Was A Drought

Drama Feat. Drake

Major Lazer - Be Together (feat. Wild Belle) (Vanic remix)

(Dirty Sprite 2) Kanye’s “Workout Plan” might have just Kanye’s “Workout Plan” might have just been replaced. Alabama trio Watch The Duck tap Pharrell for this new upbeat, funky track…

been replaced. Alabama trio Watch The Duck tap Pharrell for this new upbeat, funky track…

Kanye’s “Workout Plan” might have just been replaced. Alabama trio Watch The Duck tap Pharrell for this new upbeat, funky track…


NF-R


NF-RD


F-R


F-SP


FRAMEWORKS 1. FRAMEWORK A This framework will be applied to 2 ADP Types: NF-R and NF-RD.

2. FRAMEWORK B This framework is only applied to the ADP Type F-R.

3. FRAMEWORK C This framework is only applied to the ADP Type F-SP.


FW - A

1300 Max Framework Responsive from 1300px to 1025px

EXPLORE

WATCH

LISTEN

CHANNEL

SIGN IN

40px

Margin: 16px VAR AUTO 16px

56px

HERO 300px 16px

16px

32px

TITLE

32px

AUTO

16px

VAR

RIGHT RAIL

48px

130px

7%

MAIN RAIL

16px

16px 86%

16px

16px

SOCIAL RAIL

7%

VAR


1024 Breakpoint

FW - A

Removes Right Rail

100%

AUTO

HERO

32px VAR 16px

AUTO

TITLE

16px

48px

130px

7%

16px

16px

MAIN RAIL 86%

16px

SOCIAL RAIL VAR

7%

16px


FW - A

768 Breakpoint Removes Social Rail

100%

AUTO

HERO

32px VAR 16px

TITLE

AUTO

16px

48px 7% 7% 16px

7%

MAIN RAIL 86%

VAR

16px


FW - A

375 Breakpoint Removes All Internal Padding

100%

AUTO

HERO

32px VAR 16px

TITLE

AUTO 16px

48px

VAR

16px

MAIN RAIL

16px


FW - B EXPLORE

1300 Max Framework Responsive from 1300px to 1025px

WATCH

LISTEN

CHANNEL

SIGN IN

100%

HERO

Height of Hero

AUTO

73%

32px

TITLE

16px

16px

AUTO 73% 24px 48px

130px

7%

7%

MAIN RAIL 16px

16px 86%

16px

56px

16px

SOCIAL RAIL

Margin: 16px 100%

300px

16px

16px

RIGHT RAIL


1024 Breakpoint

FW - B

Removes Right Rail

100%

92% AUTO

HERO Height of Hero

32px 16px

TITLE SPONSORED

AUTO

16px

VAR 24px 48px

130px

7%

16px

16px

16px

SOCIAL RAIL

7%

86%

MAIN RAIL

VAR

16px


FW - B

768 Breakpoint Removes Social Rail

30px

100%

HERO

AUTO 4%

4%

92%

32px VAR 16px

TITLE

AUTO

16px

24px 48px 7% 7% 16px

7%

MAIN RAIL 86%

VAR

16px


FW - B

375 Breakpoint Removes Internal Padding

30px

HERO AUTO 4%

4% 92%

32px VAR

TITLE

AUTO

24px 48px

VAR

16px

16px

MAIN RAIL


FW - C

1300 Max Framework Responsive from 1300px to 1025px

EXPLORE

WATCH

LISTEN

CHANNEL

SIGN IN

100%

HERO

Height of Hero

AUTO

73%

32px

TITLE

16px

16px

AUTO

73% 24px 32px SPONSORED

VAR

20px

72px

130px

7%

SOCIAL RAIL 16px

86%

16px

7%

178px

MAIN RAIL

16px

87%


1024 Breakpoint

FW - C

Removes Right Rail

100%

92% AUTO

HERO Height of Hero

32px 16px

16px

TITLE SPONSORED

AUTO

VAR 24px 32px

SPONSORED

20px

VAR

72px

130px

7%

16px

7%

86%

MAIN RAIL 16px

16px

SOCIAL RAIL

VAR

16px


FW - C

768 Breakpoint Removes Social Rail

30px

100%

AUTO

92%

4%

4%

HERO

32px VAR 16px

TITLE

AUTO

16px

24px 32px SPONSORED

VAR

20px

72px 7% 7%

7%

MAIN RAIL

16px

16px 86%

VAR


FW - C

375 Breakpoint Removes Internal Padding

30px

HERO

AUTO

4%

4% 92%

32px

TITLE

AUTO

VAR 24px 32px SPONSORED

56px VAR

72px

VAR

MAIN RAIL 16px

16px


MAIN CONTENT ELEMENTS The following are Main Content Elements that are not apart of the Social & Right Rail. All the following Elements, except the Hero and Title, are elements that live in the MAIN RAIL of the ADP. The Hero and Title are their own sections on the ADP.

1. Hero Image 2. Title 3. Text 4. Image 6. Listicle Title 5. Quote


HERO The size of the Hero Image is calculated by 2 VARIABLES:

1. Framework

VAR

The three different frameworks alter the size and location of the Hero Image. 2. Breakpoint At different breakpoints, different calculations are needed to determine the size to fit the device size.

AUTO

HERO


TITLE

Anderson .Paak Signs To Aftermath, Says “It’s Amazing To Be A Part Of”

Like the Hero Image, Framework and Break Points affect the size and positioning of the title area:

1300

font-face: FjallaOne-Regular

1024

768

375

FW-A

Font Size: 48px Line Height: 1.4 Align: Left

Font Size: 48px Line Height: 1.4 Align: Center

Font Size: 48px Line Height: 1.4 Align: Center

Font Size: 36px Line Height: 1.4 Align: Center

FW-B

Font Size: 56px Line Height: 1.4 Align: Center

Font Size: 48px Line Height: 1.4 Align: Center

Font Size: 48px Line Height: 1.4 Align: Center

Font Size: 36px Line Height: 1.4 Align: Center

FW-C

Font Size: 56px Line Height: 1.4 Align: Center

Font Size: 48px Line Height: 1.4 Align: Center

Font Size: 48px Line Height: 1.4 Align: Center

Font Size: 36px Line Height: 1.4 Align: Center


TEXT This is the first type of element that lives in the Main Rail.

p (Default Body) font-size: 16px line: 1.75 font-face: Arial Align: Left

The Width of the Text Element is determined by the Framework and Breakpoints.

Hammock talk come soon. Look at the sunset, life is amazing, life is beautiful, life is what you make it. You see the hedges, how I got it shaped up? It’s important to shape up your hedges, it’s like getting a haircut, stay fresh. Find peace, life is like a water fall, you’ve gotta flow. We the best. Congratulations, you played yourself. Surround yourself with angels. Celebrate success right, the only way, apple. Every chance I get, I water the plants, Lion! To be successful you’ve got to work hard, to make history, simple, you’ve got to make it. You see the hedges, how I got it shaped up? It’s important to shape up your hedges, it’s like getting a haircut, stay fresh. Life is what you make it, so let’s make it. Celebrate success right, the only way, apple. A major key, never panic. Don’t panic, when it gets

The specs (font size, line height, and alignment) remain constant throughout.

crazy and rough, don’t panic, stay calm. Special cloth alert. Wraith talk. The first of the month is coming, we have to get money, we have no choice. It cost money to eat and they don’t want you to eat. The key is to enjoy life, because they don’t want you to enjoy life. I promise you, they don’t want you to jetski, they don’t want you to smile. Stay focused. Let’s see what Chef Dee got that they don’t want us

Lastly, each Text Element has a 48px padding below the block to give space in between the next block. There’s no top padding on the Title Block.

to eat.

48px


IMAGE This is the second type of element that lives in the Main Rail.

VAR

The Width of the Image Element is determined by the Framework and Breakpoints. Height is determined by maintain the image’s aspect ratio.

AUTO

Each Image Element has a 48px padding below the block to give space in between the next block. There’s no top padding on the Title Block. 48px


LISTICLE TITLE 24px p.listicle-title

The Listicle Title element is an add-on that can be added to a Text Element or an Image Element.

font-size: 36px line: 43px (1.2) font-face: EraHeavy-Italic Align: Left

1. Title for Listicle Goes Here 24px

The Width of the Listicle Element is determined by the Framework and Breakpoints.

The specs (font size, line height, and alignement) remain constant throughout each breakpoint and framework.

The Listicle element has a top padding of 24px, and a bottom padding of 16px.

48px


QUOTE 24px 64px

6%

The last element that lives in the Main Rail is the Quote Element.

5% 7%

Each Quote Element has a 48px padding below the block to give space in between the next block. There’s no top padding on the Title Block.

6%

Look at the sunset, life is amazing, life is beautiful, 64% life is what you make it.

5%

64px

The Width of the Quote Element is determined by the Framework and Breakpoints.

The spacing specs differ on the percentages shown in the diagram to the right. The percentages are based on the overal Width of the Quote Element that is determined by the Framework and Breakpoints.

2px Border

24px

2px Border

48px

font-size: 40px line: 42px (1.1) font-face: EraHeavy-Italic Align: Center

Look at the sunset, life is amazing, life is beautiful, life is what you make it.

7%


AD UNIT 40px (only for FW-A)

40px (only for FW-A)

300px

There are 2 Different Ad units that can be trafficked into the ADP.

300 x 250 and

250px

300px

56px 600px

300 x 600

Ad Units have 40px top padding for Framework A. For Frameworks B and C, there is no top padding. On all Frameworks and Breakpoints, Each of the Ad Units have a 56px bottom padding.

56px


REGULAR RIGHT RAIL The Regular Right Rail has a title area

16px

8px

60px

p.sidebar-title

10px

font-size: 28px line: 42px (1.5) font-face: EffraHeavy-Italic

TRENDING 16px

border: 2px Color: #FFFFFF Width: 170px

169px 300px 16px Tinashe: A Room of One’s Own (Feb/ Mar 2016 Cover Story) 48px

p.thumb-title font-size: 20px line: 30px (1.5) font-face: FjallaOne-Regular

Tinashe: A Room of One’s Own (Feb/ Mar 2016 Cover Story) 300px


RUNDOWN RIGHT RAIL 1px p.sidebar-title font-size: 28px line: 42px (1.5) font-face: EffraHeavy-Italic

There are 2 Different Ad units that can be trafficked into the ADP.

1px

1

border: 1px Color: #D5D5D5 Width: 210px

2

8px

border: 1px Color: #000000 Width: 300px

Moogfest Announces 2016 Lineup

How G.O.O.D. Is Kanye's 'Late Registration'? font-size: 14px line: 18px (1.3) font-face: Arial

24px

300 x 250 and 300 x 600

Moogfest Announces 2016 Lineup

p.sidebar-title

16px

font-size: 28px line: 42px (1.5) font-face: EffraHeavy-Italic

4

16px

How G.O.O.D. Is Kanye's 'Late Registration'?

Moogfest Announces 2016 Lineup

4px

Ad Units have 40px top padding for Framework A. For Frameworks B and C, there is no top padding. On all Frameworks and Breakpoints, Each of the Ad Units have a 56px bottom padding.

5

Moogfest Announces 2016 Lineup

6

How G.O.O.D. Is Kanye's 'Late Registration'?

7

Moogfest Announces 2016 Lineup

8

How G.O.O.D. Is Kanye's 'Late Registration'?

Vertical Center

90px

Vertical Center


SOCIAL & RELATED 1. Social Elements 2. Regular Related Elements 3. Rundown Related Elements


SOCIAL 120px 120px 4px

JAYSON RODRIGUEZ

8px

20px

Feb 3,2016

24px

4px 4px

50px

p.article-author p.article-date

JAYSON RODRIGUEZ Feb 3,2016 border: 1px Color: #000000 Width: 85px


REGULAR RELATED

48px

border: 1px Color: #FFFFFF Width: 200px

96px

p.section-title

RELATED 48px

300px

300px

48px 16px 16px 16px Future - Thought It Was A Drought (Dirty Sprite 2) 4px JAYSON RODRIGUEZ

12px

Kanye’s “Workout Plan” might have just been replaced. Alabama trio Watch The Duck tap Pharrell for this new upbeat, funky track…

268px

30px 30px

JAYSON RODRIGUEZ

4px

540px

48px Drama Feat. Drake JAYSON RODRIGUEZ

p.thumb-title p.alt-author

Kanye’s “Workout Plan” might have just been replaced. Alabama trio Watch The Duck tap Pharrell for this new upbeat, funky track… p.alternate-body

Major Lazer - Be Together (feat. Wild Belle) (Vanic remix) JAYSON RODRIGUEZ

Kanye’s “Workout Plan” might have just been replaced. Alabama trio Watch The Duck tap Pharrell for this new upbeat, funky track…

Border: 1px Color: #000000 13%


RUNDOWN RELATED NEXT

THE RUNDOWN 5 of 8

Moogfest Announces 2016 Lineup READ


Revolt ADP