Design engineering: images and embeds

More often than not, web pages contain images and embeds. What should these components do? These ones were designed at beam, a browser with a first-class note taking experience, and support for images and embeds.

• Lubomyr Melnyk - Barcarolle

  expandcollapse
• Magnifique - Ratatat

  expandcollapse
• A colorful chameleon

  

  expandcollapse

Functional requirements

• The component should support images and embeds
• The component should display a loading state until the media has been loaded
• The component should display a loading state until the media has been loaded
• The component should support passing predetermines dimensions to avoid layout shift
• In the case of no predetermined dimensions, the component should load the media and properly resize
• The component should support medias that are responsive, in either or both dimensions, and support medias that are not responsive
• The component should be collapsible, except on small screens, where it should be expandable only if collapsed

Non- functional requirements

• The component should be accessible to screen readers
• The component should be accessible to keyboard users
• The component should be accessible to mouse users
• The component should be accessible to touch users
• The component should honor prefers-reduced-motion
• Animations should be interruptible

Video overview