How I built: One small step for earth
by Nick Lewis, Senior web developer at Leap
Static HTML, CSS, and JS
The microsite is built to be as simple as it can be. So, I knew I didn’t want to use any toolkit, class system, or third-party scripts.
The CSS includes a very small number of reset styles but generally allows the browser to do its thing for default styling. The site doesn’t contain that many different HTML entities, so there is no need to include CSS styling for them.
SASS is used as a preprocessor, which is then compiled and minified with the Prepros app. So the front end only receives one minified CSS file. Manually adding a version number to the link allows me to bust the cache if needed. No node scripts here.
The only JavaScript used on the site is a tiny intersection observer function that hides the spinning globe before you reach the footer, to avoid content overlap. As the JS is so slim and the site only has one page, I chose to include this in the HTML directly, rather than load it in a separate file.
No fonts, a simple colour palette, and zero tracking
As the title suggests, this microsite loads no fonts. I rely on the modern system font stack, which on many devices is really rather pleasant, and designed to be very readable. You can read more about that and how to use it in this blog post.
I wanted to have a simple colour palette, but one that felt earthy and pleasant to look at. I opted for one background colour and used CSS-styled HTML objects to add the two other colours and the blur effect for a softer look.
I did originally have a tracking script for this microsite but decided to remove it. It just wasn’t necessary for me on this site.
Adding some animated delight without the weight
While the site itself is static, I didn’t want the front end to feel it. Whilst keeping the weight of the site in mind, I also knew I didn’t want to use JavaScript to do the animation.
Utilising some clever CSS, you can create some complex animations without ever needing JS. Using CSS perspective, I created a pho-3D effect. A number of lines create the globe’s shape, and then I rotate the wrapper to create the globe’s spin. I wanted it to be somewhat ‘realistic’, so the globe is offset to reasonably match the Earth’s axis of 23.4 degrees–though in reality I exaggerated it to 35 degrees.
The site also makes use of browser-based smooth scrolling. When the ‘take a step’ buttons are activated, the use of anchor links and CSS declarations for scroll behaviour and scroll-padding-top tell the browser to smoothly scroll down to that area of the page with an offset at the top. No additional JavaScript is necessary.
It is a really lightweight microsite. 7.32KBs is really quite small for the modern web. Especially for something that doesn’t look like a plain HTML document.
