Aperçu des mises en page des templates

pour le système d'actualités TYPO3

Note de présentation

Tous les layouts de news ont été conçus pour une largeur de page de 100% et doivent être utilisés de cette manière, c'est-à-dire sans le conteneur qui les entoure.

Certaines vues sont également acceptables dans des colonnes de 66% de largeur d'un conteneur. Voir la description.

Si vous utilisez des layouts de news dans une largeur de page inférieure à 100%, la qualité de l'affichage sera très probablement limitée.

Vérifiez également l'affichage mobile de la page ! Celle-ci est plus importante que l'affichage de bureau, que vous verrez probablement le plus souvent pendant l'édition.

Mise en page des résumés d'actualités

(état en 2025)

Vue de liste Standard

Description
  • Présentation en trois colonnes sous forme de carte avec
    • Image
    • Date
    • Texte d'accroche
    • Lien vers la vue détaillée
  • D'autres actualités peuvent être sélectionnées à l'aide des numéros de page situés sous les cartes. (Pagination)
  • Conçu pour une largeur de page de 100%.
Utilisation

Convient bien comme aperçu des actualités pour les unités organisationnelles ayant un volume d'actualités raisonnable. Les trois cartes devraient suffire pour afficher les dernières nouvelles. Les visiteurs des pages n'utilisent souvent la pagination que lorsqu'ils sont à la recherche d'un thème précis. Les actualités importantes en page 2 ou 3 risquent de passer inaperçues aux yeux des visiteurs de passage.

Exemple de vue en liste standard

Vue en liste sans images

Description
  • Présentation en trois colonnes sous forme de carte avec
    • Date
    • Texte d'accroche
    • Lien vers la vue détaillée
  • D'autres actualités peuvent être sélectionnées à l'aide des numéros de page situés sous les cartes. (pagination)
  • Conçu pour une largeur de page de 100%.
Utilisation

