¿Es una carrera de atención médica adecuada para usted?

Tome la prueba gratis
Diseño de respuesta

Diseño Responsivo 101

¿Qué es el diseño receptivo?

Si está interesado en el diseño o desarrollo web, probablemente haya escuchado el término "diseño receptivo" (a veces llamado "diseño web receptivo") más veces de las que puede contar. Pero, ¿qué significa exactamente y cómo hacer "¿diseño de respuesta?" No es un lenguaje de codificación, como HTML5 o CSS3, que puedes aprender estudiando sintaxis. Más bien, el diseño web receptivo es más un paradigma de diseño; una forma de pensar sobre el proceso de construcción de un sitio web.

¿Alguna vez ha notado un sitio web que se ve hermoso en su computadora portátil, pero horrible en su teléfono inteligente, o viceversa? Eso es lo que sucede cuando los diseñadores web ignoran el concepto de diseño receptivo. Por otro lado, ¿alguna vez ha notado un sitio web que se ve muy bien en su computadora portátil y luego se transforma sin problemas en una versión de sí mismo más compatible con dispositivos móviles cuando lo ve en su teléfono inteligente? Sitios web como cnn.com, huffingtonpost.com y mashable.com son excelentes ejemplos de diseño web receptivo. Están diseñados para verse bien en todos sus dispositivos.

El diseño web receptivo tiene que ver con la creación de sitios web que son sensible a una amplia variedad de tamaños de pantalla. Como puedes imaginar, es más fácil decirlo que hacerlo... pero una vez que le coges el tranquillo, en realidad es muy divertido. Antes de seguir leyendo, tenga en cuenta que algunos conocimientos básicos de HTML y CSS es necesario para comprender el siguiente tutorial.

Cómo: diseño receptivo (tutorial)

Parte 1. Elementos receptivos (secciones, imágenes y texto que cambian de tamaño con la ventana del navegador)

Supongamos que desea colocar una imagen en su sitio web, como la que se muestra a continuación. El ancho de la imagen es de 1920 píxeles y desea que encaje bien en el texto de la publicación de su blog. El problema es que el ancho de la columna de texto en la publicación de tu blog puede variar según el tamaño de la pantalla que estés mirando. Si define el ancho de esta imagen en 1920 píxeles, entonces no se adaptará al tamaño de la pantalla y no se adaptará al ancho de la columna de texto en la que está contenida. Lo más probable es que sobresalga como un pulgar dolorido y rompa el flujo de la publicación del blog. ¿Cómo se ve esta imagen de ancho fijo en su pantalla?

Diseño de respuesta

La imagen de arriba se colocó en esta página web con el siguiente código HTML:

<img style="?width:" height: src="?https://fvi.edu/wp-content/uploads/2016/06/Content-is-like-water-1980.jpg?" alt="?Sensible" design>

Tenga en cuenta que el ancho se define como 1920 píxeles, independientemente del tamaño de cualquiera de los otros elementos de la página o del tamaño de la pantalla en general.

La solución a este problema es definir el ancho de la imagen en por ciento más bien que píxeles. Los porcentajes son fluidos, mientras que los tamaños fijos no lo son. Entonces, si defino el ancho de mi imagen como 100% del ancho de la columna de texto en la que está contenida, entonces no importa qué tamaño de pantalla tenga, o qué tan ancha sea la columna de texto; la imagen siempre coincidirá con el ancho de la columna de texto. ¿Cómo se ve esta imagen de ancho fluido en su pantalla?

Diseño de respuesta

Esta imagen se colocó en esta página web con el siguiente código HTML:

<img style="?width:" src="?https://fvi.edu/wp-content/uploads/2016/06/Content-is-like-water-1980.jpg?" alt="?Sensible" design>

Tenga en cuenta que esta línea de código es en realidad más simple y corto que el anterior, pero tiene un efecto más receptivo. El diseño receptivo no tiene por qué ser difícil; solo requiere que piense en el contenido de sus sitios web más como agua que toma la forma de su recipiente, en lugar de algo para ser tallado en piedra.

<p>El mismo principio también se puede utilizar para otros elementos HTML. Cuando creas responsivo <div> secciones (utilizando porcentajes fluidos en lugar de píxeles fijos), por ejemplo, las secciones de su página web cambian de tamaño según el tamaño de la ventana del navegador del espectador. Si esos responden <div> Las secciones están llenas de contenido receptivo (como la imagen receptiva que se muestra arriba), luego todo su sitio web puede reducirse y crecer fácilmente según el tamaño del dispositivo en el que se está viendo.</div></div></p>

¡Impresionante! Ahora somos maestros del diseño web receptivo, ¿verdad? Bueno, no del todo. ¿Qué sucede cuando se cambia el tamaño de las imágenes y el texto, en un teléfono inteligente, por ejemplo, hasta el punto en que son demasiado pequeños para verlos? ¿Y cómo podemos probar la capacidad de respuesta de nuestros sitios web si no tenemos todos los modelos de teléfonos inteligentes, tabletas y pantallas grandes del mercado?

Únase a nosotros durante las próximas dos semanas para obtener respuestas simples y prácticas a estas preguntas, en “Diseño receptivo 102: Bootstrap” y “Responsive Design 103: CSS Media Queries & Google Chrome Tools!”