Daniel Steele's Webspace

How to Write a Small, Effective Website

August 14, 2021

It is no question that the World Wide Web has become a bloated mess. To even say that is quite cliche. Many modern websites are filled to the brim with useless spyware and scripts which only serve to create an annoying browsing experience, as well as creating an incredibly high bar for what kind of devices are even able to access these websites.

But the truth is that creating lean, functional, and sexy websites is actually stupidly simple.

In this article, I detail a few simple ways that you can create a website that will not only run on the oldest of computers and slowest of internet speeds, but also be beautiful and draw attention from fellow webnauts.


Understand the effectiveness of colour

Just because your website doesn't have fancy animations or cool layouts doesn't mean that you can't take advantage of the most important design element of all: colour.

Go online and find some cool colourschemes that match the aesthetic that you want your site to have. You can find really good colour combos that will give your site a modern look, regardless of whether or not your site has all the bells and whistles that large websites have.


Revise your CSS

Be smart with every single keystroke you make. In a situation with slow connection, every byte counts. Go over your CSS and make sure that you don't have any redundant or overlapping rules. For example, if you have several elements that should all be bold,

p { font-weight: bold; }
li { font-weight: bold; }
td { font-weight: bold; }
				

group them under one CSS rule like so:

p, li, td { font-weight: bold; }

Use semantic elements

One of the most important yet most neglected good habits of HTML is the use of semantic HTML elements. Semantic elements are very similar to divs, however they tell the web browser more about the element and the purpose that it serves.

There are at least a dozen semantic elements, but the most important are <header>, <nav>, <section>, <article>, <aside>, and <footer>

Using semantic tags serves many advantages, such as more readable code, better accessibility, but most importantly, classes become largely unneeded. This is good seeing as classes can slow loading times right down.


Make a simple, portable layout

Nowadays, it's common place for websites to look very different between desktop and mobile devices. One can imagine how many thousands of bytes are wasted on all this extra code that is unused most of the time.

For this reason, it is important to have a layout that is portable, consistent, and usable across all screen sizes. Not only does this allow for there to be fewer wasted lines of CSS, but it also keeps older systems from having to think too hard about adapting layouts.


Conclusion

Making a good site a lot easier than one might think. In fact, it's easier than making a bad site. If you've been thinking about writing a site, you should look deeper into what I've talked about here. Your visitors will thank you.