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 ?
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 ».
Laisser un commentaire