El diseño responsive es un método de creación de páginas web que consiste en que estas se adapten a la pantalla del dispositivo. En este post, te enseñaremos un par de estrategias para preparar tus hojas de estilo para diseño responsive.
Archivo reset
Preparar hojas de estilo para diseño responsive requiere que creemos varias reglas y restricciones en nuestra página web. Te recomendamos crear un archivo CSS individual para insertar y establecer las propiedades globales y reglas de tu sitio web. Nosotros llamamos a este archivo “reset.css”, porque será un archivo que podremos llevar de un lado a otro para establecer reglas básicas y ajustar la visualización.
Puedes enlazar tu archivo CSS como una hoja de estilo en cualquier parte de tu página web escribiendo: <link rel="stylesheet" href ="ubicación del archivo"> . Una vez este archivo esté enlazado, todas las reglas, restricciones y propiedades globales que hayas definido dentro del mismo se aplicarán a tu página web.
A continuación te presentamos dos reglas que puedes implementar en tu archivo reset para hacer que tu página web se adapte al dispositivo en el que se presente:
Ajustar imágenes
Lo primero que podemos hacer desde las hojas de estilo para diseño responsive es determinar un ancho máximo para que nuestros elementos multimedia nunca se salgan de la pantalla. Decimos elementos multimedia porque, normalmente, los textos no se saldrán del ancho del viewport, sino que se ajustarán cortando frases y empezando nuevas líneas. Los elementos embebidos, como reproductores de vídeo, audio e imágenes, no suelen comportarse de esa manera. Por esto, es mejor evitar que este tipo de elementos tengan más tamaño que el propio ancho de nuestra pantalla.
Para establecer que el elemento nunca sea más grande que su contenedor, usamos la propiedad max-width. En el caso de una imagen, escribiríamos <img {max-width:100%}>. Esta frase determina que la imagen solo puede ocupar, como mucho, el cien por ciento del ancho de su contenedor. Aunque no parece mucho, insertar esta simple propiedad hace que nuestra página web sea mucho más legible.
Si el usuario decide que quiere dividir su pantalla en dos y ver nuestra página web en un tamaño diferente, las imágenes se adaptarán a ese tamaño. Además, esto elimina la barra de navegación de izquierda a derecha, que puede ser molesta para la experiencia de usuario en la web. Finalmente, hace que las imágenes de distintos tamaños parezcan tener unidad, porque todas están limitadas por un contenedor del mismo tamaño, haciendo que tengan la misma proporción.
Tipografía general
Otra regla que podemos establecer en nuestras hojas de estilo para diseño responsive es determinar una tipografía general y sus reemplazos en caso de que el navegador no encuentre la tipografía. A la hora de diseñar una página web, te recomendamos utilizar fuentes sin serifas o adornos, porque son más legibles a nivel de pantalla. Las fuentes serifadas las puedes mantener como estilos para títulos. Ten en cuenta que utilizar varias tipografías puede saturar el diseño de tu página web, intenta usar máximo dos o tres fuentes.
Puedes insertar fuentes en tus hojas de estilo de diferentes maneras. Si estás descargando una tipografía de Google Fonts, el mismo programa te da dos opciones: la primera es un link que enlazamos en la página en donde queremos incluir la tipografía; la segunda opción es un @import con el que insertaremos la fuente usando un CSS externo que nos da Google. La opción que elijamos para insertar nuestra fuente dependerá de la aplicación que estemos haciendo. La opción del link requiere que importemos el link en la cabecera de cada página HTML o CSS que tengamos y en la que queramos la tipografía.
En este caso, te recomendamos importar la tipografía directamente dentro del estilo usando @import, porque estamos estableciendo reglas generales para la página web y no queremos tener que repetirlas en cada archivo que tengamos. Además, como la tipografía se usa para sobrescribir los estilos del navegador, la insertaremos en nuestro archivo reset.
Después de insertar la tipografía usando @import, estableceremos sus reglas en nuestro archivo reset. En este archivo CSS utilizaremos un selector global (*) para determinar que todos los elementos tengan nuestra tipografía. Puedes leer este post para ampliar tus conocimientos sobre los tipos de selectores que hay en CSS.
Suponiendo que nuestra tipografía es Roboto, escribiríamos nuestra regla así:
*{ font-family: Roboto, Arial, Helvetica, sans-serif; }
Las tipografías que van después de Roboto funcionan como un reemplazo. En el caso de que el navegador no encuentre la tipografía, utilizará Arial, Helvetica o cualquier fuente sans-serif que tenga a disposición. Siguiendo el diseño responsive, esto nos permite adaptar la página web a las necesidades del navegador.
Ahora que sabes qué es el diseño responsive y cómo empezar implementarlo creando hojas de estilo para diseño responsive, ¡es el momento de que sigas aprendiendo sobre la creación de sitios web! Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp. Allí, entre muchas otras cosas, continuarás aprendiendo sobre CSS y HTML para crear tu propia página web adaptable usando estas poderosas herramientas. ¡Anímate a matricularte!