Bien adapté comme aperçu des actualités,

  • qui nécessite moins de place,
  • pour lequel une sélection d'images semble inutile et
  • avec un faible volume de news (max. 3 news vraiment actuelles visibles au premier coup d'œil)
Exemple de vue en liste sans images

Liste d'images seulement (60%-100% de largeur)

Description
  • Présentation en trois colonnes sous forme de carte avec
    • Image
    • Lien vers la vue détaillée
  • D'autres actualités peuvent être sélectionnées à l'aide des numéros de page situés sous les cartes. (Pagination)

Les rédacteurs doivent veiller à toujours respecter le même rapport de pagination pour les images utilisées.

Utilisation

Conçu à l'origine pour notre architecture, qui annonçait les événements à l'aide d'images spécialement conçues et ressemblant à des affiches.

Pour cette vue d'actualité, toutes les informations pertinentes doivent être visibles dans l'image elle-même. Attention à l'accessibilité : chaque petit texte sur l'image doit impérativement être mentionné dans le texte alternatif.

Avenir de la vue

En raison d'une utilisation peu fréquente et du défi que représente l'accessibilité, il est possible que cette vue ne soit pas maintenue.


Pyramide de 3 teasers (largeur 100%)

Description

La mise en page Pyramide à 3 teasers affiche trois actualités dans des cartes, l'image étant placée à gauche de la date, du titre et du texte du teaser. La première news est affichée en largeur de page de 100% et est très grande. Les 2e et 3e actualités sont affichées en dessous et côte à côte.

En dessous de la pyramide de 3 teasers, un bouton renvoie à une liste complète de news.

Utilisation

Convient bien comme entrée en matière pour les actualités sur une page d'accueil. Tandis que les actualités les plus importantes sont directement affichées, le bouton situé en dessous conduit le visiteur de la page vers un aperçu complet des actualités.

Cette mise en page nécessite des images expressives et des textes d'accroche pertinents, qui ne doivent toutefois pas être trop longs.

Exemple de pyramide de 3 teasers (100% de largeur)

Cartes de teaser 3


3 événements teaser (largeur 100%)

Exemple de 3 événements teaser (largeur 100%)
Aucun événement n'est prévu pour le moment.

Liste avec cartes Vue mensuelle (largeur 100%)


Liste des événements (66%-100% de largeur)


Liste classique avec image (66%-100% de largeur)


Teaser avec titre (sans image)


Layouts pour les vues détaillées

(état en 2025)

Page de détails Standard

Exemple de page de détail standard

Savez-vous comment contacter les personnes responsables de la rédaction d'un site Typo3 ?

Collaborateurs au bureau devant leur ordinateur. L'homme au premier plan, la femme à l'arrière-plan
Collaborateurs au bureau devant l'ordinateur

En bas de chaque page, vous trouverez un lien vers le service responsable de la rédaction et l'adresse e-mail correspondante. Vous pouvez ainsi prendre directement contact.

Cette inscription est nécessaire en raison des dispositions légales relatives à l'accessibilité. Si un visiteur de la page rencontre une barrière, il peut contacter directement la rédaction responsable via le lien e-mail. Une réponse doit être donnée dans les 30 jours.

Si "N.N." ou "l'équipe TYPO3" y figure, cela signifie que le service compétent n'a pas été signalé. Dans ce cas, nous serions heureux de savoir où il manque encore des entrées. Nous prendrons alors contact avec les rédacteurs* que nous connaissons et compléterons l'entrée.

Ceux qui souhaitent adapter cette entrée pour leurs pages peuvent remplir le formulaire de déclaration de responsabilité éditoriale.

Collaborateurs au bureau devant leur ordinateur. L'homme au premier plan, la femme à l'arrière-plan
Collaborateurs au bureau devant l'ordinateur

Page de détail de l'événement

Exemple de page de détail d'un événement

Typo3 pour débutants partie 1 (Jan 26)

La formation 1 aborde les thèmes fondamentaux de TYPO3, notamment la structure du frontend et du backend, la création de pages et d'éléments de contenu, la création de contenus, les liens, le traitement des fichiers, les métadonnées ainsi que la création de dossiers d'actualités et l'accessibilité.
Logo TYPO3
Logo TYPO3

Chers (futurs) rédacteurs web*,
nous avons le plaisir de vous proposer à nouveau la série de formations en ligne TYPO3 pour débutants 1-3 au semestre d'hiver 25/26.

Elle vous permettra d'acquérir les bases nécessaires à l'utilisation et au travail avec le système de gestion de contenu de sites web TYPO3.

Les formations sont étroitement coordonnées. C'est pourquoi nous vous recommandons de vous inscrire aux trois parties de la formation (qui se suivent idéalement).

La formation 1 aborde entre autres les thèmes suivants :
- Qu'est-ce que TYPO3 ?
- Structure de TYPO3 : frontend et backend
- Structure typique d'une arborescence de pages
- Création de (structures de) pages et d'éléments de contenu
- Création des premiers contenus au moyen de l'élément de contenu Texte et médias
- Liens
- Conteneurs
- Démarrage de la liste de fichiers : Télécharger des fichiers sur le serveur
- Métadonnées
- Créer des enregistrements de nouvelles
- Accessibilité

 

L'inscription à la formation se fait comme d'habitude sur notre portail de formation. Vous y trouverez également de plus amples informations sur les différentes formations.

 

Nous nous réjouissons de votre participation !

Meilleures salutations
Votre équipe web

Weitere Infos
Chargé de cours: David Braun
Détails

Page de détail du communiqué de presse

Exemple de page de détail du communiqué de presse
Communiqué de presse

Améliorations continues du modèle RPTU

04. August 2025

Nous travaillons continuellement à l'optimisation du modèle RPTU pour les sites web TYPO3 - quelles sont les améliorations apportées par la dernière mise à jour ?

Vue détaillée d'une carte d'ordinateur avec l'inscription "Update" éclairée

Le modèle RPTU pour les sites web TYPO3 est né au cours d'une phase de développement intensive. Depuis, nous travaillons continuellement à son optimisation, parallèlement à nos activités quotidiennes. L'accent est mis sur les corrections, les améliorations de l'accessibilité et les modernisations techniques.

Avec la mise à jour d'aujourd'hui, nous avons notamment mis en œuvre les changements suivants :

  • Amélioration de la navigation au clavier: l'en-tête de la page et le menu principal sont désormais correctement accessibles par la touche de tabulation et peuvent être visiblement mis en évidence.
  • Optimisation des teasers: dans les teasers à 25 % et 50 %, le lien "Lire la suite" peu pertinent a été supprimé. À la place, le titre du teaser est désormais lié. Nous adapterons ultérieurement les vues détaillées des actualités en conséquence.
  • Marquage sémantique des menus: Les éléments de contenu de type "menu" sont désormais marqués comme navigation.
  • Amélioration de l'affichage de la lightbox: la lightbox affiche désormais le nombre correct d'images ainsi qu'un texte de description plus facile à lire.

Même si nous ne publions pas de nouvelles à chaque mise à jour, nous travaillons constamment en arrière-plan pour améliorer le template, tant sur le plan technique que sur celui du contenu.