Cómo integrar YouTube, Vimeo, Instagram y Google Maps de forma responsable

Una de las palabras de moda más grandes en el mundo del diseño en línea en los últimos dos o tres años tiene que ser "Responsive". Con el advenimiento de navegar en todo, desde una pantalla de teléfono inteligente de 4 pulgadas a una pantalla de 27 pulgadas, puede ser difícil asegurarse de que su sitio web o blog se vea bien sin importar lo que pase. Es por eso que un diseño de respuesta es esencial porque puede detectar automáticamente qué dispositivo está utilizando para acceder al sitio y ajustarlo para que se ajuste al tamaño de su pantalla..

Si bien puede diseñar todo su sitio web para que sea receptivo, cuando incrusta contenido externo, no necesariamente se ajustará a la pantalla o al dispositivo que usan los visitantes de su sitio web. Los sitios que no proporcionan contenido sensible incrustable incluyen gigantes como YouTube e Instagram, pero puedes usar un servicio como Incrustar responsivamente para transformar ese contenido en incrustaciones responsivas.

La historia del diseño web responsivo

El término diseño web sensible solo se remonta a 2010, cuando fue acuñado por el diseñador Ethan Marcotte en un artículo en A List Apart. El escribio:

“Podemos diseñar para una experiencia de visualización óptima, pero incorporamos tecnologías basadas en estándares en nuestros diseños para hacerlos no solo más flexibles, sino también más adaptables a los medios que los representan. En resumen, tenemos que practicar el diseño web responsivo..”

Ahora, solo tres años después, y la importancia del diseño web sensible ha seguido creciendo, y además de asegurarse de que está usando un diseño o tema asombroso y sensible, hay muchas herramientas interesantes que puede usar para asegúrese de proporcionar una experiencia completamente receptiva para los visitantes de su sitio web.

Incrustar responsivamente

Entonces, si bien su tema puede ser receptivo (como esta lista de magníficos temas de WordPress sensibles, cree un portafolio increíblemente receptivo con uno de estos temas gratuitos de WordPress. Cree un portafolio increíblemente receptivo con uno de estos temas gratuitos de WordPress. sitio web, especialmente si usted es fotógrafo, artista o diseñador gráfico. En estos días, si su sitio no responde, es probable que esté perdiendo una parte importante de ... Leer más), hay ciertas incrustaciones que no necesariamente se adaptan para adaptarse al tamaño de la pantalla de un visitante. Aunque puedes insertar contenido de Twitter, Storify, SoundCloud y Scribd, ya han hecho todo el trabajo por ti. Por ejemplo, si incrusta un tweet, la inserción responde, por lo que su tamaño se ajustará a la pantalla de su visitante..

Sin embargo, hay algunos culpables que no se han comprometido a proporcionar incrustaciones sensibles para que cuando compartas contenido de sus sitios, se adapte automáticamente a la pantalla en la que se está viendo. Ahí es donde entra Embed Responsively. Si sabe cómo utilizar el código, siempre puede editar el código fuente y convertirlo en uno sensible, pero Incrustar responsivamente solo lo convierte en un asunto de copiar y pegar.!

El servicio actualmente incluye palabras con Instagram, YouTube, Vimeo, Google Maps e incluso con incrustaciones genéricas de iFrame. Es una maravilla que los sitios como estos no se hayan acostumbrado a utilizar incrustaciones sensibles; pero quizás es por eso que una herramienta como Incrustar responsivamente ha surgido. Puede hacer clic en 'Más' en el sitio para ver una pequeña lista de sitios populares que actualmente responden.

Cómo utilizar el servicio

Usar Incrustar responsivamente no podría ser más fácil. Todo lo que necesita es el código de inserción original del servicio que desea utilizar. Para incrustar un video de YouTube o Vimeo, todo lo que necesita es el enlace directo al video. Si desea incrustar una foto de Instagram, es lo mismo: simplemente obtenga el enlace a la imagen de Instagram en la web. Por otro lado, con Google Maps es un poco más complejo porque no puedes usar un enlace directo, debes acceder al código de inserción de Google Map.

Para obtener el código de inserción de su Google Map, abra el mapa y haga clic en el botón de enlace en la esquina superior derecha de la barra lateral. Se abrirá el código de inserción que puede pegar en Incrustar responsivamente. (Si aún está intentando descubrir cómo crear mapas personales para compartir con sus amigos y seguidores, asegúrese de consultar nuestra guía para crear mapas con capas. Sea creativo y haga sus propios mapas con capas personalizadas en el nuevo Google Maps. Sea creativo y haga sus propios mapas con capas personalizadas en el nuevo Google Maps. Con Google desvelando un mapa completamente renovado, ahora disponible para todos, crear sus propios mapas es ahora más fácil que nunca. Puede crear mapas privados y públicos, compartir los mapas con individuos específicos, añadir descripciones ... Leer más.)

Una vez que tenga el código de enlace / inserción de su elección, puede seguir adelante y pegarlo en la ventana Incrustar responsivamente, solo asegúrese de tener seleccionada la pestaña correcta. Haga clic en el botón 'Insertar', y el sitio web generará un código de inserción que puede utilizar en su sitio o blog y que será plenamente sensible.

Conclusión

Por supuesto, es obvio que su sitio web debe ser receptivo para comenzar porque es el sitio que es el contenedor de todo el código. Insertar responsivamente es un sitio pequeño y sencillo que se hace bastante. Si se toma en serio el diseño responsivo y desea brindar a sus visitantes una experiencia perfecta, querrá agregar este sitio a su arsenal de herramientas de blogs..

¿Qué opinas de Incrustar responsivamente? Háganos saber en los comentarios..

Crédito de la imagen: tableta en blanco a través de PlaceIt

Explore más acerca de: Google Maps, Instagram, diseño web, desarrollo web, YouTube.