BET.com Redesign · 2 BET.com Redesign UX Speciﬁcation / Version 7.5 / May 25, 2016 Changelog...

May 25, 2016

JP ArsenaultUX [email protected]

BET.com RedesignUX Specification, Version 7.5

2

BET.com Redesign UX Specification / Version 7.5 / May 25, 2016

Changelog

Version Date Changes

7.5 5/25/2016 • Added Large variation for enhanced article video embed for use with tier 2 • Fixed typos on Enhanced Article content pages• Added Loader Module for Enhanced Article Tier 1• Updated Ongoing Story Tile to include End of List varation• Added Sticky share links to Ongoing Story Landing page• Added Listicle Item: Text-only Variation

7.4 5/18/2016 • Re-numbered a few Content Pages to reduce confusion

• Added Ongoing Story Gallery List page

• Updated Ongoing Story Article Page

• Updated creative for Ongoing Story Inline Module

• Updated Enhanced Article Pages

• Clarified annotations for Enhanced Hero Module

• Enhanced Ad renamed to Enhanced Promo Module

• Enhanced Promo Module Halftone mask details updated

• Updated Nav behavior for Tier 1 Enhanced Article Page

7.3 5/12/2016 • Updated Image Carousel module with latest creative

• Added Enhanced Ad module

• Renamed Enhanced Graphic CTA to Enhanced Parallax Promo

• Updated Enhanced Parallax Promo with more details and variations

7.2 5/10/2016 • Updated Ongoing Story List Module with latest creative

• Added Ongoing Story Inline Module

• Renumbered Enhanced Article content modules to keep Ongoing Story modules together

• Replaced deprecated Subtitle Text module with Title Text Module

• Added Ongoing Story variations to Title Text

7.1 5/9/2016 • Updated Enhanced Hero Module

• Updated Image Carousel Module

• Updated Ongoing Story content pages

3


ChangelogVersion Date Changes

7.0 5/5/2016 • Added Enhanced Hero Module

• Added Progress Bar content module

• Updated Body Copy Module to include Enhanced Article variations

• Updated Video Embed to include Enhanced Article variation

• Updated Listicle Item with latest creative

• Added Image Carousel module

• Enhanced Graphic CTA

• Added Enhanced Article Pages (Tier 1 and 2)

6.3 3/29/2016 • Updated timestamp rules for Content Feed Modules

• Updated timestamp rules for Social Share Links

• Minor updates to Schedule Page behavior

• Clarified Ad and tablet portrait behavior for Grid List Module

• Added Ongoing Story List Module, Tile, and content pages

• Added Video Playlist Player Module, and Detail Page

6.2 3/24/2016 • Added Listicle Item content module

• Added Listicle content page

• Updated List Module and Revised List Module CTA button behavior

• Updated Branded Banner Without Subnav variation screens

• Updated Related In-Line Item with single item variation

• Updated Featured modules to include references to the styleguide for sizing and other style information

6.1 3/16/2016 • Added a Without Subnav variation for Branded Banner

• Updated Global Nav behavior when Branded Banner is present

• Updated Revised List Module CTA button behavior

• Updated Social Share Links buttons

• Updated Share menu buttons for Content Feed Modules

6.0 3/1/2016 • Deprecated the old Countdown Module, FM.8

• Removed the note about ad injection from the Feed Container Module FM.1

• Video Embed Age Gate authorization states updated to include a re-authorization step

• Added Image Gallery Detail End Cap variation

• Added image count to Image Gallery Embed content icon

• Added Top Video Landing grid page

• Added Grid Container See All variation for Tentpoles and Events to allow for different button behavior

4


Table of ContentsGLOBAL NAVIGATION

GN.1.1. Global Navigation Elements ...........................................................................................................................10

GN.1.2. Global Navigation Responsive Behavior ...........................................................................................11

GN.1.3. Global Navigation: Pull-out Menu (Mobile) ....................................................................................12

GN.1.4. Global Navigation: Desktop Variation .................................................................................................13

GN.1.5. Global Navigation: Varying Viewport Widths (Desktop) ..................................................14

GN.1.6. Global Navigation: Shows Drop-down (Desktop) ...................................................................15

GN.1.7. Global Navigation: Music, Celebs, Lifestyle Drop-downs (Desktop) ......................16

GN.1.8. Global Navigation: More Drop-down (Desktop) .......................................................................17

GN.1.9. Global Navigation - Triple Promo ............................................................................................................18

GN.2.1. Branded Banner ........................................................................................................................................................19

GN.2.2. Branded Banner (Desktop) ..........................................................................................................................20

GN.2.3. Branded Banner: Show Specific Variation .....................................................................................21

GN.2.4. Branded Banner: Responsive Behavior ............................................................................................22

GN.2.5. Branded Banner: Global Nav Behavior .............................................................................................23

GN.2.6. Branded Banner: Without Subnav Variation ...............................................................................24

GN.3.1. Page Footer ..................................................................................................................................................................25

GN.3.2. Page Footer: Responsive Behavior.......................................................................................................26

GN.3.3. Page Footer: Back to Top ..............................................................................................................................27

GN.3.4. Page Footer: Back to Top Responsive Behavior .....................................................................28

GN.4.1. Search .................................................................................................................................................................................29

GN.4.2. Search: Autosuggest ..........................................................................................................................................30

GN.4.3. Search: Search Results Page ......................................................................................................................31

GN.4.3. Search: No Results Page .................................................................................................................................32

GN.4.4. Search: Mobile Menu Variation .................................................................................................................33

GN.5.1. Countdown Module ...............................................................................................................................................34

GN.5.2. Countdown Module: Responsive Behavior ...................................................................................35

GN.5.3. Countdown Module: Scroll Behavior ...................................................................................................36

GN.5.4. Countdown Module: Roll-Over Behavior ........................................................................................37

GN.5.5. Countdown Module: Add to Calendar Roll-over .....................................................................38

FEED MODULESFM.1.1. Feed Container ............................................................................................................................................................41

FM.1.2. Feed Container Responsive Behavior ..................................................................................................42

FM.1.3. Feed Container: Limiting and Filtering ...............................................................................................43

FM.1.4. Feed Container: Pagination and Lazy Load ..................................................................................44

FM.2.1. Content Module .......................................................................................................................................................45

FM.2.2. Content Module: Responsive Behavior .............................................................................................46

FM.2.3. Content Module: Video Variation ..........................................................................................................47

FM.2.4. Timestamp Rules and Variations ............................................................................................................48

FM.2.5. Share Menu Expanded ......................................................................................................................................49

FM.2.6. Roll-Over Behavior ...............................................................................................................................................50

FM.3.1. Trending Module .......................................................................................................................................................51

FM.3.3. Trending Module Responsive Behavior ............................................................................................52

FM.3.4. Roll-Over Behavior ...............................................................................................................................................53

FM.4.1. Featured 1-Up Module .........................................................................................................................................54

FM.4.2. Featured 1-UP Module: Large Responsive Behavior ............................................................55

FM.4.3. Featured 1-UP Module: Small Responsive Behavior .............................................................56

FM.4.4. Featured 1-UP Module: Roll-Over Behavior..................................................................................57

FM.4.5. Share Menu Expanded –DEPRECATED ...........................................................................................58

FM.5.1. Featured 2-Up Module ........................................................................................................................................59

FM.5.2. Featured 2-UP Module: Large Responsive Behavior ...........................................................60

FM.5.3. Featured 2-UP Module: Small Responsive Behavior ............................................................61

FM.5.4. Featured 2-UP Module: Roll-Over Behavior.................................................................................62

FM.5.5. Share Menu Expanded – DEPRECATED ..........................................................................................63

FM.6.1. Follow And Newsletter Sign-up ................................................................................................................64

FM.6.2. Follow and Newsletter Signup: Responsive Behavior ........................................................65

FM.6.3. Email Entry Flow ....................................................................................................................................................66

FM.6.4. Follow and Newsletter Signup: Left Rail Condensed Variation ................................67

FM.7.1. List Module .....................................................................................................................................................................68

FM.7.2. List Module: Responsive Behavior ..........................................................................................................69

FM.7.3. List Module: Sponsored Variation ...........................................................................................................70

FM.7.4. List Module: 2-Column Variations ...........................................................................................................71

FM.7.1. List Module (Deprecated) ................................................................................................................................72

FM.7.2. List Module: Responsive Behavior (Deprecated) ....................................................................73

FM.8.1. Countdown Module ...............................................................................................................................................74

FM.8.2. Countdown Module: Responsive Behavior ...................................................................................75

FM.9.1. Tag Banner Module ................................................................................................................................................76

FM.9.2. Tag Banner Module: Variation ....................................................................................................................77

FM.9.3. Tag Banner Module: Responsive Behavior ....................................................................................78

FM.10.1. Static Promo Module ..........................................................................................................................................79

FM.10.2. Static Promo Module: Small Variation .............................................................................................80

5


Table of ContentsFM.10.2. Static Promo Module: Responsive Behavior ..............................................................................81

FM.11.1. Parallax Promo Module ......................................................................................................................................82

FM.11.2. Parallax Promo Module: Responsive Behavior ..........................................................................83

FM.12.1. TV Schedule Module ...........................................................................................................................................84

FM.12.2. TV Schedule: Responsiveness ..................................................................................................................85

FM.12.3. TV Schedule Module: Single Item Variation ................................................................................86

FM.13.1. Related List Module (Deprecated) ........................................................................................................87

FM.13.2. Related List Module: Responsive Behavior (Deprecated) ............................................88

FM.14.1. Simple List Module (Deprecated) ..........................................................................................................89

FM.14.2. Simple List Module: Responsive Behavior (Deprecated) ..............................................90

FM.15.1. Ongoing Story List Module...........................................................................................................................91

FM.15.2. Ongoing Story List Module: Responsive Behavior ...............................................................92

FEED PAGESFP.1.1. Responsive Considerations for All Feed Pages .............................................................................95

FP.2.1. Home Page ......................................................................................................................................................................96

FP.3.1. Music Landing Page ................................................................................................................................................97

FP.8.1. Tag Page ............................................................................................................................................................................98

FP.9.1. Topic Page ........................................................................................................................................................................99

FP.10.1. Full Episodes Page .................................................................................................................................................100

CONTENT MODULESCM.1.1. Article Body Container ........................................................................................................................................104

CM.2.1. Hero Container Module......................................................................................................................................105

CM.2.2. Hero Container: Responsive Behavior ...............................................................................................106

CM.3.1. Title Text Module ......................................................................................................................................................107

CM.3.2. Title Text: Responsive Behavior ...............................................................................................................108

CM.3.3. Title Text Module: No Subtitle Variation ..........................................................................................109

