El Papel de los Diseños de Tablas y en el Diseño Web Responsivo

() translation by (you can also view the original English article)

Los diseños de página fluidos son la manera perfecta para que nuestro contenido se adapte a cualquier tamaño de ventana. El texto puede fluir conforme su contenedor crece y decrece, las imágenes e incluso los vídeos y los iframes pueden también ser flexibles y contraer su tamaño. Pero ¿qué pasa si tenemos contenido que no debería alterar dimensiones? ¿Qué pasa con los bloques de anuncios, por ejemplo, que con frecuencia se diseñan con unas medidas muy específicas en mente? Curiosamente, aquí es donde el diseño con tablas sale a nuestro rescate...

Recordé esto recientemente mientras leía el libro de Tim Kadlec Implementing Responsive Design (Implementar el Diseño Responsivo). Además, sucedió en el momento oportuno; me encontraba en medio de un proyecto para un cliente que necesitaba precisamente este enfoque (y estaba increíblemente liado diseccionándolo).

Anuncios en la Web

Muchos sitios web depende de sus ingresos publicitarios. Por mucho que no te guste ser bombardeado con imágenes web promocionales, sin él no tendrías acceso a gran parte de los contenidos gratuitos a los que te has acostumbrado. Tuts+, por ejemplo, se basa en parte en un modelo de ingresos publicitarios para mantener a su equipo de articulistas y empleados, que además está en continuo crecimiento.

La oficina de publicidad interactiva (iab) es responsable de una enorme cantidad de publicidad digital y trabaja duro definir normas y directrices para toda la industria. Echar un vistazo a sus pautas de publicidad de la pantalla para obtener una referencia de la publicidad universal de tamaños de bloque se los recomiendo:

Rectángulo Medio 300x250px

Rectángulo 180x150px

Rascacielos Ancho 160x600px

Tablero 728x90px

Cuatro imágenes de dimensión fija. Y además es importante que permanezcan dentro de esas dimensiones; los logos, los lemas o eslogans y los avisos legales de responsabilidad podrían quedar convertidos en irreconocibles o ilegibles si quedan aplastados en un diseño fluido. También, las empresas que pagan por estos anuncios los hacen basándose en el tamaño y la posición de los bloques. Un anuncio de 300x250px puede no ser tan prominente y efectivo cuando aparezca en un tamaño más pequeño, restando así a la empresa en cuestión.

Los anuncios están diseñados para mostrarse con un tamaño fijo, así que hasta que tengamos una mejor solución para la publicidad responsiva, es mejor que los respetemos.

Diseño Fluido

Construyamos rápidamente nosotros mismos un diseño fluido genérico para demostrar nuestro problema. Una <section>, que contenga un <article> y una columna lateral, <aside>. Todo lo que necesitamos:

<section>
  <aside>
	
		<!--here's our ad block-->
	
	</aside>
	<article>
	
		<!--here's a load of content-->
	
	</article>
</section>

Después podemos aplicarle estilo de la siguiente manera:

section {
	width: 90%;
	margin: 0 auto;
}

aside {
	width: 30%;
	float: left;
}

article {
	width: 65%;
	float: right;
}

img {
	max-width: 100%;
}

Añadiendo un poco de color, este es el efecto que lograrás:

Con nuestro regla img {max-width: 100%} nos hemos asegurado que nuestras imágenes sean fluidas y nunca sobresalgan de su contenedor primario. Lamentablemente, nuestro lateral fluido es más estrecho de los 300px de ancho de la imagen, algo que no queremos que ocurra.

Maquetación híbrida

Solucionemos el problema de la anchura de la columna lateral, dejando que sea el artículo el que se ocupe por sí solo de la flexibilidad. Como combinación de fijo y fluido, nos referiremos a este tipo de diseño como híbrido.

section {
	width: 90%;
	margin: 0 auto;
}

aside {
	width: 300px;
	float: left;
}

article {
	width: 65%;
	float: right;
}

img {
	max-width: 100%;
}

Esto funciona en pantallas más amplias, pero tan pronto como el recipiente llega a ser demasiado pequeño, es decir: cuando 300px es más del 35% del ancho del contenedor, el artículo es empujado debajo:

Podríamos solucionar esto en nuestro caso cambiando el código; colocabndo la columna en el artículo:

<section>
	<article>
		<aside>
		
			<!--here's our ad block-->
		
		</aside>
	
		<!--here's a load of content-->
	
	</article>
</section>

A continuación, eliminando la anchura y el la propiedad float del artículo, y dando al final a la columna un margen derecho para que actúe como medianil:

section {
	width: 90%;
	margin: 0 auto;
}

