Written on 3/31/2015 in Web development

I was no longer happy about my landing page. It looked 'ok', but I never got around to make the background-image more responsive. This often resulted in long load times. It also seemed quite lazy, and to be honest, I did not put a lot of effort in it. It is as it was supposed to be, simple and to the point. But it just so happens I managed to scrape together some free time lately and I decided to tackle this landing page properly. My goal was ultimately to colour it up a bit, reduce the loading time, reduce the size, and get a more 'flat' appealing design.

Whether I succeeded is in the eye of the beholder. I won't beat around the bush, you can see the new design in action already. To compare, you can see the previous version in a previous blog post. The main culprit with the older version was the big background image. It shouldn't be a big problem if you make it adaptive and load smaller images for smaller screens. But that generates a whole set of new complications. I wanted a clean, fast page without too much maintenance work, because the content is not that important. It's mostly an overview and linking page.

Anyway, I think I improved a lot. I chose to combine the multiple pages to a single page because there was not that much information to show. Making users click twice just to get to my blog for instance is quite ridiculous. And to be honest, the landing page is not that interesting either, so I tried to keep the threshold as low as possible.

My first consideration was 'colour'. I wanted a contrasting, but clean set of colours. And I visited some sites that could help me with this. As you probably know, there are some predefined rules on how to easily pick colours for better readability and compatibility. Sites like Paletton can help you pick a colour palette using a single colour.

I said "screw all that!". And decided to show some national pride! Let's take the Belgian Tri-colour and do something with it, I want a challenge. So for those that don't know Belgium.1 The Belgian flag is Black - Yellow - Red.

My second consideration was how to build up the page. I'm not a big fan of 'f*ck the system', so I would never do anything completely unnatural for web pages. A web page is made to scroll vertically, who am I to disagree? So I created the structure "Nav - Me - Projects - Social - Hobbies". And started playing with the colours, font sizes, fonts, you name it. It was disgusting. It looked like a €1 Jackson Pollock painting. The problem I faced was that I wanted to make the page look fresh, and with a single background colour, it doesn't really matter much what you do, it will always look quite ... boring.

So what I was trying to do was to use different background colours for every title. And because the titles were all fitting on one page it had a vomit-inducing pattern to it.3 Which is quite normal, it's a simple fix, I just added a "min-height" on each title so they fit 100% of the viewing window. 'vh' can be used to point to the 'viewheight' and 'vw' can be used to point to the 'viewwidth'. Essentially, how much your browser allows you to see of the page.

There are slight browser compatibility issues but they were neglectable and the heights not working would not make the page 'unreadable'. Anyway, it started to look rather ok. I centered the content on each 'page' using flexbox and made sure it looked acceptable in lower IE versions, which doesn't care much for flexbox yet.4

All three colours are quite strong, that's why they were chosen as flag colours. You don't want some pesky, weak colours representing your country. You pick strong colours with a lot of attitude. So I did want to put in some white pages to keep it lighter to digest.2 Anyhow, it was starting to look the part. But scrolling was still not very pleasant, the colour contrast was a bit too big.

This brings me to the third consideration. I wanted to find a way for the different pages to flow into each other, without the brute single pixel slap in the face. Several options came to mind.

1. Gradients, let the colours mix and make the colour-switch less sudden
2. Forced page-by-page navigation, where I use event handlers and stuff so the user can never be between two pages, but only on one page at the time.
3. Some kind of in-between shape/border that separates them. This wouldn't make the switch less sudden, but it would be far more elegant.

I chose option 3. Why? Well, the first option, gradients? The nineties called, and they want their gradients in their table-layout website back.5 The second option was tempting, and if it were possible to do fool-proof I would have implemented it in combination with the third option. I even tried but hit a lot of problems with cross-browser and cross-device event handling most of which JQuery could solve for me.6

But it was just too much effort. So the third option was definitely the most viable. The idea of triangles came to me during the weekly Illuminati meeting about how to keep the rest of the world under our power. As everyone knows, we like one-eyed triangles, so the choice was quite obvious. I did opt-out of the eye because of the creepiness factor.7

The triangles use the CSS3 triangle hype. To freshen it up a little bit more, I added some animation on the first page to fly in the links. I wanted this sequentially, and apparently the only way to do this with pure CSS right now, is by using animation keyframes. The only problem I have with these is that the vendor prefixes make these a hell. Check my CSS, I think 30% of the total css file is keyframes.

That's because you need 4 different keyframes, one for each link. And those 4 keyframes need 3 versions for each vendor.8 But hey, it could still be worse, but I am looking for a more compact way to handle this. Anyhow, making them show sequentially is done by defining a total timeframe, and then using the percentages to fly them in when it's time. So the following CSS for the second link:

@keyframes slideinsecond {
    0%, 25% {
        opacity: 0;
        -moz-transform: scale(10);
        -ms-transform: scale(10);
        -o-transform: scale(10);
        -webkit-transform: scale(10);
        transform: scale(10);
    }

    50%, 100% {
        opacity: 1;
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

This keyframe is set on a four second window. So the first second, it will be kept exactly at 10x the size and invisible. From the first second to the second second, it will shift to original size and visible. from the second second to the fourth second and from then on it will stay that way. Like this, you can let each link slide in on its queue in the four second window.

Finally, I added some logos and effects to 'keep it real'. Not all of them are exactly like I wanted them, but I'm ok with that. I do hope this time the landing page style appeals a bit longer to me.

My next project might be a redesign as well, combined with some scraping of static html pages. Or I might finally finish my game. Depends on my mood.