CM.3.4. Title Text Module: Ongoing Story Variation .................................................................................110

CM.4.1. Author ................................................................................................................................................................................111

CM.4.2. Author: Responsive Behavior ....................................................................................................................112

CM.5.1. Hero Image (Deprecated) ...............................................................................................................................113

CM.5.2. Hero Image: Responsive Behavior (Deprecated) ...................................................................114

CM.6.1. Image Source Attribution ................................................................................................................................115

CM.6.2. Image Source Attribution: Responsive Behavior ....................................................................116

CM.7.1. Social Share Links ....................................................................................................................................................117

CM.7.2. Social Share Links: Responsive Behavior ........................................................................................118

CM.7.3. Social Share Links: Scrolled State ..........................................................................................................119

CM.7.4. Social Share Links Expanded States ...................................................................................................120

CM.7.5. Social Share Links: Hero Variation .........................................................................................................121

CM.7.6. Social Share Links: Video Embed Expanded State ...............................................................122

CM.7.7. Social Share Links: Without Metadata Variation .......................................................................123

CM.8.1. Body Copy .....................................................................................................................................................................124

CM.8.2. Body Copy: Responsive Behavior .........................................................................................................125

CM.8.3. Body Copy: Featured Article Variation ............................................................................................126

CM.8.2. Body Copy: Container Width .....................................................................................................................127

CM.9.1. Image Embed ..............................................................................................................................................................128

CM.9.2. Image Embed: Responsive Behavior ..................................................................................................129

CM.9.3. Image Embed: Hero Variation ...................................................................................................................130

CM.10.1. HTML Embed .............................................................................................................................................................131

CM.10.2. HTML Embed: Responsive Behavior .................................................................................................132

CM.11.1. Related In-Line Item .............................................................................................................................................133

CM.11.2. Related In-Line Item: Responsive Behavior .................................................................................134

CM.11.3. Related In-Line Item: Single Item Variation ..................................................................................135

CM.12.1. Topic / Tag Links ....................................................................................................................................................136

CM.12.2. Topic / Tag Links: Responsive Behavior .........................................................................................137

CM.13.1. Social Post Embed Module ..........................................................................................................................138

CM.15.1. Grid List Module ......................................................................................................................................................139

CM.15.2. Grid List: Responsive Behavior ...............................................................................................................140

CM.16.1. Video Embed .............................................................................................................................................................141

CM.16.2. Video Embed: Responsive Behavior .................................................................................................142

CM.16.3. Video Embed: Hero Variation ..................................................................................................................143

CM.16.4. Video Embed: Short Browser Hero Variation ...........................................................................144

CM.16.5. Video Embed: TVE Auth Required Variation ............................................................................145

CM.16.5. Video Embed: Age Gate Variation ......................................................................................................146

CM.16.6. Video Embed: Multiple Image Option .............................................................................................147

CM.16.7. Video Embed: Enhanced Article Variation ..................................................................................148

CM.16.8. Video Embed: Enhanced Article Large Variation .................................................................149

CM.16.9. Video Embed: Enhanced Article Large Variation: Responsive Behavior.......150

CM.17.1. Video Playlist Embed ..........................................................................................................................................151

CM.17.2. Video Playlist Embed: Hero Variation ...............................................................................................152

CM.17.3. Video Playlist Embed: Responsive Behavior ..............................................................................153

6


Table of ContentsCM.18.1. Video Playlist Player ............................................................................................................................................154

CM.18.2. Video Playlist Player: Responsive Behavior ................................................................................155

CM.18.3. Video Playlist Player: Mobile Variation ............................................................................................156

CM.20.1. Image Gallery Embed ......................................................................................................................................157

CM.20.2. Image Gallery Embed (Hero Variation) ........................................................................................158

CM.20.3. Image Gallery Embed: Responsive Behavior ..........................................................................159

CM.21.1. Listicle Item .................................................................................................................................................................160

CM.21.2. Listicle Item: Responsive Behavior .....................................................................................................161

CM.21.3. Listicle Item: Text-only Variation ...........................................................................................................162

CM.22.2. Pull Quote: Responsive Behavior ........................................................................................................163

CM.23.1. Comments ...................................................................................................................................................................164

CM.23.2. Comments: Responsive Behavior .......................................................................................................165

CM.23.1. Comments: Wide Variation .........................................................................................................................166

CM.24.1. Recommended Content ................................................................................................................................167

CM.24.2. Recommended Content: Responsive Behavior ....................................................................168

CM.25.1. Heading..........................................................................................................................................................................169

CM.25.2. Heading: Responsive Behavior ..............................................................................................................170

CM.25.3. Heading: Variations ...........................................................................................................................................171

CM.26.1. Ongoing Story Tile ..............................................................................................................................................172

CM.26.2. Ongoing Story Tile: Responsive Behavior ..................................................................................173

CM.26.3. Ongoing Story Tile: Large Variation .................................................................................................174

CM.26.4. Ongoing Story Tile: End of List Variations ................................................................................175

CM.27.1. Ongoing Story Inline Module .....................................................................................................................176

CM.27.2. Ongoing Story Inline Module: Responsive Behavior .........................................................177

CM.28.1. Enhanced Hero Module ..................................................................................................................................178

CM.28.2. Enhanced Hero Module: Responsive Behavior ......................................................................179

CM.28.3. Enhanced Hero Module: Tier 1 Layer Structure .....................................................................180

CM.28.4. Enhanced Hero Module: Tier 1 Mobile Parallax Behavior .............................................181

CM.28.5. Enhanced Hero Module: Tier 1 Desktop Parallax Behavior .........................................182

CM.28.6. Enhanced Hero Module: Vertical Scroll Behavior................................................................183

CM.29.1. Progress Bar Module .........................................................................................................................................184

CM.29.2. Progress Bar Module: Calculating Progress ..............................................................................185

CM.30.1. Image Carousel Module .................................................................................................................................186

CM.30.2. Image Carousel Module: Responsive Behavior .....................................................................187

CM.30.3. DEPRECATED–Image Carousel Module: Responsive Page Behavior .............188

CM.30.1. Enhanced Parallax Promo ...........................................................................................................................189

CM.30.2. Enhanced Parallax Promo: Responsive Behavior ...............................................................190

CM.30.3. Enhanced Parallax Promo: Layer Structure ..............................................................................191

CM.30.4. Enhanced Parallax Promo: Video Variation ..............................................................................192

CM.31.1. Enhanced Promo Module ..............................................................................................................................193

CM.31.2. Enhanced Promo Module: Responsive Behavior ..................................................................194

CM.31.3. Enhanced Promo Module: Layers and Scroll Behavior ...................................................195

CM.32.1. Enhanced Article Loader ..............................................................................................................................196

CM.32.2. Enhanced Article Loader: Responsive Behavior ..................................................................197

CONTENT PAGESCP.1.1. Responsive Considerations for All Content Pages .....................................................................200

CP.2. Article Page .......................................................................................................................................................................201

CP.3.1. Image Gallery List Page ......................................................................................................................................202

CP.3.2. Image Gallery List: Responsive Behavior .........................................................................................203

CP.4.1. Image Gallery Detail Page ................................................................................................................................204

CP.4.2. Image Gallery Detail Page: Responsive Behavior ....................................................................205

CP.4.3. Image Gallery Detail Page - Mobile States .....................................................................................206

CP.4.4. Image Gallery Detail Page - Desktop States ................................................................................207

CP.4.5. Image Gallery Detail Page: End Cap ....................................................................................................208

CP.5. Video Detail Page ........................................................................................................................................................209

CP.6. Listicle Page ......................................................................................................................................................................210

CP.7. Ongoing Story Article Page ...............................................................................................................................211

CP.8. Ongoing Story Video Detail Page ...............................................................................................................212

CP.9. Ongoing Story Image Gallery List Page ................................................................................................213

CP.10. Ongoing Story Landing Page ........................................................................................................................214

CP.11. Video Playlist Detail Page....................................................................................................................................215

CP.12. Tier 1 Enhanced Article Page ..........................................................................................................................216

CP.13. Tier 2 Enhanced Article Page .........................................................................................................................217

GRID MODULESGM.1.1. Grid Container .............................................................................................................................................................220

GM.1.2. Grid Container Responsive Behavior ...................................................................................................221

GM.1.3. Grid Container: Ad Placement ....................................................................................................................222

GM.1.4. Grid Container: See More Variation .......................................................................................................223

GM.1.5. Grid Container: See All Variation .............................................................................................................224

GM.2.1. Video Playlist Tile ....................................................................................................................................................225

7


Table of ContentsGM.3.1. Show Tile .........................................................................................................................................................................226

GRID PAGESGP.1.1. Responsive Considerations for All Grid Pages ..............................................................................229

GP.2.1. Trending Landing Page .......................................................................................................................................230

GP.3.1. Top Video Landing Page ...................................................................................................................................231

SHOW PAGESSP.1. All Shows Landing Page ..........................................................................................................................................234

SP.2. Show-Specific Landing Page ............................................................................................................................235

SP.3. Show-Specific Video Detail Page .................................................................................................................236

SP.4. Show-specific Image Gallery List Page ..................................................................................................237

SP.5. Show-specific Cast Page.......................................................................................................................................238

SP.6. Episode List Page ........................................................................................................................................................239

SP.7. Show-specific Article Page..................................................................................................................................240

SP.8. Show-specific Videos Page ................................................................................................................................241

SP.9. Show-specific Photos Page ................................................................................................................................242

UNIQUE PAGESUP.1.1. Schedule Page ...............................................................................................................................................................245

UP.1.2. Schedule Page: Responsive Behavior ...................................................................................................246

UP.2.1. Plain Text Page ............................................................................................................................................................247

UP.3.1. Cable Subscription Authentication .........................................................................................................248

UP.3.2. Cable Subscription Form Flow ..................................................................................................................249

UP.3.3. Cable Subscription Form: View All Providers ..............................................................................250

UP.3.4. Cable Subscription Form: Signed In .....................................................................................................251

UP.3.5. Cable Subscription Form: Provider Not Listed Flow ............................................................252

UP.3.6. Cable Subscription Form: Xfinity Login ............................................................................................253

UP.3.7. Cable Subscription Form: Access Ended .........................................................................................254

UP.4.1. 404 Error Page ...........................................................................................................................................................255

UP.4.2. 404 Error Page: Responsive Behavior ...............................................................................................256

UP.5.1. HTML Modal Layer ...................................................................................................................................................257

UP.5.2. HTML Modal Layer: Responsive Behavior .......................................................................................258

TENTPOLE & BETX MODULESTM.1.1. Revised List Module ................................................................................................................................................261

TM.1.2. Revised List Module: Responsive Behavior ....................................................................................262

