5 consejos útiles para crear diseños receptivos

Imagina que has hecho todo el trabajo duro para hacer un diseño realmente genial. Pero luego, cuando haces que la ventana de tu navegador sea un poco más pequeña, encuentras algo que se desborda. Lanza una consulta de medios para solucionar el problema. Pero al cambiar el tamaño de la ventana, nota que algo más se ha roto.

Esto es algo que la mayoría de los desarrolladores de CSS experimentarán en algún momento. Pero afortunadamente, tenemos varias soluciones CSS modernas que hacen que sea mucho más fácil desarrollar cosas y hacer que funcionen bien. Este artículo explora 5 prácticas útiles a tener en cuenta al desarrollar sitios web. Estos consejos te ayudarán a evitar molestos cortes en tu diseño.

1. Comience con una hoja de estilo global

Siempre comience con un estilo global al escribir CSS. No te preocupes por el diseño. En su lugar, establezca estilos genéricos como tipografía, colores y fondos. Restablezca los márgenes, elimine los subrayados de los enlaces, etc.

Una vez que haya terminado con el estilo general, puede comenzar a crear el diseño y orientar elementos individuales dentro del diseño. Básicamente, comience desde la parte superior y luego muévase hacia los elementos.

El siguiente ejemplo de CSS restablece el margen de todos los elementos a 0, define la tipografía y el color de todos los encabezados principales y agrega un margen uniforme a todos ellos:

cuerpo,
h1,
h2,
h3,
pag {
margen: 0;
}
h1,
h2,
h3 {
color: azul;
Familia tipográfica: "verdana" sans-serif;
peso de fuente: 900;
altura de la línea: 1;
}
h2,
h3,
pag {
margen inferior: 1movimiento rápido del ojo;
}

Ahora que tiene todos los estilos base definidos, puede construir desde allí. Por ejemplo, puede agregar relleno al elemento contenedor. Esto alejará el contenido de los bordes de su navegador. Entonces puedes aplicar un anchura máxima a las imágenes, para que puedan adaptarse al ancho de su contenedor. El punto es comenzar con los elementos generales antes de apuntar a elementos específicos.

Una vez más, el diseño será receptivo. Entonces, a medida que cambia el tamaño de la pantalla, el tamaño de los elementos cambiará en consecuencia. Como desarrollador, debe conocer estos consejos y trucos de CSS ya que pueden llevar su productividad al siguiente nivel.

2. Evite los tamaños fijos

Cuando comienza a pensar en diseños, lo primero que debe tener en cuenta es evitar los tamaños fijos. Los tamaños fijos se refieren a propiedades como ancho: 1000px, altura: 200px, etcétera. Establecer una altura o un ancho fijo solo le causará problemas a largo plazo.

En su lugar, utilice alturas y anchuras adaptables. Una forma es usar min-altura y ancho mínimo en lugar de altura y ancho. Por ejemplo, suponga que establece el ancho de un elemento en 600 px. Cuando vaya a menos de 600 px, el contenido se desbordará:

En su lugar, debe cambiar la propiedad de ancho a anchura máxima. Con anchura máxima, se permitirá que el elemento se reduzca a medida que se reduzca la ventana del navegador. Y si la ventana se ensancha, el texto volverá a expandirse a su longitud original. Aquí está el resultado:

Esto es lo mismo para altura. Por ejemplo, suponga que establece el altura de un encabezado a un valor fijo de 200px.

encabezamiento {
altura: 200píxeles;
mostrar: red;
colocar elementos: centro;
}

Esto centra todo perfectamente en el encabezado. Pero cuando estrechas la ventana del navegador, el contenido eventualmente saldrá de su contenedor. Y esto se debe a que establece una altura fija en el encabezado.

Generalmente, altura y ancho ambas son propiedades peligrosas. La solución es utilizar la altura y los anchos adaptables, es decir, min- y Altura máxima, y min- y anchura máxima. En estos casos, si el navegador se encuentra con situaciones en las que el contenido se alarga, el encabezado crecerá para adaptarse a eso.

éste es uno de Errores de CSS más comunes que debes evitar.

