Issuu on Google+

Article Detail Page Redesign // Phase 1

Director/ Darren Hand

Tech. Director/ Daniel Houlemarde

Assoc. Director/ Lindsay Bloomfield

Tech. Assoc. Director/ Maureen Greer

Art Director/ Julian Escobar

Tech. Project Manager/ Scott Wallace

UX Designer/ Chris Juneja

Front End Engineer/ Jessica Silva


A hyper-dynamic, minimal & expressive article page meant to empower writers to tell a more visual story, and engage readers with style, cleanliness & relevancy.


T.O.C.

1. INTRO

4. SAGE

1. Overview of Parts

21. How Blocks are Managed

2. Positions

22. How Ads are Managed 23. How the Right Rail is Managed

2. FRAMEWORK

24. How A Badge is Triggered 25. Nice to have features in the future

3. How the ADP Changes with Browser Width 4. How the Right Rail Works 5. Related Videos & Outbrain

5. ANIMATIONS

6. What are the Ads and Where are They

26. Social Scroll

7. How the Skin Works

27. Scroll/Lock Right Rail

8. Social Buttons

28. Hover over CTA 29. Hover on Social

3. BLOCKS

30. Sponsor Logo Docking

(PHASE 1 ONLY)

9. Text Only

15. Call to Action

10. Photo Only

16. List + Photo Only

11. Photo + Text

17. List + Title

12. Video Only

18. List + Text

13. Video + Text

19. HTML + Text

14. Tweet

20. Title

31. Lazy Load on ADP page loading


INTRO. 1. Overview of Parts

2. Positions

-Title -Main Rail -Right Rail -Outbrain -Related Video -Social

-Left -Right -Center -Curtain


E! Online.com Overview of Parts of the Article Detail Page January 06, 2016 Version 1


Overview

Right Rail Back End

/

E! Online.com

This is the new Article Detail Page. This is one style of the new and very dynamic Article Detail Page (ADP). In this wire, we will go over (in very high level) the individual parts of the new ADP: -Title -Main Rail -Right Rail -Outbrain -Related Videos -Social -Skin

/

2


Title

Right Rail Back End

1

The Title Section contains the following parts:

2 3

1. Title of the Article 2. By Line 3. Social Buttons

The title can be oriented in 2 different formats: Left or Center. This will be managed in Sage on the Article Creation Page. Read more about this in the How Blocks are Managed Wire.

/

E! Online.com

/

3


Main Rail

Right Rail Back End

The Main Rail houses all the main content for the article. It is formed of Blocks that are added individually in Sage in the Article Creation Page. Here’s a list of all the Blocks that can be added to create an article. They are broken down by what Phase they will be implemented in:

Phase 1

Phase 2

Text Only Photo Only Photo + Text Video Only Video + Text Tweet Call to Action List + Photo Only List + Title List + Text HTML + Text

Quote Only Quote + Photo Poll Slideshow Audio

All the Phase 1 Blocks will be individually covered in the Blocks section of this wire.

/

E! Online.com

/

4


Right Rail

Right Rail Back End

The Right Rail will feed in Related or Relevant Content per the user’s site behavior. It will sit to the right of the Main Rail. It will also anchor itself as the user scrolls down the Main Rail. More information on how the Right Rail will work will be located in the wire How the Right Rail Works (in the Framework section) and How the Right Rail is Managed (in the Sage section).

/

E! Online.com

/

5


Outbrain

Right Rail Back End

Outbrain is 3rd Party Content that will be fed into the section shown in the diagram to the left. The section will start right after the end of the Article, and end right before the Related Videos section. For more information on the Outbrain section, view the Related Video & Outbrain wire in the Framework section.

/

E! Online.com

/

6


Related

Right Rail Back End

The Related Video section appears immediately after the Outbrain section and before the comments. For more information on how this section works view the Related Video & Outbrain section.

/

E! Online.com

/

7


Positions

Sage Blocks /

One of the biggest upgrades to the Article Detail page is the framework. Blocks will now be positioned either to the Left, Right, Center, or Curtain. However, not all options will be available to all the blocks. Only the options available will be shown for each block. 1. Position: Left - This will be the default position for all Blocks. It will align Blocks to the left of the page. 2. Position: Right - Choosing this will align the Block to the right of the page, forcing the Right rail to become the left rail. 3. Position: Center - Choosing this will align the Block to the CENTER of the page. This will push down the right (or left) rail. The Block will maintain white space on each side of it. 4. Position: Curtain - Choosing this will align the Block to the center, and it will take the whole width of the framework, leaving no white space on either side. This will also push the side rails down.

1

1

2

3

4

E! Online.com

/

5


FRAMEWORK. 3. How the ADP Changes with Browser Width

4. How the Right Rail Works

5. Related Videos & Outbrain

-Overview

-Elements

-Overview

-1280px Framework

-Content Well

-Specs

-980px Framework

-Locking Mechanism at 3 Units

-Functionality

-768px Framework

-Locking Mechanism at 2 Units

-375px Framework

-Locking Mechanism when Ad is 300x600

-Curtain Across Browser Width -Variations of Framework Padding

6. What are the Ads, and Where are They

8. Social Buttons

7. How the Skin Works

-Leaderboard

-Overview of Skin Asset

-Overview

-Secondary Leaderboard

-Skin on Smaller Browser Widths

-1400px Curtain

-Ad Unit

-Skin on Bigger Browser Widths

-1280px Curtain / Center / Left / Right

-Sponsored Logo

-Skin with Background Color

-980px Curtain / Center / Left / Right

-Skin

-How Skin Locks

-768px Curtain / Center / Left / Right

-How Skin Changes with Browser Width -1280px -1500px -1799px

-1800px -1920px -2560px


E! Online.com Article Detail - Framework Spacing January 04, 2016 Version 1


Overview

Framework Spacing /

At different browser widths, the ADP will showcase different Frameworks. Our page is not responsive, it is adaptive.

E! Online.com

/

2

375px Framework 768px Framework

Based on iPhone width of 375px.

1280px Framework

980px Framework

Based on iPad width of 768px.

Browser Widths: 1280px+

Browser Widths: 980px - 1279px

We will ratio fit from this base width to adjust to all other tablet sizes.

We will ratio fit from this base width to adjust to all other mobile sizes.

375px

1280px

980px

768px

NAVIGATION

NAVIGATION

NAVIGATION

30px

30px

20px

TITLE

TITLE

TITLE

AD UNIT

BLOCK 1 (Position: Left)

TITLE

AD UNIT

BLOCK 1 (Postion: Left)

50px

15px

12px

18px 208px

BLOCK 2

BLOCK 2

RIGHT RAIL

BLOCK 3

BLOCK 3

15px

50px

12px BLOCK 1

24px

RIGHT RAIL BLOCK 3

351px

500px

15px

RIGHT RAIL BLOCK 2

AD UNIT

BLOCK 1 (Postion: Left) 18px

15px

HERO IMAGE

300px

600px

300px

900px

NAVIGATION

BLOCK 2


1280px Column Framework

Framework Spacing /

E! Online.com

1280px

NAVIGATION 3

At the 1280px Framework, this is the sizing:

30px

1. Main Content Rail: 900px Wide

TITLE

2. Side Right Rail: 300px Wide At the 1280px Framework, this is the spacing (highlighted in red):

1

900px

2

15px

3. Spacing in between Header Navigation and Title: 30px

AD UNIT

BLOCK 1 (Position: Left) 5

300px

4. Spacing in between Main Rail and the Side Rail: 50px 5. Spacing in between Edge of the Blocks and Right Rail to the Edge of the Framework: 15px

4

50px

5

15px

Note: Spacing in between blocks, in between title and first block, and in between Ad Unit and Right Rail are spacing at the block (or elemental) level, NOT FRAMEWORK LEVEL. These requirements will be detailed in the Block Wires The Ad Unit will remain 300 x 250px or 300 x 600px.

BLOCK 2 RIGHT RAIL BLOCK 3

/

3


980px Column Framework

Framework Spacing /

E! Online.com

980px

NAVIGATION 3

1

At the 980px Framework, this is the sizing:

30px

1. Main Content Rail: 600px Wide

TITLE

2. Side Right Rail: 300px Wide

600px

2

15px

50px

5

RIGHT RAIL

BLOCK 3

4. Spacing in between Main Rail and the Side Rail: 50px 5. Spacing in between Edge of the Blocks and Right Rail to the Edge of the Framework: 15px

4

BLOCK 2

3. Spacing in between Header Navigation and Title: 30px

AD UNIT

BLOCK 1 (Postion: Left)

5

At the 980px Framework, this is the spacing (highlighted in red):

300px

15px

Note: Spacing in between blocks, in between title and first block, and in between Ad Unit and Right Rail are spacing at the block (or elemental) level, NOT FRAMEWORK LEVEL. These requirements will be detailed in the Block Wires The Ad Unit will remain 300 x 250 px or 300 x 600 px.

/

4


768px Framework

Framework Spacing /

768px

NAVIGATION 3

At the 768px Framework, this is the sizing:

20px

1. Main Content Rail: 500px Wide

TITLE

2. Side Right Rail: 208px Wide

BLOCK 1 (Postion: Left) 5

18px 500px

BLOCK 2

3. Spacing in between Header Navigation and Title: 20px 4. Spacing in between Main Rail and the Side Rail: 24px

4 1

At the 768px Framework, this is the spacing (highlighted in red):

AD UNIT

24px 5

2

18px

208px

RIGHT RAIL

5. Spacing in between Edge of the Blocks and Right Rail to the Edge of the Framework: 18px Note: Spacing in between blocks, in between title and first block, and in between Ad Unit and Right Rail are spacing at the block (or elemental) level, NOT FRAMEWORK LEVEL. These requirements will be detailed in the Block Wires The Ad Unit will remain 300 x 250 px or 300 x 600 px. HOWEVER, these ads will be sized down to 208 x 173 px and 208 x 416 px respectively, to fit the framework sizing of a tablet ADP.

BLOCK 3

E! Online.com

/

5


375px Framework

Framework Spacing /

At the 375px Framework, this is the sizing:

3

1. Main Content Rail: 351px Wide 2. Side Right Rail: NO RIGHT RAIL. NOTE: The content that would normally appear in the Right Rail on the Tablet and Desktop frameworks is going to appear at the bottom of an article underneath Outbrain on the Mobile Framework. At the 375px Framework, this is the spacing (highlighted in red): 3. Spacing in between Header Navigation and Title: 0px 4. Spacing in between Edge of the Blocks and Right Rail to the Edge of the Framework: 12px 1

4

Note: Spacing in between blocks, in between title and first block are spacing at the block (or elemental) level, NOT FRAMEWORK LEVEL. These requirements will be detailed in the Block Wires 4 The Ad Unit will remain 300x250px. This unit will appear after the first CTA. If no CTA, after first Block that contains text (Photo+Text, Video+Text, Quote+Text). Maintain original size (300x250).

E! Online.com

/

6


How Curtain Works Across Browser Widths

Framework Spacing /

E! Online.com

/

7

Normally, when a block is “Curtained”, the Block itself goes to Full Width of the Browser, and eliminates the edge Framework Padding. However, the max width of a Curtain Block is 1400px, so the block will only go to the edge of the browser up to a 1400px Browser Width. Elimination of 15px Framework padding

How does a curtain block react when the Browser Width is altered? View the next page

1280px

1280px

NAVIGATION

NAVIGATION

30px

30px

TITLE

TITLE 1280px

300px

900px

AD UNIT

BLOCK 1 (Position: Left)

BLOCK 1 (Position: Curtain)

900 x 454 50px

15px

15px

1280 x 646 900 x 454

