3.7 KiB
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) 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) 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 and html proofer, and see no errors. I do filter out false Nu positives, and I report and fix false-positives when possible. View Highlight) dev/web-dev
The IndieMark page lists all the ways you can “IndieWeb-ify” your site. View Highlight) indie-web
IndieWeb features implemented
I’ve implemented several features from IndieMark:
• IndieAuth compatibility, using the external IndieLogin.com service.
• 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, and send them from my own computer using 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. View Highlight) 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)