35 lines
3.7 KiB
Markdown
35 lines
3.7 KiB
Markdown
# Site Design Standards
|
||
|
||
|
||
|
||
## Metadata
|
||
- Author: [[Rohan Kumar]]
|
||
- Full Title: Site Design Standards
|
||
- Category: #articles
|
||
- Document Tags: [[dev]] [[indie-web]]
|
||
- URL: https://seirdy.one/meta/site-design/#static-indieweb
|
||
- Archive: https://web-archive.alecodes.page/bookmarks?bf=1&search=&title=Site%20Design%20Standards
|
||
> [!tldr]
|
||
> The website seirdy.one focuses on high accessibility standards, adhering to most Web Content Accessibility Guidelines (WCAG) while continuously improving link purpose clarity. It is compatible with various browsers, including older ones, and uses semantic, well-structured markup to enhance content accessibility. The site also incorporates IndieWeb features, allowing interactions like Webmentions, while planning future enhancements.
|
||
|
||
## Highlights
|
||
I only set custom colors in response to the `prefers-color-scheme: dark` media query. These custom colors have an Advanced Perceptual Contrast Algorithm (APCA) lightness contrast close to the ideal value of 90. I use autism- and overstimulation-friendly colors: the yellow links have low saturation to reduce harshness. [View Highlight](https://read.readwise.io/read/01j6q0y08pr5az55kbqx1za16z)) [[design]]
|
||
> [!note]
|
||
> Be carefull with over stimulation design
|
||
|
||
I run axe-core, the IBM Equal Access Accessibility Checker, the Nu HTML Checker (local build, latest commit), and webhint on every page in my sitemap. After filtering out false-positives (and reporting them upstream), I receive no errors. I repeat this run with every change to my Hugo templates and stylesheets. [View Highlight](https://read.readwise.io/read/01j6q1k4ha86p96pnhz2m9szcp)) [[dev/accesibility]]
|
||
|
||
This website conforms to Web standards. Each build runs `xmllint` to catch syntax errors. Every few commits, I run a local build of [the Nu HTML Checker](https://github.com/validator/validator) and [html proofer](https://github.com/gjtorikian/html-proofer), and see no errors. I do [filter out false Nu positives](https://git.sr.ht/~seirdy/seirdy.one/tree/master/item/linter-configs/vnu_filter.jq), and I [report and fix false-positives](https://github.com/w3c/css-validator/issues?q=author%3ASeirdy) when possible. [View Highlight](https://read.readwise.io/read/01j6q1vgnhs9b2rqh77xxw9y5v)) [[dev/web-dev]]
|
||
|
||
[The IndieMark page](https://indieweb.org/IndieMark) lists all the ways you can “IndieWeb-ify” your site. [View Highlight](https://read.readwise.io/read/01j6q2cs5dpg7dc3qb130600n8)) [[indie-web]]
|
||
|
||
IndieWeb features implemented
|
||
I’ve implemented several features from IndieMark:
|
||
• IndieAuth compatibility, using the external [IndieLogin.com service](https://indielogin.com/).
|
||
• Microformats: representative `h-card`, in-text `h-card` and `h-cite` when referencing works, `h-feed`.
|
||
• Sending and receiving Webmentions. I receive Webmentions with [webmentiond](https://github.com/zerok/webmentiond), and send them from my own computer using [Pushl](https://github.com/PlaidWeb/Pushl/).
|
||
• Displaying Webmentions: I render backlinks, IndieWeb “likes” (not silo likes), and comments below posts. I model their appearance after Tumblr’s display of interactions.
|
||
• Backfeeding content from silos: I’m only interested in backfilled content containing discussion, not “reactions” or “likes”. Powered by [Bridgy](https://brid.gy/). [View Highlight](https://read.readwise.io/read/01j6q2a4dcrmq9eegvrsgz1hja)) [[indie-web]]
|
||
|
||
IndieWeb sites need not implement *every* IndieWeb standard. Progressive enhancement and graceful degradation let me implement interesting features, and skip less interesting ones. Skipped features include: [View Highlight](https://read.readwise.io/read/01j6q2j1gyftbdbr59hsggy34t))
|
||
|