Sustainable Design

This entry has no working demo yet; the illustration is editorial. Before applying this to a real product, measure that product's own transferred bytes and real-device energy and performance; do not reuse the example figures in this entry.

{
  "values": [
    "Resource restraint",
    "Long-term usability"
  ],
  "tension": "Visual and feature richness versus resource cost",
  "questions": [
    "How many measurable transferred bytes or compute cycles does this change add or remove?",
    "Does this experience require users to replace their device to keep using it?",
    "Is any energy or carbon claim labeled with the model it relies on?"
  ]
}

{
  "id": "sustainable-design",
  "type": "philosophy",
  "name": {
    "zh": "可持续设计",
    "en": "Sustainable Design"
  },
  "aliases": [
    "Green Software",
    "低碳设计",
    "Web Sustainability"
  ],
  "granularity": "experience",
  "intents": [
    "reduce-resource-use",
    "extend-device-life"
  ],
  "tags": [
    "resource use",
    "page weight",
    "energy use",
    "device longevity",
    "asset weight"
  ],
  "definition": "Deliberately reduce a digital product's demand on transferred bytes, compute, and devices across its life cycle, including the behavior the product encourages, instead of relying on device replacement to keep the experience working.",
  "boundary": "Not the same as calm technology: calm technology optimizes whether information interrupts attention, while sustainable design optimizes resource costs such as transferred bytes, compute, and device lifespan; the two can coexist but target different things. It is also not a generic sustainability slogan — every change should be backed by a measurement such as transferred bytes, and any energy or carbon figure must name the model it comes from rather than being presented as a precise measurement.",
  "signature": [
    "Measure actual transferred bytes before and after a change, rather than relying on intuition",
    "Keep core tasks usable on existing older devices, reducing forced upgrades",
    "Label energy or carbon claims as a specific model's estimate, not a measured fact"
  ],
  "when": [
    "The product's data, battery, or heat cost has become a real pain point for users or operations",
    "Design review needs to trade off visual richness against transferred bytes and compute cost",
    "A large share of the target audience uses low-end or older devices"
  ],
  "when_not": [
    "Using sustainability as a marketing slogan without measuring any actual bytes or energy data",
    "Presenting a carbon-model estimate to the public as a precise measurement",
    "Cutting resource use at the cost of accessibility or core functionality"
  ],
  "tradeoff": "Reducing resource demand often means trimming visual richness, animation, or high-resolution assets, which must be weighed against experience goals, brand expression, and accessibility needs.",
  "comparison": {
    "focus": "The resources a product consumes across its life cycle: transferred bytes, compute, and devices",
    "mechanism": "Measure first, then trim resources and extend device usability accordingly",
    "cost": "Requires ongoing measurement rather than a one-time optimization, and energy/carbon figures carry model uncertainty"
  },
  "sources": [
    {
      "id": "w3c-wsg",
      "title": "W3C · Web Sustainability Guidelines (Group Note Draft)",
      "url": "https://www.w3.org/TR/2026/DNOTE-web-sustainability-guidelines-20260703/",
      "claim": "Published 2026-07-03 as a Group Note Draft, explicitly not a W3C Recommendation; it gives concrete guidance to minify code and data files, reduce unnecessary computation, and avoid planned obsolescence by keeping compatibility with older devices for as long as reasonably possible.",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/TR/2026/DNOTE-web-sustainability-guidelines-20260703/",
        "status": "pending",
        "checkedAt": "2026-09-16T05:56:15.973Z",
        "error": "status-request-failed",
        "jobId": "spn2-7f00789ec778634d39998502ca32d353d9c55ed5"
      }
    },
    {
      "id": "webdev-compression",
      "title": "web.dev · Reduce network payloads using text compression",
      "url": "https://web.dev/articles/reduce-network-payloads-using-text-compression",
      "claim": "Explains that compressing and minifying text-based assets such as CSS, JavaScript, and HTML can cut their transferred bytes by roughly 65-86%, a concrete way to control page transfer weight.",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://web.dev/articles/reduce-network-payloads-using-text-compression",
        "status": "available",
        "checkedAt": "2026-09-16T05:56:53.760Z",
        "jobId": "spn2-bdca21e4614b32857643e11962b7b49e8a7f6f24",
        "url": "https://web.archive.org/web/20260916055719/https://web.dev/articles/optimizing-content-efficiency-optimize-encoding-and-transfer",
        "timestamp": "20260916055719"
      }
    }
  ],
  "relations": [
    {
      "target": "calm-technology",
      "kind": "related",
      "condition": "When both attention and resource cost matter at once",
      "reason": "Calm technology optimizes interruption and attention; sustainable design optimizes transferred bytes and device lifespan. The goals differ and should be assessed separately, not substituted for each other.",
      "basis": "editorial"
    },
    {
      "target": "privacy-by-design",
      "kind": "related",
      "condition": "When deciding what data to collect and transmit by default",
      "reason": "Collecting and transmitting less data by default typically reduces transferred bytes and the user's privacy exposure at the same time.",
      "basis": "editorial"
    },
    {
      "target": "universal-design",
      "kind": "composes_with",
      "condition": "When designing the core experience for users on varied devices and networks",
      "reason": "Keeping core tasks achievable on older devices and weak networks aligns with universal design's goal of achievable outcomes for all users.",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "Reviewing a new asset or feature's resource impact",
      "instruction": "Measure its actual impact on transferred bytes first, then decide whether to trim, lazy-load, or replace it.",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "Describing energy or carbon impact publicly",
      "instruction": "State that the figure is an estimate from a named model; never present it as a measured fact.",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "Designing interaction and visuals for long-term maintenance",
      "instruction": "Prioritize keeping functionality usable on existing older devices rather than defaulting to assuming newer hardware.",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "philosophy": {
    "values": [
      "Resource restraint",
      "Long-term usability"
    ],
    "tension": "Visual and feature richness versus resource cost",
    "questions": [
      "How many measurable transferred bytes or compute cycles does this change add or remove?",
      "Does this experience require users to replace their device to keep using it?",
      "Is any energy or carbon claim labeled with the model it relies on?"
    ]
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "This entry has no working demo yet; the illustration is editorial. Before applying this to a real product, measure that product's own transferred bytes and real-device energy and performance; do not reuse the example figures in this entry.",
  "image": {
    "src": "/images/sustainable-design.webp",
    "alt": "An editorial illustration: a fictional FIELDNOTES page on the left, and on the right a row of weight-like blocks shrinking from left to right, with a simple leaf motif and the silhouette of an older device still in use."
  },
  "searchTerms": [
    "资源消耗",
    "页面重量",
    "能耗",
    "设备寿命",
    "加载体积"
  ]
}