BLOCK 2 RIGHT RAIL BLOCK 3

300px 15px

BLOCK 2

AD UNIT

15px


How Curtain Works Across Browser Widths Cont'd

Framework Spacing /

E! Online.com

/

8

A curtain block will grow and shrink PROPORTIONATELY - EVEN IN BETWEEN FRAMEWORKS. But a Curtain will stop growing once it has reached the max width of 1400px. See last example below at 1500px browser width.

980px

1280px

1400px

1500px

NAVIGATION

NAVIGATION

NAVIGATION

NAVIGATION

30px

30px

30px

30px

TITLE

TITLE

TITLE

TITLE

980px

1280px

1400px

1400px

BLOCK 1 (Position: Curtain)

BLOCK 1 (Position: Curtain)

1400 x 857

1400 x 857

BLOCK 1 (Postion: Curtain)

BLOCK 1 (Position: Curtain)

980 x 600

1280 x 784 900 x 454

600px

300px

BLOCK 2

AD UNIT

15px

15px 300px

900px 15px

AD UNIT

BLOCK 2

50px

BLOCK 3

RIGHT RAIL

15px

75px

300px

900px

BLOCK 2

75px

75px

300px

900px

BLOCK 2

AD UNIT 50px

AD UNIT 50px

50px

BLOCK 3

RIGHT RAIL

BLOCK 3

RIGHT RAIL

@1000 Browser WIdth:

@1350 Browser WIdth:

@1450 Browser WIdth:

Curtain Size: 1000 x 612px

Curtain Size: 1350 x 827px

Curtain Size: 1400 x 857 (Max is 1400)

BLOCK 3

RIGHT RAIL

75px


Variations in Framework Padding

Framework Spacing /

As detailed earlier in this wire, all the frameworks have their specific Framework Padding on the edges. 1280px Framework: 15px 980px Framework: 15px 768px Framework: 18px 375px Framework: 12px But when a Skin is initiated, the padding needs to increase from the number above to a padding that will reach the edge of the skin. This extension of Framework padding is only seen on the 1280px and 980px frameworks and only when a Skin is initiated on Browser Width greater than 1500px. You can read more details about this in the Skin Wireframe.

NAVIGATION TITLE

Framework Padding is extended from normal 15px to 395px

ASSET 1

BLOCK 1 (Position: Left)

AD UNIT

ASSET 2 RIGHT RAIL

395px

FOLD

BLOCK 2

395px

E! Online.com

/

9


E! Online.com Right Rail - Front End December 30, 2015 Version 1


Overview

Right Rail Front End

TITLE

HEADER

80px

20px

TITLE

BLOCK 1 (Position: Left)

UNIT P AD UNIT

/

E! Online.com

The new Right Rail that will be featured on the new Article Detail Page, will contain bigger thumbnails and less content. It will also lock in position as the user scrolls down the article, in efforts to increase exposure of the content in the right rail. The ideology is to serve less content, but more relevant, user-targeted content.

35px

UNIT V BLOCK 2 RIGHT RAIL BLOCK 3

35px

UNIT P

35px

UNIT V

In this document we will go over the following: -Elements in the Right Rail -Unit P -Unit V -Title -Logic -Content Well (CW) -Locking Mechanism

/

2


Elements

Right Rail Front End

Unit P - Represents the items that are News or Photos in the Right Rail. Unit P is a type of Content Unit.

300px

1

/

E! Online.com

Title Container 100x200px container

100px

1. 300x200px picture

UNIT P

200px

2. Max 3 Lines of Text (20px Line Height each) = 60px Height total

200px

3. 35px padding built into the unit

4

310px

4. The Max Height of this Unit is 310px. However, if there’s only 1 or 2 lines of text underneath the picture thumbnail, the height of the unit will change.

15px

2

Text in Title Container

80px = 2 Lines of Text

3 Lines of Text = 310px total height

60px = 3 Lines of Text x 20px Line Height Each

x

40px Each

Text area is 80px tall = 2 Lines @ 40px Line Height each.

2 Lines of Text = 290px total height

3

35px

1 Line of Text = 270px total height

Title Overlap with First Unit 300px

80px

20px

1

1. 300x179px video thumbnail

UNIT V

169px

2. Max 3 Lines of Text (20px Line Height each) = 60px Height total

4 15px

2

TITLE

Unit V - Represents the items that are Videos in the Right Rail. Unit V is a type of Content Unit.

60px = 3 Lines of Text x 20px Line Height Each

3

35px

279px

3. 35px padding built into the unit

UNIT P

4. The Max Height of this Unit is 279px. However, if there’s only 1 or 2 lines of text underneath the video thumbnail, the height of the unit will change. 3 Lines of Text = 279px total height 2 Lines of Text = 259px total height 1 Line of Text = 239px total height

35px

The overlap is 20px

/

3


Logic: Content Well Because the Article Detail page is very dynamic, we will first need to figure out how big is our Right Rail to begin with. This will effect how much content will be displayed. We will define the area available for content in the Right Rail the Content Well (CW). More specifically, this is from the bottom of the Ad Unit to the top of a break. A break can be defined as the end of an article or the top of a Curtained or Centered Block. Even though there might be multiple CWs, like shown in diagram #2, the page will only utilize the first CW available. Even more, the first CW has to be at least 700 px tall because there is a 2 unit minimum for the CW.

Right Rail Front End

HEADER

1

TITLE

TITLE

BLOCK 1 (Position: Curtain)

BLOCK 1 (Position: Curtain)

BLOCK 2

AD UNIT

Here’s the logic behind the 700px minimum: -CW has to fit at least 2 units. -The largest unit is Unit P, being 310px tall. -(2 x 310px) + 80px for the title = 700px

BLOCK 2

BLOCK 3

BLOCK 3

If the largest 2 Unit Ps can fit, then any combination of units will fit in the 700px area.

HEADER

2

RIGHT RAIL

BLOCK 4

BLOCK 4 (Position: Curtain)

The Right Rail will fit a maximum of 3 units. NOTE: If the 300px x 600px Ad Unit is trafficked in, then NO Right Rail will not feed in Content Units.

BLOCK 5

BLOCK 5

BLOCK 6

AD UNIT

RIGHT RAIL

/

E! Online.com

/

4


Logic: Locking Mechanism at 3 Units

Right Rail Front End

/

E! Online.com

So the Height of the CONTEN WELL (CW) determines HOW MANY pieces of content get fed into the Right Rail. The height of the BROWSER HEIGHT (BH) determines WHERE the content LOCKS. The following are the possible locking combinations for the Right Rail:

If there are 3 Content Units in the Right Rail If BH can fit Ad Unit & All 3 Content Units, lock at 40px above the Ad Unit

If BH can fit 3 of 3 units, but no Ad Unit, lock at 40px above the Title.

If BH can fit 2 of 3 units, and no Ad Unit, lock at 35px above the Unit 2.

If BH can fit 1 of 3 units, and no Ad Unit, lock at 35px above the Unit 3.

40px

40px

40px

40px

AD UNIT

AD UNIT

AD UNIT

AD UNIT

40px

40px

40px

40px

TITLE

TITLE

TITLE

TITLE

UNIT 1

UNIT 1

UNIT 1

UNIT 1

35px

35px

35px

35px

UNIT 2

UNIT 2

UNIT 2

UNIT 2

35px

35px

35px

35px

UNIT 3

UNIT 3

UNIT 3

UNIT 3

35px

35px

35px

35px

If the BH can’t fit 1 of 3 units, the Right Rail will not lock and it will scroll normally.

/

5


Logic: Locking Mechanism at 2 Units

Right Rail Front End

If there are 2 Content Units in the Right Rail If BH can fit Ad Unit & All 2 Content Units, lock at 40px above the Ad Unit

40px

AD UNIT

40px

TITLE

UNIT 1

35px

UNIT 2

If BH can fit 2 of 2 units, but no Ad Unit, lock at 40px above the Title.

If BH can fit 1 of 2 units, and no Ad Unit, lock at 35px above the Unit 2.

40px

40px

AD UNIT

AD UNIT

40px

40px

TITLE

TITLE

UNIT 1

UNIT 1

35px

35px

UNIT 2

UNIT 2

If the BH can’t fit 1 of 2 units, the Right Rail will not lock and it will scroll normally.

/

E! Online.com

/

6


Logic: Locking Mechanism when Ad Unit is 300 x 600px

If the 300 x 600px Ad Unit is trafficked in, no Content Units will be fed into the Right Rail. If the BH can fit the 300 x 600px Ad Unit, then it will lock 40px above the Ad Unit.

40px

AD UNIT

If the BH can’t fit the entire Ad Unit in the viewing area, the Right Rail will not lock and will scroll normally.

Right Rail Front End

/

E! Online.com

/

7


E! Online.com Article Detail - Related Videos January 04, 2016 Version 1


Overview

Related Video

Behavior

OUTBRAIN

When an editor publishes an article, related videos will dynamically display based on categories above the comments and below Outbrain. 1. Related video Two related videos will display dynamically based on first listed category. If there are two videos related to the first listed category that have been published within the last 60 days, then those videos should display. If there are less than two videos tagged with that category available in that timeframe, videos tagged with the next listed category should appear.

RELATED VIDEOS

If there are less than two videos available tagged with the two first listed categories, then move to subsequent categories based on order until two videos display. If no videos meet the criteria based on category and timeframe, display the two most recently published videos, regardless of category.

COMMENTS

FOOTER

/

E! Online.com

/

2


Specs

Related Video

/

E! Online.com

15px

30px

980px 33px

33px

25px 78px

400px

32px

32px

225px

78px

290px

/

3


Functionality

Related Video

/

E! Online.com

/

Video Player Behavior When user selects one of two thumbnails in the Related Video section, the lightbox player used in the C11 opens on top of the article detail page. The carousel below should display related content, consistent with the behavior on the C11. When the first video concludes playing, the next video should auto play. Video should conclude playing when the user closes out of the player or when all videos in the stream have played. Detail page behind lightbox should appear grayed out to the user. Video Title Displays the name of this video. Not clickable.Title is auto-generated by the video that is displayed on the page. 610x343 Video Display Area Default state is a preview frame of the video. The area is at a 16:9 ratio. Video spans 2 columns. Video description Shows the text description of the current video. Description is auto generated by the video that is displayed on the page Sharing & Liking Facebook Like and Send, Tweet Button, Google Plus, Email and Embed. All standard interactions apply with each social network and established EOL interactions. URL that is shared is the URL to the video detail page for the video playing. Video Stream The latest published video from the category tags on the video in the player will populate the video streams first. Potentially, an older video that has not expired may not even display in the category stream, even though it is playing in the player. If a user clicks on a video from the stream, the video highlights to indicate to the user that an action has been invoked, the selected video is then loaded into the player and the page refreshes and displays a new url and metadata. The Video Title changes to reflect new video. The category stream updates to dynamically pull latest twelve videos published with that tag. At the end of the twelve, the stream ends and the "more" arrow does not display. The Video Stream is populated by video in chronological order (latest published video listed first) and will pull the category listed within Sage. Close button When the user hits the close button, they are taken back to the article detail page and video stops playing. Clicking anywhere outside of the video lightbox should also close the experience.

4


E! Online.com Article Detail - Trafficked Content December 18, 2015 Version 1


Overview

This wire details the Trafficked Content on the new Article Detail Page. These are the units:

-Leaderboard -Secondary Leaderboard -Ad Unit -Sponsored Logo -Skin

Trafficked Content /

E! Online.com

/

2


Leaderboard

Trafficked Content /

728 x 90px in size. Same position as current framework, anchored to the top of the page. Sits 10px on top of the Navigation. Only exists on desktop and tablet frameworks, no mobile.

