I redesigned and built my personal website from scratch following the increasing need to have an easier to customise, flexible site to contain my work, interests and passions. As sustainability is a core concern, total control over code and design was the main requirement.
Ever since the early 2000s, I’ve been maintaining websites and blogs. I used to design and develop them until it felt like a massive task. Thus, I started to use WordPress, learning to build and edit themes. During the following years, WordPress became a widespread CMS allowing people to manage their own content. Deep customisation and vetting every plug-in in use require significant time and effort: this became problematic for me.
Simone and I moved Silvia Maggi Design from WordPress to Jekyll, with hosting on Netlify. Using Liquid template language and Markdown for posts and pages meant that the content needed reworking. I revisited every post, photo and case study to keep what made sense and rewrite what wasn’t good enough.
Since Jekyll is a blog-aware static site generator, it doesn’t rely on a database to dynamically generate pages. Provided with an opportunity to optimise the site’s information architecture — I had
303 tags, most of which barely used — I worked to achieve a slimmer and less dispersive archive.
No hamburger menu
There is strong evidence that a hidden navigation significantly decreases user experience both on mobile and desktop2, therefore I decided to avoid using the infamous hamburger icon, both on mobile and desktop. To do so, I kept the main navigation as uncomplicated as possible, assigning less relevant sections to the footer menu.
With phones sizes ever increasing3, I opted to position the main navigation at the bottom on mobile.
Building static websites doesn’t mean doing everything manually. Liquid uses a combination of objects, tags and filters inside template files called layouts to display dynamic content. The language was new to me, but the learning curve wasn’t so steep because of my experience working with PHP.
Everything that is not a blog post is organised in collections. It’s a neat way to group related content and keep it organised. Each item in a collection is iterated on a page that outputs its content. Currently, they are:
We chose Bootstrap 5 to speed up the creation of grids and other features, building my theme on top of it. Using utility-first CSS4 helped us decouple stylesheets from markup. Along with a customised inclusion of Bootstrap’s SASS source files, it helped keep the final CSS light and efficient.
For typography, I use two local custom fonts for the headings, strictly avoiding calls to third-party sites. The rest adopts a system font stack.
I refreshed logo and styling as well, using muted nature-inspired colours and graphic elements that align with my passion for drawing and watercolours.
Interface images, the logo and all the icons are inline SVGs. When not possible, we call for an aggressively optimised PNG. This choice contributes to the website performance.
I took care of all the details that make a site compliant with the basic WCAG rules. A test with WAVE didn’t reveal any problematic issue.
I checked the colour contrast of elements, the legibility of text, and took care of alternate description for links and images. The automatic test that WAVE performs assured me I did a good job.
Yet, no tool can reliably substitute a manual test. That is, navigating a site using assistive technologies available to everyone.
As I took a closer look to the WCAG 2.1 success criteria, and recently enrolled in the Web Accessibility course on Udacity, I decided to take a step-by-step approach to make my website entirely compliant.
Continue reading on the first of a series of posts where I explain the changes I’m making and why.
Responsive images and photo galleries
Over the years, I published many pictures on social networks and previous blogs. After quitting social media, the website needed to become the centre of my virtual life and the place from where to publish elsewhere.
Whereas I previously didn’t invest much time thinking about images before publishing, now I have workflows to make sure they’re optimised and within specific dimensions. Jekyll’s responsive images plugin automatically generates different versions of the photos I include, based on the viewport of multiple devices. Despite the amount of pictures published, the website performance is stellar, both on mobile and desktop.
Simone created an image gallery carousel in pure HTML and CSS, featuring intuitive controls for mobile devices, along with responsive images. The gallery is now a module ready to be implemented.
Taking care of the SEO was straightforward. It needed a combination of good practises set up once:
- looking for canonical URLs;
- taking description and title from the Front Matter of posts and pages;
- implementing Open graph for rich content display when links are shared on other websites such as social media or instant messengers;
- adding a correct structured data content following schema guidelines.
Google Lighthouse gives a
100 result on SEO, with all 15 audits fully passed.
|Markup||Google score||Speed index||Homepage weight|
0.06g of CO2 is produced every time someone visits the homepage. Cleaner than
94% of web pages tested. The website is running on sustainable energy.
Did you find this article useful?Buy me a coffee →