Saltar al contenido

La guía para principiantes del diseño web receptivo en 2021

10/10/2020

Diseño web adaptable

how to make a web page responsive using css

Más información HTML

Debido a que las personas utilizan una variedad de dispositivos para acceder a Internet, es importante que, como diseñador de sitios web, sepa cómo crear un sitio que se adapte a cualquier tamaño de pantalla. Los sitios web de hoy en día deberían poder cambiar el tamaño y reorganizar elementos y contenido automáticamente para que cualquier usuario en cualquier dispositivo desde cualquier parte del mundo pueda acceder a su sitio y navegar por él con facilidad. Y crear un sitio web que sea compatible con los muchos navegadores disponibles tanto del pasado como del presente también es una parte integral del lanzamiento de un sitio sólido. Las consultas de medios permiten a los usuarios cambiar o personalizar las páginas web para muchos dispositivos como computadoras de escritorio, teléfonos móviles, tabletas, etc. sin cambiar las marcas. Mediante la consulta de medios, el usuario puede cambiar el estilo de un elemento en particular para diferentes tamaños de pantalla.

Por ahora, todo lo que necesita apreciar es que las consultas de medios son directivas en CSS que nos permiten aislar las reglas de CSS a ciertas condiciones ambientales; el tamaño de la pantalla en este caso. Esta metaetiqueta de ventana gráfica es la forma no estándar, pero de facto, de decirle al navegador cómo renderizar la página. Aunque Apple lo introdujo en la web, en lugar de un proceso estándar, sigue siendo esencial para el diseño web receptivo.

  • Bueno, podríamos agregar un ancho fijo a la imagen a través de CSS, pero el problema es que queremos que la imagen se escale a diferentes tamaños de pantalla.
  • Cuando despegó el diseño web receptivo, muchos notaron que las imágenes seguían cambiando proporcionalmente con la página, incluso si estaban hechas específicamente para la pantalla pequeña.
  • Pero en general, el cambio de tamaño de la imagen y los espacios de contenido flexibles permiten una solución bastante simple que se adapta a una amplia gama de tamaños de pantalla.

Cuando las personas comenzaron a hacer uso de las consultas de medios, era común ver diseños construidos con puntos de interrupción específicos para atender a los dispositivos populares del día. En ese momento, normalmente eran dispositivos iPhone (320px × 480px) y iPad (768px × 1024px). Como hemos establecido, en algún costumbres.net lugar más allá del punto de 800px de ancho, nuestro diseño actual comienza a verse estirado. Usaremos consultas de medios CSS en este punto para ajustar el diseño según el ancho de la pantalla. Cubriremos las consultas de medios en gran profundidad en el Capítulo 3, que se titula de manera inventiva Consultas de medios.

how to make a web page responsive using css

La práctica consiste en una combinación de cuadrículas y diseños flexibles, imágenes y un uso inteligente de consultas de medios CSS. A medida que el usuario cambia de su computadora portátil a iPad, el sitio web debe cambiar automáticamente para adaptarse a la resolución, el tamaño de la imagen y las capacidades de creación de secuencias de comandos. También es posible que deba considerar la configuración de sus dispositivos; si tienen una VPN para iOS en su iPad, por ejemplo, el sitio web no debería bloquear el acceso del usuario a la página. En otras palabras, el sitio web debe tener la tecnología para responder automáticamente a las preferencias del usuario. Esto eliminaría la necesidad de una fase de diseño y desarrollo diferente para cada nuevo dispositivo en el mercado. Afortunadamente, existe una solución para este panorama de navegadores y dispositivos en constante expansión.

how to make a web page responsive using css

Cubriremos la metaetiqueta y sus diversas configuraciones y permutaciones en el Capítulo 3, Consultas de medios: compatibilidad con diferentes vistas. Con un nuevo capítulo dedicado a CSS Grid, comprenderá en qué se diferencia del mecanismo de diseño de Flexbox y cuándo debe usar uno sobre el otro. Al completar con éxito este curso, confiará en sus habilidades para diseñar un sitio web personalizado que esté optimizado para funcionar en cualquier computadora o dispositivo móvil. Desde la creación de archivos CSS hasta el diseño del diseño, el texto y los gráficos de un sitio, estará completamente capacitado para lanzar un sitio que aparecerá tal como lo pretendía, independientemente de la pantalla que usen sus visitantes. En solo 1,5 horas y a través de 11 conferencias, aprenderá todo lo que necesita saber para crear un sitio web deslumbrante con CSS3 y HTML5. Comprenderá cómo hacer que su sitio sea compatible con versiones anteriores de los navegadores antiguos y cómo configurarlo utilizando reglas CSS para que se ajuste a cualquier tamaño de pantalla mientras optimiza las velocidades de descarga. Este curso, que es ideal para desarrolladores web, diseñadores gráficos, expertos en usabilidad y diseñadores de interacción, incluso le proporcionará plantillas de CSS, HTML y Photoshop que puede utilizar para diseñar sus propios sitios.

¿Qué es el diseño web adaptable?

how to make a web page responsive using css

Un diseño web receptivo, construido con HTML y CSS, permite que un sitio web «simplemente funcione» en múltiples dispositivos y pantallas. Permite que el diseño y las capacidades de un sitio web respondan a su entorno (tamaño de pantalla, tipo de entrada y capacidades del dispositivo / navegador). Comenzará por explorar qué hace que un sitio sea receptivo y cómo funcionan algunos patrones comunes de diseño receptivo en diferentes dispositivos. A partir de ahí, aprenderá a crear su propio diseño adaptable mediante la etiqueta de ventana gráfica y las consultas de medios CSS. A medida que avanza, experimentará con puntos de interrupción mayores y menores y optimizará el texto para su lectura.