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/
GEL Technical Documentation
By heydon
