5.7 KiB
title, author, slug, date, published
| title | author | slug | date | published |
|---|---|---|---|---|
| The web, designed for you | Yarmo Mackenbach | web-designed-for-you | 2020-05-05 21:49:58 | false |
#100DaysToOffload >> 2020-05-07 >> 013/100
Today, something in me clicked. Granted, I did not discover anything new and people smarter than me are already solving the issue I will describe, but today, for me, everything aligned and it just clicked.
What happened before: the dark theme discussion
A few days ago, I wrote a blog post and was quite unhappy with the way it looked: it turned to be paragraphs that were too long and not enough section titles in between them. But I thought it was poorly themed (by me) and I learned a valuable lesson: a dark theme is actually worsening the experience for some. I know people had preferences about dark/light theming but what I did not realize before was that some people have a harder time reading text in a dark theme rather than in a lighter theme.
I personally love a dark theme but I could not bear the thought that because I designed to my personal taste, my aesthetical choices could negatively impact those who were kind enough to spend some of their valuable time on my website.
My immediate reflex was to start thinking about implementing a theme selection mechanism. Problem is: I don't want any javascript on my website. I don't mind javascript but I want to make a statement: my website is basic, it doesn't need to do anything other than displaying text so no javascript is needed. If it's not needed, don't use it.
Problem is: how can my website remember one's theme preference without a minimal form of scripting? Switching a toggle on every page you visit is a no-go. PHP sessions are overkill. There's has to be something smarter.
What happened before: the animation comment
The other thing that led to today actually also happened today: Kevin published a blog post on Adding A Scroll To Top Button Without JavaScript which describes exactly with the title says. It even included an animated scroll. No javascript involved.
This got posted on Lobste.rs and there, a comment immediately caught my attention.
Fwiw, I think I prefer the abrupt jump.
I’ll take my 200ms of time over the slick experience.
A walk to clear my head later and it all clicked. The answer to all of this: Level 5 Media Queries.
My website, designed specifically for you
For me, web design has always been a form of art. Sure, practicality is central as a website has function, but the designer is free to shape the website to his or her heart's content. You are currently on my website. I designed it and shaped it to represent what my ideal website would look like. Sure, every website needs its own character but I would personally love to see more websites look a little more like mine. That's why I made it this way.
This has always been my thinking. Until today. Yes, this is my website, but I'm shouldn't design it for myself, I should be designing it for you. No, not all of you. You, the individual who I feel honored to have as a visitor on my little part of the internet. You come here, I should accommodate the place to make you feel at ease. But how?
I could include a dark/light theme switch. But what if you need high contrast to better read text? Just an extra switch and some styling, no problem. Is my website annoying you by having transitions? Slap one more switch on that page. You know what, I'll make a preferences page.
I am sure by now, you will find your stay a little more pleasing. Once you have finished reading the article, you'll be on your way to the next website. If you are lucky, you get to visit another preferences page first, adapt that website once again to your liking and then enjoy the content. If you're unlucky, well, all you get is what the designer has chosen for you.
Media queries to the rescue
If only there was a smart layer between the user and the websites.
Of course that layer exists: the browser. If you could tell the browser you prefer light themes with high contrast and no animations and the browser could relay this information to all the websites, there would be no need for javascript, no need for preferences pages and absolutely no need to manually adapt each individual website to what you need.
This is where a brilliant solution comes in: Level 5 CSS Media Queries. The user sets preferences in the browser and websites can query those preferences and adapt the design to the results of those queries.
Check the value of prefers-color-scheme to know if the user wants a light or a dark theme. The same goes for prefers-contrast and prefers-reduced-motion. A user could even relay their preference regarding transparency (prefers-reduced-transparency).
This is my website, designed by me, with a user experience tailored to you, my precious visitor.
My intent
I hereby state my intent to include these Level 5 Media Queries as soon as possible on my website. I will also advocate for their use whenever it is appropriate.
It's all still experimental technology and support needs to improve still. Also, user preferences as detailed as these pose obvious risks for fingerprinting.
Nonetheless, I hope this draft gets improved upon and will be accepted in the near future. Making the web more accessible for all will be greatly aided by tools like these, resulting in a more pleasant experience for both the designer and the end user.