3. Recuerde que su sitio web es responsivo por defecto

Tenga en cuenta que su sitio web responde incluso antes de escribir una sola línea de código CSS. Esta mentalidad puede ayudarlo a evitar complicar demasiado el proceso de diseño. El diseño funcionará en pantallas grandes y pantallas pequeñas. Puede que no sea bonito. Incluso podría ser difícil de leer en pantallas grandes. Pero el sitio web se adapta a la ventana gráfica sin importar su tamaño.

Por supuesto, las imágenes pueden desbordarse y el texto puede ser demasiado pequeño. Pero no vas a perder nada con el diseño predeterminado. Su texto no se romperá y todos los elementos serán visibles en la pantalla.

Comprender y aceptar este hecho puede ser de gran ayuda cuando escribes tu código CSS. Cuando tenga problemas, estará seguro de que el error proviene del CSS que escribió. Esto hace que sea más fácil encontrar el problema y solucionarlo.

Intente usar consultas de medios solo para agregar complejidad. Por ejemplo, cuando desea que su diseño tenga tres columnas en pantallas más grandes. De lo contrario, no los use. Para profundizar en las consultas de los medios, lea nuestro guía de consultas de medios.

Aquí hay un escenario. Imagine que el elemento con un nombre de clase de .dividir tiene tres elementos en su interior. Con el siguiente CSS, se creará un diseño de tres columnas:

.dividir {
mostrar: doblar;
dirección de flexión: fila;
brecha: 2movimiento rápido del ojo;
}

En pantallas más pequeñas (40em de ancho o menos), querrá que todo ocupe una sola columna. Así que harías esto:

@medios de comunicación(anchura máxima: 40em) {
.dividir {
mostrar: bloquear;
 }
}

Aquí, está anulando la alineación predeterminada (tres columnas). Pero la consulta de medios es innecesaria porque el navegador usa bloqueo de pantalla por defecto. Así que no tienes que definirlo explícitamente.

Con eso en mente, podría refactorizar su código para usar una sola consulta de medios que se aplique solo a pantallas grandes. Allí cambiará a tres columnas cuando la pantalla sea más ancha que 40em:

@medios de comunicación(anchura máxima: 40em) {
.dividir {
mostrar: doblar;
dirección de flexión: fila;
brecha: 2movimiento rápido del ojo;
 }
}

En pantallas pequeñas, el navegador apila todo en una sola columna. Pero no tienes que especificarlo porque el navegador usa bloqueo de pantalla por defecto. Por lo tanto, solo ha utilizado consultas de medios para agregar complejidad.

Entonces, en lugar de agregar la complejidad y luego tener que anular un montón de propiedades, ahora está agregando la complejidad cuando la necesita. La mayoría de las veces, solo necesitarás ancho mínimo preguntas de los medios. Comience con dispositivos móviles primero, luego, cuando el sitio se vea bien en dispositivos móviles, agregue la complejidad (por ejemplo, columnas) para la versión de escritorio.

5. Aprovecha el CSS moderno

Con los enfoques modernos de CSS, puede evitar la mayoría de los problemas de alineación y los puntos de interrupción y avanzar hacia el logro del diseño intrínseco.

Una forma de hacerlo es:

h1 { tamaño de fuente: abrazadera (3rem, 1rem + 10vw, 7rem)}

Esto sujeta el h1 entre un tamaño de fuente mínimo y máximo. Lo más pequeño a lo que queremos que vaya es 3 rem y el mas alto es 7 rem. El medio es sobre lo que iteraremos (1 rem + 10 vw). Como resultado, el título se reducirá automáticamente a medida que la ventana gráfica se haga más pequeña y crecerá a medida que se haga más grande.

Más información sobre CSS moderno

CSS ha evolucionado mucho a lo largo de los años. Hoy tenemos nuevos y mejores enfoques para posicionar elementos en CSS. En este artículo, mencionamos algunas de estas prácticas y destacamos cómo pueden ayudarlo a evitar errores de diseño comunes. Una de las mejores formas de aprender CSS moderno es mediante un enfoque práctico, como usar CSS moderno para diseñar una tabla HTML.