Nuestros títulos son la introducción a nuestra página web. Por ello, su diseño debe ir acorde a la estética de nuestra marca y su posición debe mejorar la experiencia de navegación. Es importante que esta experiencia sea igual de buena para el usuario sin importar el dispositivo desde el que acceda. Por eso, en esta ocasión, te enseñamos cómo posicionar y diseñar títulos para diseño responsive.
Antes de posicionar y diseñar títulos responsive
A la hora de posicionar y diseñar títulos para diseño responsive, al igual que en muchas de las actividades que requieren modificar los elementos HTML de nuestra página web, es recomendable tener presente los selectores que podemos usar para elegir nuestros elementos en CSS. Si tienes dudas sobre qué selectores usar, te recomendamos leer nuestros artículos sobre selectores básicos y selectores múltiples en CSS.
Posicionar títulos para diseño responsive
Para posicionar nuestros títulos para diseño responsive, podemos utilizar la propiedad position. Con esta propiedad, es muy sencillo hacer que el título responda a lo cambios de la página web.
Te ponemos un ejemplo: piensa que tus títulos son un elemento h1 y un elemento p que están contenidos en un elemento padre header.
Normalmente, un elemento header ya tendrá un posicionamiento dentro de la página web. Entonces, puedes situar este elemento siguiendo el posicionamiento clásico de CSS y darle una propiedad position:relative. Recuerda que esto te permite desplazar la posición automática del elemento usando las palabras clave top, bottom, right y left. Luego, puedes otorgarle a los elementos h1 y p un posicionamiento absoluto con la propiedad position: absolute.
Recuerda que esta posición hará que el elemento tome como referencia la posición de su elemento padre, en este caso el header.
Si usas los selectores múltiples, puedes hacer que tanto el h1 como el elemento p tengan las mismas características de posición. Entonces, podrás usar las unidades de medida de CSS y las palabras clave para definir en qué lugar quieres situarlos. En la mayoría de los casos, esto solo será útil para definir la posición horizontal con left y right, pues podemos alinearlos al mismo lugar. Sin embargo, a la hora de definir su posición vertical, seguro que quieres que estén en lugares distintos, uno debajo del otro. En ese caso, deberás usar el selector de cada elemento, sea de clase, de ID o de tipo.
Como el diseño web responsive cree en la modificación de características de manera automática, la mejor forma de determinar nuestras características en el código es hacerlas interdependientes. Por ello, te sugerimos definir la posición de los títulos para diseño responsive usando las variables y cálculos de CSS. Esto hará que tus posiciones dependan de la posición de otros elementos, haciendo que se modifiquen todos los elementos cuando uno solo cambie.
En el caso de que tengas dos títulos, como sucede en nuestro ejemplo, te sugerimos posicionarlos verticalmente usando palabras clave opuestas. Esto hará que la distancia entre los dos elementos se mantenga igual sin importar que el tamaño de la pantalla cambie, pues se basan en bordes opuestos. Si se basaran en el mismo borde, cuando el h1 crezca o decrezca en número de líneas la distancia con respecto al p cambiará. Tampoco te recomendamos basar la posición del elemento p en el h1, pues este cambiará de tamaño y pueden llegar a obstaculizarse.
Diseñar títulos para diseño responsive
CSS tiene muchas posibilidades para el diseño de nuestros textos y elementos. Si lo que quieres es saber sobre las propiedades para estilizar tus textos o fuentes, te recomendamos consultar las propiedades fundamentales en Mozilla Developer Network. En este post, lo que te enseñaremos es cómo diseñar tus títulos para diseño responsive. Es decir, queremos que se adapten a las necesidades de tu página web.
Para esto, te sugerimos el uso de las media queries de CSS. Un media query o consulta de medios es una directiva que hace que el navegador consulte el estado de la máquina antes de implementar ciertas características. Entonces, podemos usar esta herramienta para hacer que nuestros títulos tengan diseños distintos según el dispositivo que se esté usando. Podemos, por ejemplo, añadir propiedades para que el texto se vea incluso cuando la imagen de fondo cambie o se mueva.
Las propiedades text-shadow y background-color pueden ayudarnos a hacer que el texto se vea, pero puede que no siempre las queramos tener, por ello usamos media queries.
Ahora que sabes cómo posicionar y diseñar tus títulos para diseño responsive, ¡es hora de aplicar estos conocimientos en tu propia página web! Para seguir aprendiendo sobre desarrollo web para crear tu propia página, una que sea modificable y amigable con el usuario usando el diseño web responsive, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp. ¡No te pierdas esta oportunidad e inscríbete para convertirte en un experto!
