[VIDEO] — Modern digital agency website 🖥📱

Clients’ brands never sleep, so why should their agency? Midnight Media rounds out their complete powerhouse toolbox with services that include Brand Strategy, PR, Media Relations, Strategic Partnerships, Event Management, Content Marketing, and Social Media Marketing to launch their brands into rockstardom.

Click here to check it out →


Made with :two_hearts: by Jon Reese

3 Likes

Beautiful, nice and clean!

Also: links aren’t working (yet). I would completely hide the hamburger once the contact pop up comes into view.

Greets
Tom

Thanks Tom! Which links aren’t working?

Great idea! Four quick notes:

  1. I might use After Effects or a similar compositing tool to center the focal point of the camera (using keyframes), as it usually deviates to the right a bit, and the “center” of the road rarely lines up with the horizontal center of your website. Also, after looking at it for a while, I started to feel a bit overwhelmed by the video, and I realized it was from the constant stop and go of the camera. I would edit out the red lights so it feels like a less abrupt, more continuous stream.

  2. Looks great in Chrome, but in Safari, the video shows with full brightness and makes it very difficult to recognize and process the hamburger menu and the company name.

  3. I love the fixed video position with the beautiful fuchsia color at the bottom. I might push down the Let’s Talk button quite a bit so the vertical spacing is more even throughout the footer.

  4. Regarding your question for @TomLamers , I believe he is referring to these:

Edit: Added some more to #1.

1 Like

Great ideas @TomLamers and @McGuire And thanks for the Safari tip McGuire, maybe I should test more browsers pushing live. :/sweat:

Those were actually not supposed to be links, just a list of services, but if they come off as links then it’s a fault with my design, perhaps I’ll add some copy above them, something like “Get access to some seriously bang-up services, including”

1 Like

Like the idea and the cleanness of the site! The video is a bit jarring and I was thinking that gradient overlays worked in Safari but clearly it’s not in this case but is in Chrome.

2 Likes

On my iPad pro and iPhone nothing seems to be linked (the list of services, but also the numbered 3 divs). Also, I didn’t see any video on either; on portrait iPhone I noticed that numbered divs 1, 2 and 3 are in the wrong order (1,3 and 2). So you should be doing some more RW testing

Tom

1 Like

@jonreese, I took a few minutes and manually stabilized the video and cut out the “stop” points so it’s less jarring. Let me know what you think—PM me and I’ll gladly send the final composite over via Dropbox so you can play with it further. :smile:

Also, if you make the background darker in the video itself, you won’t have to worry about compatibility issues with the gradient or fill you’re using on different browsers. Of course, that means the video will be slightly more dull behind the fuchsia section, but it’s that much less work the user’s browser/CPU has to do.

3 Likes

@McGuire — Wow, this is incredible, what consideration! Did you use after effects?

Here’s a link to the high-res version, and the layover (which you probably already know from checking out Chrome’s dev tools) is rgba(22,26,28,0.8), would it be easiest to swap out the video you used with that high res, add the overlay, and export a highres for me to mp4/webm? :grimacing:

I used the Pexels high res video for the source, so we’re good on that front. I’ll try to get this done in the next three minutes because I have a client call at 2:30 Eastern! :smiley:

PM me your email address and I’ll send it over Dropbox.

1 Like

@McGuire, @Grant suggested I remove the z-index on the overlay and BAM it now works well in all browsers I’m testing. BONUS: it still looks bangin’ in the magenta section. :smiley:

1 Like

my first reaction…

OOOOOOOO DANG. them rollovers though… so good!

2 Likes