fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-23 12:52:10 +00:00
Code Issues Projects Releases Wiki Activity

Update website best practices with color info

Browse source 
Thanks to a couple IRC users for the feedback.
This commit is contained in:
rohan kumar 2020-11-23 19:00:31 -08:00
parent 01c4d1fde5
commit 839e6d5737
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
2 changed files with 40 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
content/posts/website-best-practices.gmi
View file

@ -12,6 +12,7 @@ I realize not everybody's going to ditch the Web and switch to Gemini or Gopher
* No requests after the page finishes loading
* No 3rd-party resources (preferably enforced at the CSP level)
* No lazy loading (more on this below)
* No custom colors OR explicitly set the both foreground and background colors. More on this below.
* Supports dark mode and/or works with most "dark mode" browser addons
* A good score on Mozilla's HTTP Observatory
* Optimized images. You also might want to use HTML's <picture> element, using jpg/png as a fallback for more efficient formats such as WebP or AVIF. Use tools such as oxipng to optimize images.
@ -19,7 +20,7 @@ I realize not everybody's going to ditch the Web and switch to Gemini or Gopher
=> https://observatory.mozilla.org/ HTTP Observatory
=> https://github.com/shssoichiro/oxipng Oxipng
Early rough drafts of this post generated some feedback I thought I should address below.
Early rough drafts of this post generated some feedback I thought I should address below. Special thanks to the five IRC users who provided feedback!
## About fonts
@ -56,6 +57,20 @@ I have two responses:
1. If an image isn't essential, you shouldn't include it inline.
2. Yes, users could disable images. That's *their* choice. If your page uses lazy loading, you've effectively (and probably unintentionally) made that choice for a large number of users.
## About custom colors
Some users' browsers set default page colors that aren't white-on-black. For instance, Linux users who enable GTK style overrides might default to having white text on a dark background. Websites that explicitly set foreground colors but leave the default background color (or vice-versa) end up being difficult to read. Here's what this page would look like if it messed with the colors carelessly:
=> gemini://seirdy.one/misc/website_colors.png Screenshot of this page with some unreadable text
It's got a grey background, a header with unreadable black/grey text, and unreadable white-on-white code snippets
If you do explicitly set colors, please also include a dark theme using a media query:
```
@media (prefers-color-scheme: dark).
```
## Other places to check out
The 250kb club gathers websites at or under 250kb, and also rewards websites that have a high ratio of content size to total size.

25
content/posts/website-best-practices.md
View file

@ -32,14 +32,20 @@ primarily on text:
- No requests after the page finishes loading
- No 3rd-party resources (preferably enforced at the CSP level)
- No lazy loading (more on this below)
- No custom colors OR explicitly set the both foreground and background colors. More
on this below.
- Supports dark mode and/or works with most "dark mode" browser addons
- A good score on Mozilla's [HTTP Observatory](https://observatory.mozilla.org/)
- Optimized images. You also might want to use HTML's `<picture>` element, using
jpg/png as a fallback for more efficient formats such as WebP or AVIF. Use tools
such as [oxipng](https://github.com/shssoichiro/oxipng) to optimize images.
I'd like to re-iterate yet another time that this only applies to websites that
primarily focus on text. If graphics, interactivity, etc. are an important part of
your website, less (possibly none) of this article applies.
Early rough drafts of this post generated some feedback I thought I should address
below.
below. Special thanks to the five IRC users who provided feedback!
About fonts
-----------
@ -110,6 +116,23 @@ I have two responses:
loading, you've effectively (and probably unintentionally) made that choice for a
large number of users.
About custom colors
-------------------
Some users' browsers set default page colors that aren't white-on-black. For
instance, Linux users who enable GTK style overrides might default to having white
text on a dark background. Websites that explicitly set foreground colors but leave
the default background color (or vice-versa) end up being difficult to read. Here's
an example:
<picture>
<source srcset="https://seirdy.one/misc/website_colors.webp" type="image/webp">
<img src="https://seirdy.one/misc/website_colors.png" alt="This page with a grey background, a header with unreadable black/grey text, and unreadable white-on-white code snippets">
</picture>
If you do explicitly set colors, please also include a dark theme using a media
query: `@media (prefers-color-scheme: dark)`.
Other places to check out
-------------------------