SuperTINY (update)

[heldercervantes]

Hey guys.

http://supertiny.agency/

For those of you that have already seen my website, this won't look much different. Under the hood however, I've made a few SEO oriented updates that involved a not so simple overhaul.

New stuff includes a new services page, some tweaks here and there, but more importantly the navigation was remade to allow deep linking and proper page by page SEO. The previous site was a single page and worked more like a presentation than a website. Navigating links happened without page loads in order to have nice animated transitions. But search engines don't like that so I had to do something about it.

The basic approach is quite simple. For each template file, I have a condition that includes a different file according to the type of request:

<?php

if($config->ajax) {
  include('./_about--ajax.php');
} else {
  include('./_about--direct.php');
}

?>

Ajax returns just the chunk of content, whereas direct returns a complete page with the SEO stuff.

Then I have a bunch of jQuery that basically looks for internal links and overrides them to be loaded via ajax instead of a regular page load. Engines can crawl, and users get nice transitions. The JS pushes a history state, sends a link update to Analytics and transitions into the new page.

More and more ProcessWire looks to me like the jQuery of the CMS world.

[pwired]

Wow, never seen that cool of an animation, both the morphing and the sounds. How is it done ? I looked at the page source but couldnt figure it out yet.

[szabesz]

Nice concept, thanks for sharing! One issue though: the X on a Folio page does not seem to work. There is no "back" either:

[pwired]

I guess the spiked ball animation is done with greensock.

https://konsernsjefen2017.arkivert.no/
http://www.weareuprising.com/work/1

 

[adrian]

You should know that this site brings my late 2011 Macbook Pro to its knees. 

I really love the story you are telling and it's definitely a great way to show clients how working with you would be a great experience, but I would also be worried that if your site crashes a potential clients machine, it might not give the best impression. Also, a 4MB payload for your homepage is pretty steep for someone on a slow connection. SpeedTest shows my download at 163 Mbps and it still takes 9-10 seconds to load your homepage.

Please don't take offense at this, because I really do like the message and the way the story is presented, although I could do without the sound effects

[heldercervantes]

Thank you for your input guys.

@szabesz: Well spotted. I have to fix that.

@adrian: Yes, I'm aware this is a heavy one. With the 3d library, models, sound, there's no way around it. Something I had to accept with all this 3d going on.

@pwired: As to how this is achieved, actually there's a bunch of stuff working together...

The sphere

The base library is three.js (https://threejs.org/), using a wrapper that simplifies implementation called whitestorm (https://whsjs.io/ - I was involved in development and this site served as a guinea-pig). Using those I generate the sphere and background. The animation is made with greensock. Here, I'm animating each vertex on the sphere to a random position. The maximum displacement changes as you hover each link to make it more or less chaotic.

The wave in the background that spreads as you touch the logo is achieved by calculating a radius that animates from the center to the edge, and on each cycle the vertices get displaced according to their proximity to that radius.

The about section

Here it's simpler. Each scene is modeled in blender, and greensock animates the positioning of the camera. Except for the second step. There, it's a single guy that's duplicated a bunch of times, and greensock animates a marching cycle that loops with each step. You can actually see the loop as a new row pops up at the end of the group on each step.

The sound

Not much to say here. Freebie audio, that I've edited on audacity to make deeper, longer, more consistent.

[DaveP]

10 hours ago, adrian said:

You should know that this site brings my late 2011 Macbook Pro to its knees. 

And completely crashes my 2007 iMac at work.

Which isn't a unique experience... 

Note to Self - Next time you change jobs, get one where they have up to date hardware. 

[heldercervantes]

@davep, that's resilience. I'm surprised you haven't got a message saying "Sorry mate, Apple doesn't allow you to run a machine this old. Get a pretty new retina iMac for only £2.000,00"

I don't remember the age of the ones I had on my previous company, but I was shocked to find out they couldn't update to the version that had the store. Ended up in the bin with perfectly usable hardware.

[pwired]

Anyway this is one hell of a cool morph/sound animation done in a web page. Strange, I am on an Acer laptop Aspire E15 and dont experience any lag or resource drain from the page. Didnt know threejs is involved here too. Lets give it a try to replicate this animation.

[heldercervantes]

4 minutes ago, pwired said:

Anyway this is one hell of a cool morph/sound animation done in a web page. Strange, I am on an Acer laptop Aspire E15 and dont experience any lag or resource drain from the page.

It's heavy. Specially the marching group on the about section. But I think this has to do with older machines not supporting some of the stuff that's needed for webgl to perform well. Three.js reverts to more CPU intensive approaches and it starts burning. I'll have to look into that eventually.

[bernhard]

Very nice indeed!

i had no problems at all here on my 7Mbps internet and very old PC. I cannot even remember when i bought it ^^

One feedback: I liked the customer story but imho the end was a bit sudden. It only redirects to the services page and there is no real call to action or no hint where the customer could continue.

What do you think of some help like "contact us or see our portfolio" on that page?

[heldercervantes]

On 9/2/2017 at 9:10 AM, bernhard said:

One feedback: I liked the customer story but imho the end was a bit sudden. It only redirects to the services page and there is no real call to action or no hint where the customer could continue.

You're right, thanks for the heads up.

I imagined that as a linear sequence, you're getting to know the company and at the end you get to the services but now that you mention it, the transition comes as a surprise and feels unsolicited. I'll have to improve that.

[SamC]

@heldercervantes that site is INSANE! Not my style at all, but just, wow! Well done.

WebGL totally crapped the bed though on the contact page, page flashed a few times, flickered, got a chrome error bar at the top, webgl has crashed. Worked after a refresh though and I had a good look around. Very impressive.

My PC is a few years old, i5-4670k with an nvidia GTX750. My internet is pretty quick (has to be with the stepsons online gaming/chatting/video watching when I'm trying to make websites!).

[heldercervantes]

Thank you @SamC

It does have some problems, I am aware. It's an elephant to load and very experimental, so it's a bit rough. In fact, the engine (whitestormjs) was being developed as this site was implemented, with this site serving as a guinea-pig to discover issues, find missing features and whatnot. That by itself is a bit dangerous.

The web is so volatile that instead of polishing too much, I'll probably wait until I have a couple more case-studies to add and cook up a new site with some fresh experimental stuff and a whole new set of problems

[SamC]

9 hours ago, heldercervantes said:

The web is so volatile that instead of polishing too much, I'll probably wait until I have a couple more case-studies to add and cook up a new site with some fresh experimental stuff and a whole new set of problems

You're a braver man than I. Good luck!

[Chris Ernovsky]

Hi @heldercervantes!

Just learning PW for few days and studying cases right now.
I like your ideas, I like SuperTINY and I love this article. ?
It's my thoughts exactly right now!

Cheers!