A minimal website can look dull. A website that loads in only about 20-30 kb, like this one, maybe does. But it doesn’t need to. There are different ways you can make a lightweight website look beautiful and give a delightful experience for the visitor. Let’s look at some ideas to design a beautiful website with a minimal environmental footprint.
Let me start with a disclaimer: I am not a graphic designer. So I cannot tell you what you have to do to make a web page look pretty. I only propose some ideas and tools that can make minimal websites look interesting and still keep them lightweight.
Everyone wants a unique website. Content makes sites unique, but at first sight it is appearance. We can achieve that with styling or CSS. CSS is lightweight if used correctly.
When I strive to minimise the loading size of a web page, I do not include things that are not essential to the message of the site. I try to drop images and do not include videos at all. A page with beautiful photography looks pretty and a background video looks very cool, but they might not have an additional value for the audience. So how can we make a lightweight website, without photos or videos, look interesting and pretty?
Valuable content is essential
Valuable content is king. It is essential that the content is original and valuable for the right audience. Besides all the fancy stuff we can add to a web page, keep in mind that content is first, quickly followed by user experience. Content is often the copy, the message, but it can also be images or videos. The ideas below are the most relevant for the former case.
Make it colourful 🌈
Most websites have dark text and a light background, but that sounds boring right? We have a great freedom of colours. And colours are easily added using CSS. This paragraph has a green background and white text, set in CSS. Easy and just a couple of bytes, lightweight.
We can choose between thousands of colours. We can mix and match them. Just turn your background into a certain colour and your site will look more unique. You can also give parts of your page a background colour to differentiate between sections of the page.
You can use colours for your copy as well if you are slightly more adventurous. I am not saying it always looks good or that it is legible.
Choosing colours can be hard, scary and not everyone has a good sense for it. Read up on colour theory to learn more. You can start by choosing an accent colour. You can find tools that generate complete colour schemes (perhaps based on that accent colour). Sometimes I play it safe and get my inspiration from the open source colour scheme Open Color.
Be careful
Keep in mind that having too many different colours can make a web page childish or even annoying. You can work with one accent colour and with different shades of that colour.
Some people have some type of colour blindness. That means that they can not differentiate between certain colour combinations. Even people who can see perfectly can have trouble reading things with a certain colour combination. You can use this contrast ratio tool to check whether the colours you use have a sufficiently high contrast ratio.
CSS or svg in the background
Another cool way to make a page more interesting is by adding a gradient or an image as a background to it.
Background photographs, and especially full screen ones, are often large in size, so you might want to stay away from that. You can use small png images or CSS patterns as an alternative. You can find really great tools to generate these types of backgrounds. Again, really lightweight and even animatable.
Animate with CSS
Animations tell a story. On this site, the sun starts to shine and the earth is moving around the sun: life as it is happening while we are changing the future for the better.
Animations used to need JavaScript, but nowadays you can do a lot with CSS only. So they can be very lightweight, but mind the computational power that is needed for the browser to ‘play’ them. Make sure not to loop animations infinitely: after a couple of times, the visitor has seen enough.
You can animate tons of CSS properties of HTML elements: position, size, shape, colour, … You can really do cool animations using svg vector images.
You could use a library to create animations, but just dive into how CSS animation works and apply what you need. Learn more from this book, or just read this article about animation on the web. Download this free ebook for more practical information about animating with CSS.
Big and bold fonts
A font is the set of characters your copy is displayed in. This site uses system fonts or web safe fonts that are already installed on your computer. This way, your site might look different on a PC than on a Mac. If you want to use other fonts to make your site unique, they need to be downloaded when the site is loading. You can avoid this and play with characteristics of the fonts using CSS, without significant additional data load.
You can make them large & bold
Horizontal
Horizontal
If you choose to use a web font, you might opt for variable fonts. They can serve you all the different characters (normal, bold and italic) in one package and, as a bonus, they can be animated and do weird things.
If you thought that copy looks boringly boxy on a website, you should think again. You can do interesting things with the outer shape of the floating text. You can make text flow around an image or another object. It is a relatively new CSS feature (not supported by older browsers, Internet Explorer and earlier Edge) that is not used very often, so you can make things looks fresh and original, much like in magazines.
Structure things
HTML without CSS is linear: the content is from top to bottom. This is clear. But using CSS you can structure things. You can use columns to group related stuff or sections to separate things that do not belong together. I try to do this on this site. Structuring things has never been this easy and lightweight thanks to Flexbox for linear and CSS grid for 2D structures.
That tiny touch of originality
Be original. Find a unique idea that you can use to make a site really stand out. Something that the visitor will remember, something delightful.
The finishing touch
Everything you do with CSS is relatively lightweight. CSS takes us away from the dull, linear HTML output and makes your site unique, while still being fast and light.
I hope you got inspired a bit. Combine all these ideas to come to something original and delightful. Have fun!
This page is delivered in about 44 kb.