TM.2.1. Packaged List Module .........................................................................................................................................263

TM.2.2. Packaged List Module: Responsive Behavior .............................................................................264

TM.3.1. Revised Featured Module ................................................................................................................................265

TM.3.2. Revised Featured Module: Responsive Behavior ....................................................................266

TM.3.3. Revised Featured Module: Roll-Over Behavior .........................................................................267

TM.4.1. Featured 3-UP Module .......................................................................................................................................268

TM.4.2. Featured 3-UP Module: Responsive Behavior ...........................................................................269


TM.5.2. Featured 4-UP Module: Responsive Behavior ...........................................................................271


TM.6.2. Featured 5-UP Module: Responsive Behavior ............................................................................273

TM.7.1. Revised Schedule Module ................................................................................................................................274

TM.8.1. Revised Global Nav ................................................................................................................................................275

TM.9.1. Branded Banner: Awards Show .................................................................................................................276

TM.9.2. Branded Banner and Subnav: BET Experience .........................................................................277

TM.10.1. Logo Quilt Module ................................................................................................................................................278

TM.10.2. Logo Quilt Module: Responsive Behavior ....................................................................................279

TENTPOLE & BETX PAGESTP.1.1. Tentpole Homepage .................................................................................................................................................282

TP.2.1. Tentpole Nominees ..................................................................................................................................................283

TP.3.1. Tentpole Winners .......................................................................................................................................................284

TP.4.1. Tentpole Performers ...............................................................................................................................................285

TP.5.1. Tentpole Videos (e.g. Performances) .....................................................................................................286

TP.6.1. Tentpole Honorees ...................................................................................................................................................287

TP.7.1. Tentpole Article / Image Gallery Detail Page .................................................................................288

TP.8.1. Tentpole Tag page ....................................................................................................................................................289

TP.9.1. BET Experience Homepage ............................................................................................................................290

TP.10.1. BET Experience Logo Grid Page ..............................................................................................................291

TP.11.1. BET Experience Events .......................................................................................................................................292

TP.12.1. BET Experience Information pages .......................................................................................................293

TP.14.1. BET Experience Performers Page ...........................................................................................................294

TP.15.1. BET Experience Schedule Page ................................................................................................................295

TP.16.1. BET Experience Event Detail Page ........................................................................................................296

BET.com Redesign / UX Specification

Global Navigation

BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 9

GLOBAL NAVIGATIONOverview

GN.1.1. Global Navigation Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

GN.1.2. Global Navigation Responsive Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11

GN.1.3. Global Navigation: Pull-out Menu (Mobile) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

GN.1.4. Global Navigation: Desktop Variation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

GN.1.5. Global Navigation: Varying Viewport Widths (Desktop) . . . . . . . . . . . . . . 14

GN.1.6. Global Navigation: Shows Drop-down (Desktop) . . . . . . . . . . . . . . . . . . . . . . . 15

GN.1.7. Global Navigation: Music, Celebs, Lifestyle Drop-downs (Desktop) . 16

GN.1.8. Global Navigation: More Drop-down (Desktop) . . . . . . . . . . . . . . . . . . . . . . . . . 17

GN.1.9. Global Navigation - Triple Promo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

GN.2.1. Branded Banner . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

GN.2.2. Branded Banner (Desktop) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

GN.2.3. Branded Banner: Show Specific Variation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

GN.2.4. Branded Banner: Responsive Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .22

GN.2.5. Branded Banner: Global Nav Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

GN.2.6. Branded Banner: Without Subnav Variation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

GN.3.1. Page Footer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

GN.3.2. Page Footer: Responsive Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

GN.3.3. Page Footer: Back to Top . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .27

GN.3.4. Page Footer: Back to Top Responsive Behavior . . . . . . . . . . . . . . . . . . . . . . . 28

GN.4.1. Search . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

GN.4.2. Search: Autosuggest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

GN.4.3. Search: Search Results Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

GN.4.3. Search: No Results Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

GN.4.4. Search: Mobile Menu Variation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

GN.5.1. Countdown Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

GN.5.2. Countdown Module: Responsive Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

GN.5.3. Countdown Module: Scroll Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

GN.5.4. Countdown Module: Roll-Over Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .37

GN.5.5. Countdown Module: Add to Calendar Roll-over . . . . . . . . . . . . . . . . . . . . . . . 38

The Global and Show Navigation areas accomplish two things: they show you what content is available, they give you a way to navigate to that content.


GLOBAL NAVIGATION

The Global Navigation is visible on all pages and gives easy access to all the main categories, as well as other selected destinations.

GN.1.1. Global Navigation Elements

1 BET LOGO

Tap to go to the home page.

2 QUICK ACCESS ICONS

Quickly access Trending and Must Watch Videos.

3 NAV DROPDOWN

Tap to have the nav slide in from the left, pushing the content right.

2

1

3


GLOBAL NAVIGATIONGN.1.2. Global Navigation Responsive Behavior

On tablet, the layout is the same. The nav bar is compacted to preserve space on mobile.

On desktop, the nav bar is more complete, with all the main categories displayed, as well as the three special icons.


GLOBAL NAVIGATION

On small touch devices, and on all browser sizes on show pages, the Global Navigation is minimized with a pull-out menu hidden behind a button.

GN.1.3. Global Navigation: Pull-out Menu (Mobile)

1 CLOSE BUTTON

The menu button turns into a close button when the nav is open. Tapping this again closes the nav.

2 TOP NAV LINKS

The Home, Trending and Videos links (or their replacements when showing a branded banner) should still be active when the menu is open.

3 SEARCH BAR

Tap to focus and begin entering search term.

4 SHOWS DROPDOWN LINK/EXPANDED SHOWS LIST

Tap to expand a list of shows, which will push down the rest of the nav. This reveals a curated set of up to four shows. Each links to its Show Landing page. Tapping again closes the expanded list.

5 ALL SHOWS LINK

This is a static link to the All Shows page.

6 OTHER CATEGORY LINKS

The four remaining main categories are displayed here. Each links to the landing page for that category.

7 FULL EPISODES & TV SCHEDULE LINKS

Links to the Full Episodes page, and the TV Schedule page.

8 FEATURED ITEMS

Up to 3 curated items. Each one links to the URL assigned in the CMS.

9 APP PROMO

Links to a redirect that either opens the app store most relevant to you, or opens an app description page.

10 FOLLOW LINKS

11 NEWSLETTER SUBSCRIPTION FORM

12 LEGAL LINKS AND INFO

Copyright information, legal info and partner links.

3

1 2

4

5

6

7

8

9

10

11

12

UPDATE PENDING


GLOBAL NAVIGATION

The desktop version of the nav mirrors the mobile, but with some extra features and states.

GN.1.4. Global Navigation: Desktop Variation

1 DEFAULT STATE (HOMEPAGE, TAG PAGES, AND SEARCH RESULTS)

The nav bar in its default state, top of the page.

2 CATEGORY LINKS

These are broken out as separate links on desktop, and when you hover your mouse over them, drop-down menus appear below.

3 MORE MENU

The items that are not part of a category section in the mobile nav (i.e., anything at the bottom of the slide out menu) appears in this menu when you mouse over the three dot link.

4 SEARCH BUTTON

Click this button to open the search entry field.

5 COMPACT STATE (HOMEPAGE, TAG PAGES, AND SEARCH RESULTS)

When you scroll to the point at which the nav bar “hits” the top of the viewport, it transitions to a shorter, more compact mode, with a different logo treatment and no labels for the featured links. This bar remains fixed at the top of the viewport until you scroll back to the top of the page again.

6 DEFAULT STATE (CATEGORIZED PAGES)

When viewing a page that has a primary category that matches one of the 5 shown, the category link in the nav bar is highlighted.

7 COMPACT STATE (CATEGORIZED PAGES)

The highlight remains as the page is scrolled and the nav bar assumes its compact state.

1

5

6

7

3 42


GLOBAL NAVIGATION

At different viewport widths, the global nav appears slightly different.

GN.1.5. Global Navigation: Varying Viewport Widths (Desktop)

997PX

1230PX

125PX 125PX

1451PX

1 BROWSER WIDTH = 997–1229PX

When the browser is at least 997 pixels wide, but still not a wide screen (e.g., a tablet in landscape) there is very little padding around the content and the nav.

2 BROWSER WIDTH = 1230–1450PX

The margins become fixed at 125 px on either side of the content and nav such that the nav may be narrower than 997 pixels wide at some screen sizes. This is to better accomodate certain hero content.

3 BROWSER WIDTH > 1450PX

When the browser width is larger than 1450px, the content width stays fixed at 1200px as the outer margins continue to grow.

1

2

3


GLOBAL NAVIGATION

The Shows expanded dropdown is unique in that it contains links to full episodes and the TV Schedule.

GN.1.6. Global Navigation: Shows Drop-down (Desktop)

1 FEATURED SHOW LINKS

Up to 4 featured shows may be curated and they appear as links in the left column here. These correspond to the shows that appear in the expandable shows menu in the mobile version of the nav.

2 STATIC LINKS

Taking up the last two slots are Full Episodes and TV Schedule links. Unlike the featured show links, these two are static.

3 FEATURED THUMBNAILS

The first three content items featured on the All Shows Landing Page are also featured here, in thumbnail form.

4 SEE ALL SHOWS

Link to the All Shows Landing Page.

1

2

3

4


GLOBAL NAVIGATION

The Music, Celebs, and Lifestyle mouse-over states of the desktop nav all contain the same structure and elements.

GN.1.7. Global Navigation: Music, Celebs, Lifestyle Drop-downs (Desktop)

1 PROMOTED LINKS

Up to 6 curated links here; can link to anything within the given category.

2 FEATURED CONTENT

The first three featured content items on the corresponding category landing page also appear here in thumbnail form.

3 SEE ALL BUTTON

This says ‘SEE ALL [CATEGORY NAME]’ and links to the appropriate Category Landing page.

1 2

3


GLOBAL NAVIGATION

The dropdown that appears when you hover over the ... link looks similar to the other dropdowns, but has several different elements.

GN.1.8. Global Navigation: More Drop-down (Desktop)

1 PROMO LINKS

These are links to various promotional items, as specified in the CMS. Max number of links is 6.\

2 FEATURED ITEMS

These 3 featured items are the same as the Featured items in the mobile dropdown menu and the Triple Promo.

3 SOCIAL BUTTONS

These link to their respective BET social pages from which you can follow BET.

4 APP PROMO

A redirect link that will lead you to the appropriate app store for your platform or take you to a page where you can find app store links.

5 NEWSLETTER SUBSCRIPTION FORM

Enter your email address to subscribe to the BET newsletter.

2

53 4

1


GLOBAL NAVIGATION