TABLET

DESKTOP

LEADERBOARD 728 x 90

LEADERBOARD 728 x 90

NAVIGATION

NAVIGATION

TITLE

TITLE

10px

10px

BLOCK 1 (Postion: Left)

BLOCK 1 (Position: Curtain)

AD

BLOCK 2

AD UNIT

RIGHT RAIL

E! Online.com

/

3


Secondary Leaderboard

Trafficked Content /

728 x 90px in size. Only exists on desktop and tablet frameworks, no mobile. This will also be the location and spacing for Tune-In Banners that are manually tagged to the Category of the Article. If the Tune-In Banner is active on the page, the Secondary Leaderboard will not be trafficked in. Desktop: Sits 30px below navigation, and 30 above the Title Area Tablet: Sits 20px below navigation, and 20 above the Title Area

TABLET

DESKTOP

NAVIGATION

NAVIGATION

30px

20px

SECONDARY LEADERBOARD 728 x 90

SECONDARY LEADERBOARD 728 x 90 20px

30px

TITLE

TITLE

BLOCK 1 (Postion: Left)

BLOCK 1 (Position: Curtain)

AD UNIT

18px

RIGHT

E! Online.com

/

4


Ad Unit

Trafficked Content /

Trafficked One per page. 300x250 in size for desktop and mobile. 208x173 for tablet. Desktop: Sits at the top of Content Well in the Right Rail. Inherent 40px bottom padding. Tablet: Sits at the top of Content Well in the Right Rail. Inherent 40px bottom padding. Scales down to 208x173 to fit tablet framework. Mobile: After first CTA. If no CTA, after first Block that contains text (Photo+Text, Video+Text, Quote+Text). Maintain original size (300x250). Inherent 40px bottom padding.

TABLET

DESKTOP

NAVIGATION

NAVIGATION

TITLE

TITLE

BLOCK 1 (Postion: Left)

BLOCK 1 (Position: Curtain)

BLOCK 2

MOBILE

AD UNIT 300 x 250 40px

BLOCK 2

AD UNIT 208 x 173 40px

RIGHT RAIL

E! Online.com

/

5


Sponsored Logo

Trafficked Content /

Sponsored Logos will remain at 120x60 in size. They can be positioned left or center depending on what position is set for the Title Area in the Sage Article Creation page.

LEFT

CENTER

E! Online.com

/

6


Sponsored Logo Cont'd

Trafficked Content /

1. The 80px tall rectangle around the Sponsored Area doesn’t actually exist in the design. It’s there to show the area that locks when reached at the top of the page. This will keep the Sponsor Area locked to the top of the page as the user scrolls 30px

down. When the user scrolls back up, the Sponsor Area will unlock back into it’s original position in the Title Area.

Watch American Horror Story's Sarah Paulson Have an Adorable Freak Out Over Lady Gaga

65px Line Height x 2 Lines = 130px

25px

1

12px 12px 12px

Line Height = 22px

Presented By 15px

120px 120px 60px

80px

border: #979797 / 151,151,151, Border: 1px

25px

By: KRISTIN DOS SANTOS & LAUREN PIESTER | Fri., Jun. 5, 2015 11:38 AM PDT 58px

35px

E! Online.com

/

7


Skin

Trafficked Content /

1500px

Skins will remain being trafficked in at 1500x1000px, with the edge 260px having artwork.

HEADER TITLE

For more information on how Skins work, view the Skin section. BLOCK 1 (Position: Curtain)

260px

260px

BLOCK 2

AD UNIT

BLOCK 3

RIGHT RAIL

BLOCK 4

E! Online.com

/

8


E! Online.com Article Detail - Skin January 04, 2016 Version 1


Overview of Skin Asset

Skin /

E! Online.com

The Skin will be an asset that is trafficked in. 1500px

The Skin asset is 1500 x 1000px, with 260px on both edges for artwork. The space in between the artwork edges of the asset is just a flat white background. The artwork edges of the asset will stick the edges of the browser, while the main content of the article will sit centered within the browser. At different Browser Widths, the Skin affects the what framework will display for the ADP. This is what detailed in this document across the following browser widths: -1280px -1500px -1799px -1800px -1920px -2560px

First, let’s talk about how and where the Skin is positioned.

260px

1000px

260px

/

2


Skin on Smaller Browser Widths (1500px and Less)

Skin /

E! Online.com

Because the Skin asset is 1500 x 1000px, a 1500px Browser width can exactly fit the complete Skin asset and a 980px Framework.

When the Browser Width is less than 1500px, the edges of the Skin get cutoff.

