====== Fun, Accessible, and Small ======

The third principle of [[indieweb:indieweb_defined|the IndieWeb]]: your site should be all three simultaneously. It's a challenging balance, but all three matter.

===== Fun =====

Individual, expressive design is a feature, not an afterthought. Corporate social media gives everyone the same template. The IndieWeb does not.

Examples of what's possible:
  * Collage-style layouts, pixel art, hand-drawn assets
  * Colour schemes that reflect your personality
  * [[indieweb:web1_aesthetics|88x31 badges]], webrings, guestbooks
  * Interactive elements that feel like art

[[https://jamesg.blog/2024/03/10/100-more-personal-website-ideas/|100 more personal website ideas]] by James G. Browse any [[https://neocities.org/browse?sort_by=special_sauce|Neocities special sauce]] for examples.

===== Accessible =====

Fun and accessible are not opposites. Your site must work for everyone, including people using assistive technology.

The [[https://www.w3.org/WAI/standards-guidelines/wcag/|Web Content Accessibility Guidelines (WCAG)]] define four core **POUR** principles:

^ Principle ^ Meaning ^ Examples ^
| **P**erceivable | Information must be presentable in ways users can perceive | Alt text for images, sufficient colour contrast |
| **O**perable | UI must be navigable by everyone | Keyboard navigation, no seizure-inducing content, enough time to read |
| **U**nderstandable | Content and UI must be readable and predictable | Clear language, consistent navigation, form labels |
| **R**obust | Content must work with current and future assistive tech | Valid HTML, ARIA where needed, screen reader compatibility |

Resources:
  * [[https://www.a11yproject.com/|The A11Y Project]]
  * [[https://webaim.org/articles/keyboard/|WebAIM: Keyboard Accessibility]]
  * [[https://www.wcag.com/resource/what-is-wcag/|What is WCAG?]]

===== Small =====

Performance is accessibility. If your page doesn't load, nobody reads your work.

**[[https://512kb.club/|512KB Club]]** — a movement for pages under 512 KB total weight (roughly half the recommended maximum).

Practical techniques:

  * Compress and resize images before uploading
  * Use [[https://modernfontstacks.com/|modern font stacks]] — system fonts that load instantly with zero network requests
  * [[https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading|Lazy load]] images and resources below the fold
  * [[indieweb:progressive_enhancement|Progressive enhancement]] — HTML first, CSS second, JavaScript third
  * Your site should [[indieweb:testing_nojs|function without JavaScript]] — JS fails for countless reasons: corporate firewalls, mobile network optimization, security software, slow connections

===== The Tension =====

A highly animated, image-rich site can be fun but not small. A plain-text site can be small and accessible but not fun. The goal is thoughtful craft — making deliberate decisions about what to include and why, not maximal restriction.

Good faith mindfulness, not bad faith purity testing.

===== See Also =====
  * [[indieweb:start|IndieWeb Index]]

  * [[indieweb:indieweb_defined|What Is the IndieWeb?]]
  * [[indieweb:progressive_enhancement|Progressive Enhancement]]
  * [[indieweb:testing_nojs|Testing Without JavaScript]]
  * [[indieweb:web1_aesthetics|Web 1.0 Aesthetics]]
  * [[protocols:smallweb:old_hardware|Low Hardware Requirements of the Small Web]]
  * [[start|Return to wiki home]]