heldercervantes

SuperTINY (update)

Recommended Posts

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.

  • Like 7

Share this post


Link to post
Share on other sites
pwired    953

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.

  • Like 1

Share this post


Link to post
Share on other sites
szabesz    1,378

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

supertiny.thumb.png.e6a207014e6016e9ae734dab35648656.png

  • Like 2

Share this post


Link to post
Share on other sites
adrian    7,664

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 :)

  • Like 3

Share this post


Link to post
Share on other sites

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.

  • Like 3

Share this post


Link to post
Share on other sites
DaveP    767
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. :mellow:

  • Like 3

Share this post


Link to post
Share on other sites

@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" :D

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.

  • Like 1

Share this post


Link to post
Share on other sites
pwired    953

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.

  • Like 1

Share this post


Link to post
Share on other sites
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.

  • Like 1

Share this post


Link to post
Share on other sites
bernhard    1,313

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?

Share this post


Link to post
Share on other sites
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.

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.