Supertiny agency 2021

[heldercervantes]

Hello, my Processwire family.

Just minutes ago I flipped on the switch for my agency's new website. Check it out here: https://supertiny.agency/

This is a year of changes. I've finished my collab with a major studio, focused back on Supertiny, Liliana joined me for marketing, campaigns and strategy services, and over the last few months I've been working on the agency's website overhaul.

Curiosities:

• Threejs based intro: After learning a few new tricks from the Awwwards winner Bruno Simon and his incredible course, I went oldschool and made an intro for this website.
• The intro runs once, the session remembers it's been played and turns to a discreet mode if users return to the homepage, allowing a replay.
• Using my Tiny Cookie Consent as a web component, I made an approach that I'll probably use a lot going forward. I have a text field in the CMS for all the scripts, and with some PHP find/replace that's undone on the client side, trackers and stats are being turned on only when the user allows it.
• As usual, repeaters and content blocks allow mix and match when building content.

The design and overall vibe takes cues from 80's sci-fi. When I started designing this I was playing Control on my PS4 and overloaded with nostalgia, and attempted to convey some of that in this website.

Now, there's a bit of an experiment here. All UX bibles are saying that it's a sin make an intro, lock scroll and whatnot. But this is a site users are probably only going to see once. So my approach here is more like a Yield sign. There's an intro, the scroll is locked, but you have a skip button. I'm basically trying to make the user slow down a bit and take in the concept, but let them through if they're really in a rush. Also, as a communication strategy, I'm placing my bets on case studies that will be promoted in social networks, and also new content on the Insights which will hopefully become more interesting with video content. Users coming from there will only see the intro if after seeing that content they get curious and have a lookaround.

This is making sense in my head, but it's a bet. I'm curious to see how it performs and if I have to change the approach. Let me know what you think.

[BrendonKoz]

I had quite a bit of fun watching the intro video. It didn't really seem to (for me) add anything of value in terms of purpose or content, but it was fun - and different. If all websites started doing this I'd definitely be turned off, but in a case where it's a unique scenario and having some free time, it worked well.

I'd be curious - if you're willing - to hear more about how you're handling the cookie consent to only allow scripts if/when a user allows it? It sounds like it's a fairly simple, yet robust solution, and since there are many various solutions to this, I'd be curious to hear yours (again, if you're willing to share).

A well done, clean design overall! I might pop a link to this over to Jack McDade (yes, Statamic's Jack McDade) since he loves 80's/90's style designs, though his are more in the pop-fashion that SciFi, he does love everything from that decade genre.

[pwired]

Congratulations, very original design that really stands out from the crowd.

[bernhard]

My opinion: Great work. I was impressed ? Only thing was after I clicked skip intro I got a strange sound and was not able to turn that off. No mute button or the like... a page refresh made the annoying sound go away.

[heldercervantes]

On 11/18/2021 at 10:05 AM, bernhard said:

My opinion: Great work. I was impressed ? Only thing was after I clicked skip intro I got a strange sound and was not able to turn that off. No mute button or the like... a page refresh made the annoying sound go away.

That's weird, shouldn't happen. Maybe you skipped on a specific point of the animation where the interrupt script fails. It's tricky to manage, as there are a lot of timouts, intervals, and even animejs timelines that need to be stopped when you skip. I spent way more time than I like to admit trying to get that to work nicely, but I didn't build the animation with skipping in mind and later paid for that mistake ?

[heldercervantes]

On 11/17/2021 at 6:48 PM, BrendonKoz said:

I'd be curious - if you're willing - to hear more about how you're handling the cookie consent to only allow scripts if/when a user allows it? It sounds like it's a fairly simple, yet robust solution, and since there are many various solutions to this, I'd be curious to hear yours (again, if you're willing to share).

Right now it's broken ?  hopefully I'll have it fixed real soon.

My initial approach is this: https://heldercervantes.com/tiny-cookie-consent/

On PW's side, I just have a field where you enter the analytics and other scripts. But when this is rendered on the page, some replacements occur that make sure the scripts don't run. It's a matter of replacing stuff like `type="javascript"` to `type="text/plain"`, or renaming the src attribute to data-src. Then I have a JS on the consent popup that when the user clicks the accept button the `type="text/plain"` is reverted and the block is added to the page again, starting the script. When it starts, my script also checks if a `cookieConsent` cookie is set to 1 (this is set when you accept cookies). If it is, the scripts are activated automatically on page load and the popup doesn't show again.

But anyhow, there's a flaw in this approach for sites that run ads. If there are ads campaigns pointing to the site, not firing the scripts at all means no stats and no conversion tracking. This is unacceptable if you're running ads, so right now I'm rebuilding this as I move to GA4 and consent mode. I'm experimenting on myself before implementing this on clients.