Una de las palabras de moda más importantes en el mundo del diseño en línea en los últimos dos o tres años tiene que ser "receptiva" con la llegada de la navegación en todo, desde una pantalla de teléfono inteligente de 4 pulgadas hasta una pantalla de 27 pulgadas, puede ser difícil asegurarse de que su sitio web o blog se vea bien sin importar qué. Es por eso que un diseño receptivo 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 responda, cuando incrusta contenido externo, no se ajustará necesariamente para adaptarse a la pantalla o dispositivo que utilizan los visitantes de su sitio web. Los sitios que no proporcionan contenido receptivo integrable incluyen gigantes como YouTube e Instagram, pero puede usar un servicio como Incrustar Responsivamente para transformar ese contenido en incrustaciones receptivas.
La historia del diseño web receptivo
El término diseño web receptivo solo se remonta a 2010, cuando fue diseñado por el diseñador Ethan Marcotte en un artículo sobre Una lista aparte. El escribio:
“Podemos diseñar para una experiencia de visualización óptima, pero incorporar tecnologías basadas en estándares en nuestros diseños para que no solo sean más flexibles, sino también más adaptables a los medios que los hacen. En resumen, necesitamos practicar un diseño web receptivo ”.
Ahora solo tres años después, y la importancia del diseño web receptivo ha continuó creciendo, y además de asegurarte de que estás utilizando un diseño o tema impresionante y receptivo, hay muchos herramientas receptivas que puede utilizar para asegurarse de proporcionar una experiencia totalmente receptiva para su sitio web visitantes
Incrustar Responsivamente
Entonces, si bien su tema puede responder (como esta lista de magníficos temas de WordPress receptivos Cree una cartera increíblemente receptiva con uno de estos temas gratuitos de WordPressEn estos días no es suficiente tener un sitio web bellamente diseñado, especialmente si eres 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 ... Lee mas ), hay ciertas incrustaciones que no se adaptarán necesariamente para ajustarse al tamaño de la pantalla de un visitante. Si bien puedes insertar contenido de Twitter, Storify, SoundCloud y Scribd, ya han hecho todo el trabajo pesado por ti. Por lo tanto, si incrusta un tweet, por ejemplo, la inserción es receptiva, por lo que cambiará su tamaño para adaptarse a la pantalla de su visitante.
Sin embargo, hay algunos culpables que no han podido proporcionar incrustaciones receptivas para que cuando comparte contenido de sus sitios, se adaptará automáticamente a la pantalla que está viendo en. Ahí es donde Incrustar Responsivamente viene en. Si conoce bien el código, siempre puede editar el código fuente y convertirlo en uno sensible, pero Embed Responsively solo lo convierte en un asunto de copiar y pegar, ¡muy fácil!
El servicio actualmente está redactado con Instagram, YouTube, Vimeo, Google Maps e incluso con incrustaciones genéricas de iFrame. Es una maravilla que sitios como estos no hayan podido usar incrustaciones receptivas; pero quizás por eso ha surgido una herramienta como Embed Responsively. Puede hacer clic en "Más" en el sitio para ver una pequeña lista de sitios populares que actualmente responden.
Cómo usar el servicio
Usar Embed Responsively 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 insertar un video de YouTube o Vimeo, todo lo que necesita es el enlace directo al video. Si desea insertar una foto de Instagram, es lo mismo: simplemente obtenga el enlace a la imagen de Instagram en la web. Con Google Maps, por otro lado, es un poco más complejo porque no puedes usar un enlace directo, tienes que acceder al código de inserción de Google Map.
Para obtener el código de inserción de su mapa de Google, 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 Insertar Responsivamente. (Si todavía está tratando de 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 cree sus propios mapas con capas personalizadas en el nuevo Google MapsCon Google presentando un Maps completamente renovado, ahora disponible para todos, crear sus propios mapas se ha vuelto más fácil que nunca. Puede crear mapas privados y públicos, compartir los mapas con individuos específicos, agregar descripciones ... Lee mas .)
Una vez que tenga el código de enlace / incrustación de su elección, puede continuar y pegarlo en la ventana Incrustar Responsivamente, solo asegúrese de tener seleccionada la pestaña correcta. Haga clic en el botón "Incrustar", y el sitio web generará un código de inserción que puede usar en su sitio o blog que será totalmente receptivo.
Conclusión
Es obvio, por supuesto, que su sitio web debe ser receptivo para comenzar porque es el sitio web el que contiene todo el código. Embed Responsively es un pequeño sitio simple que se hace bastante. Si te tomas en serio el diseño receptivo y quieres proporcionar a tus visitantes una experiencia fluida, querrás agregar este sitio a tu arsenal de herramientas de blogs.
¿Qué opinas de Embed Responsively? Háganos saber en los comentarios.
Credito de imagen: Tableta en blanco a través de PlaceIt
Nancy es escritora y editora y vive en Washington DC. Anteriormente fue editora de Medio Oriente en The Next Web y actualmente trabaja en un grupo de expertos con sede en DC sobre comunicación y divulgación en redes sociales.