How this site was made

Published on November 15, 2023.

The simple answer is "With HTML5, CSS and JavaScript." And that is true, but there is more. While designing and building this site I used a variety of special techniques and methods, which deserve some extra explanation.

The design: Responsive, so content first!

The most important thing for me was that people could go through my website as easy as possible and would be able to see and/or read what they wanted. [excerpt] I also wanted to make sure that the site could be used (read/seen/navigated through) on even the smallest devices. With that in mind I bought the most simple, cheapest and smallest phone I could find: The Samsung Galaxy Y. I used that phone as my primary testing platform.

To put it other words, the design had be guided by the content and had to be scalable from small to large screens. That meant that the design needed to be responsive. To see what that means in practice, just resize your window and you will see the layout rearrange to make it as readable and usable as possible. That's what responsive design is.

Building

Using HTML5: making semantics important

I didn't just use HTML5, because everyone was doing it and I wanted to be part of the cool kids. No I used it because it was so more better equiped to write sematically meaningful markup than all the previous versions.

The advantage of writing semantic correct HTML is that the markup describes the content better, but instead of just using the text book explanation, here is an example:

In the olden days of HTML4 (and in XHTML too) a simple website's HTML would look like this:

  
    <html> 
  <head> ... </head>
  <body>
    <div class="article">
      <h1>Heading of the article</h1>
      <p> First paragraph of the text </p>
    </div>
    <div class="sideContent">
    ... Something related to the article, but not directly.
    </div>
  </body>
</html>

But HTML5 introduced more semantic tags and the HTML could look like this:

  
    <html>
  <body>
    <article>
      <h1>Heading of the article</h1>
      <p> First paragraph of the text </p>
    </article>
    <aside>
      ...Something related to the article, but not directly.
    </aside>
  </body>
</html>

This means that the website, just on the basis of it HTML markup can be understood and read much easier than before. Which, in turn, also means that bots from Google, Bing and other search engine understand the content better too.

Using em values

Traditionally most developers use pixels values to specify what the layout should look like. There are however two problems with that. 1. It is unclear where a certain size of, for instance, a heading comes from. 2. It is dificult to understand why something is a certain size to begin with.

Here is a practical example explaining it:

  
    /* The font in pixel values: */
body {
  font-size: 12px;
}

h1 {
  font-size: 20px;
}

small {
  font-size: 10px;
}


/* The same in em values: */
body {
  font-size: 12px; /* define a base size. */
}

h1 {
  font-size: 1.8em; /* h1 headings are 1.8 times bigger than the base size. */
}

small {
  font-size: 0.8em; /* small text is 0.8 times the size of the base size. */
}

Minimizing the use of images: font icons

Of course I had the issue that one of the main things shown on this website are in fact images, but I could reduce the load in other areas like the icons that I would use.

Luckily arround that time a new idea came arround called font icons. Font icons are basically a font (or type face) in which all the glyphs (letters, numbers and other things) are replaced by images.

The fun (and useful) thing however about them are that they behave just like a letter of a regular font. That means they can be styled like any other text in the HTML with CSS. That means you can have a twitter logo in your favourite colour, about 2 em's big and with some cool shading. Nifty ey!