After many days of experiments, tweaks and designing, here comes Essent10: the minimal theme for Pelican, without JavaScript
Hello everyone,
I was really tired of the old theme used in my blog, even though it was elegant it was also absolutely unusable on smartphones, and did not make good usage of HTML5 and CSS3's features. Furthermore the content and theme management was horrible, since it was based on a (badly) modified version of the "notmyidea" theme (that's on me).
The people who know me well, are aware that one of my guidelines when making a website is "The less JavaScript there is, the happier I feel", so I wanted to see how far I could push this Philosophy, whatever the cost.
The final result is Essent10 (pronounced "Essentio"): a responsive and minimal them that makes no use of JavaScript.
Dark Mode Support
Like the best "dark side lords", one of the features I absolutely wanted to be in my theme was "dark mode".
This was fairly easy thanks to CSS Variables and the new "Media Queries Level 5", which include a new media query:
prefers-color-scheme
.
When the user sets their browser to demand a website to use "dark mode", the color scheme will be automatically loaded and changed. To avoid using JavaScript, I decided to not code a system to switch the color scheme "on the fly". I think of it as a pretty useless feature, since when I set a color scheme, it's going to stay the same forever.
Retractable Sidebar
I decided to give up the double horizontal menu (with its inherent usability horrors) in favor of a retractable sidebar.
Such menu is implemented via CSS rules and a hidden checkbox, using such hack it is possible to have a working retractable sidebar without any JavaScript.
When on mobile, the sidebar will be hidden by default and it can be toggled via the "hamburger" button on the top left side of the screen.
Some think that the "hamburger symbol" doesn't really convey the meaning of a menu, and subsequently heightens the cognitive load of a website. I personally think that such criticism is valid when it comes to people with less experience in modern IT; the so-called "hamburger menu" was introduced in 2009 and has become a cornerstone of many mobile applications, as it allows to solve a critical issue: the lack of space.
If such menu is not overloaded with buttons, and is mostly used as a "secondary navigation", like in the case of a blog, I think it is more than simple acceptable.
Search Box
This theme has a search box that helps your users finding content in your website.
In this case I had to cheat: the search box makes use of an external service (DuckDuckGo) to search inside the website: the form makes an
HTTP GET
request on DuckDuckGo, limiting the search to the website's domain.
Such search box can be disabled and is slightly customizable, there is good probability you can use other search engines that work in a similar way to DuckDuckGo.
A second search box appears in the hamburger menu in mobile mode (while the one in the header gets hidden) to save on space.
This allows me to search through the website without using PHP o a static search system like Tipue Search (which uses JQuery).
Social
This theme offers a "share on social media" feature, without JavaScript or trackers: completely customizable via
pelicanconf.py
, this system allows to insert a box at the end of each post to allow sharing on:
- Buffer
- Hacker News
It also allows to decide if you want the sharing screen to open on a new tab, everything without any script and getting rid of social network trackers.
Accessibility
This theme tries to be accessible from different devices (mobile, desktop, screen readers, etc...), as well as offer content that is readable from people with visual impairments.
Colors try to be as contrasting as possible (trying to follow the WCAG AAA guidelines where possible), fonts are big and increased line spacing improve readability.
What I would have liked to do
There are some things I wanted to add to this theme, but for time constraints or other reasons I couldn't add.
Vertical Rhythm
One of the things I really wanted to implement in this theme was the "vertical rhythm" concept: something that is quite new on the web, where font sizing and line spacing are specifically tailored to be consistent and give a better sensation of "order" in the text.
Sadly calculating the baseline and all the margins to follow the "vertical rhythm" guidelines is a calculation that, even though not really too complex, conflicts with the amount of energy I want to spend to create this theme.
Maybe in a distant future, I may think to implement such concept.
Proprietary Meta Tags
My blog now makes use of the great pelican-seo plugin, which doesn't use any proprietary tags ("twitter cards" for instance) since such tags are considered a danger to the concept of "open internet", involving websites in a "corporate war" that should not exist.
Agreeing in a substantial way with such line of thought, I preferred avoiding such tags (even though I used them in the previous blog) for now, favouring "open tags" like the old "meta tags" and JSON-LD.
In a distant future I may use a specific plugin or make some sub-templates to generate such tags.
Better "dark mode" support
At the moment, "dark mode" is a bit unstable: when no preference is set the "light" theme should be loaded, instead "dark mode" gets enabled. I would like to understand why this happens, fix the issue and "free my mind" from such worry.
Being still an "editor's draft" (substantially an experimental feature), there is a possibility that the color schemes and the
prefers-color-scheme
media queries are not working as intended.
Future Plans
The theme is already public and usable, but there some things I would like to add to make it more "universal" and easier to use for the people who have different needs or just edit it.
Usability Improvements
Even though I paid close attention to usability, I completely forgot some usability cornerstones.
First of all, I want to add a hidden "skip navigation" link, for better navigation by screen reader users, also I want to dynamically generate some "tab-stops" for the people who want to use the keyboard to surf between the links.
Template Sorting
I will sort the templates, putting the "partial templates" (which contain pieces of pages) in a sub-folder, making their management easier.
This is a really simple improvement, while the theme is small and self-container, if I add more features before doing this, such migration may become a problem.
Copyright
At the moment, this theme doesn't contain any mention on the copyright of the website or blog. I would like to add a couple options in the
pelicanconf.py
file that will allow to show a phrase similar to "© Year Name" in the page's footer.
JS Minification and Thumbnails
In websites it is important to have small resources: we have to assume that data is limited, and using the least amount possible is a matter of respect towards our users.
This theme was supposed to support the pelican-webassets plugin, but some problems stopped me from completing this integration.
I want to restore support for the
pelican-webassets
plugin and minify CSS style sheets and JavaScripts that may be included in the future.
After this, I would like to make use of the
pelican-image-process
plugin, to create thumbnails and "responsive" images via the
<picture>
HTML5 tag.
Lightbox
The first component that will make use of JavaScript will probably be a so-called "LightBox": when an image is clicked a "modal dialog" will be opened, overlaying the page, containing the original version of the image.
This may be useful on the usability side, if well made, but it is not a priority at the moment.
Disqus Support
In "static blogs" which are generated by software such as Pelican and Jekyll, Disqus is a well-regarded service to allow to put a comment section inside a certain page.
I would like to give the user the chance to use such service, if activated, so to offer the maximum amount of freedom possible.
Google Analytics and Tag Manager support
Even though I am not really interested in it, some people may find use implementing Google Analytics (traffic Analytics) and Google Tag Manager (tag management and traffic Analytics) scripts.
This idea is really similar to one widely used by other themes: let the user insert their code or ID in their
pelicanconf.py
and the system will automatically insert the necessary scripts in the right pages.
Conclusions
This theme is really basic and will change with time, but for now it implements the majority of principles I wanted to follow: usability, low weight, flexibility and reduced use of JavaScript.
I don't know what to think of the "design" of the website itself, which may change in future.
If you want to take a look at the theme, follow the link to the Essent10 github repository .
Thank you all for reading. See you next time!
Penaz.