aside {
	width: 300px;
	float: left;
	margin-right: 5%;
}

article {
}

img {
	max-width: 100%;
}

Esto es lo que obtenemos:

¡Lo cual es perfecto! El contenido del artículo fluye, mientras que el bloque de la publicidad y el padre junto a éste tienen un ancho fijo! Podrías incluso llevar la columna más a hacia la derecha, intercambiando el valor de float a float: right y colocando el medianil (su margen) al otro lado también.

Sin embargo, se presentan problemas cuando el contenido del artículo comienza a ocupar más espacio vertical que la columna lateral. Este es el resultado:

Hay hacks para evitarlo; podríamos dar a la columna un padding inferior masivo, después un margen inferior negativo igual de amplio. Luego, a través de la regla overflow: hidden alargaríamos artificialmente la columna, ocultando lo que sobresale.

O podríamos usar un posicionamiento y fijar la columna en la parte superior derecha del artículo, dando al artículo algún relleno para dejarle espacio.

Nada de esto es ideal, cada método presenta sus propios problemas específicos.

Introducir el Diseño de la Tabla

¡¿Qué?! Te he escuchado decir...

Así es. Diseños de mesas (Dios descansar sus almas) eran en realidad bastante buenos en organizar diseños híbridos, así que vamos a tomar una hoja de su libro. Mediante CSS podemos disponemos de nuestros elementos que son componentes de una tabla. Esto es absolutamente fino; no estamos usando tablas reales en nuestra marca (que estaria mal ya que no estamos trabajando con datos tabulares). Simplemente vamos a apoyarse en tablas para propósitos de la exhibición, sin cambiar el significado semántico de nuestro documento.

Volviendo a nuestro diseño original (donde el aparte y el artículo fueron lado a lado) podemos modificar el CSS para sugerir tabla-como bloques de construcción. La sección que contiene se convierte en la tabla, el artículo y a un lado, se convierten en las celdas de una tabla dentro de él:

section {
	display: table;
	width: 90%;
	margin: 0 auto;
}

aside {
	display: table-cell;
	width: 300px;
}

article {
	display: table-cell;
}

img {
	max-width: 100%;
}

Que nos da:

Hmm, no demasiado bien. Necesitamos modificar la alineación vertical de nuestras celdas, porque aquí la imagen y el texto descansan sobre la misma línea base.

aside {
	display: table-cell;
	vertical-align: top;
	width: 300px;
}

article {
	display: table-cell;
	vertical-align: top;
}

Ahora, cuando el artículo o el lado crezca verticalmente, el otro crece con él. El arreglo depende de la DOM cualquier elemento de la célula tabla aparece primero en el documento también aparece primero (a la izquierda) de nuestro diseño de tabla.

Y por supuesto, podemos envolver esto todo en una consulta de los medios de comunicación, para que esta disposición sólo entra en acción en pantallas más grandes. En pantallas de menor tamaño al lado se sentará cuidadosamente sobre el artículo. Echa un vistazo a la demo para ver cómo esto se comporta.

Soporte

El empleo de la propiedad CSS table display está ya admitido por todos los navegadores modernos, pero sólo fue adoptado por Internet Explorer con la versión de IE8.

Por lo tanto, para exploradores anteriores, sería prudente incluir condicionalmente una hoja de estilos alternativa, que te ofrezca una solución específica:

1	<!--[if lt IE 8]>
2	<link rel="stylesheet" href="ie.css" media="all">
3	<![endif]-->

(o podrías sencillamente ignorar IE7 y versiones más antiguas...)

Tal y como Tim menciona en su libro, los teléfonos Windows 7 también cargan los estilos ie.css que acabamos de crear. Con el fin de evitar que esto suceda, necesitarás alterar las condiciones:

1	<!--[if lt IE 8 & (!IEMobile)]>
2	<link rel="stylesheet" href="ie.css" media="all">
3	<![endif]-->

Conclusión

Así que ahí lo tenemos, ¡¿quién hubiera pensado que los diseños de tablas podrían alguna vez ayudarte en esta era de diseño web responsivo?! Realmente, esta no es la solución perfecta que podrías haber esperado, pero hasta que CSS Grid Layout (Diseño de Retículas CSS) y Flexbox dispongan de mayor apoyo, esta es una gran alternativa.

Recursos Adicionales

Windows mobile media queries (Queries para los dispositivos móviles Windows) por Jeremy Keith
Everything You Know About CSS Is Wrong (Todo lo que sabes sobre CSS es erróneo) por Rachel Andrew
Implementing Responsive Design (Implementación del Diseño Responsivo) por Tim Kadlec
Display Advertising Guidelines