This promotional element appears only on wide screens, and only on the first page view per session.

GN.1.9. Global Navigation - Triple Promo

1 PROMOTED ITEMS

Three items that appear at the top of the page. They don’t lock up like the rest of the nav, rather they scroll with the page content. These are the same three items that appear in the “...” dropdown on desktop, and also in the mobile dropdown. They are curated in the CMS. This module only appears on the first page of a session, and only on browsers wider than 995px.

2 BACKGROUND IMAGE

Each promo has a background image, and this is a different crop of the same image in the other views of this item.

3 CTA TEXT

Text that tells you what you’re looking at. Also the same label as in the other views of this item.

1 2

3


GLOBAL NAVIGATION

The Branded Banner is an element that can be added to a franchise template, and any page with the corresponding franchise tag will display it.

GN.2.1. Branded Banner

1

4

6

52

3

7

8

9

1 GLOBAL NAV BAR

The Global Nav Bar appears in a minimized form above the branded banner, but scrolls off the screen as the page is scrolled. Scroll up the page again to reveal it.

2 BRAND NAME

The banner itself, titled with the name of the brand, event, or show in question.

3 SUPPORTING TEXT

This could be a hashtag, a tune-in time, or a subtitle for the section.

4 SPONSOR NAME:

OPTIONAL: If there is a sponsor, the logo will appear with configurable intro text. The logo optionally links to a sponsor-defined page.

5 BACKGROUND

Optionally, a background image can be specified to fill the banner and sub-nav areas. Alternatively, a color will have to be indicated in the CMS.

6 EXPAND BUTTON

On mobile, tap to expand the sub-nav if there is one. Tap again to close.

7 SCROLLED VERSION

Scrolling past the banner triggers it to shrink in size, showing only the title and supporting text. The banner sticks to the top of the viewport, but doesn’t expand again until you scroll back to the top of the screen.

8 SUB-NAV LINKS

These link to subpages within branded content area. These are curated in the CMS, though HOME appears irrespective of the number of other links.

9 SOCIAL BUTTONS

These link to brand-specific social pages as specified in the CMS. They open in a new tab.


GLOBAL NAVIGATION

The Branded Banner display all the same elements on desktop, but in a somewhat different configuration.

GN.2.2. Branded Banner (Desktop)

1 GLOBAL NAV

2 BRAND NAME

3 SUPPORTING TEXT

4 SPONSOR NAME

5 BACKGROUND

If this is an image, an additional hi-res version will have to be added in the CMS.

6 SUB-NAV

OPTIONAL; the links are arranged horizontally, and when in a given sub-section, that link will be highlighted.

7 SCROLLED STATE

Upon scroll, the size of the banner decreases, and the global nav and sponsor are hidden.

8 SOCIAL LINKS

These links are visible at all times on desktop.

2

1

4

5 6

7

3

8


GLOBAL NAVIGATION

The Branded Banner is featured on all show pages and gives easy access to all the content within a show.

GN.2.3. Branded Banner: Show Specific Variation

1

2

5

6

7

3

4

UPDATE PENDING

1 SHOW NAME

The title of the branded content area in this case is the name of the show.

2 TUNE IN TIME

The supporting text for a show should be the tune-in time.

3 TVE AUTH LINK

Shows rely on TVE Authentication in order to play full episodes with restricted access. As a convenience, the buttons on the right side of the global nav have been replaced with a Sign In / authorization link that launches the flow in “.3.2. Cable Subscription Form Flow” on page 249.

4 SIGNED IN STATE

When you have successfully authorized yourself with your cable service provider, the state of the “Sign In” link changes to show your service provider’s logo. Click to open the authorization flow with which you can log out.

5 SCROLLED VERSION

The scrolled state of the banner would therefore show the show title and tune-in time.

6 SUB-NAV

Shows will generally have a subnav for things such as episodes, cast list, videos, photos, social, etc.

7 SOCIAL LINKS

These link to social properties for the show. These open in a new tab.


GLOBAL NAVIGATIONGN.2.4. Branded Banner: Responsive Behavior


On desktop, the dropdown options are revealed and items are rearranged.

#THEWESTBROOKSWED 9P/8C


GLOBAL NAVIGATION

The Branded Banner takes the place of the global nav in terms of prominence, but the when you open the global nav, it takes over the screen.

GN.2.5. Branded Banner: Global Nav Behavior

1 1 GLOBAL MENU BUTTON

When the Branded Banner is present, the Global Nav, even on desktop, behaves as it would on mobile devices. Click or tap the menu icon to open it; click or tap again to close it.

2 SITE CONTENT

The page content is pushed over to the right and a darkened layer is displayed on top of it to make the menu content more prominent. The amount the content is pushed over is proportional to the screen width. The amount that is overlapped is also proportional to the screen width, but the menu should never cover the menu button. Click anywhere on the dark layer to close the menu.

2


GLOBAL NAVIGATION

The Branded Banner can also be used without sub nav, and with or without social links.

GN.2.6. Branded Banner: Without Subnav Variation

1 SOCIAL LINKS

When the packaged or branded content requires social links but not sub navigation, the dark bar remains (on desktop) but contains nothing but the social links.

2 NO SOCIAL LINKS

When neither social links nor subnav are required, the branded banner shrinks in height by an amount equal to the height of the dark bar.

3 MOBILE VERSION

On mobile, when there is no subnav there is no need for a drop-down menu. The social links can simply be displayed as part of the normal, unscrolled state of the branded banner, or not, as the case may be.

2

1

WITH SOCIAL LINKS

MOBILE VERSION

WITHOUT SOCIAL LINKS

3


GLOBAL NAVIGATION

The footer displays at the bottom of every page on the site.

GN.3.1. Page Footer

1 AD

300x250

2 FOLLOW/NEWSLETTER SIGNUP MODULE

Refer to item FM.6 for details

3 BET LOGO

4 LEGAL LINKS

5 COPYRIGHT LINE1

2

4

5

6


GLOBAL NAVIGATIONGN.3.2. Page Footer: Responsive Behavior

On tablet, it spreads out to 2 columns. The footer stacks into a single column on mobile.

On desktop, it fills the full 3 columns of the screen.


GLOBAL NAVIGATION

The footer displays at the bottom of every page on the site.

GN.3.3. Page Footer: Back to Top BACKLOG FEATURE

1 BACK TO TOP BUTTON

This button appears as soon as you’ve scrolled down the page a bit. Its position is fixed within the browser window, overlaying all content on the site except the footer, which will push the button up and out of the way.

1


GLOBAL NAVIGATIONGN.3.4. Page Footer: Back to Top Responsive Behavior

On desktop, if there is room in the margin, the button will hover over the margin.

BACKLOG FEATURE


GLOBAL NAVIGATION

Search is a globally-accessible function that lives in the global nav.

GN.4.1. Search

2 3

1 SEARCH BUTTON

Click or tap the search button to open the search field. The search entry field will gain focus and be activated immediately. Click or tap the search button (now an ‘X’) again, or click anywhere else outside the search field to close it.

2 SEARCH FIELD

Enter your search term(s) here. While the search field is open, all other interaction is disabled, except clicking outside the field to close it.

3 SUBMIT BUTTON

Either click this or hit enter while the search field is focused to submit the search.

1


GLOBAL NAVIGATION

Autosuggest is a way to suggest possible search terms based on what others have searched for or likely pages.

GN.4.2. Search: Autosuggest

1

2

1 SEARCH TERM(S)

As soon as you enter at least 2 letters as a search term, the autosuggest will kick in.

2 SUGGESTED TERMS

Based on what you’ve entered, you will get up to 5 suggested search terms. These are generated using a BET-owned Google search appliance.


GLOBAL NAVIGATIONGN.4.3. Search: Search Results Page

1

3

4

2

1 TAG BANNER

The search term(s) you entered are displayed in a Tag Banner at the top of the page.

2 RESULTS COUNT

The number of results is shown as part of the Tag Banner.

3 RESULTS FEED

The results themselves are shown in a standard feed, ordered by recency.

4 FOOTER

The page is capped with a Page Footer.

Left Rail OrderThe feed on this page is one of the rare exceptions to the standard left rail item order. In this case, the first set of items will be an ad and a follow/subscribe module, and then after a page’s worth of items the order will continue according to the rules in “.1.4. Feed Container: Pagination and Lazy Load” on page 44


GLOBAL NAVIGATIONGN.4.3. Search: No Results Page

1

3

4

2

1 TAG BANNER

The search term(s) and the number of results are shown in a Tag Banner.

2 NO RESULTS FOUND MESSAGE

The main content of the page consists of a message apologizing for no results having been found. This message should be humorous so as to soften the blow.

3 TRENDING MODULE

In order to spark interest in other content on the site, the left rail module in this case is Trending.

4 FOOTER

The page is capped with a Page Footer.


GLOBAL NAVIGATION

Search works just a little bit differently on mobile or when the mobile-style menu is used.

GN.4.4. Search: Mobile Menu Variation

Tap the search field to enter your search term(s) and after entering at least 2 characters, up to 5 suggestions will be shown.

When you submit your search, the menu will close and the results page will load.

Of course, the search engine might not find any results.

Search is accessed through the slide out menu on mobile.


GLOBAL NAVIGATION

This is a page overlay that pops up at the bottom of your screen to inform you of impending events.

GN.5.1. Countdown Module

1

23

1 EVENT NAME

The name of the event or TV show being promoted.

2 TUNE-IN TIME

Date and time to watch or take other action. On click or tap, instead of taking you to the promo link, you download a .ics file with the tune-in time as a calendar event so you can add it to your calendar.

3 COUNTDOWN CLOCK

Counts down the days or hours until the event takes place, and acts as a link to add the event to your calendar.

4 BACKGROUND IMAGE

A responsive image that fills the background.

4


GLOBAL NAVIGATIONGN.5.2. Countdown Module: Responsive Behavior


On desktop, the dropdown options are revealed and items are rearranged.


GLOBAL NAVIGATIONGN.5.3. Countdown Module: Scroll Behavior

On initial page load, the countdown module is not visible at all.

Once you’ve scrolled past 33% of the page height, the countdown module pops up using an ease-in curve.At this point, if you mouse over the module, it stays open.

After 3 seconds, unless you’ve moused over the module, it pops back down until it’s hidden using an ease-in curve again.If you scroll back up until the top 3rd of the page is visible and then scroll back down, the module appears again.

1. INITIAL PAGE LOAD 2. POP-UP 3. POP-DOWN

0 ms 0 ms

100% 100%

Height Height

0% 0%

200 ms 200 ms


GLOBAL NAVIGATIONGN.5.4. Countdown Module: Roll-Over Behavior

Intial state on pop-up. Image zooms out slowly with an ease out curve:

