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 2 different themes
• 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 2 thèmes différents
• 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)