Emergency Website Kit

A presentation at Stahlstadt.js #25 in April 2020 in by Max Böck

Slide 1

Slide 1

Emergency Website Kit Max Böck @mxbck mxb.dev

Slide 2

Slide 2

Slide 3

Slide 3

Requirements 1. Extremely Resilient 2. Highly Accessible 3. Mobile Friendly 4. Fast to Set Up 5. Easy to Maintain

Slide 4

Slide 4

Slide 5

Slide 5

The Rule of Least Power

Slide 6

Slide 6

Static HTML will survive anything.

Slide 7

Slide 7

Slide 8

Slide 8

Slide 9

Slide 9

First Roundtrip • ~14KB • Inline CSS / Purge Unused Styles • No External Resources • System Fonts • Minified HTML

Slide 10

Slide 10

Slide 11

Slide 11

Accessibility • Semantic Markup • Content Hierarchy • Focus Styling • WCAG AA Contrast • Flexible Sizing (rem)

Slide 12

Slide 12

Slide 13

Slide 13

Progressive Enhancement for Offline

Slide 14

Slide 14

Slide 15

Slide 15

Slide 16

Slide 16

Slide 17

Slide 17

Slide 18

Slide 18

Not everyone is a web developer

Slide 19

Slide 19

Slide 20

Slide 20

One-Click Deployment

Slide 21

Slide 21

Slide 22

Slide 22

Slide 23

Slide 23

Links https://github.com/maxboeck/emergency-site https://emergency-site.dev https://mxb.dev/blog/emergency-website-kit

Slide 24

Slide 24

Thank You! @mxbck https://mxb.dev