The rollover effect is reversed, but much more quickly and with an ease-in curve:

1. INITIAL STATE 2. HOVER STATE 3. HOVER OFF

0 ms 0 ms

120% 120%

Zoom Zoom

100% 100%

1000 ms 1000 ms500 ms


GLOBAL NAVIGATIONGN.5.5. Countdown Module: Add to Calendar Roll-overOn desktop only, when you hover over the Tune-in Time, there is a roll-over state that tells you what will happen when you click it.

1 ROLL-OVER STATE

The calendar icon lights up and the caption “Add to My Calendar” appears.

1


Feed Modules


FEED MODULESOverview

FM.1.1. Feed Container . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

FM.1.2. Feed Container Responsive Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

FM.1.3. Feed Container: Limiting and Filtering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

FM.1.4. Feed Container: Pagination and Lazy Load . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

FM.2.1. Content Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

FM.2.2. Content Module: Responsive Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

FM.2.3. Content Module: Video Variation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

FM.2.4. Timestamp Rules and Variations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

FM.2.5. Share Menu Expanded . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

FM.2.6. Roll-Over Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

FM.3.1. Trending Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

FM.3.3. Trending Module Responsive Behavior. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .52

FM.3.4. Roll-Over Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

FM.4.1. Featured 1-Up Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

FM.4.2. Featured 1-UP Module: Large Responsive Behavior . . . . . . . . . . . . . . . . . . . 55

FM.4.3. Featured 1-UP Module: Small Responsive Behavior . . . . . . . . . . . . . . . . . . . 56

FM.4.4. Featured 1-UP Module: Roll-Over Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .57

FM.4.5. Share Menu Expanded –DEPRECATED . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

FM.5.1. Featured 2-Up Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

FM.5.2. Featured 2-UP Module: Large Responsive Behavior . . . . . . . . . . . . . . . . . . 60

FM.5.3. Featured 2-UP Module: Small Responsive Behavior . . . . . . . . . . . . . . . . . . . 61

FM.5.4. Featured 2-UP Module: Roll-Over Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

FM.5.5. Share Menu Expanded – DEPRECATED . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

FM.6.1. Follow And Newsletter Sign-up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

FM.6.2. Follow and Newsletter Signup: Responsive Behavior . . . . . . . . . . . . . . . . 65

FM.6.3. Email Entry Flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

FM.6.4. Follow and Newsletter Signup: Left Rail Condensed Variation . . . . . 67

FM.7.1. List Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

FM.7.2. List Module: Responsive Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

FM.7.3. List Module: Sponsored Variation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

FM.7.4. List Module: 2-Column Variations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

FM.7.1. List Module (Deprecated) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .72

FM.7.2. List Module: Responsive Behavior (Deprecated) . . . . . . . . . . . . . . . . . . . . . . . .73

FM.8.1. Countdown Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .74

FM.8.2. Countdown Module: Responsive Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .75

FM.9.1. Tag Banner Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76

FM.9.2. Tag Banner Module: Variation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .77

FM.9.3. Tag Banner Module: Responsive Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

FM.10.1. Static Promo Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

FM.10.2. Static Promo Module: Small Variation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80

FM.10.2. Static Promo Module: Responsive Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

FM.11.1. Parallax Promo Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82

FM.11.2. Parallax Promo Module: Responsive Behavior. . . . . . . . . . . . . . . . . . . . . . . . . . 83

FM.12.1. TV Schedule Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

FM.12.2. TV Schedule: Responsiveness . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

FM.12.3. TV Schedule Module: Single Item Variation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86

FM.13.1. Related List Module (Deprecated) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

FM.13.2. Related List Module: Responsive Behavior (Deprecated) . . . . . . . . . . . 88

FM.14.1. Simple List Module (Deprecated) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

FM.14.2. Simple List Module: Responsive Behavior (Deprecated) . . . . . . . . . . . . 90

Feed modules are simply modules that appear in a feed. They generally take up one column width, and flow from left to right, top to bottom.


FEED MODULES

This component is a container for a feed of the most recent content on BET.com. It holds the content modules for the feed itself, and also dictates their width.

FM.1.1. Feed Container

LATEST ON BET.COM

LOAD MORE

1 TITLE

Optionally, you may turn on the title for the feed container. The text either reads “Latest on BET.com” or “Latest in <TAG>,” where TAG is the tag used to filter the list.

2 FEED ITEMS

The latest items from around BET.com globally, or optionally filtered by a valid content tag. You may also specify a zero-based offset to begin at a certain arbitrary point in the feed. Useful for pagination or for continuing a feed further down a page.

3 LAZY LOAD INDICATOR

When pagination is enabled, scrolling to the end of the feed automatically loads more content. While the new items are loading, a loading indicator is shown.

4 LOAD MORE BUTTON

When pagination is enabled and after 6 pages of content modules have been loaded, the auto-loading stops and a Load More button is shown instead. If you click it, it loads another page of content just as above.

1

2

3

4


FEED MODULESFM.1.2. Feed Container Responsive Behavior

The feed also fills the sceen on tablet, but the extra width makes room for two columns.

The feed fills the full width of the screen on mobile, which leaves enough room for a single column.

On desktop, the feed container takes up the full width of the screen, but splits the space into two parts: the 2-column grid as seen on tablet, as well as a left rail for use by those modules that are designed for it.


FEED MODULES

You can also specify a tag by which to filter, and optionally turn on the filter label. This example shows a feed filtered by “Music” with the label turned on, as would be seen on a content page published in the Music category.

FInally, you can further filter by content type. In this case the content is restricted to videos only.

You can specify a limit for the number of items that are loaded, such as 2 in this example. In this way, the component can be used in the middle of a page.

Feed containers can be constrained by number of items, tag, and/or content type.

FM.1.3. Feed Container: Limiting and Filtering

Music Item 4

Music Item 2

Music Item 3

Music Item 1

Item 2Item 1

LATEST IN MUSIC LATEST VIDEOS


FEED MODULES

On desktop, the layout will change somewhat, with the promo items appearing in the left rail next to the feed.

Promo items will be injected at the end of every page. You can specify a page size value of 4 or greater, and only in multiples of 2, so as to not disrupt the grid. The promo items are fixed and not customizable.

Here the page size is 6 items, and the promo items load at the bottom. Scroll to the end to load another page–full.

Feed containers can also be set up for lazy loading of more items, in which case they are paginated and promo items are automatically injected.

FM.1.4. Feed Container: Pagination and Lazy Load

PROMO ITEMS

PROMO ITEMS

Item 2

Item 4

Item 6

Item 1

Item 3

Item 5

Item 4

Item 2

Item 6

Item 3

Item 1

Item 5

PROMO ITEM SEQUENCEThe promo items at the bottom of each page follow a repeating sequence as follows:

1. Trending Module

2. 300x250 Ad + Follow/Subscribe Module

3. 300x250 Ad + Small BET Promo Module


FEED MODULESFM.2.1. Content Module

Title Luptas quos doluptat natur, totatium ut endestium explacessi optum dolorist, ut ernat ut etSubtitle Ad eossequatur? Pa nonsend elescius et harum nisci ullescipis velignis alitatio. Hent alicab ius etur simagnam.

15 min. ago

CATEGORY / SHOW TITLE / OTHER LABEL

Content Modules simply link to content detail pages. They show a summary of the content to which they link.

LABEL RULESLabel text is determined in the following sequence:

1. Top–level Content Category

2. Show Content? —> Show Title

3. Editorial Label Applied? —> Editorial Label

4. Does the label match the current feed context name? —> Don’t display a label

1 LABEL

The content category, show title, or other editorial label (see Label Rules below).

2 THUMBNAIL

A small preview image of the content, with an icon overlaid to indicate video, image gallery, or video playlist.

3 TITLE

Titles are limited to a maximum of 3 lines at a column width of 375px, with the number of lines possibly changing on different size screens. Any extra text will fade to white vertically.

4 SUBTITLE

Subtitles are limited to a maximum of 2 lines on mobile. Title takes precedence, pushing the Subtitle down as necessary, and the text may be cut off with a graphical fade.

5 TIMESTAMP

Indicates how long ago the content was published.

6 SHARE MENU

Click to reveal sharing options.

2

6

1

3

4

5


FEED MODULES

When the column width is at its narrowest, the title and subtitle text may be too long to fit. They are truncated with a gradient overlay to make it appear as though the text is disappearing at the bottom of the module.

When the column is at its widest, the entirety of the title and subtitle may fit without issue. In this case, the module retains its square shape.

The behavior on mobile is a little different. In order to preserve vertical space, the height of the module is dynamic, with the maximum being equal to the modules width, and the minimum being the height required for one line of title text.

Content Modules always take up exactly one column width, no matter the display size, and height to match, maintaining a square aspect ratio.

FM.2.2. Content Module: Responsive Behavior


15 min. ago



15 min. ago



15 min. ago


1. MINIMUM WIDTH: 300PX 2. MAXIMUM WIDTH: 400PX 3. MOBILE BEHAVIOR


15 min. ago


Title Luptas quos doluptat natur, totatium ut endestium explacessi optum dolorist, ut ernat



FEED MODULESFM.2.3. Content Module: Video Variation

15 min. ago

BEING MARY JANE

23:47

Season 2, Episode 1

Mary Jane recommits herself to work, family and friends; David’s new girlfriend is pregnant.

People in Glass Houses Shouldn’t Throw Fish

Video content has some extra metadata fields that will be shown in a feed.

1 LABEL

The content category, show title, or other editorial label

2 LOCK ICON

Appears when the video is a full episode that requires cable provider authentication.

3 DURATION

The length of the video in the format HH:MM:SS.

4 TITLE

The title of the video or epsiode.

5 SEASON AND EPISODE NUMBERS

Full episodes show the season and episode numbers below the title.

6 SUBTITLE

A brief description, introduction, or tease for the video.

2

3

1

4

5

6


FEED MODULESFM.2.4. Timestamp Rules and Variations


15 min. ago



15 min. ago



15 min. ago


The standard timestamp follows these rules:1. Less than 1 minute ago: Just now2. More than 1 minute ago: X min. ago3. More than 1 hour ago: 1 hr. ago4. More than 2 hours ago: X hrs. ago5. More than 1 day ago: Yesterday6. More than 2 days ago: X days ago7. More than 1 week ago: 1 week ago8. More than 2 weeks ago: X weeks ago9. More than 1 month ago: <Month> <Day>

(e.g., Jan. 25th)10. More than 1 year ago: <Month><Day>, <Year>

(e.g., Feb. 3rd, 2014)

When the content to which the module links is sponsored, the timestamp is replaced by the text “Sponsored By” and the sponsor’s name.

