Hey designers,

I want to share a landing page that I designed and tell you about how I did it.

labs.codame.com

First of all, I used a different technique to get a layout and typography lockup across different screen sizes. Resize the browser. Everything stays in place. To achieve this I replaced all pixel units in VW units. Viewport Width. (1VW = 1% of the viewport width.) Everywhere you want to use a pixel value- font size, button height, margins etc- used VW units instead of pixels.

I think this is important because often designers will make a beautiful landing page, and the developers will come back with “to make this responsive it’s going to have to look different on smaller screens.” Not true. Use viewport widths and keep your design lockup.

Admittedly some things get small on a small screen, but my reasoning is that pinch & zoom is a very natural and easy gesture at this point. It’s better than making everything too big. And also you can drop in some media queries if you really want to make it different on a smaller screen.

Some other things about this page- There’s a “particle effect” in the background. This is just an MP4 video with ridiculous compression that gets it down to about 600KB. I used javascript to make sure the video is fully loaded before fading it in to avoid stuttering.

The neon effect on the headline was achieved with multiple layers of text outline, and CSS animations to fade between them.

Everything else is pretty normal CSS stuff. I’m happy with this page, but I couldn’t have done it without rounds of critique and revision within the CODAME team.

If anyone has any questions, or if I totally did something wrong comment away!

Show your support

Clapping shows how much you appreciated Donald Hanson’s story.