A compter du 21 avril 2015, soit votre site web est mis en conformité où bien il sera viré du classement de Google en terme de référencement !
C’est la dure réalité, et surtout pour les entreprises qui ont fait confiance à des concepteurs de site Internet qui n’ont pas tenu compte des évolutions depuis quelques temps.
Lisez cet article, partagez-le au maximum, à ceux que vous connaissez et qui ont un site ou un blog sur Internet, mais aussi des vidéos, pour les raisons suivantes :
Au 21 avril 2015, Google va privilégier les sites et les blogs qui auront 2 caractéristiques : ceux qui sont Responsive et Adaptative.
2 grands mots, mais à quoi correspondent t-ils et comment savoir si vous êtes dans les clous ou si votre site est en phase de se retrouver dans les dernières pages de Google ?
Responsive : en simplifiant, c’est la technique utilisée pour que votre site ou votre blog s’adapte à tous les appareils multimédias, les tablettes, les smartphones, pour être lisible aussi bien sur un ordinateur que sur un mobile.
Google impose ses conditions et impose de privilégier « l’expérience utilisateur », c’est à dire que les internautes (vous et moi aussi donc), puissent bénéficier pleinement d’un site ou d’un blog, avec le confort de lecture qui va avec, sur n’importe quel média.
Rappel : Google a un OS Androïd, et les tablettes et smartphones l’utilisent, et rapportent des sommes gigantesques.
Pour vérifier si votre site ou votre blog utilise un thème Responsive, rien de plus facile. Visualisez le sur votre tablette ou téléphone, s’il se redimensionne tout seul, vous êtes déjà pas mal, mais pas encore sortie d’affaire, lisez la suite.
Pour les blogs sous WordPress, pas de panique, ça fait déjà quelques années que les thèmes sont développés « Responsive ».
Adaptive : c’est le fait que votre contenu média puisse facilement être adaptable au lecteur média, et rapide à charger. Ca se corse à partir de là.
Ca veut dire que vos images, si elles étaient adaptées et dimensionnées pour votre site internet, elles ne le sont pas pour les mobiles (tablettes et smartphones). Soit elles sont trop lourdes (en poids, plusieurs méga) soit en taille (de trop grandes dimensions) soit le pire, les deux parfois.
Ce qui vous contraint à prévoir plusieurs dimensions pour que vos images puissent s’adapter à plusieurs formats d’appareils mobiles, car tous n’utilisent pas les mêmes dimensions d’écrans et de résolutions, avec la contrainte de pouvoir se charger rapidement, car les connexions mobiles ne sont pas des plus rapides (même en 4G !!!)
Un point positif pour les utilisateurs de blogs WordPress, vous ne le savez peut être pas, où bien vous vous êtes toujours demandé pourquoi lorsque vous téléchargiez une image depuis le Pool média, lors de la rédaction d’un article, WordPress vous propose plusieurs formats de votre image (et créé et duplique votre image en plusieurs dimensions), et bien pour cette raison, être adaptable. Vos images sur WordPress (si vous passez par le téléchargement via le « média », sont déjà Adaptive.
Pour les autres blogs, je n’en sais rien. Pour les sites HTML, 2 choix. Soit vous demandez à votre service informatique de faire le nécessaire, soit vous optez pour un CMS, du style WordPress, ou une autre solution que je ne connais pas. Débrouillez-vous quoi !
Et pour vos vidéos, alors ?
Les vidéos ne sont pas spécifiquement adaptatives, (certains disent Responsive), car elles dépendent du conteneur qui les lit.
Vidéos propres sur votre site ou blog
Si vous avez mis des vidéos sur votre site ou votre blog, vous avez automatiquement un conteneur qui vous sert de lecteur, comme Jwplayer, ou Flowplayer ou un autre.
Dans les paramètres que vous trouverez sur les pages supports de ces conteneurs, vous pouvez mettre facilement à jour le code sur chacun de vos articles qui contiennent des vidéos (le code source ou texte sous wordpress) afin d’apporter les modifications en termes de dimensions (width and Height) en changeant les valeurs numériques par des pourcentages, normalement. Veuillez voir avec le support technique ou la doc.
Vos vidéos seront donc facilement adaptables aux médias existants et futurs.
Vidéos Youtube mis sur votre site ou blog
Pour Youtube, si vous avez mis en partage des vidéos depuis la plate-forme, sur votre site ou blog, c’est un peu plus compliqué. Vous êtes dans la M… ou presque, sauf que : il existe une solution.
Etant donné que Youtube appartient à Google, on pourrait croire (voir espérer) qu’ils vont tous faire pour que cela fonctionne bien.
Vous allez pouvoir vous arracher les cheveux dans 2 minutes
Youtube, même si c’est la plus grosse plate-forme de vidéo, et la plus fréquentée, est la plus en retard, techniquement, voir la plus lamentable des plate-formes vidéos. Mais les autres, Dailymotion qui avait une bonne avance technique est en perte d’auditeur, et Viméo est axée sur les professionnels.
Donc, Youtube dicte ses Lois, comme Google, et ne compte pas remanier tout son code pour vos beaux yeux (encore moins les miens), et pour preuve, pour les smartphones et les tablettes, ça leurs coûte moins cher de développer une appli spécifique « Youtube » et de la donner gratuitement. Et tout le monde s’en sert, c’est gratuit.
Mais pour vos vidéos, Youtube s’en tape, ce n’est pas son problème. « Tu t’adaptes, ou tu crève ! ». Désolé, il n’y a pas d’autre façon de le dire.
Donc, comme on est sur un blog parlant de vidéo (ouf, j’y viens), il existe une solution pour que vos vidéos sur youtube, s’adaptent aux médias actuels, sans que Google vous pénalise parce que votre site ou votre blog ne répondrait pas à sa nouvelle exigence (de dictateur, y a pas d’autre façon de le dire non plus), en faisant 2 choses.
La première, est de se servir de la forme de partage « Iframe » proposée dans le menu « partager » sous les vidéos de Youtube, et de l’insérer dans votre code (texte ou source) de votre page ou article, en modifiant le code, pour faire appel à un fichier CSS, qui va indiquer à la vidéo Youtube (sur votre site) de s’auto-dimensionner selon l’appareil média.
La seconde est de créer le fichier CSS et de le mettre à la racine de votre site ou votre blog.
La solution, le code, le CSS
Pas de panique, je vais vous donner les éléments. Si pour vous ça ne fonctionne pas, ne me posez pas de questions, voyez avec un Codeur ou un ami qui connait le code et pourra vous aider. Mais pour moi, sur ce blog, ça fonctionne, donc, cela devrait fonctionner pour vous si vous utilisez WordPress.
Sous votre vidéo, depuis Youtube, récupérez le code « Iframe » complet, à partir du bouton « partager », et « insérer » puis copiez-le dans un fichier texte provisoire sur votre PC, car on va légèrement le modifier.
Le code Iframe d’origine :
Le code iframe modifié :
<div class= »videoWrapper »><iframe width= »853″ height= »480″ src= »https://www.youtube.com/embed/ImXjgLIHm7c?rel=0&controls=0&showinfo=0″ frameborder= »0″ allowfullscreen></iframe></div>
On a rajouté ce bout de code qui fait appel au fichier CSS que nous allons créer.
<div class= »videoWrapper »> et on ferme cette div par </div>
(les dimensions de ma vidéo 853×480 sont à adapter pour votre vidéo et votre page d’article)
Le code pour constituer le CSS
/* css videowrapper pour l’iframe d’une video Youtube, et la rendre adaptative*/
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Le code est à copier, puis à coller dans un fichier de texte simple (avec write ou notepad), et à enregistrer avec l’extension .css et pas .txt sous le nom videoWrapper.css en respectant la majuscule (ou si vous modifiez le nom, il faut le faire aussi dans le code iframe de la vidéo)
Ce fichier vous le transférez à la racine de votre blog (là où il y a votre page index.php) à l’aide du logiciel FileZilla ou depuis votre serveur. Voir votre S.I. pour faire la manip.
Le bonheur est au bout de la route
Maintenant, c’est fini. Dès que vous mettrez une vidéo Youtube sur votre blog, en ajoutant le code en plus qui fait appelle au fichier CSS (que vous avez fait une seule fois pour toutes vos vidéos), vous n’aurez aucun problème d’adaptabilité sur les tablettes ou les Smartphones. La seule petite chose est que vous aurez du noir autour de votre vidéo, car le conteneur ne s’adapte pas, il est propriétaire Youtube et appelle ce conteneur sur Youtube.
Ce long article est précieux, si vous ne voulez pas vous retrouver dans les choux d’ici quelques temps, et voir votre site (ou ne plus le voir du tout), disparaitre de la première page Google.
Partagez cet article avec les gens que vous aimez bien; les autres, … chacun sa route.
Jeu de briques
Snake
Pacman
Bubble