Présentation proposée lors de la T3UNI12. Analyse technique des solutions de chargement d'images dynamiques pour le responsive design.
Etude des possibilités proposées nativement par TYPO3 pour intégrer en responsive design.
Bilan et état des lieux
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
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
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
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
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
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
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
Nouvelles sp&#xE9;cifications de Css 3 ajout de nouvelles sp&#xE9;cification la balise &#xAB;media&#xBB;\n
\n
\n
M&#xEA;me pour les ordinateurs de bureau, on a des dalles diff&#xE9;rentes, et des r&#xE9;solution diff&#xE9;rentes\n
Pas d&#x2019;effets de survol, interface simplifi&#xE9;e selon le p&#xE9;riph&#xE9;rique\n
\n
\n
\n
Possible d&#x2019;imbriquer des media queries\n\n
\n
\n
Temps de chargement, blocs conditionnels, comment &#xE9;viter ces probl&#xE8;mes ?\n
Combien d&#x2019;image diff&#xE9;rentes ?\nRedimensionnement du navigateur, probl&#xE8;me d&#x2019;aliasing\nRedimensionnement par crop, ou par redimensionnement homot&#xE9;tique\nSi j&#x2019;ai un mobile, je voudrais ne charger que la version mobile\n
A taille d&#x2019;&#xE9;cran &#xE9;gale et r&#xE9;solution &#xE9;gale, pas le m&#xEA;me nombre de pixels !\n
\n
\n
On ne charge qu&#x2019;une seule image, qui est redimensionn&#xE9;e en pourcentage ou par le navigateur\n \n
\n
On ne charge qu&#x2019;une seule image, qui est redimensionn&#xE9;e en pourcentage ou par le navigateur\n \n
\n
V&#xE9;rifier et illustrer\n
Ici parler du responsive text\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
C&#x2019;est juste le d&#xE9;but, &#xE0; mon sens important de syst&#xE9;matiser la d&#xE9;marche\n