Développer une application web sous une contrainte de 128 KB

Résumé

Développer une application web sous une contrainte de 128 KB

• Réfutation de l’idée reçue selon laquelle design et accessibilité seraient incompatibles
• Des solutions innovantes trouvées sous des contraintes extrêmes (128 KB, Opera Mini, environnement de feature phone)
• Suppression des webfonts, abandon des frameworks, développement d’une bibliothèque légère maison
• Optimisation des images (TinyPNG, MozJPEG, nettoyage de SVG) et minification généralisée
• Les contraintes ont au contraire conduit à une compatibilité universelle et à une optimisation des performances

---

Introduction : identifier le problème et le sens des contraintes

• Certains designers considèrent que l’accessibilité WCAG et l’esthétique ne peuvent pas coexister
• L’auteur affirme au contraire que les contraintes constituent la base d’une conception créative
• Des contraintes extrêmes ont été définies à partir des conditions de communication et d’équipement difficiles en Afrique

---

Développement

1. Contraintes du projet

• Budget de page de 128 KB : limite totale incluant HTML, CSS, JS et images
• Design responsive extrême : prise en charge du feature phone 240px jusqu’au desktop 4K
• Compatibilité universelle : basé sur Opera Mini, avec JS minimisé et rendu côté serveur indispensable

2. Choix techniques

• Suppression des webfonts : usage des polices système → gain de poids, suppression du FOUT, cohérence renforcée

• Abandon des frameworks : React et consorts impossibles → développement de la bibliothèque légère maison Whizz

  • Fonctions : requêtes DOM, gestion des événements, AJAX
  • Application d’une méthode de mise à jour partielle du HTML pour éviter les rechargements inutiles

3. Stratégie d’optimisation des images

• PNG : compression maximale avec TinyPNG
• JPEG : utilisation de MozJPEG, export en double résolution + qualité à 0 puis rendu réduit
• SVG : exploitation du taux de compression et de la scalabilité, avec fallback PNG
• Optimisation SVG : suppression des métadonnées inutiles, des groupes dupliqués et des coordonnées à précision excessive

4. Techniques d’optimisation supplémentaires

• Minification généralisée : appliquée à CSS, JS et HTML, en tenant compte des navigateurs sans prise en charge de gzip
• Réponse aux exigences de marque : reproduction de certains effets typographiques via une combinaison d’images et de SVG
• Usage de <defs> et <use> : allègement des SVG et mise en œuvre d’effets de contour

5. Résultats et validation

• Chargement immédiat même sur des réseaux extrêmement lents
• Compatibilité assurée avec de nombreux appareils : fonctionne jusqu’à Lynx, PSP, anciens feature phones et navigateurs TV
• Expérience utilisateur différenciée : fluide sur les appareils récents, stable aussi sur les anciens

Conclusion : l’innovation née de la contrainte

• Les contraintes n’ont pas freiné la créativité, elles ont conduit à une conception universelle et robuste
• Les utilisateurs d’appareils récents comme de vieux feature phones peuvent accéder aux mêmes fonctions essentielles
• Une philosophie de conception centrée sur les fonctions essentielles s’affirme → « les contraintes ne sont pas des chaînes, mais le socle de l’innovation »
• Leçon pour le développement moderne : plutôt que des ressources illimitées, c’est l’optimisation sous contrainte qui produit de meilleurs résultats

[baeba]

C'est un site de traduction en coréen.

https://emewjin.github.io/proud-128-kb

[honglu]

Merci pour la traduction..