Silvia Maggi Design Website

Philosophy

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.

The website obesity crisis is an increasing phenomena which gets worse every year¹. I wanted my website to represent a stance on sustainability.

Content first

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.

Information architecture

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 desktop², 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 increasing³, I opted to position the main navigation at the bottom on mobile.

Layouts

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.

Collections

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:

• Projects
• Newsletter archive

Design

We chose Bootstrap 5 to speed up the creation of grids and other features, building my theme on top of it. Using utility-first CSS⁴ 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.

SVGs

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.

Accessibility

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.

Search

An important feature is the ability to search within the website. To implement it we used vanilla Javascript. We also provide an accessible no-script alternative which relies on DuckDuckGo, presenting the results in a new browser tab.

SEO

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.

Results

Benchmarks

Sustainability

Only 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.

Due to the site compact size, it’s member of:

Further reading

• How I am making my website accessible — Part 1
• How I am making my website accessible — Part 2