(w) smolweb

Guidelines for a smolweb

What to do and not to do

Write short code

To be smol, obviously, first step is to write small code and avoid unnecessary things. Are you sure it is useful to redefine HTML components with a huge CSS framework? What does it bring to your site? Trying to build a site which is exactly the same on all devices and screens is vain and expects bloated pages. Forcing a font size is even a bad idea for visually impaired readers. So, try to write short code.

The best smolweb is a site readable without any CSS and JavaScript code. The recommendations about these points are :

Use the right tags, the right way

HTML has a large set of tags and the basic error is to use them to format graphically your pages instead of keeping their semantic aspect. Some HTML tags or attributes even have a role for accessibility. Instead of using a simple DIV with a specific class and its style definition, it’s a better idea to use the semantic tag corresponding to its content. Recent browser and specific displays are able to take advantage of it. <header>, <footer>, <main>, <nav>, <section>, <article>, <aside>, <details>, <summary>, <figure>, <figcaption> and <data> are good tags to identify the different parts of your page. Even if some are recent and unknown by old browsers, they are recommended for clean smolweb pages. They are described in the HTML subset page.

Include the necessary declaration in your header code

The first thing read by a browser is the first line on your HTML page, so it must help to browser to determine clearly want it will find. The <!DOCTYPE> line has this role. If you want to use tags proposed in the HTML subset page, it is necessary to use the html 5 doctype : <!DOCTYPE html>

The second line is the html tag with the lang code attribute corresponding to the language of the page content (see the ISO 639-1 codes) : <html lang="en">

Indicating which encoding (or character set) is used in your page permit to avoid bad display of accent. UTF-8 does everything you want (and more), it’s a widely accepted standard and basically supported everywhere: use UTF-8! This declaration is a meta tag in the head section:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >

And, to be compatible with all size of screen, defining the viewport to the width of the screen device is very simple. Just add another meta in head section:
<meta name="viewport" content="width=device-width, initial-scale=1.0" >

The head section can contain links to external resources such as CSS stylecheets or favicon in different formats…

Do not use media content if not necessary

If you embed images in your pages, try to make them small. Some tools permits to get good result with dithering method. Don’t forget to write an alternative description in the alt attribute of the img tag.

Does your pages really need a logo? Sometimes, a simple text or word is enough.

Limit the use of audio and video to the strict minimum. The best way to include a multimedia content is to link to it with a simple <a> tag. It will propose to the user to save it to his/her disk or to open the right application to play it. It is useful to indicate the size of the file near the link.

Do not embed font

Loading a font from your web server or from a specific CDN will bloat your site. Try to stick to common fonts available on almost all computers with a fallback to a default serif, sans-serif or monospace. These three fonts use fonts that the user has defined as its preferred ones in its browser settings.

You will find many details on The Ultimate List of Web-Safe HTML and CSS Fonts post by Maddy Osman and on this great Modern Font Stacks compilation.

Ensure readibility

Good practice, for accessibility, is to respect the font size defined by the user.

html { font-size: 100%; }
And to adapt your style relatively to the root (html element) size using rem units.

h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.2rem; }
small { font-size: 0.8rem; }

Use emoticons, not emojis

Recent unicode characters, such as emojis, are not recognized by old browsers. Remember the good old time of emoticons, made with ASCII characters :-) if you need to specify a mood or to precise irony or humour, they still are a good alternative.

Use table for tabular data only

At the beginning of the web, before 2000, tables were used to format a webpage graphically. This is a real bad solution. Use tables, only if necessary, and to format data (think about spreadsheets).

Check your code

It is easy to write bad code. W3C provides a tool to check that your page is conforming to standard.

Try your site on different kind of browser such as recent browsers (Firefox, Chromium), console mode browsers (Lynx, W3M), old widely ported simple browsers (Netsurf, Dillo, Mosaic) and on small screen devices (smartphones and tablets). If you haven’t these specific browsers, try your site without its stylesheet: it would be less beautiful (maybe) but it should remain usable.

Supply an RSS feed

Smolweb surfers like to have the possibility to follow you without a specific social network. RSS feeds are always used by many internauts. They permit to be aware of new publication on your site. If your posts are short, please, put full content of your last articles in your RSS xml file.

Enable https protocol

https (http over TLS on port 443) is standard since Letsencrypt proposes free certificates. It would be a good idea to supply simple http (on port 80) if you want your site is usable by very old browsers or on systems with old CA chains. However, your site could become a point of failure for a man-in-the-middle attack. So, ensure to enable https and a redirection from http connexions to https.

Code sample

Here is a sample of a standard HTML page using these recommendations :

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
        <meta name="viewport" content="width=device-width, initial-scale=1.0" >
        <meta name="description" content="My smolwebsite about all my hobbies..." >
        <link href="/style.css" rel="stylesheet" type="text/css" >
        <link rel="icon" href="/favicon.ico" type="image/x-icon" >
        <link rel="icon" href="/favicon.png" type="image/png" >
        <link rel="icon" href="/favicon.gif" type="image/gif" >
        <link rel="alternate" type="application/rss+xml"
            href="https://mysmolwebsite.tld/rss.xml" title="My smolwebsite!" >
        <title>The title of my page</title>
    </head>
    <body>
        <header>
        <strong>My smolwebsite</strong>
        <nav><ul>
            <li><a href="index.html">About</a></li>
            <li><a href="posts/index.html">Posts</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul></nav> 
        </header>
        <main>
            <article>
            <h1>My first post</h1>
            <p>Happy to have a smolwebsite!</p>
            </article>
            <aside>
                Other related posts:
                <ul>
                    <li><a href="other-post.html">other post</a></li>
                </ul>
            </aside>
        </main>
        <footer>
            Published by <strong>me</strong> under Creative Commons BY SA
        </footer>
    </body>
</html>