Un design « responsive » avec TYPO3 ? – Chapitre 1

Capture d'écran d'un site dans ses différents états

TYPO3 permet d’utiliser toutes les découpes possibles et imaginables grâce à ces différentes méthodes de templating, que ce soit la methode classique, Templavoilà, Templavoilà Framework, ou Fluid. Cependant, nous n’avons pas encore vu beaucoup (aucun ?)  site basé sur un design adaptatif, appellé « responsive design » avec TYPO3.

Qu’est ce que le responsive design ?

Capture d'écran d'un site dans ses différents états

Comme quelques exemples visuels vallent mieux que beaucoup de blabla, je vous invite à vous rendre sur le site http://designmodo.com/responsive-design-examples/

Comment ça marche ?

Le principe du responsive design et d’utiliser une nouvelle fonctionnalité de la spécification CSS3 qui s’appelle « media queries » et qui permet de faire des inclusions de feuilles de styles CSS sous conditions.

Les principales conditions que l’on peut tester avec les media queries:

  • La résolution de l’écran ( le nombre de pixel que peut afficher l’écran )
  • La résolution de la fenetre du navigateur ( relisez la phrase sur la gauche si vous n’avez pas compris )
  • L’orientation de l’écran

Exemple d’utilisation d’une « media querie » pour un appel de feuille de style sous condition

@media only screen and (max-width:500px){
    /* ... */
}

Pour le reste, rendez vous sur la page du W3C http://www.w3.org/TR/css3-mediaqueries/

Et TYPO3 dans tout ça ?

On y vient, ne soyez pas pressé ! 
Pour faire assez simple, TYPO3 peut reprendre n’importe quel découpe HTML et l’utiliser comme template, donc facile, on reprends un template responsive, ou on utilise un framework comme bootstap2 de Twitter et c’est plié !

Quelque soit votre methode d’intégration choisie, vous pourrez sans problème avec TYPO3 générer une structure de page adaptative ou responsive.

Chapitre 2 (à venir) : Le code de rendu de TYPO3 est il compatible avec un design responsive ?

Là on commence à rentrer dans la partie épineuse du sujet, surtout si on veut faire ça bien et rendre aussi ses images « responsive ».

Intégrateur TYPO3 depuis 2003, maintenant responsable du pôle d'expertise chez TalanSolutions. Je réalise des audits, des préconisations, des missions d'expertise. J'ai la chance de diriger le plateau technique Web PHP / TYPO3 d'EXL Group.

5 commentaires

  1. Dufresne Ali   •  

    Je voulais savoir si tu avais pu finir le chapitre 2

    Car je suis sur un projet de site qui va évoluer d’une visibilité pc vers une Visibilité Multi-plateforme.

    Donc je cherche plein d’info de ce coté.

    A+

    • Cyril Wolfangel   •     Auteur

      Bonjour,

      Merci de ton intérêt pour cet article. Je n’ai pas encore terminé le chapitre 2, pas mal de boulot en ce moment avec la T3CON à quebec qui commence la semaine prochaine, et je suis en train de préparer ma conférence au sujet du responsive design avec TYPO3 pour la T3UNI12 ( http://t3uni.typo3-fr.org ). Pour l’instant je préfère ne pas trop « spoiler » en y mettant tout le contenu :D

      Ceci dit, n’hésite pas à me contacter directement si tu veux qu’on échange sur le sujet.

      Cyril Wolfangel
      cyril.wolfangel(at)gmail.com
      skype:friteuseb

  2. Dejanovic Jure   •  

    Salut,

    La partie deux m’intéressait aussi… Vais attendre Annecy pour la voir ;-)

  3. NicoNov   •  

    Salut !

    J’attends avec impatience la suite de cet article :D
    J’ai quelques projets responsive + TYPO dans les tuyaux … et je ne serai pas contre quelques astuces

  4. Philippe R   •  

    Bonjour,

    Recherchant des informations sur des templates TYPO3 en responsive je suis tombé sur cet article et je me permets de rebondir sur l’existence de sites développés en TYPO3 et responsive.

    Aliénor.net a travaillé dessus et a produit plusieurs sites dont un, qui en plus d’être responsive, répond aux exigences d’Accessibilité AA à 80%, il s’agit de http://www.merignac-capitale-aeronautique.com/.

    Je vous laisse découvrir les autres sur notre site Internet http://www.alienor.net

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *