Venice Biennale Landing Page Overview

[owendodd]

Landing page for the video series we are producing for the venice biennale.

Some high level notes: • Each video needs it own url, and should be loaded dynamically. • Hitting the base url should redirect to the first video • Each video exists as a carousel that has two states live and preview.

• Live videos have a video file, a cover image, associated artist(s), a title and a description • Preview videos have a cover image, and a title • All UBS logos should link to them

Video Player • Default state is a full screen image BG • Play button also shows time (not totally necessary) • Play button and side arrow hover states should both be solid white fill with black arrow / text • On hitting play title, nav and image should fade out, while video + pause button in bottom left should fade out and video should fade in / autoplay. • once video finishes it should fade to black and show 'Read more' (scrolls down page) 'Next video' (navigates right) + Share

Lower Priority: • Venice Coverage footer rail (other editorial coverage) • Text link feature • Artist follow compontent • Open in Youtube app button

Sketch file here: https://cl.ly/2p392c24251l

[kanaabe]

@owendodd @eessex: Gonna get a checklist going again, I found it helpful last time for EOY! Feel free to use/not use.

Analytics

• [x] Video play
• [x] Video dropoff time
• [x] Video duration percentage complete
• [x] Clicked UBS
• [x] Pageview

Page

• [x] URL for each video
• [x] Default to first video
• [x] Live and Preview states
• [x] Cover Overlay
• [x] Completed Video Overlay

Live State: Player & Streaming

• [x] Pause button
• [x] Mute/Volume Control
• [x] Scrubbing
• [x] HLS vs MP4
• [x] User agent check for best video quality

Preview State

• [x] Subscribe button

Meta Section

• [x] About the Series
• [x] Index
• [x] Video Description
• [x] Share

Lower Priority

• [x] Artist follow compontent
• [x] Open in Youtube app button

QA

