Tips for neat splash pages

I often encountered situations that required some visual presence on the web, like for university or personal projects but also for work.

The concept was always the same:

• a static page to be hosted anywhere
• visually appealing (!)
• mobile friendly
• smooth haptics
• quick setup

HTML templates

First of all what not to do: don’t start from scratch. Usually your time is pretty limited and you might rather want to focus on your actual content than on hassling with your CSS.

Instead, use the tons of good templates online! Just google for the keywords “static page template” or “html template” and you will find more designs than you could ever create.

What I found really useful were the free templates from html5up. I used two themes already.

• Story for Instagreens, a university project

• Dimension for #MilanoGis, an open afterwork meetup I organize

They already come with fantastic, adaptive designs, useful plugins and are mobile-friendly.

In both case above, I tweaked around a lot with the CSS and added more functionality to make it look how I wanted - which might seem little work, but in order to use other fonts that behave differently when resizing or adding interactive elements like d3 charts and maps are quite challenging.

Mobile friendliness

According to statista, more than half of all website traffic worldwide came from mobile devices which means, that there is just no way around an adaptive design.

The templates above have it built-in, but lack convenient swiping actions on touchscreens. However, it’s pretty easy to add in Vanilla JS thanks to this answer on Stackoverflow.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

class Swipe {
    constructor(element) {
        this.xDown = null;
        this.yDown = null;
        this.element = typeof(element) === 'string' ? document.querySelector(element) : element;
        this.element.addEventListener('touchstart', function(evt) {
            this.xDown = evt.touches[0].clientX;
            this.yDown = evt.touches[0].clientY;
        }.bind(this), false);
    }
    onLeft(callback) {
        this.onLeft = callback;
        return this;
    }
    onRight(callback) {
        this.onRight = callback;
        return this;
    }
    onUp(callback) {
        this.onUp = callback;
        return this;
    }
    onDown(callback) {
        this.onDown = callback;
        return this;
    }
    handleTouchMove(evt) {
        if ( ! this.xDown || ! this.yDown ) {
            return;
        }
        var xUp = evt.touches[0].clientX;
        var yUp = evt.touches[0].clientY;
        this.xDiff = this.xDown - xUp;
        this.yDiff = this.yDown - yUp;
        if ( Math.abs( this.xDiff ) > Math.abs( this.yDiff ) ) { // Most significant.
            if ( this.xDiff > 0 ) {
                this.onLeft();
            } else {
                this.onRight();
            }
        } else {
            if ( this.yDiff > 0 ) {
                this.onUp();
            } else {
                this.onDown();
            }
        }
        // Reset values.
        this.xDown = null;
        this.yDown = null;
    }
    run() {
        this.element.addEventListener('touchmove', function(evt) {
            this.handleTouchMove(evt).bind(this);
        }.bind(this), false);
    }
}

Then just bind the swipe action to certain divs with

1

(new Swipe('#yourdiv')).onRight(function() { alert("Swiped right!")}).run();

I implemented this feature for convenient swiping, as button-clicking is so Desktop-like. So why not have both? Guiding buttons and swiping enabled, just in case.

In the example below, by swiping you jump to a different section with

1

(new Swipe('#why')).onRight(function() { window.location = "#about"}).run();

So swiping right over the div #why brings you to the section #about. Try it out!

Background pictures

A background picture (or even a video) is always a nice eyecatcher. For Instagreens I just added them to some sections to keep a nice balance of visually pleasant images and text.

For #MilanoGis, I discovered the amazing tool Worldview Snapshots from NASA enabling you to clip satellite images to your area of interest.

The night images are a fantastic background and interesting to look at.