Web Experience Toolkit (WET)
What is the Web Experience Toolkit?
- An award-winning front-end framework for building websites that are accessible, usable, interoperable, mobile friendly and multilingual
- A collection of flexible and themeable templates and reusable components
- A collaborative open source project led by the Government of Canada
Key resources
- Documentation
- Downloads
- Examples
- Version history and roadmap
- Terms and conditions (MIT license)
- Source code repository and contributing guidelines
- Communications material
- Websites using WET
Benefits
Accessibility
- Conforms to WCAG 2.0 level AA
- Leverages WAI-ARIA to further enhance accessibility
- Assistive technology testing (Access Working Group)
Usability
- Iterative approach to design
- Design patterns and usability testing (User Experience Working Group)
Interoperability
- HTML5-first approach (leveraging native HTML5 support and filling support gaps with “polyfills”)
- Supporting a wide variety of browsers (IE, Firefox, Chrome, Safari, Opera)
- Building support for HTML data (RDFa 1.1 Lite, Schema.org)
Mobile friendly responsive design
- Adapts to different screen sizes and device capabilities
- Touchscreen support
- Optimized for performance
- Building support for device-based mobile applications
Multilingual
- Currently supports 33 languages (including right-to-left languages)
- English
- French
- Afrikaans
- Albanian
- Arabic
- Armenian
- Bulgarian
- Chinese
- Chinese (Simplified)
- Czech
- Dutch
- Estonian
- German
- Greek
- Hindi
- Hungarian
- Icelandic
- Indonesian
- Italian
- Japanese
- Korean
- Latvian
- Lithuanian
- Polish
- Portuguese
- Portuguese (Brazilian)
- Russian
- Slovak
- Spanish
- Thai
- Turkish
- Ukranian
- Vietnamese
Themeable and reusable
- Flexible framework that supports custom themes
- Includes support for 5 different themes including a “Base” theme to use as a template
- Reusable templates, plugins and widgets
- Adapted to various CMS and programming frameworks (Drupal, WordPress, SharePoint (in development), DotNetNuke (in development), PHP, SSI, Java/Maven)
Reduces costs by openly sharing and collaborating
- Drives down research and development costs
- Avoids duplication of effort
- Produces better quality results
Collaborative approach
- Project managed openly on GitHub, including discussion through the issues tracker
- Encouraging a free flow of ideas, dialogue and innovation including sharing of challenges and ideas
- External contributions welcome
- Pull requests
- Design patterns
- Issues and suggestions
- Documentation
- Testing
- Multi-level review process for contributions to ensure code integrity (combination of automated and manual reviews)
Boîte à outils de l’expérience Web (BOEW)
Qu’est-ce que la Boîte à outils de l’expérience Web?
- Une bibliothèque de code primée pour construire des sites Web accessibles, faciles d'emploi, interopérables, optimisés pour les appareils mobiles et multilingues
- Des modèles, ainsi que des composants réutilisables, qui sont flexibles et personnalisables
- Un projet à source ouverte collaboratif dirigé par le Gouvernement du Canada
Ressources clés
- Documentation
- Téléchargements
- Exemples pratiques
- Historique des versions et feuille de route
- Conditions régissant l'utilisation (licence MIT)
- Dépôt de code source et lignes directrices pour les contributeurs
- Matériel de communications
- Sites Web qui se servent de la BOEW
Avantages
Accessibilité
- • Conforme aux Règles pour l'accessibilité des contenus Web (WCAG) 2.0 niveau AA
- S'appuie sur WAI-ARIA pour améliorer l'accessibilité
- Vérification avec les technologies d'assistance (Groupe de travail sur l'accessibilité)
Facilité d'emploi
- Approche itérative pour la conception
- Patrons de conception et les essais de facilité d'emploi (Groupe de travail sur l'expérience des utilisateurs)
Interopérabilité
- Approche centrée sur le HTML5 (s'appuyant sur le soutien HTML5 natif et puis les «correctifs» pour résoudre les problèmes de soutien)
- Soutien pour plusieurs navigateurs (IE, Firefox, Chrome, Safari, Opera)
- Soutien en développement pour les données HTML (RDFa 1.1 Lite, Schema.org)
Conception optimisée pour les appareils mobiles et réactive
- S'adapte à différentes tailles d'écran et capacités d'appareil
- Soutien pour les écrans tactiles
- Optimisé pour les performances
- Soutien en développement pour les applications s’installant sur un appareil mobile
Multilingue
- Soutien actuellement 33 langues (y compris les langues droite-à-gauche)
- Anglais
- Français
- Afrikaans
- Albanais
- Allemand
- Arabe
- Arménien
- Bulgare
- Chinois
- Chinois (simplifiée)
- Coréen
- Espagnol
- Estonien
- Grec
- Hindi
- Hongrois
- Indonésien
- Islandais
- Italien
- Japonais
- Letton
- Lituanien
- Néerlandais
- Polonais
- Portugais
- Portugais (brésilien)
- Russe
- Slovaque
- Tchèque
- Thaï
- Turc
- Ukrainien
- Vietnamien
Personnalisable et réutilisable
- Cadre flexible qui supporte des thèmes personnalisés
- Soutien 5 thèmes différents, y compris un thème de base servant comme modèle
- Modèles, plugiciels et gadgets réutilisables
- Adapté aux différents systèmes de gestion de contenu et cadres de programmation (Drupal, WordPress, SharePoint (en développement), DotNetNuke (en développement), PHP, SSI, Java/Maven)
Réduit les coûts en partageant et en collaborant ouvertement
- Réduit les coûts de recherche et de développement
- Évite la duplication des efforts
- Produit des résultats de meilleure qualité
Approche collaborative
- Projet géré ouvertement sur GitHub, y compris les discussions à travers le système de suivi des questions
- Encourage la libre circulation des idées, du dialogue et de l'innovation, y compris le partage des défis et des idées
- Les contributions externes sont invités
- Soumissions de code
- Patrons de conception
- Problèmes et suggestions
- Documentation
- Évaluations
- Processus d'examen sur plusieurs niveaux pour les contributions pour assurer l'intégrité du code (combinaison d'évaluations automatisées et manuelles)