(ex. 1500px - 520 (2 x 260px) = 980px left over for main content.

In the example below, the Browser Width is 1280px, and can only show 150px of the artwork sections of the Skin.

Take Note: The Skin asset sits UNDER the Navigation Bar. This is on all browser widths.

260px

NAVIGATION

NAVIGATION

TITLE

TITLE

980px

980px

1500px

1280px

BLOCK 1 (Postion: Left)

AD UNIT

BLOCK 1 (Postion: Left)

260px

AD UNIT

150px

150px

RIGHT RAIL BLOCK 2

RIGHT RAIL BLOCK 2

/

3


Skin on Larger Browser Widths (Above 1500px)

Skin /

E! Online.com

At browser widths higher than 1500px, we are now at a viewing area that is greater than the Skin asset itself. This requires the use of TWO Skin Assets to populate the Article Detail Page.

Take TWO Skin Assets Overlap them so that together the width of the two assets is the width of the BROWSER.

ASSET 1

And put them behind the FRAMEWORK of the Article Detail Content.

NAVIGATION TITLE

ASSET 2

ASSET 1260px

ASSET 2

ASSET 1

AD UNIT

BLOCK 1 (Position: Left)

ASSET 2 RIGHT RAIL

BLOCK 2

1

2

3

/

4


Skin on Larger Browser Widths Cont'd

Notice, when we put the two overlapped

Skin /

NAVIGATION

A

TITLE

Skin assets behind the Framework of the Article Detail Content, the artwork portion of the skin will remain on edges 1

of the browser. (Shown in Example A).

AD UNIT

BLOCK 1 (Position: Left)

2 RIGHT RAIL

In doing this we create a white space in BLOCK 2

between the artwork area of the Skin and the content from the Article, highlighted by Rectangles 1 & 2 in Example A. B

NAVIGATION

This requires the framework spacing

TITLE

from the article to expand to 260px away from the left and right edges of the browser. This ONLY happens when a

BLOCK 1 (Position: Left)

AD UNIT

Skin is initiated. View the next page for RIGHT RAIL

more details. BLOCK 2

E! Online.com

/

5


Skin on Larger Browser Widths Cont'd

Skin /

E! Online.com

This is why the framework padding of the article needs to extend to 260px away from the edge of a browser when a Skin is initiated. In example B, when the Skin Asset runs out, we still see a clean white space maintained between the artwork edges and the article. This is because the framework padding of the article expanded to 395px from 15px. Here’s the math: So at higher Browser Widths, we will use TWO Skin Assets to populate the page. Because the assets come naturally with white space in between the artwork edges, this creates white space in between the article and the artwork edges when the Skin Assets are placed at the edge of the Browser. However, this white space only lasts up to 1000px (because the height of the Skin Asset is 1000px.) So if the Skin initiated a matching PAGE background color, you would get an experience shown in Example A below:

(Browser Width - Total Artwork edges of Skin - Width of Framework of Article)

After 1000px, the Skin Asset runs out, the white space is gone, and the background color of the page fills in all the white space up until the framework padding, which in this case is 15px because the framework is a 1280px framework.

Here’s the calculation for Example B:

This is an odd experience, and NOT what we want.

380px extra padding on top of existing framework on both sides. Add the 15px from existing padding that gives you a total padding of 395px on both sides.

A

= Extra padding needed on top of existing framework padding to create white space.

[2560px (Browser Width) - 520px (260px Artwork Edges x2) - 1280px (Framework) ] / 2 =

NAVIGATION

NAVIGATION

TITLE

TITLE

BLOCK 1 (Position: Left)

ASSET 1

/2

AD UNIT

ASSET 2

ASSET 1

BLOCK 1 (Position: Left)

RIGHT RAIL

15px

FOLD

BLOCK 2

B

AD UNIT

ASSET 2 RIGHT RAIL

395px

15px

FOLD

BLOCK 2

395px

/

6


How Skin Locks

Skin /

Lastly, on all browser widths, the Skin Asset(s) will lock.

NAVIGATION

So as the user scrolls down the article. the Skin Assets will lock to the top below the navigation bar.

TITLE

1

ASSET 1

BLOCK 1 (Position: Left)

AD UNIT

2

ASSET 2

FOLD

BLOCK 2

Because the Skin Asset is only 1000px tall, this will in most cases still be above the fold for many browser heights, so our use of the page background color and extended framework spacing will come in handy in adding consistency in experience cross device size. See the animation here: https://www.dropbox.com/home/ADP/Animations? preview=ADP_Scroll_Desktop_Skin_Curtain.mov

RIGHT RAIL

395px

E! Online.com

395px

/

7


1280px Browser Width - No Curtain / No Skin

Skin /

NAVIGATION TITLE

No Curtain / No Skin AD UNIT

BLOCK 1 (Position: Left)

In this case, we are at the 1280px browser width, with no curtain, and no skin.

1280px

This will simply display the normal 1280px Framework.

15px

15px

BLOCK 2 RIGHT RAIL BLOCK 3

E! Online.com

/

8


1280px Browser Width - No Curtain / Skin

Skin /

NAVIGATION No Curtain / Skin We’re at the 1280px browser width again, but this time we have trafficked a skin onto the page.

TITLE 1280px

AD UNIT

BLOCK 1 (Postion: Left)

150px

150px

But even at this Browser Width, we can’t show the full 260px of Artwork on the skin. We can only show 150px of skin on both sides.

980px

RIGHT RAIL

15px

This forces what would normally be the 1280px display to be shrunk to the 980px Framework display to make room for the skin.

15px

BLOCK 2

If a user expands the browser however, then it will expose the rest of the skin.

BLOCK 3

If a user shrinks the browser from here, it will cut off more of the skin and show even less. Since we are already at the 980px framework (our smallest framework), we can’t shrink anymore of our main content to show the skin.

E! Online.com

/

9


1280px Browser Width - Curtain / No Skin

Skin /

NAVIGATION TITLE

Curtain / No Skin At the 1280px browser width, the ADP will be shown in the normal 1280px Framework. But when a curtain is initiated at this browser width, that individual block will go to the edge of the page.

1280px

BLOCK 1 (Position: Curtain) 1280px

Max curtain can actually go to 1400px wide, but that area doesn’t exist here, so it just goes to the edge. 15px

BLOCK 2

AD UNIT

BLOCK 3 RIGHT RAIL

15px

E! Online.com

/

10


1280px Browser Width - Curtain / Skin

Skin /

NAVIGATION TITLE

Curtain / Skin 1280px

BLOCK 1 (Position: Curtain)

150px

150px

980px

15px

BLOCK 2

AD UNIT

BLOCK 3

RIGHT RAIL

BLOCK 4

15px

We saw when a skin is initiated at a 1280px browser width, that the framework is forced to shrink to a 980px framework to fit the skin. Even at this point, you can only see 150px of the skin on each side instead of 260px. But if a Block is Curtained in this scenario, it can only go to a max width of 980px. It will not extend to its normal 1280px and bleed into the Skin.

E! Online.com

/

11


1500px Browser Width - No Curtain / No Skin

Skin /

NAVIGATION

No Curtain / No Skin

TITLE

At the 1500px browser width, the content is still displayed at the 1280px Framework, with it’s normal 15px framework padding.

1500px

BLOCK 1 (Position: Left)

AD UNIT

1280px

15px

15px

BLOCK 2 RIGHT RAIL BLOCK 3

E! Online.com

/

12


1500px Browser Width - No Curtain / Skin

Skin /

NAVIGATION TITLE 1500px

AD UNIT

BLOCK 1 (Postion: Left)

260px

260px

At this Browser Width, we can show the full 260px of Artwork on the skin.

980px

RIGHT RAIL

15px

BLOCK 2

BLOCK 3

No Curtain / Skin This forces what would normally be the 1280px Framework to be shrunk to the 980px Framework to make room for the skin.

15px

E! Online.com

/

13


1500px Browser Width - Curtain / No Skin

Skin /

NAVIGATION TITLE

Curtain / No Skin

1500px

As mentioned earlier in the Framework Spacing wire, a curtain can expand to 1400px. At the 1500px browser width, we can fit the maximum Curtain block.

BLOCK 1 (Position: Curtain) 1400px

The 1400px curtain block extends beyond the Framework spacing of 15px.

1280px 15px

BLOCK 2

AD UNIT

BLOCK 3 RIGHT RAIL

15px

E! Online.com

/

14


1500px Browser Width - Curtain / Skin

Skin /

NAVIGATION TITLE

Curtain / Skin 1500px

BLOCK 1 (Position: Curtain)

260px

260px

980px

15px

At this Browser Width, we can show the full 260px of Artwork on the skin.

BLOCK 2

AD UNIT

BLOCK 3

RIGHT RAIL

BLOCK 4

This forces what would normally be the 1280px Framework to be shrunk to the 980px Framework to make room for the skin.

15px

Because the framework is 980px, our max curtain can only go to 980px. It will not extend to its normal 1280px and bleed into the Skin.

E! Online.com

/

15


1799px Browser Width - No Curtain / No Skin

Skin /

NAVIGATION TITLE

No Curtain / No Skin

1799px

AD UNIT

BLOCK 1 (Position: Left)

At 1799px, our article will simply display the normal 1280px Framework. No curtain and no skin means no extended framework padding. Framework padding is kept at 15px.

1280px

15px

15px

BLOCK 2 RIGHT RAIL BLOCK 3

E! Online.com

/

16


1799px Browser Width - No Curtain / Skin

Skin /

E! Online.com

NAVIGATION No Curtain / Skin

TITLE

This is a classic example of what happens to the framework and Skin when the Skin is initiated on Browser Widths greater than 1500px.

1799px

AD UNIT

BLOCK 1 (Postion: Left)

260px

So we are using TWO Skin Assets to populate this, and the artwork portions of the Skin are sitting at the EDGE of the browser. 260px

As mentioned before we need to extend the framework padding to maintain white space between the article and the artwork portions of the skin, even after where the Skin Asset sits.

980px

RIGHT RAIL

15px

15px

BLOCK 2

164.5px

1799px (Browser Width) - 520px (artwork portions of the Skin) 164.5px

BLOCK 3

But even at this high of a browser width, we can still only display the 980px framework because that is all that will fit:

= 1279px (Not enough to fit the 1280px framework)

So now we know our Framework, let’s calculate the extended framework padding: [1799 (browser) - 520 (skin) - 980 (Framework)] /2 = 149.5px white space extension on each side. Add 15px and this gives us a total of 164.5px padding on both sides to maintain clean white space.

/

17


1799px Browser Width - Curtain / No Skin

Skin /

E! Online.com

NAVIGATION TITLE

Curtain / No Skin

1799px

As mentioned earlier in the Framework Spacing wire, a curtain can expand to 1400px. At the 1799px browser width, we can fit the maximum Curtain block.

BLOCK 1 (Position: Curtain) 1400px

The 1400px curtain block extends beyond the Framework spacing of 15px. 1280px 15px

BLOCK 2

AD UNIT

BLOCK 3 RIGHT RAIL

15px

/

18


1799px Browser Width - Curtain / Skin

Skin /

E! Online.com

NAVIGATION

Curtain / Skin TITLE

We saw in the previous Skin example at the 1799px browser width that we couldn’t fit the 1280px Framework and were forced to use the 980px Framework.

1799px

BLOCK 1 (Position: Curtain)

260px

260px

Because the framework is 980px, our max curtain can only go to 980px. It will not extend to its normal 1280px and bleed into the Skin.

980px

The extended padding will still remain at 164.5px on both sides. 15px

BLOCK 2

AD UNIT

164.5px

15px

164.5px

BLOCK 3

BLOCK 4

RIGHT RAIL

/

19


1800px Browser Width - No Curtain / No Skin

Skin /

NAVIGATION

No Curtain / No Skin

TITLE

At 1800px, our article will simply display the normal 1280px Framework.

1800px

AD UNIT

BLOCK 1 (Position: Left)

No curtain and no skin means no extended framework padding. Framework padding is kept at 15px.

1280px

15px

15px

BLOCK 2 RIGHT RAIL BLOCK 3

E! Online.com

/

20


1800px Browser Width - No Curtain / Skin

Skin /

E! Online.com

NAVIGATION

No Curtain / Skin TITLE

Let’s see what framework we can fit at the 1800px browser width: 1800px (Browser Width) - 520px (artwork portions of the Skin)

1800px

AD UNIT

BLOCK 1 (Position: Left)

260px

= 1280px (Just enough to fit the 1280px framework) 260px

So now we know our Framework, let’s calculate the extended framework padding:

1280px

15px

15px

BLOCK 2

[1800 (browser) - 520 (skin) - 1280 (Framework)] /2 = 0px white space extension on each side.

RIGHT RAIL BLOCK 3

At 1800px, we don’t need any extension in the framework padding because the 1280px framework fits perfectly with the full skin.

/

21


1800px Browser Width - Curtain / No Skin

Skin /

NAVIGATION TITLE 1800px

Curtain / No Skin

BLOCK 1 (Position: Curtain)

At the 1800px browser width, we can fit the maximum Curtain block of 1400px.

1280px

The 1400px curtain block extends beyond the Framework spacing of 15px.

1400px

15px

BLOCK 2

AD UNIT

BLOCK 3 RIGHT RAIL

15px

E! Online.com

/

22


1800px Browser Width - Curtain / Skin

Skin /

Curtain / Skin

NAVIGATION

We saw in the previous Skin example at the 1800px browser width that we just perfectly fit the 1280px Framework.

TITLE 1800px

Because the framework is 1280px, our max curtain can only go to 1280px.

BLOCK 1 (Position: Curtain)

260px

260px

The extended padding will still remain at 15px on both sides.

1280px

15px

BLOCK 2

AD UNIT

BLOCK 3 RIGHT RAIL

15px

E! Online.com

/

23


1920px Browser Width - No Curtain / No Skin

Skin /

NAVIGATION TITLE

No Curtain / No Skin At 1920px, our article will simply display the normal 1280px Framework.

1920px

AD UNIT

BLOCK 1 (Position: Left)

No curtain and no skin means no extended framework padding. Framework padding is kept at 15px.

1280px

15px

15px

BLOCK 2 RIGHT RAIL BLOCK 3

E! Online.com

/

24


1920px Browser Width - No Curtain / Skin

Skin /

NAVIGATION

No Curtain / Skin At 1920px, we can definitely fit the 1280px Framework.

TITLE

So now we know our Framework, let’s calculate the extended framework padding needed for the Skin:

1920px

AD UNIT

BLOCK 1 (Position: Left)

260px

260px

[1920 (browser) - 520 (skin) - 1280 (Framework)]

1280px

/2 15px

15px

BLOCK 2 RIGHT RAIL

75px

15px

BLOCK 3

75px

= 60px white space extension on each side. Add 15px and this gives us a total of 75px padding on both sides to maintain clean white space.

E! Online.com

/

25


1920px Browser Width - Curtain / No Skin

Skin /

E! Online.com

NAVIGATION TITLE

Curtain / No Skin 1920px

At the 1920px browser width, we can fit the maximum Curtain block of 1400px.

BLOCK 1 (Position: Curtain)

The 1400px curtain block extends beyond the Framework spacing of 15px.

1280px 1400px

15px

BLOCK 2

AD UNIT

BLOCK 3 RIGHT RAIL

15px

/

26


1920px Browser Width - Curtain / Skin

Skin /

E! Online.com

NAVIGATION

Curtain / Skin TITLE

We saw in the previous Skin example at the 1920px browser width that we could fit the 1280px Framework.

1920px

But at this browser width, we are actually able to fit the maximum Curtain block:

1400px

BLOCK 1 (Position: Curtain)

260px

260px

1280px

1920px (Browser Width) - 520px (Artwork from Skin) 1400px - That’s just enough to fit the maximum Curtain. Because we have a 1400px curtain, the extended padding will still remain at 75px on both sides.

15px

BLOCK 2

AD UNIT

75px

15px

75px

BLOCK 3 RIGHT RAIL

/

27


2560px Browser Width - No Curtain / No Skin

Skin /

E! Online.com

NAVIGATION TITLE 2560px

No Curtain / No Skin At 2560px, our article will simply display the normal 1280px Framework.

AD UNIT

BLOCK 1 (Position: Left)

No curtain and no skin means no extended framework padding. Framework padding is kept at 15px.

1280px

15px

15px

BLOCK 2 RIGHT RAIL BLOCK 3

/

28


2560px Browser Width - No Curtain / Skin

Skin /

E! Online.com

NAVIGATION

No Curtain / Skin

TITLE

At 2560px, we can definitely fit the 1280px Framework.

2560px

AD UNIT

BLOCK 1 (Position: Left)

260px

260px 1280px

15px

So now we know our Framework, let’s calculate the extended framework padding needed for the Skin:

[2560 (browser) - 520 (skin) - 1280 (Framework)]

15px

BLOCK 2

/2 RIGHT RAIL

395px

BLOCK 3

395px

= 380px white space extension on each side. Add 15px and this gives us a total of 395px padding on both sides to maintain clean white space.

/

29


2560px Browser Width - Curtain / No Skin

Skin /

E! Online.com

/

NAVIGATION

Curtain / No Skin TITLE

At the 2560px browser width, we can fit the maximum Curtain block of 1400px.

2560px

The 1400px curtain block extends beyond the Framework spacing of 15px.

BLOCK 1 (Position: Curtain) 1280px 1400px

15px

BLOCK 2

AD UNIT

BLOCK 3 RIGHT RAIL

15px

30


2560px Browser Width - Curtain / Skin

Skin /

Curtain / Skin

NAVIGATION

We saw in the previous Skin example at the 2560px browser width that we could fit the 1280px Framework.

TITLE

But at this browser width, we are actually able to fit the maximum Curtain block:

2560px 1400px

BLOCK 1 (Position: Curtain)

260px

260px

1280px

2560px (Browser Width) - 520px (Artwork from Skin) 2040px - More than enough to fit the maximum Curtain.

15px

Because we have a 1400px curtain, the extended padding will extend 75px on both sides.

15px

BLOCK 2

E! Online.com

AD UNIT

395px

395px

BUT, we have a Skin too. So the extended padding needs to go even further: [2560 (browser) - 520 (skin) - 1280 (Framework)]

BLOCK 3

/2

RIGHT RAIL

= 380px white space extension on each side. Add 15px and this gives us a total of 395px padding on both sides to maintain clean white space.

/

31


E! Online.com Article Detail - Social Buttons January 04, 2016 Version 1


Overview

Social

How Social Buttons Will Work: The social icons on the new Article Detail Page will now follow the user as they scroll down the article. The social icons will only be seen on select Blocks (indicated below). For the Blocks that do show the social buttons: they will have a well (or path) where the buttons will move in. This path will be on the left side of the block and will change in size per the different column frameworks AND the different block positions. This wire details these changes in the path for these social buttons. For the Blocks that DON’T show the social buttons: the well (or path) will not exist and will not allow the social buttons to appear. See the animation for how these buttons move here: https://www.dropbox.com/home/ADP/Animations? preview=ADP_Scroll_Desktop_Left.mov The social buttons will maintain the exact same functionality as the current social buttons. However, these buttons will not have the counters attached to the buttons.

Blocks Where Social Animation Exists

Blocks Where Social Animation Does NOT Exist

Photo + Text

Photo Only

Video + Text

Video Only

Call to Action

Slideshow

Poll

Quote Only

List + Text**

Quote + Photo

Audio

List + Photo Only

HTML + Text

List + Title Tweet

NOTE: The following pages detail the padding of the well (or path) the social buttons move in. We only show examples using the Photo+Text Block, however, all the blocks where social animation exist utilize the same padding.

/

E! Online.com

/

2


1400px Framework / Curtain

Social

/

E! Online.com

CURTAIN Left Padding to the Edge of Block: 224px Top Padding: 30px Right Padding: 50px

/

3


1280px Framework / Curtain

Social

/

CURTAIN Left Padding to the Edge of Block: 164px Top Padding: 30px Right Padding: 50px

E! Online.com

/

4


1280px Framework / Center

Social

CENTER Left Padding to the Edge of Block: 17px Top Padding: 30px Right Padding: 32px

/

E! Online.com

/

5


1280px Framework / Left

Social

LEFT Left Padding to the Edge of Block: 17px Top Padding: 30px Right Padding: 32px

/

E! Online.com

/

6


1280px Framework / Right

Social

RIGHT Left Padding to the Edge of Block: 17px Top Padding: 30px Right Padding: 32px

/

E! Online.com

/

7


980px Framework / Curtain

Social

CURTAIN Left Padding to the Edge of Block: 32px Top Padding: 30px Right Padding: 32px

/

E! Online.com

/

8


980px Framework / Center

Social

CENTER Left Padding to the Edge of Block: 17px Top Padding: 30px Right Padding: 24px

/

E! Online.com

/

9


980px Framework / Left

Social

LEFT Left Padding to the Edge of Block: 17px Top Padding: 30px Right Padding: 24px

/

E! Online.com

/

10


980px Framework / Right

Social

RIGHT Left Padding to the Edge of Block: 17px Top Padding: 30px Right Padding: 24px

/

E! Online.com

/

11


768px Framework / Curtain

Social

CURTAIN Left Padding to the Edge of Block: 32px Top Padding: 30px Right Padding: 32px

/

E! Online.com

/

12


768px Framework / Center

Social

CENTER Left Padding to the Edge of Block: 0px Top Padding: 30px Right Padding: 17px

/

E! Online.com

/

13


768px Framework / Left

Social

LEFT Left Padding to the Edge of Block: 0px Top Padding: 30px Right Padding: 17px

/

E! Online.com

/

14


768px Framework / Right

Social

RIGHT Left Padding to the Edge of Block: 0px Top Padding: 30px Right Padding: 17px

/

E! Online.com

/

15


Social Buttons in Title

Social

Title: Position Center Top Padding: 20px Bottom Padding: 35px

Across all Frameworks

Title: Position Left Top Padding: 10px Bottom Padding: 35px

Across all Frameworks

/

E! Online.com

/

16


BLOCKS.

(PHASE 1 ONLY)

9. Text Only

10. Photo Only

11. Photo + Text

12. Video Only

13. Video + Text

14. Tweet

15. CTA

16. List Only

17. List + Title

18. List + Photo

19. HTML

20. Title


E! Online.com Text Only Block January 06, 2016 Version 1


Overview

Text Only Block /

Text Only Block

HEADER

We’ve detailed the ADP on an larger scale, but now we will dive into the individual Blocks that make up the Main Rail on the ADP.

TITLE

The following is the variations of the Text Only Block this wire will detail: -@1280px - Position: Curtain -@1280px - Position: Curtain w/ BADGE -@1280px - Position: Left / Right / Center

BLOCK 1 (Position: Left)

AD UNIT

-@1280px - Position: Left / Right / Center w/ BADGE -@980px - Position: Curtain -@980px - Position: Curtain w/ BADGE -@980px - Position: Left / Right / Center

BLOCK 2

-@980px - Position: Left / Right / Center w/ BADGE

RIGHT RAIL

-@768px - Position: Curtain -@768px - Position: Curtain w/ BADGE -@768px - Position: Left / Right / Center -@768px - Position: Left / Right / Center w/ BADGE -@375px - All Positions -@375px - All Positions w/ BADGE

BLOCK 3

E! Online.com

/

2


@1280px - Position: Curtain Text Only / 1280px Framework / Position: Curtain Text Area: 790px wide Left & Right Padding on Text: 245px on each side. The width of Curtain Block on a 1280px Framework is 1280px. If you add the Text Area width and the Left & Right Padding, you’ll see that it totals this width: 790px + 245px + 245px = 1280px Bottom Padding: 60px. All Blocks carry padding on the bottom, NEVER on the top. Notice, no top padding.

Framework Spacing /

E! Online.com

/

3


@1280px - Position: Curtain w/ BADGE

Text Only Block /

E! Online.com

/

3


@1280px - Position: Left / Right / Center

Text Only / 1280px Framework / Position: Left / Right / Center The specs for all 3 positions (Left, Right, Center) are the same. The only difference is where the actual block is positioned. Internally in the block, the spacing is the same. Text Area: 742px wide Left Padding on Text: 80px (this is more than the Right Padding to add more space for the Social Buttons. Right Padding on Text: 78px The width of Left, Right, or Center Block on a 1280px Framework is 900px. If you add the Text Area width and the Left & Right Padding, you’ll see that it totals this width: 742px + 80px + 78px = 900px Bottom Padding: 60px.

Text Only Block /

E! Online.com

/

3


@1280px - Position: Left / Right / Center w/ BADGE

Text Only Block /

E! Online.com

/

3


@980px - Position: Curtain Text Only / 980px Framework / Position: Curtain Text Area: 790px wide Left & Right Padding on Text: 95px on each side. The width of Curtain Block on a 980px Framework is 980px. If you add the Text Area width and the Left & Right Padding, you’ll see that it totals this width: 790px + 95px + 95px = 980px Bottom Padding: 50px

Text Only Block /

E! Online.com

/

3


@980px - Position: Curtain w/ BADGE

Text Only Block /

E! Online.com

/

3


@980px - Position: Left / Right / Center

Text Only / 980px Framework / Position: Left / Right / Center The specs for all 3 positions (Left, Right, Center) are the same. The only difference is where the actual block is positioned. Internally in the block, the spacing is the same. Text Area: 500px wide Left Padding on Text: 72px (this is more than the Right Padding to add more space for the Social Buttons. Right Padding on Text: 28px The width of Left, Right, or Center Block on a 980px Framework is 600px. If you add the Text Area width and the Left & Right Padding, you’ll see that it totals this width: 500px + 72px + 28px = 600px Bottom Padding: 50px.

Text Only Block /

E! Online.com

/

3


@980px - Position: Left / Right / Center w/ BADGE

Text Only Block /

E! Online.com

/

3


@768px - Position: Curtain Text Only / 768px Framework / Position: Curtain Text Area: 633px wide Left Padding on Text: 95px (this is more than the Right Padding to add more space for the Social Buttons. Right Padding on Text: 40px The width of Curtain Block on a 768px Framework is 768px. If you add the Text Area width and the Left & Right Padding, you’ll see that it totals this width: 633px + 95px + 40px = 768px Bottom Padding: 50px

Text Only Block /

E! Online.com

/

3


@768px - Position: Curtain w/ BADGE

Text Only Block /

E! Online.com

/

3


@768px - Position: Left / Right / Center

Text Only / 980px Framework / Position: Left / Right / Center The specs for all 3 positions (Left, Right, Center) are the same. The only difference is where the actual block is positioned. Internally in the block, the spacing is the same. Text Area: 434px wide Left Padding on Text: 48px (this is more than the Right Padding to add more space for the Social Buttons. Right Padding on Text: 18px The width of Left, Right, or Center Block on a 768px Framework is 500px. If you add the Text Area width and the Left & Right Padding, you’ll see that it totals this width: 434px + 48px + 18px = 500px Bottom Padding: 50px.

Text Only Block /

E! Online.com

/

3


@768px - Position: Left / Right / Center w/ BADGE

Text Only Block /

E! Online.com

/

3


@375px - All Positions

Text Only / 375px Framework / All Positions The specs for all 4 positions (Left, Right, Center, AND Curtain) are the same on the 375px Framework. Text Area: 351px wide Left Padding on Text: This is actually 0px. The text goes to the edge of the BLOCK. The 12px padding you see in the diagram is actually a FRAMEWORK padding, not a Block Padding. Right Padding on Text: 0px for the same reason as the left padding. The width of Left, Right, Center, or Curtain Block on a 375px Framework is 351px. If you add the Text Area width and the Left & Right Padding, you’ll see that it totals this width: 351px + 0px + 0px = 351px Bottom Padding: 40px.

Text Only Block /

E! Online.com

/

3


@375px - All Positions w/ BADGE

Text Only Block /

E! Online.com

/

3


SAGE. 21. How Blocks are Managed -Overview

22. How Sponsored Ads are Managed -Sage Mapping

-Format of the New Block -User Flow in Sage -Mapping of Legacy Content to New System -Breakdown of Indivdual Blocks -Specs

23. How the Right Rail is Managed -Overview of CCT

25. Nice-to-Have Feautures in the Future -Overview -Drag & Drop -Form Validation -Templates

24. How a Badge is Triggered -Overview of CCT


E! Online.com Sage Blocks - Wireframes December 16, 2015 Version 1


Overview

Sage Blocks /

1

E! Online.com

/

In upgrading the Article Detail page, we need to upgrade our Text Blocks on Sage that create the elements on our Article Detail Page.

1

The first upgrade we need to make is renaming Text Blocks to just Blocks. This will be reflected on the “New Blog” page in Sage (indicated on the diagram to the left).

This wireframe will document the following upgrades: 1. Format of the new Block 2. User Flow 3. Framework 4. Mapping of Legacy Content 5. Title 6. Text Only Block 7. Photo Only Block 8. Photo + Text Block 9. Video Only Block 10. Video + Text Block 11. Call to Action Block 12. Slideshow Block 13. Tweet Block 14. Quote Only Block 15. Quote + Photo Block 16. Poll Block 17. List + Photo Only Block 18. List + Title Block 19. List + Text Block 20. Audio Block 21. HTML + Text Block 22. Specs

2


Format of the New Block

Sage Blocks /

E! Online.com

/

3

The new Blocks will come in one of two formats:

With Text Box

With a Text Box - Gives the ability to add text to the Block. Without a Text Box - No ability to add text to the Block.

1. Choose Block

2. Customize Block

3. Position Block

Below is a description of the parts of the new Block:

Search by photo title

1

2

Select Gallery to Add

4 3

Photo Only Left

Right

Center

Curtain

Photo + Text Photo Only Video + Text Video Only Call to Action Text Only Quote + Photo Quote Only List + Text List + Photo Only List + Title Poll Slideshow Audio Tweet HTML + Text

Without Text Box

1. Choose Block

2. Customize Block

3. Position Block

Search by photo title Select Gallery to Add Photo + Text Left

Right

Center

Curtain

2. Block Specific Parameters - This area will be dependent on what type of Block they choose. It will add extra parameters that are specific to the type of Block. For example, when adding a video, a Video ID / Panda title search bar appears. However, if you’re adding a Poll, a Poll title search bar appears. The parameters in this area are a required field.

5

3. Block Position - This will always be the Block Position area. However, the position options available will be dependent on the type of Block chosen in the first dropdown. Default will always be LEFT. This is a required field.

0 Words

6

1. Block Type - This dropdown is where the user will choose what type of Block they want to use. After hitting the +Add button, a new Block will be added with “Photo Text” set to the default. They will then change the type here if they choose to. This dropdown is a required field. The following are the options for this dropdown:

7

4. Dropdown - When the user HOVERS over this, a dropdown will appear with the following options: -Add Block Above: adds another block above the current block -Add Block Below: adds another block below the current block -Delete: deletes current block -Duplicate: duplicates current block

5. Text Box - Area to add and stylize text to the Block. 6. Word counter for the Text Box 7. Expand Text Box with this icon.


User Flow

Sage Blocks /

1. Choose Block

2. Customize Block

E! Online.com

3. Position Block

Search by photo title Select Gallery to Add

3. User clicks the “Choose Block” box

Photo + Text Left

1. User clicks Add button

Right

Center

Curtain

0 Words

2. Default Block (Photo + Text) is added.

1. Choose Block 1. Choose Block

JUMP

Call to Action

Quote + Photo

Left List + Text

Right Center List + Title

Curtain Poll

5. User hovers over the block they would like

Tweet

Photo + Text

Video + Text

Call to Action

Quote + Photo

Left List + Text

Right Center List + Title

Curtain Poll

Video Only

Text Only

Quote Only

List + Photo Only

Slideshow

Audio

Photo Only

HTML + Text

Video Only

Text Only

Quote Only

List + Photo Only

Slideshow

4. Dropdown menu appears showcasing all the Block Options, with the selected option in the Selected State.

6. Hover state for individual Block icon appears.

1. Choose Block

2. Position Block

Text Only Left

Right

Center

Tweet

<HTML> </HTML>

<HTML> </HTML>

Photo Only

JUMP

Select Custom Thumbnail

Select Custom Thumbnail Video + Text

0 Words

Enter Header for CTA 0 Words

Enter Header for CTA

Photo + Text

News

News

Call To Action

3. Position Block

2. Customize Block

Call To Action

3. Position Block

2. Customize Block

Curtain

7. User clicks desired block.

0 Words

8. Dropdown goes away once block is selected. Selected block appears

Audio

HTML + Text

/

4


Framework

Sage Blocks /

One of the biggest upgrades to the Article Detail page is the framework. Blocks will now be positioned either to the Left, Right, Center, or Curtain. However, not all options will be available to all the blocks. Only the options available will be shown for each block. 1. Position: Left - This will be the default position for all Blocks. It will align Blocks to the left of the page. 2. Position: Right - Choosing this will align the Block to the right of the page, forcing the Right rail to become the left rail. 3. Position: Center - Choosing this will align the Block to the CENTER of the page. This will push down the right (or left) rail. The Block will maintain white space on each side of it. 4. Position: Curtain - Choosing this will align the Block to the center, and it will take the whole width of the framework, leaving no white space on either side. This will also push the side rails down.

1

1

2

3

4

E! Online.com

/

5


Mapping Legacy Content to New Block System Current Mapping Text Only

E! Online.com

New Mapping Text Only, position Left

If this Block has text, then it will become Photo with Text, position Left. Photo: Top If this block does not have text, then it will become Photo Only, position Left.

Photo: Left

Sage Blocks /

If this Block has text, then it will become Photo with Text, position Left.

Because we will have a new set of Blocks, the old “Text Blocks” will need to map to the new system. Also, because some of the Legacy Content might look odd when converted to the new system, we will default all blocks to be left adjusted to insure a look that is on par with our brand standards. To the left is how each option in the current system will map to the new Block System.

If this block does not have text, then it will become Photo Only, position Left.

If this Block has text, then it will become Photo with Text, position Left. Photo: Right If this block does not have text, then it will become Photo Only, position Left.

If this Block has text, then it will become Video with Text, position Left. Video: Top If this block does not have text, then it will become Video Only, position Left.

HTML: Top

HTML with Text, position left

Audio

Audio, position left Call To Action, position left.

Call To Action

Unless we can tell what the content type is from the hyperlink, all legacy content will have no icons and will just pull in the thumbnails. If no thumbnail is available, the CTA will be text only.

Tweet

Tweet, position left

Poll: Custom

Poll, position left

Related Photos

Remove this Block from the Front End and Back End

Related Videos

Remove this block from Block dropdown options. It will still exist but won’t be a selectable Block. It will now exist as a part of the framework of the page (like Outbrain). Match new style on Front end. This content will auto feed from the tagged Categories. I

All new blocks, such as the List and Slideshow blocks, will not be converted because no instances exist in the legacy content. These blocks will only be added moving forward.

/

6


Title

Sage Blocks /

The Title, even though itâ&#x20AC;&#x2122;s not a Block, will also have the ability to be positioned to the Left or Center. The Title will NOT have the option for a Curtain or Right position. Left position is default. We will need to add the radial buttons with icons (as shown in the diagram) to add this feature. User can only choose one option.

Block Position:

1

Title Position: Left Align

Center Align

FRONT END LOOK: Title - Left Align

FRONT END LOOK: Title - Center Align

E! Online.com

/

7


Text Only Block

Sage Blocks /

The Text Only Block will also have the same Position functionality. It will have options for all positions and users can only choose one. Left position is default. The Block dropdown, Block Position, and the Text Box are required fields.

1. Choose Block

2. Position Block

Text Only Left

Right

0 Words

FRONT END LOOK: Text Only Block

Center

Curtain

E! Online.com

/

8


Photo Only Block

Sage Blocks /

The Photo Block is new. It will only add a Photo, with no ability to add text with it. The same functionality of adding a photo and adding a gallery to is exists. Users can either add a photo only, or add a photo and attach a gallery to it. The Photo Block will also have all positioning options. Left position is default. The Block dropdown and Block Position are required fields. Users also need to add a photo or a gallery, only one is a required field.

1. Choose Block

2. Customize Block

3. Position Block

Search by photo title Select Gallery to Add Photo Only Left

FRONT END LOOK: Photo Only Block

Right

Center

Curtain

E! Online.com

/

9


Photo with Text Block

Sage Blocks /

E! Online.com

The Photo Text Block is also new. It will add a Photo, BUT with the ability to add text with it. The same functionality of adding a gallery OR an individual photo exists. The Photo Block will also have all block positioning options. Left position is the default. The Block dropdown and Block Position are required fields. Users also need to add a photo or a gallery, only one is a required field. The Text Box is not a required field.

1. Choose Block

2. Customize Block

3. Position Block

Search by photo title Select Gallery to Add Photo + Text Left

Right

Center

Curtain 500px

900px

0 Words

30px

30px

Jennifer Aniston is expanding her empire. In addition to co-creating Living Proof with her longtime hairstylist and friend Chris McMillan, 20px

the 45-year-old actress tells Yahoo! Beauty she has something else up her sleeve. "I would like 28px

to do a lifestyle thing, for people who struggle with dieting. I could just make anything for a diet taste delicious," says Aniston, who calls herself "a good alchemist" in the kitchen. "I can mix certain things together that are all very healthy, but you don't feel like you're depriving

80px

yourself in any way," she says.

80px

Does this mean Aniston will be writing a cookbook? "I'm working on it!" she reveals. Perhaps Aniston's cookbook will include drink recipes, too. "I love PatrĂłn. I also love Don Julio 1942 as a nice sipping tequila. It's so yummy. It has a little sweetness to it, which I usually don't like. [My fiancĂŠ Justin Theroux] actually makes the perfect margarita with it, because there's no agave, no sugar, no mix. It's pure tequila, lime juice, a squinch of Cointreau. It's delicious." 60px

FRONT END LOOK: Photo + Text

18px, Lato-Regular #666666 / 102,102,102

/

10


Video Only Block

Sage Blocks /

The Video Block is new. It will only add a Video, with no ability to add text with it. The same functionality of adding a video by Panda Title or Video ID exists - except that the location of these buttons have changed a bit (see #2) . The Video Block will also have all positioning options (see #1). Left position is default. The Block dropdown and Block Position are required fields. Users also need to add a video by either Video ID or a Panda title.

1. Choose Block

2. Customize Block

3. Position Block

Enter Video ID Preview Video Only

0/80

Video ID | PANDA Title

1

2

Left

158px

158px

720px

1280px

FRONT END LOOK: Video Only Block

Right

Center

Curtain

E! Online.com

/

11


Video with Text Block

Sage Blocks /

The Video Text Block is very similar to the one that currently exists in Sage. It allows the user to add a Video with text underneath is just like itâ&#x20AC;&#x2122;s shown in the diagram below. The only difference is now we have the ability to position the block on all options. (see #1). Left position is default. The Block dropdown and Block Position are required fields. Users also need to add a video by either Video ID or a Panda title. The Text Box is not a required field.

1. Choose Block

2. Customize Block

3. Position Block

Enter Video ID Preview Video + Text

0/80

Video ID | PANDA Title

1 Left

Right

Center

Curtain

0 Words

The Royals had some real-life royalty on the latest episode. Dame Joan Collins finally made her highlyanticipated debut on the show. Creator Mark Schwahn explained that he had her in mind all along for this role, "There was a palpable excitement on the set. When Joan Collins rolls in everyone feels like we're making a legitament thing here." It created a new dynamic on the show, bringing out a more...timid side of the queen. "You get to see the queen who has been so powerful and so polished and then her mother shows up and she's like this 12year-old girl," Mark added.

FRONT END LOOK: Video + Text Block

E! Online.com

/

12


Call to Action Block

Sage Blocks /

E! Online.com

The Call to Action (CTA) block is relatively the same with some minor changes: 1. The CTA can be positioned with all options. Left position is default. 2. There will be a separate field for the Header. Users can enter any header they would like. In the example CTA below, the header is “Photos”. 3. Users can select the Content Type in this dropdown. Whatever the content type is, it will change the icon on the lower right of the thumbnail. Options are News, Video, Photo, and None. Choosing Other or News will not showcase an icon. Default will be None. 4. User will need to write a body text for the CTA in the Text Box. Users will need to hyperlink the text in the Text Box so that the CTA leads to an external page. In the example below, the body text is “Celeb wedding dress predictions”. This is a necessary field. 5. In the event the user wants to upload a custom thumbnail, they can do so here. The Block dropdown, Block Position, Header, and Content Type, and Text Box are required fields. Selecting a custom thumbnail is optional.

1. Choose Block

2. Customize Block

3. Position Block

Enter Header for CTA

2

Select Custom Thumbnail (Optional) Content Type Icon:

Call To Action

News

3

5

1 Left

Right

Center

Curtain

4 0 Words

Photos

2

Celeb wedding dress predictions

4 3 *Stroke doesn’t display on actual front end.

FRONT END LOOK: CTA (Photo)

Photos

2

Celeb wedding dress predic!ons 4

3 FRONT END LOOK: CTA (Video)

*Stroke doesn’t display on actual front end.

/

13


Slideshow Block

Sage Blocks /

The Slideshow is an entirely new Block. Itâ&#x20AC;&#x2122;s a new element on the front end design, and it will require a new block on the backend.

#1. On the Slideshow Block, users can position their slideshow only Left, Right, and Center (No Curtain). Left position is default. #2. Here they will able to select their already created Gallery (from the Gallery creation page in Sage). Gallery is a required field. Some rules on the Slideshow: -Min of 3 pictures -Max of 15 pictures -If the gallery added has more than 15 pictures, we will display a message after the slideshow of 15 pics letting users know theyâ&#x20AC;&#x2122;re going to the full Cover Flow gallery. If user opts in to see the full gallery, they will be taken directly to the 16th picture of the gallery, and will not have to start over. The Block dropdown, Block Position, and Gallery are required fields.

1. Choose Block

2. Customize Block

3. Position Block

Select Gallery to Add

Slideshow

2 Left

1

STREET STYLE: MIDI SKIRTS

POPPY LISSIMAN Wears her own design bag and sunglasses, Topshop shirt, vintage skirt and Adidas sneakers Merilyn Smith/WireImag

View All

1 of 10

FRONT END LOOK: Slideshow Block

Right

Center

E! Online.com

/

14


Tweet Block

Sage Blocks /

#1. Users enter Twitter Permalink here. They must Verify it to post it. #2. Users can position the Block either Left, Right, or Center (No Curtain). Left position is default. The Block dropdown, Block Position, and Twitter Permalink are required fields.

1. Choose Block

2. Customize Block Twitter Permalink or ID

1 Tweet

3. Position Block Verify

1 Left

FRONT END LOOK: Tweet Block

Right

Center

E! Online.com

/

15


Quote Only Block

Sage Blocks /

Users can create a Quote Block in 2 ways: With a background photo or Without a background photo. Quote Only allows just the text without a background image. #1. Users can write their quote here in the text box. #2. Users position the block here with all options available. #3. Users can alter the text color of the quote here with the default set to gray (#666666) The Block dropdown, Block Position, and Text Box are required fields.

1. Choose Block

Ouote Only

2. Position Block

2 Left

Right

Center

Curtain

Text Color:

3 1

0 Words

FRONT END LOOK: Quote Block

#666666

E! Online.com

/

16


Quote with Photo Block

Sage Blocks /

Quote with Photo allows a background image behind the quote. #1. Users can add a photo background here. If the User chooses a background image, a white opaque layer will automatically sit behind the text so that they text will legible on all photos. See image below. #2. Users position the block here with all options available. #3. Users enter their quote here in the text box. #4. Users can alter the text color of the quote here with the default set to gray (#666666) The Block dropdown, Block Position, Text Box, and Photo are required fields. 1. Choose Block

2. Customize Block Search by photo title

3. Position Block

2

1 Quote + Photo Left

Right

Center

Curtain

Text Color:

#666666

4 3

0 Words

â&#x20AC;&#x153;

Fashion is about dressing according to what's fashionable. Style is more about being yourself.

FRONT END LOOK: Quote + Photo Block

â&#x20AC;?

E! Online.com

/

17


Poll Block

Sage Blocks /

#1. Users enter Poll Title here to search for an existing poll. #2. Users can position the Block either Left, Right, or Center (No Curtain) The Block dropdown, Block Position, and Poll title are required fields.

1. Choose Block

2. Customize Block

3. Position Block

Search by poll title

Poll

1

2 Left

Right

Center

FRONT END LOOK: Poll Block (Outlined in Red)

E! Online.com

/

18


List + Photo Only Block

Sage Blocks /

The List block is an entirely new block. It has 3 different styles. This is an example of the List + Photo Only style. This particular block has the ability to add a photo only and attach a list number to it. #1. Users search for a photo here. #2. Users can choose a list number here. Default is 1, max is 50. #3. Users can position the Block either Left, Right, or Center (No Curtain) The Block dropdown, Block Position, Photo, and List Number are required fields.

1. Choose Block

2. Customize Block

3. Position Block

3 1

Search by photo title List #:

List + Photo Only

1

2 Left

WIREFRAME OF FRONT END LOOK: List + Photo Only

Right

Center

E! Online.com

/

19


List + Title Block

Sage Blocks /

The List block is an entirely new block. It has 3 different styles. This is an example of the List + Title style. This particular block has the ability to add a photo BUT also add a title on top of the photo. The option to add a list number also remains. #1. Users search for a photo here. This is a required field. #2. Users add a title to the photo here. This is a required field. #3. Users can choose a list number here. Default is 1, max is 50. #4. Users can position the Block either Left, Right, or Center (No Curtain) The Block dropdown, Block Position, Photo, Title, and List Number are required fields.

1. Choose Block

2. Customize Block Search by photo title

1

3. Position Block

4

Enter Title List + Title

2

List #:

1 Left

3

WIREFRAME OF FRONT END LOOK: List + Title

Right

Center

E! Online.com

/

20


List + Text Block

Sage Blocks /

The List block is an entirely new block. It has 3 different styles. This is an example of the List + Text style. This particular block has the ability to add a photo BUT also add text underneath the photo. The option to add a list number also remains. Thereâ&#x20AC;&#x2122;s no title for this style. #1. Users search for a photo here. This is a required field. #2. Users add text underneath the photo here. This is a required field. #3. Users can choose a list number here. Default is 1, max is 50. #4. Users can position the Block either Left, Right, or Center (No Curtain) The Block dropdown, Block Position, Text Box, Photo, and List Number are required fields.

1. Choose Block

2. Customize Block

3. Position Block

Search by photo title

1 List + Text

List #:

3

1

4

Left

Right

Center

2 0 Words

FRONT END LOOK: List + Text Block

E! Online.com

/

21


Audio Block

Sage Blocks /

#1. Users enter Audio URL here #2. Users can position the Block either Left, Right, or Center (No Curtain) The Block dropdown, Block Position, and Audio URL are required fields.

1. Choose Block

3. Position Block

2. Customize Block Enter Audio URL

1

0/3000

2

Audio Left

NO FRONT END LOOK YET

Right

Center

E! Online.com

/

22


HTML with Text Block

Sage Blocks /

#1. Users can position the Block either Left, Right, or Center (No Curtain) #2. Users can enter their HTML code here. #2a. Character count for the HTML is here. The icon can expand the HTML block ONLY vertically, not horizontally. Doing so will push the Text Box area down. #3. They can add text that would display underneath the HTML code. The Block dropdown, Block Position, HTML, and are required fields. The Text Box is optional.

1. Choose Block

2. Customize Block

3. Position Block

<HTML> </HTML>

1

2 HTML + Text

HTML

0/10000

2a

3

0 Words

NO FRONT END LOOK YET

Left

Right

Center

E! Online.com

/

23


Dropdown Menu Specs

1. Choose Block

Sage Blocks /

2. Customize Block

Call To Action

News

Enter Header for CTA

3. Position Block

916px

0 Words

JUMP

Select Custom Thumbnail Photo + Text

Video + Text

214px Call to Action

Left List + Text

Quote + Photo

Right Center List + Title

Curtain Poll

Tweet

<HTML> </HTML>

Photo Only

Video Only

1. Choose Block

Text Only

Quote Only

List + Photo Only

2. Customize Block

Call To Action

News

41px

Slideshow

Audio

HTML + Text

3. Position Block 23px

Enter Header for CTA

0 Words

834px

50px

41px JUMP

Select Custom Thumbnail Photo + Text

11px

Video + Text

Call to Action

Left List + Text

Quote + Photo

10px

Right Center List + Title

Curtain Poll

834px

<HTML> </HTML>

40px

41px Photo Only

11px

Tweet

41px

10px Video Only

Text Only

Quote Only

List + Photo Only

Slideshow

Audio

HTML + Text

28px

1. Choose Block

2. Customize Block

Call To Action

3. Position Block

News

0 Words

Enter Header for CTA

Icons are centered horizontally in this container

Select Custom Thumbnail Photo + Text

Video + Text

Call to Action

JUMP

Quote + Photo

Left List + Text

Right Center List + Title

Curtain Poll

Tweet

<HTML> </HTML>

Icons are centered horizontally in this container Photo Only

Video Only

Text Only

Quote Only

List + Photo Only

Slideshow

Audio

HTML + Text

E! Online.com

/

24


Dropdown Menu Specs: Different States DEFAULT STATE

Sage Blocks /

HOVER STATE

SELECTED STATE 1px

97px

97px

95px

Text Only

1px

Text Only

112px

Text Only

1px

110px 1px

Each Icon + Text combo sits in a area or zone thatâ&#x20AC;&#x2122;s sized at 112px by 97px. In the defaul state (no hover and no selection) there is no background.

97px

95px

1px

110px

1px

1px

112px

1px 112px

When the user hovers over this area, the box 112x97px turns blue (#EFF8FE). This blue box has a 1px INSIDE border of the same color (#EFF8FE).

If a user selects one of these blocks, the selected block will now have a gray border (#979797) and no fill. The box will be a 112x97px box with a 1px INSIDE border with the color gray (#979797). NOTE: The selected state only appears when the user returns to the dropdown because when a user actually selects a block, the dropdown disappears.

HOVER STATE color: #ADDBFA / 173,219,250 (20%) 1. Choose Block 2. Customize Block 10px Call To Action

News

112px 97px

10px Photo + Text

3. Position Block

Video + Text

Enter Header for CTA SELECTED STATE Selectborder: Custom Thumbnail #979797 / 151,151,151 border size: 1px Call to Action

Quote + Photo

0 Words

Left List + Text

Right Center List + Title

Curtain Poll

JUMP

Tweet

112px <HTML> </HTML>

97px Photo Only

Video Only

Text Only

Quote Only

List + Photo Only

Slideshow

Audio

HTML + Text

E! Online.com

/

25


Dropdown Menu: Hover State Padding

17px

17px 50px

30px

30px

50px

30px

40px

30px

80px

20px

15px 11px

Photo + Text

17px

17px

27px 50px

30px

40px

Sage Blocks /

Video + Text

40px

30px

50px

30px

40px

17px 40px

50px

30px

12px

20px

E! Online.com

30px

34px

35px 30px

50px

35px

50px

30px

40px

30px

15px

Call to Action

Quote + Photo

List + Text

List + Title

Poll

Tweet

12px

25px 30px

17px

25px 50px

25px

30px

30px

50px 25px

30px

17px 50px

30px

40px

50px

30px

30px

17px

25px

40px

30px

30px

50px

30px

25px

17px

27px

50px <HTML>

50px

30px

40px

30px

20px

80px

15px 11px

Photo Only

Video Only

Text Only

Quote Only

List + Photo Only

Slideshow

30px

40px </HTML>

30px

15px

Audio

HTML + Text

17px

All icons and text are center aligned within the 112x97 hover box. NOTE: There is a 1px INSIDE border in the hover box. So the padding shown is to the BORDER, not the edge of the Hover box. For example, in Text Only, the width calculates like this: 1px border + 30px padding + 50px icon width + 30px padding + 1px border = 112px The height on Text Only is calculated like this: 1px border + 16px padding + 40px icon height + 10px padding underneath icon + 11px font line height + 18px padding + 1px border = 97px

/

26


Block Specs

Sage Blocks /

954px 34px 34px 2. Position Block

1. Choose Block 108px

48px

132px

48px

34px

48px

34px

18px 20px

48px

78px Text Only Left

Right

Center

Curtain

954px 31px

100px

954px 27px

0 Words

15px 1. Choose Block 10px 40px

10px 11px

15px 2. Position Block 10px 40px

40px

34px

10px 34px

34px

Text Only

15px

0 Words

Left

12px

Right

Center

Curtain

E! Online.com

/

27


Block Specs: Photo Only

14px 1. Choose Block 40px

40px

Sage Blocks /

2. Customize Block 10px 260px 40px Search20px by photo title

5px

3. Position Block 40px

40px

5px Select Gallery 20px to Add Photo Only Left

22px

10px 2. Customize Block

1. Choose Block

4px

10px

Right

Center

Curtain

3. Position Block

4px

Search by Photo Title

15px

4px

2px

5px

Select 2px Gallery to Add

5px

14px

Photo Only Left

1. Choose Block 19px

2. Customize Block

Right

Center

Curtain

Center

Curtain

3. Position Block

Search by photo title Select Gallery to Add

Photo Only

8px

Left

Right

E! Online.com

/

28


Block Specs: Photo + Text

1. Choose Block 10px

Sage Blocks /

2. Customize Block

3. Position Block

Search by photo title Select Gallery to Add

Photo + Text

8px

0 Words

Left

Right

Center

Curtain

E! Online.com

/

29


Block Specs: Video Only

1. Choose Block

Sage Blocks /

2. Customize Block 5px Enter Video ID

19px 5px

Preview

5px

3. Position Block

0/80

5px

Video ID | PANDA Title

Video Only

8px

Left

Right

Center

Curtain

E! Online.com

/

30


Block Specs: Video + Text

1. Choose Block 10px

Sage Blocks /

2. Customize Block

3. Position Block

Enter Video ID Preview

0/80

Video ID | PANDA Title

Video + Text

8px

0 Words

Left

Right

Center

Curtain

E! Online.com

/

31


Block Specs: Call to Action

1. Choose Block 24px

Sage Blocks /

2. Customize Block

3. Position Block

Enter Header for CTA Select Custom Thumbnail 75px (Optional)

Call To Action

Content Type Icon: 20px

8px

News 5px

Left

Right

Center

Curtain

color: linear gradient * 0% - #FFFFFF / 255,255,255 * 100% - #F3F3F3 / 243,243,243 border: #000000 / 0,0,0 (20%) border size: 1px border radius: 5px shadow: * x & y - 0px, 1px * blur - 2px * #000000 / 0,0,0 (10%) 0 Words

1. Choose Block 24px

2. Customize Block

3. Position Block

Enter Header for CTA Select Custom Thumbnail (Optional)

Call To Action

8px

0 Words

Content Type Icon:

3px

5px

News 12px5px

5px

3px

Left

Right

Center

Curtain

E! Online.com

/

32


Block Specs: Tweet

1. Choose Block 10px

Sage Blocks /

2. Customize Block Twitter Permalink or ID

3. Position Block Verify

Tweet

8px

Left

Right

Center

E! Online.com

/

33


Block Specs: Slideshow

1. Choose Block 10px

Sage Blocks /

2. Customize Block

3. Position Block

Select Gallery to Add

Slideshow

8px

Left

Right

Center

E! Online.com

/

34


Block Specs: Quote Only

1.1.Choose ChooseBlock Block 10px 10px

Sage Blocks /

2.2.Customize Position Block Block

3. Position Block

Search by photo title

Quote Ouote + Photo Only

8px 8px

Left

Right

Center

Curtain

Left

Right

Center

Curtain

Text Color:

00Words Words

#666666

E! Online.com

/

35


Block Specs: Quote + Photo

1. Choose Block 10px

Sage Blocks /

2. Customize Block

3. Position Block

Search by photo title

Quote + Photo

8px

0 Words

Left

Right

Center

Curtain

E! Online.com

/

36


Block Specs: List + Photo Only

1. Choose Block 10px

2. Customize Block

Sage Blocks /

3. Position Block

Search by photo title

Quote + Photo

8px

0 Words

Left

Right

Center

Curtain

E! Online.com

/

37


Block Specs: List + Title

1. Choose Block 10px

Sage Blocks /

2. Customize Block

3. Position Block

Search by photo title

Quote + Photo

8px

0 Words

Left

Right

Center

Curtain

E! Online.com

/

38


Block Specs: List + Text

1. Choose Block 10px

Sage Blocks /

2. Customize Block

3. Position Block

Search by photo title List #:

1

List + Text

8px

0 Words

Left

Right

Center

Curtain

E! Online.com

/

39


Block Specs: Audio

1. Choose Block 24px

Sage Blocks /

3. Position Block

2. Customize Block Enter Audio URL

0/3000

Audio

8px

Left

Right

Center

E! Online.com

/

40


Block Specs: HTML + Text

1. Choose Block

Sage Blocks /

2. Customize Block

3. Position Block

10px <HTML> </HTML>

HTML + Text

8px

0 Words

78px HTML

350px

0/10000

20px

Left

Right

Center

E! Online.com

/

41


Block Specs: Corner Dropdown

1. Choose Block

Sage Blocks /

2. Customize Block

3. Position Block Add Block Above

Search by photo title List #:

Add Block Below

1 Add Block Above

Delete

List + Photo Only Left

Right

Center

Curtain

122px 10px

5px

10px

Add Block Above

12px

Add Block Above

10px

Add Block Below

109px 10px

10px

Add Block Below

10px 10px

Delete 10px

Duplicate

2px

border: #000000 / 0,0,0 (20%) border size: 1px

10px

color: #FFFFFF / 255,255,255 shadow: * x & y - 0px, 2px * blur - 4px * #000000 / 0,0,0 (50%)

E! Online.com

104px Delete Duplicate

20px

Duplicate

/

42


E! Online.com Right Rail - Back End January 04, 2016 Version 1


Overview of CCT

1

2

TITLE

Title Enter title for Right Rail

/

E! Online.com

/

Target

Content Type:

Pin

None

News

POS 1

Content ID:

2b

The new Right Rail that will be featured on the new Article Detail Page will be controlled via a CCT. Users will go to the CCT page in Sage and will click Right Rail CCT under Desktop. From there they can click Create new Right Rail CCT.

1. Users will be able to edit the title copy here. The max character count is 25 characters, with a max of 2 lines of text. 2. Since there is only a max of 3 pieces of content in the Right Rail, there are 3 Content Position fields in this CCT. 2a. These radial buttons determine what will feed content in this position:

Content Position 2

Related

Target

Content Type:

Pin

None

POS 2

News

Content ID:

Related: This is the default option. Selecting this will use the articleâ&#x20AC;&#x2122;s Category Tags to feed in content for that specific position. This will use the number one category tag first, and content has to be within 5 days. If the first category tag does not have content with 5 days, use the second category tag. If second category tag does not have content within 5 days, use the third category tag. If no tag has content within 5 days, pull in most recent published from Top Stories. All content types will be used for this. Target: Selecting this option will use Adobe Target to use User Behavior to feed in content for that specific position. Pin: Selecting this option will allow the user to pin a specific piece of content. If they choose this, they need to complete the content type and content ID fields underneath the radial buttons for the respective position (2a).

Content Position 3

Related

Target

Content Type: Content ID:

Pin

They also have the ability to schedule how long the Pinned Content will run. They can set a start and end time (2b). Once the Pinned Content has expired, the Positionâ&#x20AC;&#x2122;s Content will default back to Related Content.

None

News

POS 3

None: Selecting this option will eliminate the con ten position entirely. If user selects none for all the positions, there will be no right rail. 3. Once the user is done, they need to tag the CCT with the correct franchise category. This is how the Right Rail will be fed to the correct Article Detail Page.

3

2

Content Position 1

Related

2a

Right Rail Back End

Category Tags


E! Online.com Nice To Haves - Sage Blocks December 17, 2015 Version 1


Overview

The following are features we would like to add into our newly upgraded Article Creation Page in Sage.

1. Drag & Drop: Ability to move Blocks around via a Drag & Drop feature instead of using the dropdown menu options "Move Up" and "Move Down" 2. Form Validation: When an editorial user incorrectly fills out a Block form, user receives form validation when they add a new block, letting the Editorial user know they have filled out the previous Block form incorrectly. 3. Templates: Pre-configured article templates for the editorial team to quickly write articles in a certain format.

Nice To Haves Sage Blocks /

E! Online.com

/

2


Drag & Drop

1

1

Clicking and holding the click anywhere on the top gray box of a block will initiate the drag and drop user flow. The drag and drop functionality will act as follows: 1. User clicks, HOLDS, and DRAGS the block. 2. This will allow the current Block to be draggable by creating a smaller version of the block (for more manageable dragging usability). 3. While still holding down on this smaller version of the block, the user can then move the Block up or down, given that there are other blocks above and below it. 4. Once the Block is placed in the desired order, the user can let go of the button.

Nice To Haves Sage Blocks /

E! Online.com

/

3


Drag & Drop Visual User Flow

Nice To Haves Sage Blocks /

User wants to move the Text Only block above the Photo+Text block. User, clicks, holds, and drags the Drag button.

E! Online.com

/

4

After the user clicks, holds and drags the Drag Icon, a smaller representation of the original block pops up. Once this smaller image pops up, the entire block is covered by a black opaque (#000000, 20% opacity) layer, indicating that this block is being moved. While still holding down on the mouse, the user can move this block around via this smaller image.

Once the user moves the smaller image above another block, a 3px Blue Line appears indicating this is where the new block will be placed.

Once the user lets their mouse go, the block will move to its new location.


Form Validation 1. Choose Block

Nice To Haves Sage Blocks /

2. Customize Block

3. Position Block

Search by photo title Select Gallery to Add Photo + Text Left

Center

1

0 Words

1

Right

When a user incorrectly fills out a Block, and then tries to add a new block via the +Add button, Sage will add the new Block underneath, HOWEVER, it will give an error state to the previous, incorrectly filled block. If any of the error states for any block remain when the user tries to publish, Sage will not allow the article to be published.

Error state will overlay on the bottom bar of the Block. This will save space and will avoid having to push down Blocks below to make space for the error state.

Curtain

E! Online.com

/

12


Error States for All Blocks Block

Error States

Text Only

Must add text to this block.

Photo Only

Must add a photo to this block.

Photo+Text

Must add a photo to this block

Video Only

Must add a video to this block

Video+Text

Must add a video to this block

Quote Only

Must add text to this block. Max character length is ___.

Quote+Photo

Must add text to this block. Max character length is ___. (if user doesn’t add text) Must add a photo to this block. (if user doesn’t add photo)

Call To Action

Must add a header to this block. (if user doesn’t add a header) Must add text that is hyperlinked to this block. (if user doesn’t add text that links to content.)

Tweet

Must add Twitter permalink or ID to this block.

Poll

Must add Poll title to this block.

Gallery must have a minimum of 3 photos. Slideshow

Must add a gallery to this block.

Nice To Haves Sage Blocks /

E! Online.com

/

13


Error States for All Blocks Cont'd Block

Error States

HTML

Must add HTML to this block.

Audio

Must add an audio URL to this block.

List Only

Must add a photo to this block Duplicate list number detected. Make sure list numbers are not repeated.

List + Photo

Must add a photo to this block Duplicate list number detected. Make sure list numbers are not repeated.

List + Title

Must add a photo to this block Duplicate list number detected. Make sure list numbers are not repeated. Must add a title to this block

Nice To Haves Sage Blocks /

E! Online.com

/

14


Templates

Nice To Haves Sage Blocks /

Choose Template

Photo + Text

Video + Text

Photo + Text

Call to Action

Call to Action

Call to Action

List + Title

List + Title

Photo + Text

Photo + Text

Quote Only List + Title

Video Only

Call to Action

Text Only List + Title

Call to Action Call to Action

Design NOT final. At some point we want the ability to add pre-configured templates for easy article creation. Hereâ&#x20AC;&#x2122;s the user flow: 1. On the top of the Article Creation page, user clicks on the template dropdown and views a visual dropdown menu (much like the Choose Your Block Menu). 2. In this dropdown menu, users can choose a template for their article. 3. Once a template is selected, the blocks that make up the template will autofill the page in the exact order as stated in the template. Blocks are still editable and changeable.

E! Online.com

/

15


ANIMATIONS. 26. Social Scroll 27. Right Rail Lock/Scroll 28. Hover over CTA 29. Hover on Social 30. Sponsor Logo Docking 31. Lazy Load on ADP page loading


Master documentation compressed