When it appears on the trending page, the format wil be slightly different. The sub-title will be omitted, a number label will be included on top of the image, and the timestamp will be replaced with the number of page views, with the format following the rules for “Page view format” on page 51.

1. STANDARD 2. SPONSORED 3. TRENDING ITEM

4K viewsSponsored By NIKE

3


FEED MODULESFM.2.5. Share Menu Expanded

Title Luptas quos doluptat natur, totatium ut endestium explacessi optum dolorist, ut ernat ut etSubtitle Ad eossequatur? Pa nonsend elescius et harum nisci ullescipis velignis alitatio. Hent alicab ius etur simagnam

15 min. ago


SHARE THIS

Facebook

Twitter

WhatsApp

Google+

Pinterest

Email

f

1 CLICK STATE

When you click the button, the Share Menu pops out. On touch devices, tap to show the menu. Tap or click again, tap off the menu, or scroll the page to close it again.

2 SHARE LINKS

This list is consistent across all devices, screen sizes, and content types, with the exception of WhatsApp, which appears only on mobile.

3 MENU POSITION

The bottom of the menu should line up with the bottom of the menu button, extending upward over the module.

1

3

2


FEED MODULESFM.2.6. Roll-Over Behavior


15 min. ago



15 min. ago



15 min. ago


Image thumbnail is zoomed in 5%, no extra color treatment of any kind.

Image thumbnail zooms out to 100%, a 20% black treatment is applied, and a drop shadow appears, all with an ease-out curve:

The rollover effects are reversed, but much more quickly and with an ease-in curve:

1. NORMAL STATE 2. HOVER STATE 3. HOVER OFF

0 ms 0 ms

105% 105%

Zoom Zoom

20% 20%

Opacity Opacity

100% 100% 0% 0%

800 ms400 ms

(shadow appears)

200 ms

(shadow disappears)

400 ms 800 ms


FEED MODULES

Trending Modules show a short list of the top trending items from around BET.com globally, or within a category. Each item links to a content piece.

Headline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci



TRENDING ON BET.COM

15 min. ago

15 min. ago

15 min. ago

3k views

3k views

3k views

SEE ALL TRENDING

3

2

1

FM.3.1. Trending Module

PAGE VIEW FORMATPage views will be listed as follows:

1. 1—999: Listed as “X views”

2. 1,000—999,999: Listed as “(X/1,000)k views”

3. 1,000,000+: Listed as “(X/1,000,000)m views”

1 MODULE TITLE

For the global trending module (on homepage and elsewhere) the title is “Trending on BET.” Within a category, the title is “Trending in <CATEGORY>.”

2 THUMBNAIL

A small, square–crop of the main image for that content piece with list ordinal overlaid.

3 HEADLINE

The headline from the linked content piece.

4 TIMESTAMP AND VIEW COUNT

When the content piece was posted, and how many views it has received within the trending window.

5 SEE ALL BUTTON

Invites you to see all the trending items from around BET.com. Clicking or tapping takes you to the global Trending Page.

3

4

1

2

5


FEED MODULES

On desktop, the trending module pulls out to the left rail.It takes up slightly more visual width on tablet, but logically fills 2 columns so as to not complicate the flow order.

The Trending Module fills a column and stacks like any other on mobile.

FM.3.3. Trending Module Responsive Behavior




TRENDING ON BET.COM

15 min. ago

15 min. ago

15 min. ago

3k views

3k views

3k views

SEE ALL TRENDING

3

2

1




TRENDING ON BET.COM

15 min. ago

15 min. ago

15 min. ago

3k views

3k views

3k views

SEE ALL TRENDING

1

1

1




TRENDING ON BET.COM

15 min. ago

15 min. ago

15 min. ago

3k views

3k views

3k views

SEE ALL TRENDING

3

2

1


FEED MODULESFM.3.4. Roll-Over Behavior




TRENDING ON BET.COM

15 min. ago

15 min. ago

15 min. ago

3k views

3k views

3k views

SEE ALL TRENDING

3

2

1




TRENDING ON BET.COM

15 min. ago

15 min. ago

15 min. ago

3k views

3k views

3k views

SEE ALL TRENDING

3

2

1




TRENDING ON BET.COM

15 min. ago

15 min. ago

15 min. ago

3k views

3k views

3k views

SEE ALL TRENDING

3

2

1

Image thumbnail is normal, and the number label is white text on black.

Image is immediately darkened with a 20% black overlay, and the thumbnail zooms by 5% over 400 milliseconds.

When you roll over the Trending button, the text animates away to be replaced by the trending arrow icon. When you move your mouse off again, it returns to normal.



FEED MODULES

The Featured 1-Up Module features a single piece of content at a time, with two possible sizes from which to choose.


TITLE LUPTAS QUOS DOLUPTAT NATUR, TOTATIUM UT ENDESTIUM EXPLACESSI OPTUM DOLORIST, UT ERNAT UT ET

MON AT 9P/8C NEW EPISODES

FM.4.1. Featured 1-Up Module

1 LABEL

The content category, show title, or other editorial label (see “Label Rules” on page 45).

2 THUMBNAIL

A small preview image of the content, with an icon overlaid to indicate video, image gallery, or video playlist.

3 TITLE

Titles are limited to a maximum of 3 lines at a width of 375px, with the number of lines possibly changing on different screen sizes.

4 INFO STRIP (OPTIONAL)

If the content is from a show, the show’s tune-in time will be shown at the left, or “Online Exclusive” if it’s a web series. Sponsorship information is also shown here.

5 NEW EPISODES INDICATOR

If a new episode has been added in the last several days, the New Episodes indicator is displayed on the right.

1

2

3

4 5


FEED MODULES

This module stretches to the full 3-column width on desktop, maintaining the half-square aspect ratio (cf. Large 2x1 in style guide).

On tablet, the aspect ratio can change, and so the 1-up expands to fill two columns and assumes a half square aspect ratio (cf. Medium 2x1 in style guide).

On Mobile, the largest an item can be is a full-width square, so all featured items appear in this manner (cf. Medium 1x1 in style guide).



Sponsored by COVERGIRL







This is the responsive behavior for the large size of this module.

FM.4.2. Featured 1-UP Module: Large Responsive Behavior


FEED MODULES




This module maintains the 2-column width on desktop, as well as the half-square aspect ratio (cf. Medium 2x1 in style guide).

On tablet, the aspect ratio can change, and so the 1-up expands to fill two columns and assumes a half square aspect ratio (cf. Medium 2x1 in style guide).

On Mobile, the largest an item can be is a full-width square, so all featured items appear in this manner (cf. Small 1x1 in style guide).







This is the responsive behavior for the small size of this module.

FM.4.3. Featured 1-UP Module: Small Responsive Behavior


FEED MODULESFM.4.4. Featured 1-UP Module: Roll-Over Behavior










The title text will change to White on Black with an ease-in curve:

Image normal, text: Black on White. The rollover effect is reversed, but with an ease-out curve:



This applies to all sizes and aspect ratios.

0 ms 0 ms

White on Black White on Black

Black on White Black on White

Text Change Text Change

200 ms 200 ms


FEED MODULESFM.4.5. Share Menu Expanded –DEPRECATED



DIGITAL EXCLUSIVE NEW EPISODE

SHARE THIS

Facebook

Twitter

Pinterest

Email

WhatsApp

f

1 MOUSEOVER STATE

When you hover your mouse pointer above the share menu button, the button highlights, and the Share Menu pops out. On touch devices, tap to show the menu. Tap again or move your mouse to close it again.

2 SHARE LINKS

This list is consistent across all devices, screen sizes, and content types.

3 MENU POSITION

The menu position should match the button to the top item in the list, with the list covering whatever is below the feed item. However, if there is not enough room on the screen, the menu will push up to remain visible with a small margin.

1

3

2

DEPRECATED


FEED MODULES

The Featured 1-Up Module features two pieces of content at a time, with two possible overall sizes from which to choose.





DIGITAL EXCLUSIVE

WED AT 9P/8C

FM.5.1. Featured 2-Up Module

1 FIRST FEATURED ITEM

A featured content item as explained in “FM.4.1. Featured 1-Up Module” on page 54.

2 SECOND FEATURED ITEM

Though these are separate items they act as one module in this instance with respect to their responsive behavior.1

2


FEED MODULES

This module stretches to the full 3-column width on desktop, maintaining the square aspect ratio of the child modules (cf. Large 1x1 in style guide).

On tablet, the aspect ratio can change, and so the 2-up expands to fill two columns with each child module retaining the full square aspect ratio (cf. Medium 1x1 in style guide).


CATEGORY / SHOW TITLE / OTHER CATEGORY / SHOW TITLE / OTHER

TITLE LUPTAS QUOS DOLUPTAT NATUR, TOTATIUM UT ENDESTIUM EXPLACESSI OPTUM DOLORIST, UT

TITLE SED ENTUSANDA SAESCILIQUIA NIT LATUM EXERUPT IBUSDA NOS NI DITI SUNDIS

TUE AT 9P/8C NEW EPISODES Sponsored by COVERGIRL









DIGITAL EXCLUSIVE

WED AT 9P/8C

This is the responsive behavior for the large size of this module.

FM.5.2. Featured 2-UP Module: Large Responsive Behavior


FEED MODULES





This module maintains the 2-column width on desktop, with each of the child modules effectively taking up a single column width (cf. Medium 1x1 in style guide).

This is the responsive behavior for the small size of this module.

FM.5.3. Featured 2-UP Module: Small Responsive Behavior





DIGITAL EXCLUSIVE

WED AT 9P/8C


On tablet, the aspect ratio can change, and so the 2-up expands to fill two columns with each child module retaining the full square aspect ratio (cf. Medium 1x1 in style guide).






FEED MODULESFM.5.4. Featured 2-UP Module: Roll-Over Behavior










The title text will change to White on Black with an ease-in curve:

Image normal, text: Black on White. The rollover effect is reversed, but with an ease-out curve:



This applies to all sizes.

0 ms 0 ms

White on Black White on Black

Black on White Black on White

Text Change Text Change

200 ms 200 ms


FEED MODULESFM.5.5. Share Menu Expanded – DEPRECATED




DIGITAL EXCLUSIVE

SHARE THIS

Facebook

Twitter

Pinterest

Email

WhatsApp

f

1 MOUSEOVER STATE

When you hover your mouse pointer above the share menu button, the button highlights, and the Share Menu pops out. On touch devices, tap to show the menu. Tap again or move your mouse to close it again.

2 SHARE LINKS

This list is consistent across all devices, screen sizes, and content types.

3 MENU POSITION

The menu position should match the button to the top item in the list, with the list covering whatever is below the feed item. However, if there is not enough room on the screen, the menu will push up to remain visible with a small margin.

1

