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.
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
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.
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.