Microsite TYPO3 : "Plaisir créatif du jeu"

Pour la nouvelle édition 2016/2017 de la brochure Gutes Aufwachsen mit Medien - Ein Netz für Kinder du ministère fédéral de la famille, des personnes âgées, des femmes et de la jeunesse, nous avons conçu et développé le microsite Kreativer Spielpaß pour les enfants de 4 à 10 ans.

Le projet a été commandé par notre client jugendschutz.netqui a créé la brochure et s'est occupé du contenu.

Vers le microsite :
www.surfen-ohne-risiko.net/kreativ

Août 2016

Le projet débute par un brainstorming des participants impliqués. Outre l'idée de contenu du client, encore assez abstraite jusqu'alors, de pouvoir accéder à des offres créatives en ligne pour les enfants dans un système de catalogue en ligne, seule la date approximative de mise en ligne est connue à ce jour : La nouvelle édition de la brochure "Gutes Aufwachsen mit Medien - Ein Netz für Kinder" du ministère fédéral de la famille, des personnes âgées, des femmes et de la jeunesse doit être publiée au plus tard en novembre 2016. Comme il y sera fait référence au microsite, celui-ci devra être mis en ligne d'ici là. 

Les exigences cadres sont

• Respect du guide de style de l'initiative "Gutes Aufwachsen mit Medien" (bien grandir avec les médias).
• Accès ludique et structuré pour les groupes cibles que sont les parents et les pédagogues, mais pas trop ludique.
• Présentation attrayante sur tous les terminaux, en particulier sur les smartphones.

Nous développons, en étroite collaboration avec le partenaire de design Kontext Kommunikation, les concepts de base relatifs au guidage de l'utilisateur et à la fonction. Après approbation par le client, nous créons des wireframes. Ceux-ci passent par une boucle de correction et sont validés par le client. Fin août, le partenaire de design commence à concevoir la mise en page selon nos instructions.

Septembre 2016

La conception prend forme. Important pour minimiser les résultats inattendus : Le client met à notre disposition des données réelles pour le contenu, de sorte qu'il n'est pas nécessaire de travailler avec des échantillons de contenu dans la mise en page. Les icônes sont créées conformément à la charte graphique de l'initiative Gutes Aufwachsen mit Medien. Les couleurs, les formes, les polices et les images de contenu sont arrangées.

Parallèlement, le développement démarre : le backend du système TYPO3 existant de Surfer sans risque, dans lequel le microsite doit être techniquement implanté, est achevé pour la gestion des données et rempli initialement pour le test. Des prototypes frontaux pour l'interface utilisateur inhabituelle du concept de navigation de bureau sont programmés afin d'exclure toute incertitude quant à la faisabilité.

Octobre 2016

La mise en page est validée. La mise en œuvre du front-end individuel peut alors commencer de manière ciblée. Pendant la mise en œuvre, les derniers détails concernant la fonction de filtrage sont encore réglés avec le client. 

Novembre 2016

Le 8 novembre 2016, le microsite provisoire est terminé et son contenu est suffisamment étoffé pour que nous soyons satisfaits. Après un bref test, le client trouve lui aussi le résultat satisfaisant. Un test bêta est effectué : Le client transmet le microsite provisoire à des testeurs sélectionnés. Le feed-back est généralement très positif.

Quelques dernières erreurs sont trouvées et corrigées, et quelques nouvelles fonctionnalités suggérées par les testeurs sont ajoutées sur le plan technique. Comme nous avons également appris à connaître les objectifs du client en matière de contenu au cours des dernières semaines, nous apportons également notre soutien au travail rédactionnel dans le but de respecter les délais : nous échangeons certaines images et certains textes afin d'obtenir une image globale cohérente en termes de contenu.

Le 29.11.2016, le microsite est mis en ligne.

• Conception :
  • Traduction de l'idée de contenu en concepts d'utilisation innovants (navigation sur les pages et fonction de recherche)
  • Création de wireframes
• Coordination :
  • Établissement et suivi du calendrier
  • Coordination du partenaire de conception
  • Coordination avec la rédaction du client
  • Suivi des corrections et des validations
• Réalisation technique :
  • Mise en place du backend rédactionnel dans le système TYPO3 existant
  • Mise en œuvre de la sortie avec une extension TYPO3 programmée individuellement et basée sur Extbase (filtres, listes, pages détaillées)
  • Programmation jQuery dans le frontend. Focalisation sur l'utilisabilité technique (p. ex. fonctions de filtrage) et la performance (p. ex. rechargement des pages AJAX).
  • Mise en place d'une mise en page entièrement modulable : Responsive Webdesign qui s'adapte de manière fluide à la largeur età la hauteur .
  • Mots-clés :
    SVG-Sprites, AJAX, Extbase, Above-the-fold Inline CSS, Viewport Sized Typography, Vertically Responsive Design