3

2

DEPRECATED


FEED MODULES

The Follow and Newsletter Sign-up module makes it easy to keep up with the latest BET news and info through social feeds or email newsletters.

GET YOUR FIX

FOLLOW US ON SOCIAL

SUBSCRIBE TO OUR NEWSLETTER

GET YOUR BEING MARY JANE FIX

FOLLOW US ON SOCIAL


SUBMIT

SUBMIT

Enter Your Email Address


f

f

FM.6.1. Follow And Newsletter Sign-up

VARIATION

1 TITLE

The title gives a brief reason for this module to exist. It is context dependent, and will change depending on the category or show.

2 SOCIAL LINKS

Click one of these to go to the relevant social feed page where you can subscribe or follow updates. These links will be different as the context dictates.

3 SUBSCRIBE FORM

Enter your email address and click or tap “Submit” to sign up for email updates. You will receive a confirmation email and a link to update your subscription preferences.

2

2

1

1

3


FEED MODULES

GET YOUR FIX

KEEP UP ON SOCIALSUBMITEnter Your Email Address

OR


f

This format is maintained on desktop, with the module filling the right double column width.

FM.6.2. Follow and Newsletter Signup: Responsive Behavior

GET YOUR FIX

FOLLOW US ON SOCIAL



FOLLOW US ON SOCIAL


SUBMIT

SUBMIT



f

f

On Mobile, the module takes on a compact, stacked single column layout.

On tablet, the module unstacks and takes the full width of the screen.

GET YOUR FIX

KEEP UP ON SOCIALSUBMITEnter Your Email Address

OR


f


FEED MODULESFM.6.3. Email Entry Flow

GET YOUR FIX

FOLLOW US ON SOCIAL



FOLLOW US ON SOCIAL


SUBMIT

SUBMIT



f

fGET YOUR FIX

FOLLOW US ON SOCIAL


f

GET YOUR FIX

FOLLOW US ON SOCIAL


SUBMIT

GOT IT!

[email protected]

[email protected]

f

GET YOUR FIX

FOLLOW US ON SOCIAL


f

GET YOUR FIX

FOLLOW US ON SOCIAL


SUBMIT

GOT IT!

[email protected]

[email protected]

f

The initial, default state invites you to enter your email address.

Email validation will occur on the front end as well as the back end.

Once the email address has been validated, the Submit button becomes enabled.

Click it to submit and the button is disabled until a positive server response is received, at which point the button displays a confirmation message. After 10 seconds, the form resets to its initial state.

1. INITIAL STATE 2. EMAIL ENTERED 3. FORM SUBMITTED


FEED MODULESFM.6.4. Follow and Newsletter Signup: Left Rail Condensed VariationWhen in the left rail on wider screens, the module shrinks in height in order to be visible on screens that are not so tall.

1 REDUCED HEIGHT

The height of the module is reduced to the point where the button and email address labels are removed, and the height of the buttons is reduced slightly.

1


FEED MODULES

List Modules are multi-purpose, flexible modules that are useful for many things, from curated reccomendations to quick summaries.

FM.7.1. List Module

Rick SanchezJustin Roiland

Morty SmithJustin Roiland

Summer SmithSpencer Grammer

Meet The Cast

SEE ALL CAST

1 TITLE

Customizable name for the list.

2 THUMBNAIL

16:9 aspect ratio.

3 TITLE AND SUBTITLE

The actual content of these will vary from application to application, as specified by the associated page editor.

4 SEE MORE BUTTON

OPTIONAL: Default text is See More, but can be customized for any purpose.

3

1

2

4

Possible List Sources

1. Grid Page

2. Feed (Tag or Topic) Page

3. Listicle

4. Curated List of content pages


FEED MODULES


FM.7.2. List Module: Responsive Behavior




Meet The Cast

SEE ALL CAST


On tablet, the module expands to take the full width of the screen, and the columns are balanced. In the case where there is an odd number of items with a CTA button, the button takes the place of the last item.







Beth SmithSarah Chalke



Jerry SmithChris Parnell



BirdpersonDan Harmon




Meet The Cast

Meet The Cast

Meet The Cast

SEE ALL CAST

SEE ALL CAST

















Meet The Cast

Meet The Cast

Meet The Cast

SEE ALL CAST

SEE ALL CAST


FEED MODULESFM.7.3. List Module: Sponsored Variation

On wider screens, the logo moves up to the same baseline as the title, and it slides over to the right side of the module.

On mobile, the sponsor logo goes just under the title of the list module, and it is left justified.

As in all other instances of sponsorship, the List Module may be sponsored by adding a logo that is optionally a hyperlink.


FEED MODULESFM.7.4. List Module: 2-Column Variations

When it is impossible to fully balance the columns, an empty space is permitted.

When it is possible to balance the columns using the button, it fills in the empty space.

When the columns are balanced already with list items, the button is pushed down to the bottom right.

1. NO BUTTON, ODD NUMBER 2. ODD NUMBER W/ BUTTON 3. EVEN NUMBER W/ BUTTON

















Meet The Cast

Meet The Cast

Meet The Cast

SEE ALL CAST

SEE ALL CAST

















Meet The Cast

Meet The Cast

Meet The Cast

SEE ALL CAST

SEE ALL CAST

















Meet The Cast

Meet The Cast

Meet The Cast

SEE ALL CAST

SEE ALL CAST


FEED MODULES

List Modules are multi-purpose, flexible modules that are useful for many things, from top lists, to curated items, to quick summaries.

FM.7.1. List Module (Deprecated)

These Are the BestHeadline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci



SEE ALL

3

2

1

1 TITLE


2 THUMBNAIL

Optional. Two aspect ratios are possible, 1:1 and 16:9.

3 NUMBER LABEL

Optional list ordinal.

4 HEADLINE

Depending on the source of the list, will either be a content title or custom text.

5 SEE ALL BUTTON

Optional. If the list source has more items than are shown, this button links to that content item.

4

1

2

3

5


1. Grid Page

2. Feed (Tag or Topic) Page

3. Listicle

4. Curated List of content pages

DEPRECATEDPLEASE REFER TO FM.7 ON PAGE 68


FEED MODULES


FM.7.2. List Module: Responsive Behavior (Deprecated)




SEE ALL

3

2

1


On tablet, the module expands to take the full width of the screen.






SEE ALL3

2

1 4

5






SEE ALL3

2

1 4

5



FEED MODULES

Everyone will know when a big event is coming, thanks to the countdown clock that appears atop the home and event pages.

FM.8.1. Countdown Module

In 3 Days9P/8C

The 2015 Soul Train Awards Hosted by Erykah Badu

1 COUNTDOWN TIMER

The time left until the event begins, and the tune-in time.

2 DETAIL COPY

Copy that tells when the show or event will begin, along with any other brief, important details.

3 BACKGROUND IMAGE

Optional image for the background.

4 SHOW / EVENT LOGO

A Logo Image for the event or show.

21

3 4

Countdown Timer States

1. More than 1 day away: “In X Days”

2. Within 24 hours: “Tonight”

3. After the fact: “Rewatch Tonight”

DEPRECATEDPLEASE REFER TO GN.5 ON PAGE 34


FEED MODULES

In 3 Days 9P/8CThe 2015 Soul Train Awards Hosted by Erykah Badu

FM.8.2. Countdown Module: Responsive Behavior

In 3 Days9P/8C


In 3 Days9P/8C


DEPRECATEDPLEASE REFER TO GN.5 ON PAGE 34


FEED MODULES

Thin strip at the top of the page which communicates which tag/topic/on-going story you’re currently viewing.

FM.9.1. Tag Banner Module

1 TAG BANNER

Displays text identifying the page that is currently being viewed. Ideally this tag will display as one line of text, however if a tag requires more than one line, the text wraps and extends the height of the banner module,

2 ITEMS FOUND LABEL

Present on tag or search results pages to indicate the number of matching items in the subsequent feed.

1

2


FEED MODULES

This module can also be used at the top of a page to mark Category or other page context.

FM.9.2. Tag Banner Module: Variation

1 TAG BANNER

Text only, and the background is transparent. Text color is defined globally.

1 DEPRECATEDPLEASE REFER TO CM.25 “.25.1. HEADING” ON PAGE

169


FEED MODULES

The text scales larger on desktop as well, and remains centered.

FM.9.3. Tag Banner Module: Responsive Behavior

The module displays below the header.

On tablet, the text simply scales larger.


FEED MODULESFM.10.1. Static Promo ModuleA simple, small promotional module for promoting BET stuff.

1 LOGO

OPTIONAL; The logo can be programmed in the CMS, depending on whether an admin wants to use a standard BET logo or a special logo (as seen in comp).

2 BACKGROUND IMAGE

The image used for the promo can be edited in the CMS as well, as long as it meets the module requirements outlined by RED. Max dimensions for the image are 400x480px.

3 TEXT

OPTIONAL; The text can be programmed in the CMS. Max length TBD.

4 BUTTON

OPTIONAL; The button CTA text as well as the color of the button are editable in the CMS. Color choices are still TBD.

12

3

4


FEED MODULESFM.10.2. Static Promo Module: Small VariationThe static promo has two sizes; this is the small one.

1 BACKGROUND IMAGE

All the content and pieces are the same, but the max dimensions for the image is 400x190px.

1

DEPRECATED


FEED MODULES

On desktop, the module behaves much as it does on mobile, but it will take up the column width of the left rail.

FM.10.2. Static Promo Module: Responsive Behavior

The promo module will display as full width.

On tablet, the module will be take up its maximum width (i.e., 400px).


FEED MODULES

A large, parallaxing promotional module for promoting BET stuff.

FM.11.1. Parallax Promo Module

1 LOGO

The logo can be programmed in the CMS, depending on whether an admin wants to use a standard BET logo or a special logo (as seen in comp).

2 TEXT

The text can be programmed in the CMS. Max length TBD.

3 BUTTON

The button CTA text as well as the color of the button are editable in the CMS. Color choices are still TBD.

4 IMAGE

The image used for the promo can be edited in the CMS as well, as long as it meets the module requirements outlined by RED.

1

2

3

4

Scroll Behavior

Depending on the device, this module displays differently as the user scrolls down the page.

1. On mobile and tablet, the module slides upward using a sliding window effect.

2. On desktop, the module slides upward using a parallax effect.


FEED MODULES

On dektop, the behavior is similar to tablet; the module is full width and displays as a parallax effect as the user scrolls down the page.

FM.11.2. Parallax Promo Module: Responsive Behavior

The promo module will display as full height/full width on mobile.

On tablet, the module will be full width while still displaying the main page content in a portion of the screen.


FEED MODULES

This module promotes up to two shows on TV, and includes CTA links.

