OmbuShop Crea Tu Tienda Online

Tipografía y diagramación responsive con CSS

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Que el diseño web ha cambiado mucho en los últimos años no es novedad. La aparición de dispositivos de diversos tamaños capaces de navegar la web, obligó a cambiar el paradigma de diseño de páginas. Nuestras herramientas gráficas como grillas y niveles de lectura, entre otras, deben ser actualizadas.

Tradición gráfica

La diagramación básica de los sitios web que utilizamos aún hoy, viene de una larga tradición gráfica que data de los tiempos de Gutenberg, e incluso más atrás en el tiempo.

Gutenberg Bible

Tradición gráfica

El concepto de una grilla que sostiene la estructura de la página —márgenes, columnas, calles— nos precede. Ya incluso Gutenberg y sus seguidores imitaron los incunables que realizaban los copistas previos a la utilización de prensas con tipos móviles.

Muchos siglos después, cuando los diseñadores gráficos comenzamos a trabajar en este nuevo medio llamado World Wide Web, utilizamos las mismas convenciones gráficas para el diseño de páginas web. Creamos grillas utilizando ciertas medidas, múltiplos y submúltiplos para poder armar el layout de nuestras páginas según la mejor tradición gráfica que todo lector estaba acostumbrado a interpretar.

El desafío

Una de las problemáticas gráficas a resolver en cuanto a la diagramación de páginas web fue la falta de un formato fijo: es decir, dimensiones de ancho y alto fijas para el plano en el que debíamos trabajar.

La solución que se extendió fue la de “simular” una página tangible dentro del navegador web. Por medio de etiquetas de HTML se definía un área, que luego se diseñaba con CSS para mantener ciertas medidas fijas de ancho y alto, de forma tal que el diseñador pudiese trabajar como siempre: sobre una hoja. Incluso la apariencia de dicha área dentro del navegador en muchos casos se asimilaba a la de una hoja que descansaba sobre un fondo (en muchos casos con una textura, como si se tratara de una hoja blanca sobre un escritorio).

Este punto fue el origen del mal: convirtió al HTML —que era responsive por naturaleza— en un formato fijo que simulaba las características del mundo tangible.

Browser fixed width

¿Cuál es el problema con esta solución a la falta de dimensiones para trabajar? Mientras utilizábamos computadoras de escritorio con monitores de tamaños más o menos estandarizados, ninguno. El problema empezó cuando aparecieron los dispositivos móviles con pantallas de tamaños muy diversos: en muchos casos esta “hoja” ficticia a la cual asignábamos un tamaño fijo ya no entraba en las dimensiones de la pantalla, por lo que el usuario estaba obligado a hacer scroll hacia los costados para leer cada una de las líneas de un párrafo.

Situación actual

Hoy en día, que una página web sea responsive —es decir, que su diagramación y el tamaño de sus elementos responda al tamaño de la ventana del navegador o dispositivo en cuestión— dejó de ser una opción; se trata de una necesidad.

Los sitios web que diseñamos deben verse bien en monitores grandes, medianos, pequeños, tabletas, celulares y cuanto dispositivo ande dando vueltas por el mundo.

Esto nos obliga a repensar la situación de la “hoja” ficticia y volver a las bases: una página web como formato que nos permite un diseño que se adapte a las necesidades de cada usuario.

Medidas absolutas no, proporciones sí

La forma en la que tradicionalmente armábamos el layout, con diferentes columnas y áreas de contenidos era a través de medidas absolutas expresadas en pixels. Por lo general se trataba de los anchos de las cajas (width).

Si queremos que nuestro layout sea responsive por completo, debemos comenzar a expresar las medidas como proporciones relativas, antes que como medidas absolutas. A continuación, en ejemplo que muestra la manera de expresar dos columnas paralelas sin especificar ninguna medida de forma absoluta.


#contenedor {
margin: 20px auto;
width: 80%;
background: #000;
padding: 20px;
font-family: Helvetica, Arial, sans-serif;
overflow: auto;
}

#principal {
float: left;
width: 70%;
background: #2BA47D;
}

#secundario {
float: right;
width: 28%;
margin-left: 2%;
background: #ffffdf;
}
See the Pen wiIfs by Lucas Mourelle (@lucasmourelle) on CodePen.
0

 

Media Queries

Cuando se utilizan medidas en porcentaje, se definen proporciones que pueden quedar mal en casos límite como monitores muy pequeños (o muy grandes). La forma de evitar estos problemas es a través de la tecnología de CSS llamada Media Queries, que nos permite definir ciertas reglas siempre y cuando se cumpla una condición (por ejemplo de tamaño del monitor):


#contenedor {
margin: 20px auto;
width: 80%;
background: #000;
padding: 20px;
font-family: Helvetica, Arial, sans-serif;
overflow: auto;
}

#principal {
float: left;
width: 70%;
background: #2BA47D;
}

#secundario {
float: right;
width: 28%;
margin-left: 2%;
background: #ffffdf;
}

@media screen and (max-width: 500px) {
#principal {
float: none;
width: 100%;
margin-bottom: 20px;
}

#secundario {
float: none;
width: 100%;
margin-left: 0;
}
}

See the Pen ljBFi by Lucas Mourelle (@lucasmourelle) on CodePen.
0

En el ejemplo se ve cómo al achicar la ventana del navegador a una situación posiblemente problemática, las columnas dejan de estar una al lado de la otra y pasan a ocupar todo el ancho disponible.

Cuerpo tipográfico relativo

Para poder controlar de forma relativa y fácilmente el tamaño del texto —es decir: el cuerpo tipográfico— lo que podemos hacer es definir una medida base, en pixels, para la etiqueta body, y luego indicar el font-size de cada uno de los elementos de la página de forma relativa a dicha medida. Para esto, podemos expresar las medidas subsiguientes en la unidad de medida llamada em.


h1, h2, h3 {
font-weight: bold;
font-size: inherit; /* reset browser sizes */
}
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.4;
}
h1 {
font-size: 2em; /* 32px */
}
h2 {
font-size: 1.5em; /* 24px */
}
h3 {
font-size: 1.25em; /* 20px */
}
p {
font-size: 1em; /* 16px */
}

See the Pen miaks by Lucas Mourelle (@lucasmourelle) on CodePen.
0

¡Los invitamos a realizar maravillosas tiendas responsive en OmbuShop!