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

Pronounced “Gel” (life “Gif”)

It’s documentation.

  • How things have been done

  • How to do similar things

“Exemplification”

www.bbc.co.uk/gel

However...

“high level”

“low level”

?

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

Ouch! My arms!!

BBC content and functionality
is for everyone.

GEL

Technical Documentation

Hence...

Which was very nearly...

GEF

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

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

🤔

bbc.github.io/gel

The Pocket

<div class="gel-pocket__foot">
  <button class="gel-button">
    <span>Show more</span> 
    <svg viewBox="0 0 32 32" aria-hidden="false" focusable="false">
      <path d="M16 29L32 3h-7.2L16 18.3 7.2 3H0"></path>
    </svg>
  </button>
</div>

Progressively enhanced to include...

height: 50vh
inert
inert
inert
inert
inert
inert
if (!item.isIntersecting) {
  item.target.setAttribute('inert', 'inert');
} else {
  item.target.removeAttribute('inert');
}
isIntersecting
!isIntersecting
if ('IntersectionObserver' in window) {
  // ENHANCE!
}

No IntersectionObserver?
Ditch it.

inert

It's so useful, we include a small polyfill

Continue reading...

this.next = this.truncated.querySelector('[inert]');
this.truncated.insertBefore(this.continue, this.next);

Continue reading...

Continue reading...

Logical
source
order

inclusivedesignprinciples.org

I wrote all of it!
(and I’d do it again, but...)

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

Tabs?
Tags?

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/