Comment intégrer YouTube, Vimeo, Instagram et Google Maps de manière responsable

L'un des plus grands mots à la mode dans le monde du design en ligne au cours des deux ou trois dernières années doit être «réactif». Avec l'avènement de la navigation sur tout, d'un écran de smartphone de 4 pouces à un écran de 27 pouces, il peut être difficile de s'assurer que votre site Web ou votre blog a l'air bien, peu importe quoi. C'est pourquoi une conception réactive est essentielle car elle peut détecter automatiquement l'appareil que vous utilisez pour accéder au site et l'ajuster à la taille de votre écran.

Bien que vous puissiez concevoir l'intégralité de votre site Web pour qu'il soit réactif, lorsque vous intégrez du contenu externe, il ne s'ajustera pas nécessairement pour s'adapter à l'écran ou à l'appareil que les visiteurs de votre site Web utilisent. Les sites qui ne fournissent pas de contenu réactif intégrable incluent des géants comme YouTube et Instagram, mais vous pouvez utiliser un service comme Intégrer de manière réactive pour transformer ce contenu en intégrations réactives.

L'histoire de la conception Web réactive

Le terme responsive web design ne date que de 2010, lorsqu'il a été inventé par le designer Ethan Marcotte dans un article sur Une liste à part. Il a écrit:

«Nous pouvons concevoir pour une expérience de visionnement optimale, mais incorporer des technologies basées sur des normes dans nos conceptions pour les rendre non seulement plus flexibles, mais plus adaptables aux médias qui les rendent. En bref, nous devons pratiquer la conception de sites Web réactifs. »

Maintenant, seulement trois ans plus tard, et l'importance d'une conception Web réactive a a continué de croître, et en plus de vous assurer que vous utilisez un design ou un thème étonnant et réactif, il y a beaucoup d'intéressants des outils réactifs que vous pouvez utiliser pour vous assurer que vous offrez une expérience complètement réactive à votre site Web visiteurs.

Intégrer de manière réactive

Ainsi, même si votre thème peut être réactif (comme cette liste de magnifiques thèmes WordPress réactifs Créez un portfolio incroyablement réactif avec l'un de ces thèmes WordPress gratuitsDe nos jours, il ne suffit pas d'avoir un site Web magnifiquement conçu, surtout si vous êtes photographe, artiste ou graphiste. De nos jours, si votre site n'est pas réactif, il est probable que vous perdiez une partie importante de ... Lire la suite ), certaines intégrations ne s'adaptent pas nécessairement à la taille de l'écran d'un visiteur. Bien que vous puissiez intégrer du contenu de Twitter, Storify, SoundCloud et Scribd, ils ont déjà fait tout le gros du travail pour vous. Ainsi, si vous intégrez un tweet par exemple, l'intégration est réactive et sera donc redimensionnée pour s'adapter à l'écran de votre visiteur.

Cependant, il y a quelques coupables qui n'ont pas réussi à fournir des intégrations réactives pour que lorsque vous partagez du contenu de leurs sites, il s'adapte automatiquement à l'écran où il est affiché sur. C'est là que Intégrer de manière réactive entre. Si vous connaissez votre code, vous pouvez toujours éditer le code source et le convertir en un responsive, mais Embed Responsively en fait simplement une affaire de copier-coller - c'est facile!

Le service est actuellement compatible avec Instagram, YouTube, Vimeo, Google Maps et même avec des intégrations iFrame génériques. C'est une merveille que des sites comme ceux-ci n'aient pas utilisé les intégrations réactives; mais c'est peut-être pour cela qu'un outil comme Embed Responsively a vu le jour. Vous pouvez cliquer sur «Plus» sur le site pour voir une petite liste de sites populaires qui sont actuellement réactifs.

Comment utiliser le service

Utiliser Embed Responsively ne pourrait pas être plus simple. Tout ce dont vous avez besoin est le code d'intégration d'origine du service que vous souhaitez utiliser. Pour intégrer une vidéo YouTube ou Vimeo, tout ce dont vous avez besoin est le lien direct vers la vidéo. Si vous voulez incorporer une photo Instagram, c'est la même chose - il suffit d'obtenir le lien vers l'image Instagram sur le Web. Avec Google Maps, en revanche, c'est un peu plus complexe, car vous ne pouvez pas simplement utiliser un lien direct - vous devez accéder au code d'intégration de Google Map.

Pour obtenir le code d'intégration de votre carte Google, ouvrez la carte et cliquez sur le bouton de lien dans le coin supérieur droit de la barre latérale. Cela ouvrira le code d'intégration que vous pouvez coller dans Embed Responsively. (Si vous essayez toujours de savoir comment créer des cartes personnelles à partager avec vos amis et abonnés, assurez-vous de vérifier notre guide pour créer des cartes avec des couches Faites preuve de créativité et créez vos propres cartes avec des calques personnalisés sur la nouvelle Google MapsAvec Google dévoilant une carte complètement remaniée, désormais accessible à tous, la création de vos propres cartes est devenue plus facile que jamais. Vous pouvez créer des cartes privées et publiques, partager les cartes avec des individus spécifiques, ajouter des descriptions ... Lire la suite .)

Une fois que vous avez obtenu le lien / code d'intégration de votre choix, vous pouvez continuer et le coller dans la fenêtre Incorporer de manière responsable. Assurez-vous simplement que l'onglet correct est sélectionné. Cliquez sur le bouton "Intégrer" et le site Web générera un code d'intégration que vous pourrez utiliser sur votre site ou blog et qui sera pleinement réactif.

Conclusion

Il est évident, bien sûr, que votre site Web doit être réactif au départ, car c'est le site Web qui est le wrapper de tout le code. Embed Responsively est un petit site simple qui fait beaucoup de travail. Si vous êtes sérieux au sujet de la conception réactive et que vous souhaitez offrir à vos visiteurs une expérience transparente, vous voudrez ajouter ce site à votre arsenal d'outils de blog.

Que pensez-vous de Embed Responsively? Faites le nous savoir dans les commentaires.

Crédit d'image: Tablette vierge via PlaceIt