Escal est Réponsive
Un site web adaptatif (anglais RWD pour responsive web design, conception de sites web adaptatifs selon l’OQLF1) est un site web dont la conception vise, grâce à différents principes et techniques, à offrir une consultation confortable même pour des supports différents.
L’utilisateur peut ainsi consulter le même site web à travers une large gamme d’appareils (moniteurs d’ordinateur, smartphone, tablettes, télévision…) avec le même confort visuel et sans avoir recours au défilement horizontal ou au zoom avant/arrière sur les appareils tactiles notamment, manipulations qui peuvent parfois dégrader l’expérience utilisateur, tant en lecture qu’en navigation.
Alors ou pas ?
Pourquoi il est recommandé de créer un site en responsive design ?
- La création et la maintenance seront plus rapides et plus faciles (un seul fichier qui gère l’ensemble des affichages)
- Un référencement naturel optimal puisqu’il n’existe qu’un seul site internet qui regroupe toutes les versions
- Une seule adresse web (URL) est utilisée (pas de sous-domaines ou redirection vers un répertoire « mobile »)
– Voyons voir l’existant
Plusieurs outils gratuits ont été développés pour vous permettre de tester le "responsive design". On peu ainsi vérifier que ESCAL est optimisé pour l’expérience utilisateur ou dresser la liste des améliorations à entreprendre rapidement !
- XRespond
un des outils les plus complets pour vérifier le rendu responsive !
- Responsive Design Checker
vous donne un accès total à l’espace de test. Vous pouvez générer n’importe quelle taille d’écran et même vérifier votre ratio d’écran.
- Mobile-Friendly Test
avoir un site responsive design, testé et approuvé par Google
- ami.responsivedesign.is
pour un aperçu de votre site sur 4 devices en même temps- device = type d’appareil : ordinateur, mobile, tablette, etc...
- Sizzy
J’apprécie particulièrement le mode de sélection des previews : par OS (Android ou iOS), ou par device (mobile ou tablette).
- Firefox
intègre par défaut une fonctionnalité que l’on peut trouver dansmenu principal » rubrique Développement » Vue adaptative Il permet de redimensionner la fenêtre d’affichage, d’inverser l’affichage (portrait/paysage), de simuler l’effet tactile et de prendre des copies d’écran (raccourci : Ctrl+Shift+M)
– Continuons, essayons de valider ESCAL aux standards du Web
tester ses pages Web via un validateur permet d’identifier les erreurs de codage et d’améliorer sensiblement la qualité de notre squelette Web.
- Liste de validateurs
- Tester le code HTML : validator.w3.org/
Errors found while checking this document as XHTML 1.0 Strict !
Result : 4 Errors
Les erreurs semblent liées à SPIP, nous cherchons une solution actuellement - Tester le code CSS : jigsaw.w3.org/css/
là on se retrouve avec 2 erreurs et 44 avertissements , coté SPIP et ESCAL
voyons ce qui impacte ESCAL
* general.css
* alaune.css
* menu.css
* slicknav.css - Tester ses couleurs : Extenssion firefox
- Tester HTML5 + WAI-ARIA : about.validator.nu/
- Tester le code pour les flux RSS : validator.w3.org/feed/
- Tester les liens : validator.w3.org/checklink/
- Tester le code HTML : validator.w3.org/
– Encore plus loin
il est recommandé d’utiliser des unités relatives pour définir les tailles de texte, avec une préférence pour « em » plutôt que « % ». Ils font partie des critères d’accessibilité du W3C, AccessiWeb, Opquast
Dans ESCAL, c’est déjà réalisé dans les différents fichiers .css mais en « rem », simplifions nous la vie avec rem… ou pas
L’unité rem, plutôt bien supportée dans les navigateurs, permet de définir des tailles relatives comme em, mais en prenant la taille de html comme référence plutôt que l’élément parent.
rem permet donc d’éviter que les listes imbriquées soient de plus en plus petites par récursivité.
Malheureusement, cette force est aussi une faiblesse potentielle.
Car lorsque vous souhaitez modifier la taille d’un composant, il faut modifier la taille de tous ses éléments constituants, alors qu’en em, il m’aurait suffit de modifier uniquement la taille de l’élément conteneur.
Tout n’est pas si simple. Que l’on utilise des em ou des rem, différentes problématiques peuvent complexifier la tâche.
Tout d’abord, il faut bien comprendre que de nombreuses conversions entre unités sont effectuées entre les px encore souvent utilisés dans la tête des graphistes et les px utilisés au final par le moteur de rendu des navigateurs
Une autre difficulté concerne les images. Celles qui sont en SVG, donc vectorielles, peuvent avoir sans problème des dimensions définies en valeurs relatives, et donc s’ajuster avec les tailles de texte. Celles qui sont en formats bitmap, par contre, supportent potentiellement assez mal les redimensionnements, comme cela a été évoqué au sujet du zoom global. Il faut donc décider si on applique tout de même des dimensions relatives afin de conserver des proportions constantes, ou si on conserve pour ces images leurs dimensions « réelles », en ajustant le positionnement des éléments qui les entourent ou voisinent. Le choix est relativement simple pour des illustrations flottant au sein d’un texte, bien moins pour des éléments d’interface. Privilégier SVG pour ces derniers est donc préférable.
Vous voulez voir ce que peut donner le ratio taille - distance : https://sizecalc.com/
– et puis les polices de caractères compatibles avec tous les navigateurs
Plusieurs problèmes qui se succèdent lorsque l’on veut utiliser des polices de caractère un peu originales dans un site web.
Si l’on reprend les choses depuis le début, en toute logique, on ne peut afficher dans une page web que les polices de caractères qui se trouvent déjà dans l’ordinateur de l’utilisateur. Évidemment, les polices livrées avec Windows, Mac OS et Linux ne sont pas les mêmes. Il n’y a qu’un petit nombre de polices communes aux différentes plateformes.
Depuis HTML5 et CSS3, on peut intégrer à son site web des polices de caractères, que l’on appelle dans la feuille de style, et qui sont lues par le navigateur. (de la même façon que l’on appelle les images, et qu’on les intègre dans la page web). On utilise pour cela l’instruction @font-face .
- 1er problème : tous les navigateurs n’intègrent pas la fonction @font-face
- 2ème problème : tous les navigateurs ne savent pas lire les mêmes famille de polices.
- 3ème problème : à moins de les acheter, vous ne pouvez utiliser que des polices libres de droit.
- 4ème problème : une fois la police libre de droit trouvée, il se peut qu’elle n’existe que sous un seul format, donc elle ne sert à rien.
Une solution très intéressante : fontsquirrel, qui vous propose un @font-face generator , ce qui permet d’utiliser une autre police de caractères dans ESCAL
Par défaut, ESCAL utilise la famille de police suivante : Verdana, Arial, Helvetica car ce sont des polices qui sont présentes sur tous les ordinateurs, elles sont devenues des standards.
Mais on pourrait avoir envie d’en utiliser une autre, il faut télécharger cette police qui est normalement fournie sous plusieurs formats pour fonctionner sur tous les navigateurs et appareils, ces polices doivent être copiées dans un dossier /squelettes/fonts.
On va ensuite rajouter ceci dans perso.css.
@font-face {
font-family: 'texgyreadventorregular';
src: url('../fonts/texgyreadventor-regular-webfont.eot');
src: url('../fonts/texgyreadventor-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/texgyreadventor-regular-webfont.woff') format('woff'),
url('../fonts/texgyreadventor-regular-webfont.ttf') format('truetype'),
url('../fonts/texgyreadventor-regular-webfont.svg#texgyreadventorregular') format('svg');
font-weight: normal;
font-style: normal;
}
Et si on veut utiliser cette police sur l’ensemble du site, on utilisera ce code :
body {
font-family: 'texgyreadventorregular';
}
Conclusion ESCAL Réponsive

Tout n’est pas écrit, tout n’est pas figé, donc n’hésitez pas à donner votre avis, à compléter...