• [x] Smaller carousel navigation buttons on mobile
• [x] Larger scrubber selection area
• [x] Icon toggle for mute instead of background color change cc @owendodd (the play/pause toggle is based on icons whereas right now mute only has a bg color change which feels confusing)
• [x] Add background-color: rgba(0,0,0,0.2) for published video cover images
• [x] change bg color for unpublished videos from background-color: rgba(0,0,0,0.5) to background-color: rgba(0,0,0,0.75)
• [x] Add text-shadow: 0 0 15px rgba(0,0,0,0.6); to headlines and subheadlines
• [x] change video button hover states from solid black background to solid white background with black text / icons
• [x] add our standard x icon in the upper left of videos while they play. clicking should hide the video and show the cover image / title again
• [x] add some a transition when clicking play and video loads.
• [x] change all body copy to 20px (from 23px) (my bad)
• [x] there should be a 2px border radius on the 'Subscribe' button in the email input form.
• [x] presented in partnerships with UBS lockup shouldn't have a hoverstate
• [x] hide the rule and the "the Venice biennale" head at the very bottom. I imagine we will add this closer to may 15 or so
• [x] Change language from "Presented in partnership with" to "Presented in collaboration with"
• [x] mobile: "about the film" section padding is off see screenshot
• [x] Some funky alignment here
• [x] SVG-ize these?. the alignment looks off when adding the circle with CSS. maybe this can be fixed with more CSS (OD: Let's just use this instead? lets just kill the circles here)
• ❌ Cardboard instructions should have a back button OR fade into split screen after delay (KA: marking this as "can't fix". iOS problem only, but without instructions, the split screen looks terrible on portrait mode and the back button isn't an option unless we fork webvr-polyfill which is 💀 )
• [x] Visible controls when carouselling
• [x] Visible controls when loading page
• [x] Header text alignment on mobile too low with nav (maybe add a top margin instead of middle)
• [x] Seeing a mix of 1px and 2px borders in various places. can we make everything 1px? (buttons etc.)
• [x] Loading message should appear when shifting between slides
• [x] Circle Navigation
• ❌ possible to have the cover image stay fixed as the info scrolls over it? a la the about page / and full screen header articles (this definitely falls in the "nice to have" bucket) (KA: gonna mark this one as "can't fix" due to the way the image is tied to the carousel)
• [x] https://github.com/artsy/force/issues/1305
• [x] Follow buttons are bugging out
• [x] Can't X out of video on Google Pixel
• [x] Flickity settled vs spinning state
• [x] Meta fields update
• [x] Take numbers out of the index section (titles will contain the number)
• [x] Unsupported Browser Warning
• [x] Scrubber time
• [x] Responsive completed video page
• [x] Venice Coverage footer rail (other editorial coverage)
• [x] Indicator dots are slightly off center: https://cl.ly/1o0x222Y0h3Y
• [x] Change .venice-overlaytitle, .venice-overlaysub-title to be 'text-shadow: 0 0 40px rgba(0,0,0,0.4);'
• [x] Hide subscribe form if user is already on editorial emails
• [x] Window resize causes you to be stuck in a loading... state
• [x] Check PV tracking on each carousel rotation
• [x] Follow button copy
• [x] Landscape text handling
• [x] Prevent redirect app
• [x] More metadata (og: thumbnail)
• [x] Parsely analytics
• [x] Minor analytics update with play button
• [x] Support links in 360 guide (links appear white)
• [x] Fade out player buttons when in mobile after playing
• [x] Text link feature
• [x] Venice Biennale 2015 CTA
• [x] Info button scroll-down is animated
• [x] Follow CTA not there when logged out:

Kana

• [ ] iOS Cardboard stops playing video
• [ ] Upgrade browser version error handling (frozen video)

Eve

• [x] Resolve pended tests
• [ ] Refine page scripts (do we need all the scripts that come with the blank template?)

Nice To Have

• [ ] Jarrard gave us feedback that the VR icon wasn't "working" which we didn't intend for it to. However I can see how it could be misleading to someone who knows how that icon usually works. Maybe we should consider removing it, replacing it with some direct messaging to "Move around", or make the actual thing work :P - KA

[kanaabe]

@owendodd Do we want to add audio controls and the View in Cardboard option somewhere too?

[owendodd]

@kanaabe good call. def makes sense to add. I'll adjust the player UI to accommodate.

[kanaabe]

@owendodd if possible, I'd like to put the View in Cardboard option somewhere at the top of the player:

The long explanation: there are two parts to the player -- the controls overlay (which is hosted on Force), and the VR canvas iframe (which is hosted in an S3 bucket). The controls have our scrubber, play/pause button etc. However, the View in Cardboard button has to be placed on the VR canvas side. Reasoning about whether we should open space on the bottom for this button (am i on desktop or mobile?) is going to get messy and I'd rather we just place it somewhere that the controls definitely won't overlap with.

It's also starting to get a little crowded at the bottom on mobile with the button, scrub, vricon, audio, and cardboard all there. Lmk if that works for ya!

[owendodd]

[owendodd]

@kanaabe How does this look? Desktop would be the same sans the cardboard icon.

[kanaabe]

👏 Sweet thank you!

What do you think about simplifying the volume to just Mute/Unmute? I usually just use the volume control on my phone/keyboard if I need to adjust. Facebook and NYT just does mute/unmute.

For more technical convincing, we have to hook into the VR View to adjust the video volume, and I think with a slider, it becomes heavier for the VR View to listen on slider-type events vs a simple button. It's definitely possible -- I'm just trying to keep the number of events going into the VR View to a minimum.

[owendodd]

@kanaabe yeah that's fine with me!

Almost makes me wonder if we could just not include it at all. But its probably good to have something. What do you think?

[kanaabe]

I'll put it in for now and we can take it out if it feels too bulky on smaller phones. Not difficult to add the toggle at all.

[owendodd]

@kanaabe @eessex

Here is the 360 guide modal. Sketch file here. I created this article draft that it could pull from (wasn't sure if this should live as an Ed. article or somewhere else).

[owendodd]

Slight updates to the player UI:

• [x] Adds in the X to close out
• [x] Adds in an info icon which would scroll you down the page (svg here). This icon would always be present
• [x] Removes black opacified bg from 360 icon as it isn't clickable

[owendodd]

• [x] Alt Signup for people who are already logged in / signed up and for to replace the form after somebody signs up.

[owendodd]

Not necessary for launch but wondering if we can make the info button scroll down the page rather than jump. @eessex

[halleyjohnson]

Big priorities I know about:

• [ ] File isn't rendering in Cardboard view for some mobile browsers, file too big?

• [x] Facebook share image needs to be updated

Secondary priorities:

• [x] Parsely analytics should be added

• [x] Sailthru metadata should be added

Two small updates when we've taken a breath:

• [x] Update YouTube language to the following: For the most immersive 3D experience, watch in Google Cardboard via the YouTube app.

• [x] Markdown links don't seem to be rendering in the About the Series copy