logo article ou rubrique
Escal 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

soit un site de test : https://escal.spipfactory.fr/essaispip/escalreponsive/ ou est installer que le zip télécharger sur la zone spip, donc celui que vous utiliser.

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ée pour l’expérience utilisateur ou dresser la liste des améliorations à entreprendre rapidement !



… La suite de cet article est réservée aux visiteurs enregistrés …
  • 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.
  • 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 dans
    menu 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)

c’est déjà pas mal, non ?

- 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.

- 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 parti des critères d’accessibilité du W3C, AccessiWeb, Opquast

dans Escal c’est déjà réalisé dans les différents fichier .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’aurais 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 peu 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


« Personne ne se lasse d’être aidé. L’aide est un acte conforme à la nature. Ne te lasse jamais d’en recevoir, ni d’en apporter. »
puceMentions légales puce

2017-2019 © SpipFactory.fr - Tous droits réservés
Haut de page
Réalisé sous SPIP
Habillage ESCAL 4.2.91