• Le mieux 2

    Mon article qui était prévu le 12 aout.

    Vous allez me dire que j'insiste lourdement ... je sais ! (sourire)

    Je sais également qu'un samedi n'est pas une journée pour traiter ce genre de sujet ... tant pis !

    Un blog est un espace de liberté et n'est pas là pour se creuser les méninges; cependant, c'est un espace de partage, où l'on offre nos pensées ou ce qui nous plaît et, on aime que ce qu'on offre soit bien présenté.

    Je vais donc essayer de vous convaincre que les unités adaptatives présentent vos articles de la même façon, quel que soit l'écran de lecture car, vous l'avez peut-être vu dans mon article précédent, un élément dimensionné en pixels, ne s'adapte pas et oblige au visiteur de, soit "jouer de l'ascenseur", soit à afficher un article bien petit sur son écran.

    Il me faut vous prouver qu'utiliser les vw au lieu de px n'est pas compliqué et qu'un seul calcul, au début, est nécessaire; ensuite, on conserve toujours les mêmes valeurs pour nos articles habituels.

    Comme je ne pense pas que beaucoup écrivent leurs textes par le code source (<>), je vais juste parler du dimensionnement de vos images, saisies de la façon, certainement la plus courante, l'icône "Image", de la barre d'outils, en création d'article.

    J'ai publié une page ICI sur comment trouver l'adresse d'un image, saisie de cette façon.

    A partir du code trouvé en code source, rien de plus facile que d'ajouter le dimensionnement à votre image; exemple sur une de mes images:

    Incitation

    Comme indiqué sur la page en lien, j'ai choisi taille personnalisée (celle de ma photo) , sans lien et centrée.

    Le code source a écrit:

    <p style="text-align: center;"><img src="http://ekladata.com/RNj8Hp0RYrhYJGLjYYK9yuJNzO0.jpg" alt="Incitation" /></p>

    Si je veux réduire la largeur (et automatiquement la hauteur) de mon image, pour qu'elle s'adapte à ma zone article, je vais ajouter un attribut:

    <p style="text-align: center;"><img style="width:60vw;" src="http://ekladata.com/RNj8Hp0RYrhYJGLjYYK9yuJNzO0.jpg" alt="Incitation" /></p>

    et obtenir...

    Incitation

    J'ai bien conscience que cela oblige à faire une opération supplémentaire dans votre publication mais c'est le prix pour offrir, à vos visiteurs, un article adapté à leur moyen de lecture.

    Si vous trouvez que c'est "jouable", vous pourrez ajouter les décorations de votre choix à votre image, avec ou sans animation CSS; exemple, avec bordure, arrondi, ombre.

    Incitation

    <p style="text-align: center;"><img style="width: 60vw; border: 0.4vw ridge white; box-shadow: 0.3vw 0.3vw 0.6vw black; border-radius: 5vw;" src="http://ekladata.com/RNj8Hp0RYrhYJGLjYYK9yuJNzO0.jpg" alt="Incitation" /></p>

    Et si vous êtes en forme, vous pourrez ajouter une animation au survol...

    Incitation

    <p style="text-align: center;"><img id="phe" src="http://ekladata.com/RNj8Hp0RYrhYJGLjYYK9yuJNzO0.jpg" alt="Incitation" /></p>

    <style><!--
    #phe{width: 60vw; border: 0.4vw ridge white; box-shadow: 0.3vw 0.3vw 0.6vw black; border-radius: 5vw; filter:grayscale(1); webkit-filter:grayscale(1); transition:all 1s linear;}
    #phe:hover{filter:grayscale(0); webkit-filter:grayscale(0);}
    --></style>


    Bien sûr, cela demande de changer vos habitudes de publication mais je pense que le résultat en vaut la chandelle.

    Dites-vous bien qu'une fois que vous aurez défini les valeurs qui vous conviennent, vous les utiliserez à chaque article, sans avoir à recalculer à chaque fois.

    Un blog en adaptatif est privilégié dans les classements Google, par rapport aux blogs "fixes".