FM.12.1. TV Schedule Module

1 TITLE

The title is editable in the CMS, so that the title can change from “On Tonight” to “On Tomorrow” as needed.

2 THUMBNAIL IMAGE

Image that corresponds to the text to the right. When selected, links to the show landing page.

3 TITLE

Text that represents the name of the scheduled programming. Editable in the CMS. When selected, links to the show landing page.

4 TUNE IN TIME

Text component that displays the time the programming is scheduled to start. This text is editable in the CMS.

5 VIEW FULL SCHEDULE CTA

Button that links the user to the full BET programming schedule.

1

2 3

4

5


FEED MODULES

On desktop, the behavior is similar to tablet; the module has a single column width within the main content area.

FM.12.2. TV Schedule: Responsiveness

The promo module will display as full width on mobile.

On tablet, the module will be represented as a single column module in the two column layout.


FEED MODULES

There may only be 1 single thing to be promoted on TV tonight, in which case the module should respond accordingly.

FM.12.3. TV Schedule Module: Single Item Variation

Being Mary JaneWed 10p/9c

ON TONIGHT

VIEW FULL SCHEDULE

1 TITLE

The title is editable in the CMS, so that the title can change from “On Tonight” to “On Tomorrow” as needed.

2 THUMBNAIL IMAGE

Image that corresponds to the text to the right. When selected, links to the show landing page.

3 TITLE

Text that represents the name of the scheduled programming. Editable in the CMS. When selected, links to the show landing page.

4 TUNE IN TIME

Text component that displays the time the programming is scheduled to start. This text is editable in the CMS.

5 VIEW FULL SCHEDULE CTA

Button that links the user to the full BET programming schedule.

1

2

3

4

5


FEED MODULES

The Related List Module shows things that are related to what you are viewing, in compact way.

FM.13.1. Related List Module (Deprecated)




Meet The Cast

SEE ALL CAST

1 TITLE


2 THUMBNAIL

Optional. 16:9 aspect ratio.

3 ITEM TITLE AND SUBTITLE

These are dependent on the source content, but some examples include Character/Actor, Topic/Topic Type, etc.

4 SEE ALL BUTTON

Optional. If the list source has more items than are shown, this button links to that content item.

3

1

2

4

List Constraints

1. Minimum number of items is 2, max is 6.

2. When the button is enabled, the number of items displayed may change


1. Curated List of Topics

2. Listicle Page (e.g., Cast)



FEED MODULES


FM.13.2. Related List Module: Responsive Behavior (Deprecated)




Meet The Cast

SEE ALL CAST


On tablet, the module expands to take the full width of the screen, and the columns are balanced. The button counts as an item here, and the number of items shown might be fewer than on mobile in order to balance the columns.

















Meet The Cast

Meet The Cast

Meet The Cast

SEE ALL CAST

SEE ALL CAST

















Meet The Cast

Meet The Cast

Meet The Cast

SEE ALL CAST

SEE ALL CAST



FEED MODULES

The Simple List Module is the most minimal way to show a list for when all you need is a textual list or simple group of links,

FM.14.1. Simple List Module (Deprecated)

More Things to Check Out in LifestyleFashionStyle & BeautyHealthFor HimFamily

1 TITLE


2 ITEM

Plain text or text link. Numbers may optionally be displaye.1

2

List Constraints

1. Minimum number of items is 2, max is 6.


1. Curated List of Links

2. Feed Page



FEED MODULES


FM.14.2. Simple List Module: Responsive Behavior (Deprecated)

More Things to Check Out in LifestyleFashionStyle & BeautyHealthFor HimFamily


On tablet, the module expands to take the full width of the screen. The title remains on the left, and the list items stack on the right.

More Things to Check Out in Lifestyle

FashionStyle & BeautyHealthFor HimFamily More Things to

Check Out in Lifestyle

FashionStyle & BeautyHealthFor HimFamily



FEED MODULES

Ongoing stories are groups of content pieces linked by a common story thread or theme, presented chronologically.

FM.15.1. Ongoing Story List Module

1 TITLE

The text “Ongoing Story:” is automatically included when displayed; the rest is the actual title.

2 SUBTITLE

Further describes the story content with an editorial bent.

3 LATEST ITEM

The most recent item is called out separately with a larger image, the text “LATEST”, and a different color background.

4 TIMELINE LIST

3 more items from the ongoing story are shown below the latest item. Every item includes a title and timestamp. These items will be the next most recent after the Latest item when on a feed page, but may be a different set of three when on a content page.

5 SEE ALL BUTTON

Click this to go to the landing page for this ongoing story that lists all the content pieces.

1

2

3

4

5


FEED MODULES


FM.15.2. Ongoing Story List Module: Responsive Behavior


On tablet, the module expands to take the full width of the screen, with the latest to the left and the list of items on the right.


Feed Pages

94

FEED PAGES


Overview

FP.1.1. Responsive Considerations for All Feed Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

FP.2.1. Home Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

FP.3.1. Music Landing Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

FP.8.1. Tag Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98

FP.9.1. Topic Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99

FP.10.1. Full Episodes Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100

Feed pages include landing and search results pages—basically any page that contains a feed as its main contents.

95

FEED PAGES


On desktop (or tablet landscape) the layout gets even more interesting, and care must be taken to ensure that unsightly gaps do not appear in the main layout. Any items that will be pulled out to the left rail will need to be isolated in a separate containing element within a larger group element. The total height of the left rail items should not be taller than the height of the other items within the same containing element.

When viewed on tablet, however, another column is added, meaning that feed items that will only take up a single column should paired together in order to not break the grid structure at this screen size or larger.

On mobile, Feeds will consist of a linear, single-column list of modules. The ordering of items is—prima facie—not critical.

Left Rail Item

Item 3

Item 5

Item 2

Item 4

Item 1Item 1

Item 3Item 2

Item 4 Item 5

Item 3

Item 4

Item 2

Item 1

All feed pages are subject to these structural constraints

FP.1.1. Responsive Considerations for All Feed Pages

96

FEED PAGES


The Home Page is the main landing page of the site. It features a variety of modules from around the rest of the site, and the feed is unfiltered.

FP.2.1. Home Page

1

2

3

4

7

5

6

8

9

10

10

1 LARGE FEATURED

Either 1-up or 2-up featured as needed.

2 SMALL FEATURED

3 SMALL FEATURED

Either 1-up or 2-up; the second of these is optional as needed.

4 AD

300x250; Mobile Only!!

5 FEED CONTAINER MODULE

Title: off, Filter: OFF, Pagination: OFF, Start At: 1, Show Only: 1 item.

6 TV SCHEDULE MODULE (ON TONIGHT)


Title: Off, Filter: Off, Pagination: Off, Start At: 2, Show Only: 2 items.

8 AD

300x250; Left Rail item on desktop.

9 FOLLOW / NEWSLETTER SIGN-UP MODULE

10 BET PROMO


Filter: OFF, Pagination: ON, Start At: 4.

Large Featured

Small Featured

Small Featured

AD

AD

TV Schedule Module

Follow / Newsletter Sign-up Module

Feed Container Module



Required Items Optional Items

BET Promo

97

FEED PAGES


The Music Landing Page is the central hub for all things music-related on BET.com. Its structure is very similar to the Home Page, but it only shows music-related stuff.

FP.3.1. Music Landing Page

1

2

3

1 LARGE FEATURED

Either 1-up or 2-up featured as needed.

2 SMALL FEATURED

3 FEATURED MODULES

Music-specific featured modules. Any number is allowed, but it is recommended not to use more than 3.

4 AD

300x250; Mobile Only!!


Title: off, Filter: Music Content Only, Pagination: OFF, Start At: 0, Show Only: 4 items.

6 MUSIC LIST MODULE

Top track list, Music videos, etc.

7 AD



9 BET PROMO


Filter: Music Content Only, Pagination: ON, Start At: 3.

Large Featured

Small Featured

Music Featured Modules


4

7

5

6

8

9

10

AD

AD

Music List Module


BET Promo



98

FEED PAGES


A Tag Page is essentially a search results page for a specified tag. The page is constructed programmatically, without editor intervention.

FP.8.1. Tag Page

1

2

3

1 TAG BANNER

Shows the tag to which the page corresponds, and the number of items found.

2 1-UP SMALL FEATURED

The first item of the feed is shown as a small featured item.


Title: off, Filter: Page Tag, Pagination: OFF, Start At: 1, Show Only: 4 items.

4 AD



6 BET PROMO


Filter: Page Tag, Pagination: ON, Start at: 5

1-Up SmallFeatured Item

Tag Banner



4

7

5

6

AD


BET Promo


99

FEED PAGES


A Topic Page is virtually the same as a Tag Page, except that an editor has created a custom page for the tag in question.

FP.9.1. Topic Page

Hero Container

Article Body Container

1

2

3

5

9

11

10

4

7

6

1 BRANDED BANNER

For packaged content, this can be used for branding, sub-nav, and sponsorship.

2 HERO CONTENT

Page Title plus any media that should be featured at the top of the page, e.g., banner image.

3 ARTICLE CONTENT

Editorial content describing the topic, such as a bio or introductory text. Can also include share links, embedded media, and any other article content.

4 OPTIONAL FEATURED MODULES

These can be any kind of featured feed module that the editor desires, though it is recommended to keep the total number of items at 3 or less.

5 AD 300x250; Show this on the mobile layout only.


Title: off, Filter: Page Tag, Pagination: OFF, Start At: 0, Show Only: 4 items.

7 RELATED TOPICS

List module showing 3-6 related topics, depending on screen size.

8 AD



10 BET PROMO


Filter: Page Tag, Pagination: ON, Start At: 5

Media Embed

Title Text

Body Copy

Featured Module

Featured Module

Branded Banner




AD

AD8


BET Promo

Related Topics

100

FEED PAGES


A page for listing all the Full Episodes from across all BET shows, ordered by recency.

FP.10.1. Full Episodes Page

1

2

3

1 HEADING

Small Heading: “Full Episodes”

2 1-UP SMALL FEATURED

The first item of the feed is shown as a small featured item.


Title: off, Filter: Full Episode Videos, Pagination: OFF, Start At: 1, Show Only: 4 items.

4 AD



Left Rail item on desktop.

6 BET PROMO

Promo for BET Live app.


Filter: Full Episode Videos, Pagination: ON, Start at: 5.

1-Up SmallFeatured Item

Heading



4

7

5

6

AD


BET Promo


BET.com Redesign · 2 BET.com Redesign UX Speciﬁcation / Version 7.5 / May 25, 2016 Changelog...

Documents

Transcript of BET.com Redesign · 2 BET.com Redesign UX Speciﬁcation / Version 7.5 / May 25, 2016 Changelog...