Code To Learn logo

Code To Learn

HTML FundamentalsM3 · Media & Embedded Storytelling

Media Strategy Introduction

Define the story your media must tell and the guardrails that keep it fast.

Media Strategy Introduction

Learning Objectives

By the end of this lesson, you will:

  • Inventory the visuals that support Avery's story.
  • Define media guardrails for performance, licensing, and consent.
  • Outline documentation updates for future collaborators.

Why It Matters

Images and embeds often carry most of a portfolio's emotional weight—but they are also hotspots for performance regressions and accessibility gaps. A strategy-first approach ensures every asset earns its place and respects users' constraints.


Portfolio Pulse Media Audit

1. Collect Source Material

  • Case study cover images
  • Workshop photographs
  • Logo treatments or UI mockups
  • Video testimonials or talks

Log attribution, usage rights, and original dimensions in docs/media-inventory.md.

2. Assign Story Beats

Match each asset to the narrative arc:

  • Discovery → showcase research deliverables
  • Design → highlight UI explorations
  • Impact → present before/after snapshots or metrics graphics

Document the pairing in notes/module-3-plan.md with context on why each asset matters.

3. Define Success Criteria

GoalMetricOwner
Keep hero gallery under 1.2MBLighthouse Performance ≥ 90Avery
Provide accessible descriptionsAlt text log updatedYou
Respect third-party privacyEmbeds gated until consentTeam

✅ Best Practices

1. Start with Copy

Why: Narrative clarity leads to better visual decisions.

Draft a short paragraph describing the story each asset should communicate before cropping or compressing.

2. Treat Media Like Structured Data

Why: Consistent metadata enables automation later.

- asset: concept-workshop.jpg
  focus: discovery
  alt: "Avery leading a sticky-note workshop during discovery sprint"
  license: "CC BY-NC"

❌ Common Mistakes

1. Choosing Assets Before Setting Budgets

Problem: High-res exports balloon page weight.

Fix: Define max file sizes per asset type before exporting.

Problem: Embedding third-party content without consent banners.

Fix: Flag any embed that sets cookies and plan for privacy-gate UI.


🔍 Portfolio Pulse Action Items

  1. Create docs/media-inventory.md if it does not exist and log current assets.
  2. Update docs/accessibility-manifesto.md with media-specific guidelines (alt text quality, caption timelines).
  3. Add a TODO in notes/module-3-plan.md to revisit analytics once media is implemented.
  4. Share the strategy outline with stakeholders for async review.

✅ Validation Checklist

  • Media inventory created with source, license, and intended story beat.
  • Performance and accessibility goals documented.
  • Stakeholders acknowledge media plan or provide feedback.
  • Retro log updated with strategy risks for Module 3.