¿Qué es el diseño Responsive?
En este momento, casi todos en el mundo web han oído hablar del diseño web reponsive, pero no todo el mundo sabe en realidad de que se trata.
Ahora en este post, aprenderás los conceptos básicos de lo que significa que un sitio web sea responsive. Después de eso, revisaremos un poco de la historia del diseño web, para que pueda entender de dónde surgió la idea del diseño responsivo y cómo se compara con la antigua forma de hacer las cosas.
También veremos por qué el diseño responsive suele ser la mejor opción para crear sitios web que funcionen bien en diferentes dispositivos y tamaños de pantalla, y cómo significa menos trabajo a largo plazo. También veremos un efecto menos obvio de elegir un diseño receptivo: cómo afecta el ranking de su motor de búsqueda.
Si recogió este libro porque ha oído hablar del diseño receptivo, pero no está muy seguro de qué es decir, esta sección lo ayudará a comprender los conceptos básicos.
Incluso si tiene algo de experiencia con el diseño receptivo, probablemente haya descubierto que puede ser difícil explicárselo a otros sin usar un lenguaje demasiado técnico. Esta sección le dará una mejor idea de cómo explicar el diseño receptivo a los usuarios, a los clientes, a los miembros del equipo menos técnicos, oa su madre, que se pregunta qué es lo que le pagan por hacer todo el día.
Diseño receptivo, en general, es una forma de crear sitios web que se puedan ver y usar fácilmente en cualquier tipo de dispositivo y tamaño de pantalla, desde los teléfonos móviles más pequeños hasta los monitores de escritorio más anchos.
La manera más fácil de explicarlo es comparar sitios web receptivos con sitios que no lo son, y ver cómo se ve cada tipo de sitio en los teléfonos inteligentes.
Imagina que estás usando tu teléfono inteligente para ver un sitio web de ancho fijo, es decir , un sitio que está diseñado para mostrarse siempre con un ancho establecido, como 960 píxeles. Verá todo el sitio web tal como aparece en su monitor de escritorio, pero inicialmente se mostrará en un tamaño pequeño para que quepa en la pantalla. Tendrá que acercar y alejar continuamente para leer el texto y navegar por el sitio, como puede ver en Figura 1-1. Es mucho trabajo extra.
Figura 1-1. Al ver un sitio web de ancho fijo en un teléfono móvil, debe hacer zoom para ver el texto en un tamaño legible.
Y luego, para algunos sitios web, hay un sitio web móvil que está separado del sitio de escritorio normal. Este tipo de sitio se muestra a tamaño completo cuando lo carga en su teléfono inteligente (no es necesario hacer zoom), pero notará que a menudo es muy diferente del mismo sitio web cuando lo ve en su monitor de escritorio; a menudo hay mucho contenido falta, por lo que el propietario del sitio puede reducir el trabajo involucrado en el mantenimiento de múltiples versiones del sitio.
Y debido a que los sitios móviles generalmente están hechos para un tamaño de dispositivo específico, como un iPhone, si tiene un dispositivo diferente, el sitio web es posible que no quepa tan bien en la pantalla.
los Sitios Web móviles separados generalmente están optimizados para funcionar en un tamaño de dispositivo, pero hay muchos dispositivos diferentes en el mercado, y construir un sitio móvil para trabajar en un dispositivo puede significar dejar atrás todos los usuarios que tienen dispositivos diferentes.
Como ejemplo, Ikea tiene un sitio web móvil optimizado para adaptarse a teléfonos de cierto tamaño. En Figura 1-2, la navegación para el sitio de escritorio de Ikea está en la parte superior. En la parte inferior izquierda está el sitio en un iPad, y la parte inferior derecha muestra el sitio en un iPhone.
Figura 1-2. El sitio de escritorio de Ikea (en la parte superior) es el mismo que se ve en un iPad (abajo a la izquierda), mientras que el iPhone obtiene un sitio web especial para móviles (abajo a la derecha).
Las tres capturas de pantalla están a escala, para que pueda compara los tamaños de todo lo que ves en la pantalla. Al ver el sitio móvil en el iPhone, solo tiene unos pocos enlaces de navegación, pero tienen un tamaño similar a los enlaces en el sitio de escritorio. Pero en el iPad no obtienes el sitio móvil, obtienes el sitio de escritorio, y todo es realmente pequeño para caber en esa pequeña pantalla. Tendrá que hacer mucho zoom para usar el sitio.
Ikea trabajó mucho para crear un buen sitio móvil, pero si su dispositivo es una tableta, no podrá usarlo, y usted Obtenga una experiencia subóptima. Si Ikea tuviera un sitio receptivo, podría asegurarse de que las personas que usan dispositivos de cualquier tamaño obtendrían una interfaz adecuada.
Con un diseño receptivo, solo hay una versión del sitio web, por lo que obtienes todo el contenido, pero el diseño [19659003] se reorganiza para que se ajuste perfectamente a cualquier tamaño de pantalla, con texto de tamaño completo para que no tenga que acercar y alejar, como puede ver en Figura 1-3.
Figura 1-3. Un sitio receptivo visto en un teléfono, una tableta y un monitor de escritorio.
Hay muchos más detalles técnicos (que cubriremos más adelante en el libro), pero desde la perspectiva del usuario, la clave para describir un sitio receptivo es que las cosas pueden cambiar de tamaño y moverse para caber en la pantalla.
Antes de aprender de dónde vino el diseño receptivo, es útil conocer un poco de la historia del diseño web.
Aunque la mayoría de los monitores eran de unos pocos tamaños fijos, había algunos monitores mucho más anchos en el mercado, y también algunos monitores más antiguos y estrechos aún en uso. Los diseñadores web querían que sus diseños fueran exactamente iguales sin importar qué monitor se estuviera utilizando, por lo que generalmente crearían diseños de un ancho fijo para ajustarse al tamaño de monitor más común, como sitios de 960 píxeles de ancho para ajustarse fácilmente en 1,024 -pantallas de ancho de píxeles. Las pantallas más anchas simplemente mostrarían los sitios con espacio vacío (llamado espacio en blanco en términos de diseño) llenando el espacio extra a cada lado del diseño, como puede ver en Figura 1-4.
Figura 1-4. El sitio de MSN de ancho fijo tiene el mismo ancho en cualquier tamaño de pantalla, dejando espacios en blanco a cada lado cuando la pantalla es más ancha que el sitio.
Estos diseños de ancho fijo aún son bastante comunes.
Las ideas de diseño fluido y diseño líquido ganaron cierta tracción a principios de la década de 2000. Estas técnicas utilizan anchos basados en porcentajes para permitir que el diseño de una página web fluya para ajustarse al ancho de la pantalla, por lo que podría aprovechar el espacio disponible en pantallas más anchas. Aunque esto en teoría sonaba bien, ceder el control del diseño significaba que podría terminar con longitudes de línea súper largas y divisiones de columnas extrañas en pantallas anchas, lo que llevó a la mayoría de los diseñadores web a seguir diseños de ancho fijo más fáciles de manejar. 19659039] Cuando los teléfonos móviles con acceso a Internet estuvieron disponibles por primera vez a mediados de la década de 1990, generalmente ni siquiera tenían la capacidad de mostrar sitios web reales, y en su lugar solo proporcionaban datos que podían mostrarse en texto, como pronósticos meteorológicos, informes de existencias y puntajes deportivos. Los primeros navegadores móviles solo podían mostrar HTML básico, a menudo en escala de grises en lugar de color. No fue hasta mediados de la década de 2000 que los navegadores móviles pudieron mostrar páginas web «reales» utilizando tecnologías como CSS2 y JavaScript, en dispositivos más avanzados conocidos como teléfonos inteligentes como el iPhone en Figura 1-5.
Figura 1-5. El iPhone 4S.
El iPhone, que salió en 2007, fue un cambio de juego. Tenía una interfaz hermosa que podía aprovechar todas las tecnologías web actuales para mostrar páginas web como se verían en un monitor de tamaño completo.
Aunque los dispositivos con pantalla táctil habían existido Durante años, el iPhone fue uno de los primeros dispositivos móviles con multitáctil una tecnología que permite que el dispositivo reconozca más de un punto de contacto simultáneo con la pantalla, necesario para el comportamiento de navegación que ahora consideramos concedido, como pellizcar para hacer zoom.
Todo esto llevó al iPhone a ser continuamente referido como uno de los productos más innovadores de ese año, pero hubo un problema. Las páginas web fueron diseñadas para ser vistas en monitores de tamaño completo, no en teléfonos pequeños, por lo que casi todas las páginas web tenían 960 píxeles o más. La pantalla del iPhone, por otro lado, tenía solo 320 píxeles de ancho. La solución de Apple fue reducir automáticamente las páginas web para que quepan dentro del área de visualización de la pantalla (la ventana gráfica ), y luego permitir al usuario tocar o pellizcar para hacer zoom en cualquier área de la página.
Pero ver pequeñas piezas de una página no es una buena experiencia para el usuario.
Los diseñadores web sabían que esta no era una forma óptima para que las personas usaran la Web, y que tendrían que encontrar una manera de crear páginas web que eran más fáciles de ver en la pantalla pequeña del iPhone.
Los usuarios a menudo se redirigían automáticamente a la versión móvil del sitio si usaban un teléfono móvil. De lo contrario, podrían optar por ir al sitio web móvil haciendo clic en un enlace o visitando el sitio a través de una URL diferente, comúnmente usando un subdominio m (como http: //m.sprint .com ). Esta práctica llevó a estos sitios móviles separados a ser referidos como sitios web m-dot .
Por supuesto, esto significó trabajo extra para el equipo web, pero generalmente facilitaron el trabajo al hacer que el sitio móvil una versión simplificada del sitio web normal con solo una pequeña porción del contenido, como en la Figura 1-6.
Figura 1-6. La versión de escritorio y la versión móvil del sitio web The Washington Post .
Su justificación, que los teléfonos móviles solo se usaban «sobre la marcha» o para ciertas actividades básicas, probablemente era cierto para la mayoría usuarios en ese punto. Pero a medida que los teléfonos móviles se volvieron más omnipresentes, la gente comenzó a usar estos dispositivos para más y más tareas que anteriormente habían realizado solo en sus computadoras de escritorio o portátiles.
Tener un «sitio web para iPhone», como se les llamaba a menudo, funcionó Está bien en los primeros días, ya que por un tiempo el iPhone fue el único jugador importante en el mercado de teléfonos inteligentes. Pero eso no duró mucho. Otras compañías de teléfonos móviles pronto se subieron al carro y salieron con sus respuestas al iPhone.
Pero estos nuevos teléfonos inteligentes no eran todos del mismo tamaño. En comparación con el ancho de 320 píxeles del iPhone, muchos tenían pantallas más estrechas (240 píxeles o menos), y otros tenían pantallas más anchas que las del iPhone, especialmente aquellas diseñadas para usarse con la pantalla sostenida horizontalmente en lugar de verticalmente. Un sitio web de iPhone de 320 píxeles de ancho no encajaba perfectamente en todas esas pantallas.
Entonces los diseñadores web comenzaron a tratar de encontrar una solución: ¿cómo podemos hacer sitios web que funcionen en pantallas de cualquier tamaño? No hubo una respuesta fácil.
Luego, en 2010, Apple lanzó el iPad. De nuevo, esto fue un cambio de juego. Los sitios web móviles eran demasiado pequeños para aprovechar la pantalla mucho más grande del iPad, pero los sitios de ancho fijo de tamaño de escritorio eran demasiado grandes para ser fácilmente visualizados en modo vertical en un iPad.
Aunque algunos diseñadores reaccionaron creando sitios web de iPad separados ( así que ahora tenían tres sitios web separados), la mayoría se dio cuenta de que a medida que llegaban al mercado más y más tamaños de dispositivos, ya no era sostenible crear sitios web separados para cada tamaño de pantalla posible.
La comunidad de diseño web volvió nuevamente al concepto de diseños fluidos, utilizando anchos basados en porcentajes, y trató de descubrir cómo convertir eso en una solución para dispositivos móviles más pequeños.
El uso de porcentajes en lugar de píxeles permite que una página web y secciones de la página cambien el ancho a cabe en cualquier tamaño de pantalla, por lo que es fácil tener en cuenta las diferencias entre dispositivos de tamaño similar.
Pero una vez que observa la gama completa de dispositivos, tiene un problema. Limitar un diseño de tres columnas al ancho de un teléfono inteligente hace que las columnas de texto sean demasiado estrechas para ser legibles. Del mismo modo, un diseño de una columna que se ve bien en la pantalla de un teléfono inteligente sería demasiado ancho para leerlo fácilmente cuando se ve en un monitor de escritorio.
Esencialmente, el problema era este: sin tener que crear sitios separados, ¿cómo puede un sitio web ser se muestra en una columna en pantallas estrechas y en varias columnas en pantallas más anchas? ¿Cómo puede pedirle al navegador que realice cambios en el diseño, en función de las cualidades del dispositivo en el que se está viendo el sitio?
Ingrese consultas de medios.
La regla CSS @media que permite para mostrar diferentes estilos CSS basados en las cualidades del dispositivo, en realidad era parte de CSS2 hace más de una década, pero en aquel entonces solo admitía consultas de tipos de medios como pantalla o impresión. Esto se usó comúnmente para crear una versión impresa del diseño de un sitio web (que puede incluir cambios tan básicos como eliminar los colores de fondo que desperdiciarán la tinta de la impresora), pero su utilidad se detuvo allí.
No fue hasta CSS3 que el [19659003] especificación (es decir, una descripción formal y detallada de cómo se requiere que algo funcione) para las consultas de medios permitió consultas más precisas basadas en las características de los medios (dispositivo), como el ancho, la altura y la capacidad de color. Las consultas de medios no afectan el HTML (el contenido real y la estructura de la página subyacente), solo afectan los estilos que se aplican a la página mediante CSS. Los navegadores comenzaron a admitir consultas de medios CSS3 alrededor de 2009.
Entonces, ¿qué hacen estas consultas de medios?
Como ejemplo básico, digamos que tenemos un sitio web con dos secciones separadas de contenido. Podríamos crear un diseño de una sola columna que se ajuste bien a los teléfonos inteligentes, mostrando las dos secciones apiladas verticalmente. En pantallas más anchas, es posible que queramos mostrar las dos secciones de contenido como dos columnas separadas, una al lado de la otra.
Usando una consulta de medios, podemos preguntarle al dispositivo qué tan ancha es su pantalla. Entonces podemos decirle que muestre el contenido en dos columnas solo si su pantalla es lo suficientemente ancha como para que las columnas encajen bien.
Para codificar esto, simplemente comenzamos con CSS que mostrará el contenido en una columna. Luego agregamos una consulta de medios CSS que pregunta si la pantalla tiene 40 ems o más (aprenderá sobre ems en Capítulo 4; 40 ems es un poco más estrecho que el ancho de una tableta típica, pero puede especificar cualquier ancho en la consulta de medios).
Dentro de la consulta de medios, agregamos el CSS que mostrará el contenido en dos columnas en lugar de una. El navegador solo usará este CSS si la consulta de medios es verdadera (es decir, si la pantalla tiene 40 ems o más). Si la pantalla es más estrecha, ignora este CSS y el contenido permanece en una columna.
Por lo tanto, podemos darle a nuestro sitio web un diseño diferente para diferentes tamaños de pantalla, sin tener que crear sitios web separados.
Mediante el uso de consultas de medios , podemos cambiar cualquier aspecto del estilo del sitio web, no solo el número de columnas. Las consultas de medios se pueden usar para mover elementos, cambiar el tamaño del texto, ocultar o mostrar piezas de contenido, ajustar márgenes y espacios, y ajustar cualquier otro estilo que se pueda aplicar con CSS.
Nota
En esta sección, Me referí a consultas de medios que solicitan el ancho de la pantalla de un dispositivo. En realidad, las consultas de medios que son comunes en el diseño receptivo solicitan el ancho de la ventana gráfica de un dispositivo, no la pantalla. La ventana gráfica es el área de la pantalla (dentro de la ventana del navegador) en la que se muestra un sitio web.
En las computadoras de escritorio, puede cambiar el tamaño de una ventana del navegador, por lo que la ventana no siempre es el ancho máximo de la pantalla . La consulta de medios examina el espacio dentro de la ventana del navegador, por lo que su ventana de visualización cambiará si cambia el tamaño de la ventana del navegador. En los dispositivos móviles, la pantalla y la ventana gráfica siempre tienen el mismo ancho, ya que no se puede cambiar el tamaño de la ventana.
Aunque el ancho ventana gráfica es el término correcto, a menudo escuchará a la gente consulte el ancho de la pantalla cuando hablen de consultas de medios y diseño receptivo. Si bien no son técnicamente correctos, lo más probable es que signifiquen el ancho de la ventana gráfica (como lo hago en este libro, a menos que especifique lo contrario).
Hay otras consultas de medios que miden el ancho real de la pantalla del dispositivo en lugar del ancho de la ventana gráfica, pero no se usan comúnmente en este momento.
Las consultas de medios pueden reorganizar su diseño, pero el diseño receptivo no funcionaría sin una base de flexibilidad.
Para empezar, casi todas las mediciones horizontales en su sitio deben ser en unidades flexibles en lugar de píxeles inflexibles. Esto significa que el ancho de las columnas y otros elementos de diseño estarán en porcentajes, y el texto se medirá en una unidad relativa llamada em .
El tamaño de las imágenes en la página funciona un poco diferente, porque no necesariamente quiere que cambien de tamaño dependiendo del ancho de la pantalla; desea fotos lo suficientemente grandes como para ver amplios detalles, siempre que haya espacio en la pantalla. El problema es que, dependiendo del tamaño de la pantalla del dispositivo, puede que no siempre haya espacio para mostrar una imagen a tamaño completo. Deberá asegurarse de que la imagen no se cortará si no encaja. En Capítulo 6 veremos un truco de CSS que asegurará que las imágenes siempre quepan en el espacio donde las colocamos.
Ninguna de estas ideas (consultas de medios o flexibilidad) era nueva o innovadora por sí misma. Pero en 2010, el diseñador web Ethan Marcotte descubrió una manera de usar estos conceptos juntos para crear sitios web que respondieran a diferentes tamaños de pantalla.
Marcotte acuñó el término diseño web receptivo y primero escribió sobre él en un artículo para A List Apart ( http://alistapart.com/article/responsive-web-design ) en 2010, y lo siguió con el libro [19659003] Diseño web receptivo ( http://www.abookapart.com/products/responsive-web-design ) en 2011.
El concepto de diseño web receptivo ha sido muy debatido desde que fue introducido por primera vez. Como cualquier idea de tecnología nueva, algunas personas lo aceptaron y otras lo descartaron.
Obteniendo el diseño correcto en cada dispositivo
La razón más convincente para usar un diseño receptivo es que crearás un sitio web que no solo se verá bien y funciona correctamente en los dispositivos que están en el mercado ahora, pero es probable que se vea bien y funcione correctamente en cualquier dispositivo nuevo que estará disponible en el futuro.
Además, con un diseño receptivo no corre el riesgo que los usuarios verán la versión móvil de un sitio en sus monitores de escritorio, o viceversa.
Si tiene sitios web separados, esto definitivamente puede ser un problema, ya sea que use detección de dispositivo para enviar el la versión correcta del sitio para cada dispositivo o usted usa un conjunto de URL (por ejemplo, un subdominio de punto m) para servir un sitio móvil.
Los sitios que tienen una versión móvil separada comúnmente usan detección de dispositivos (lo que ocurre en el servidor del sitio web antes de la página se muestra) para determinar qué versión de una página web (móvil o de escritorio) se debe enviar a un dispositivo en particular. De esa manera, cada página en el sitio solo tendrá una URL, aunque en realidad hay dos versiones separadas con HTML diferente. Sin embargo, este proceso no es 100% preciso y, a veces, se envía una versión incorrecta de la página. Además, el proceso de detección de dispositivos puede aumentar el tiempo de carga de la página.
Usar una URL diferente para su sitio móvil separado (es decir, un sitio m-dot) es más fácil de implementar, pero depende del usuario para acceder a él. La versión correcta del sitio. Con los enlaces que se pasan de un lado a otro entre los usuarios a través de las redes sociales o el correo electrónico, llegar a la versión correcta de una página a menudo agregará una carga adicional a los usuarios, o en ocasiones no tendrán la opción.
Por ejemplo , si un usuario de escritorio envía un enlace por correo electrónico desde The New York Times a un usuario móvil, el usuario móvil recibirá un mensaje en la parte superior de la pantalla informándole que hay una versión móvil del sitio, como en Figura 1-7. Agradable, pero requiere trabajo adicional por parte del usuario y tiempo adicional para que el usuario haga clic y luego cargue una página totalmente separada.
Figura 1-7. Visitar un enlace desde la versión de escritorio de The New York Times te lleva al sitio de escritorio con un mensaje de que hay un sitio móvil disponible.
Por otro lado, si estoy de visita El sitio móvil del New York Times en mi teléfono y envío un enlace a un artículo por correo electrónico a alguien que abre ese enlace en una computadora de escritorio, obtienen lo que ves en Figura 1-8: una página optimizada para dispositivos móviles, sin una forma clara de ir al sitio web de escritorio completo. El usuario puede leer el artículo, pero tendrá que hacer clic para ver las versiones a tamaño completo de cualquier imagen, y no verá muchos de los enlaces complementarios y artículos recomendados que se encuentran en la versión de escritorio del sitio. [19659012] Figura 1-8. Al hacer clic en un enlace desde la versión móvil de The New York Times obtienes la versión móvil de la página, incluso si estás en una computadora de escritorio.
Con un diseño receptivo, solo tienes una página web , por lo que nunca obtendrá la «versión incorrecta». El sitio se mostrará correctamente sin importar en qué dispositivo se esté viendo.
La ventaja más obvia de usar un diseño receptivo es que solo tiene que crear un sitio web, uno diseño, un conjunto de código y un conjunto de contenido.
Si tiene una versión separada de su sitio solo para dispositivos móviles, deberá crear y mantener dos (o más) conjuntos de HTML completamente separados. Será necesario realizar cambios en cada sitio, e incluso si está tratando de mantenerlos iguales, seguramente habrá problemas y algo terminará no coincidiendo. Si bien el uso de un sistema de administración de contenido (CMS) o un sistema de plantillas puede facilitar el trabajo, hay más código y contenido para mantener, y más cosas que potencialmente pueden romperse.
Con un sitio receptivo, solo tiene un conjunto de contenido , y se mostrará correctamente sin importar el tamaño de la pantalla. Los ajustes de diseño futuros se pueden realizar haciendo cambios en la hoja de estilo.
Para alguien que no tiene experiencia en diseño receptivo, la tarea inicial de crear un sitio web receptivo (a medida que aprende cómo funciona todo) puede requerir más esfuerzo que crear un sitio fijo. ancho del sitio, pero a largo plazo tendrá menos trabajo para mantener el sitio web.
Un sitio móvil separado, con un conjunto separado de URL, puede crear problemas con la ubicación de su sitio en los resultados de búsqueda.
Si tener dos versiones separadas de una página con el mismo contenido o similar pero URL diferentes (es decir, http://www.example.com y http://m.example.com ), los motores de búsqueda necesitan saber que se consideran la misma página para que la página pueda indexarse correctamente y mostrarse como una entrada en la lista de resultados de búsqueda.
Aunque esto es posible usando JavaScript o código en su servidor, es un poco complicado, y si no lo hace co correctamente puede terminar con ambas versiones de una página que aparecen en los resultados de búsqueda, confundiendo a los usuarios. También puede afectar negativamente su clasificación de búsqueda.
Google ha recomendado un diseño receptivo para sitios web optimizados para teléfonos inteligentes desde 2012, no solo porque crea una mejor experiencia para los usuarios sino también porque permite que el rastreador del sitio de Google recupere su contenido de manera más eficiente, lo que significa que los cambios en su sitio probablemente se actualizarán en los resultados de búsqueda más rápidamente.
Bing recomienda usar un método que dé como resultado solo un conjunto de URL, pero no ha respaldado específicamente el diseño receptivo como una forma de hacerlo. [19659153] Hasta que se introdujo el diseño receptivo, los sitios web eran generalmente de ancho fijo lo que significaba que el diseño del sitio web era del mismo ancho sin importar el tamaño de pantalla en que se mostrara. Cuando aparecieron los teléfonos inteligentes, eso realmente no funcionó, porque los sitios web parecían pequeños en las pantallas pequeñas y los usuarios tenían que acercar y alejar continuamente para leer cualquier cosa.
Los sitios web móviles siguieron poco después, y muchas compañías construyeron estos segundos sitios web por separado desde sus sitios web principales o de escritorio. Los sitios web móviles a menudo contenían solo una fracción del contenido y la funcionalidad disponible en los sitios web normales, por lo que los usuarios móviles se perdieron.
A medida que aparecieron más dispositivos, los diseñadores pronto se dieron cuenta de que no era práctico, si no imposible, crear múltiples sitios web para que se ajustaran cada uno de los diferentes tamaños de pantalla. El concepto de diseño receptivo se introdujo como una forma de crear sitios web que pudieran responder al ancho de la pantalla de un dispositivo y mostrar el contenido del sitio de manera apropiada para ese tamaño de pantalla.
El diseño web receptivo consta de dos componentes principales : flexibilidad, lo que significa que las mediciones horizontales necesitan usar unidades relativas como porcentajes para que puedan responder al tamaño de la pantalla, y consultas de medios, que le permiten usar CSS para cambiar el diseño del sitio web dependiendo del ancho del dispositivo pantalla.
El diseño receptivo le permite proporcionar un diseño apropiado para cualquier tamaño de pantalla utilizando solo un conjunto de código. No tener que mantener conjuntos de códigos separados significa menos trabajo. E implementar un diseño receptivo significa que su sitio estará optimizado para la búsqueda.
A continuación, en el Capítulo 2, hablaremos sobre por qué el contenido es importante y cómo asegurarse de que está diseñando contenido que funcione bien en sitios web receptivos.
