GEL

Technical documentation

Heydon

Heydon

Abrupt greeting

Opposite of don’t

Quantity variable symbol

“Kind of like
documentation...”

Developer, designer, writer

Developer, designer, writer

Developer, designer, writer

GEL

GEL

Global (as in everywhere)

Experience
(as in Jimi Hendrix)

Language
(as in the reification of meaning)

GEL = ?

GEL: undefined

It's documentation.

  • How things have been done

  • How to do similar things

“Exemplification”

However...

“high level”

“low level”

?

BBC content and functionality
is for everyone.

An example:

  • Which HTML elements should the buttons be composed of?
  • Where should they appear in the source?
  • How should they be labeled for screen reader users?
  • Should they be grouped as a list?

And of course, there's
debouncing

GEL

Technical documentation

GEF

NOT A PATTERN LIBRARY

Exemplify best practices

Without dictating stacks, frameworks, methodologies, etc.

:aria-pressed="state"
aria-pressed={state}

===

Concept / UX design

Interface

Technical architecture

High level

Low level

Design

Development

🤔

Conventions

1.
Accessibile
interaction

“For a screen reader user, the HTML is the UX”
— Ian Pouncey

Component name

## Recommended markup

## Recommended layout

## Recommended behaviour

## Reference implementation

### Oh and don't forget this accessibility stuff:

Not like
this

Concept / UX design

Interface

Technical architecture

High level

Low level

“...which exposes navigation options to  screen reader software...”

“...can be perceived in the
absence of colour...”

“...removing the invisible element from
focus order...”

Throughout

2.
Progressive
Enhancement

if ('IntersectionObserver' in window) {
  // do the thing
}
.gel-card__content img,
.gel-card__content video {
  height: 100%;
  width: auto;
}

@supports (object-fit: cover) {
  .gel-card__content img, 
  .gel-card__content video {
    width: 100%;
    object-fit: cover;
  }
}

3.
Research driven

received wisdom

testing

innovation

Four test versions

  • Users like links...
  • ... but we already have 'too many'
  • Same page links are unpopular...
  • ... but moving focus programmatically
    helps many who experience trouble with navigating between tabs and panels 
  • Arrow key navigation is ergonomic...
  • ... if the user is experienced enough to know it's there

Reference
implementations

  • ES5
  • Module pattern

Interface

Architecture

Interface

Architecture

HTML
CSS
JavaScript

Component name

## Recommended markup

## Recommended layout

## Recommended behaviour

## Reference implementation

Initial
content

Evolving
content

Standards

Prior art

Research

Testing &

research

Production

ME:
@heydonworks
@heydon@mastodon.social
heydonworks.com
 


SITE: bbc.github.io/gel
CODE: github.com/bbc/gel/