Le document aborde le design responsif et son application avec Typo3, en expliquant les principes, les techniques, et les défis tels que la gestion des images. Il souligne l'importance d'une approche structurée et de la flexibilité offerte par Typo3 pour créer des sites adaptés aux différents périphériques. Enfin, il présente des exemples de mise en œuvre, y compris l'utilisation de media queries et de frameworks pour le développement responsif.

1. Responsive design
TYPO3
Où en sommes nous et quelle place pour
TYPO3 ?
1

2. Ce dont je vais parler
Présentation rapide de ce qu’est le design responsif
Comment fonctionne le côté «responsif»
Quelles sont les difficultés autour de la gestion des
images
Comment peut-on faire un design responsif avec
TYPO3
2

3. Ce dont je ne vais pas parler
Du responsive text
De la démarche de création graphique
3

4. L’approche «design adaptatif»
D’ou vient la démarche, quelle différence avec les
techniques habituelles ?
Ou en est on avec cette technique?
4

5. Les techniques habituelles
Découpe au pixel
Découpe élastique
Valeurs en % et/ou em
5

6. Les périphériques ont évolués,
les utilisateurs aussi
Téléphones
Tablettes
Consoles de jeu
Téléviseurs
Bornes tactiles
6

7. Ordinateurs de bureau, notebook,
Ordinateurs portables
Dalles différentes,
utilisation du
redimensionnement
7

8. Des méthodes de navigations différentes
Télécommandes variées, mouvement au stylet,
au doigt, navigation à la souris, quel impact ?
8

9. Responsif et Responsif
Le responsive design ce n’est pas juste un
template adaptatif.
Le concept est lié à un profond changement
des mentalités et des habitudes des
utilisateurs.
9

10. Responsive design principes et
technique
10

11. La magie des média queries
11

12. Fonctionnement
Exemple d’utilisation d’une“media querie” pour un
appel de feuille de style sous condition
@media only screen and (max-width:500px){
/* … */
}
Mais aussi: width, height, device-width, device-height,
orientation, aspect-ratio, device-aspect-ratio, color,
color-index, monochrome, resolution, scan, grid
En savoir plus => www.w3.org/TR/css3-
mediaqueries/
12

13. Compatibilité
13

14. IE ? Tiens encore lui ?
Il existe des solutions pour une compatibilité.
respond.js
adapt.js
http://modernizr.com
Exemple:
<!--[if lt IE 9]>
<script type="text/javascript" src="/js/css-media-query-ie.js"></script>
<![endif]-->
14

15. Comportement des images
15

16. Quel est la difficulté avec les
images ?
Quelle image pour quelle résolution ?
Quelle image pour quelle périphérique ?
Quelle image pour quelle taille du navigateur ?
Quelle image au chargement ?
16

17. Le cas des écrans rétina
@media all and (-webkit-min-device-pixel-ratio : 1.5) {
#container header[role="banner"] .logo a {
background-image: url('../img/logo2@2x.png');
}
}
17

18. Quelques exemples
Possibilités existantes avec les images
18

19. Redimensionnement par la taille du conteneur
19

20. 20

21. Chargement de la version adaptée à la
résolution de l’écran
21

22. 22

23. Redimensionnement à la volée, une seule
solution «propre» mais enormément de
solutions diverses basées sur du JS
23

24. Images de fond en css
/* default */
#img1 {
background-image: url(‘small.jpg’);
width: 200px;
height: 200px;
}
@media screen and (min-width: 500px){
#img1 {
background-image: url(‘large.jpg’);
width: 400px;
height: 400px;
}
}
24

25. Comportement du texte
@media only screen and (min-width:1200px){
body{
font-size: 1.75em;
}
}
25

26. Comment TYPO3 peut être
le CMS idéal pour des sites
responsif ?
26

27. Responsif et Responsif
Le responsive design ce n’est pas juste un
template adaptatif.
Le concept est lié à un profond changement
des mentalités et des habitudes des
utilisateurs.
27

28. Une approche structurée
Le backend et l’arborescence permettent une
approche réfléchie et structurée
28

29. Possibilité d’une double logique editoriale
Aux CMSDAY 14 juin 2012:
«Le représentant de TYPO3 Maxime Fauquemberg a évoqué lui la double
logique éditoriale : proposer deux contenus différents dans un même
contexte, expliquant qu’un mobinaute dans le métro ne veut pas forcément lire
la même information qu’un internaute assis devant son ordinateur, une
démarche pour le moins originale.»
29

30. Puissance de configuration du backend
Le backend de TYPO3 est tellement puissant que
les applications sont encore ouverte, chacun peut
faire sa propre configuration, adaptée au client.
Nativement, utilisation des layouts, frame au niveau
des contenus.
30

31. Puissance de configuration du backend
Une idée: Utiliser le système de langues natif de
TYPO3 pour remplir plusieures déclinaisons des
contenus, avec un fallback à la version par défaut
possibilité d’utiliser les workspaces aussi, pour du
contenu adapté à chaque plateforme.
31

32. Methode classique avec
backend layout
Il suffit d’intégrer ses gabarits responsifs
32

33. Templavoilà
Il suffit d’intégrer ses gabarits responsifs
33

34. Templavoilà Framework
Possibilité d’intégrer un Framework HTML
responsif et de créer une méthode prête à
l’emploi.
34

35. Fluid
Il suffit d’intégrer ses gabarits responsifs
35

36. Les frameworks HTML
Pensés par une communauté active
Réalisé par des experts Frontend
36

37. 37

38. 38

39. 39

40. 40

41. 41

42. 42

43. 43

44. Mon projet
Templavoilà Framework 2 + Twitter bootstrap +
Chargement dynamique des images + selecteur
backend
44

45. Responsive_preview
45

46. Bilan, état des lieux
46

47. Questions / Réponses