Share
Los diseños fluidos son la manera perfecta de alojar nuestro contenido en cualquier tamaño de vista. El texto puede fluir a medida que los contenedores crecen y se encogen, las imágenes e incluso el video y los marcos pueden flexionarse y aplastarse también. Pero ¿y si tenemos contenido que no debería alterar dimensiones? ¿Qué pasa con los bloques de anuncios, por ejemplo, que a menudo están diseñados con un tamaño muy específico en mente? Por extraño que parezca, aquí es donde los diseños de tablas vienen al rescate ...
Hace poco me acordé de esto cuando leí el diseño de Implementing Responsive de Tim Kadlec. Llegó justo en el momento adecuado también; Estaba en medio de un proyecto de cliente que necesitaba solo este enfoque (y estaba ocupado matándolo).
Muchos sitios web dependen de los ingresos por publicidad. Sin embargo, es posible que no te guste que te ofrezcan imágenes de marketing web, sin ellas no tendrías acceso a gran parte del contenido gratuito al que te has acostumbrado. Tuts +, por ejemplo, depende en parte de los ingresos por publicidad para mantener su equipo de escritores y personal en constante crecimiento.
El Interactive Advertising Bureau (iab) es responsable de una gran cantidad de publicidad digital y trabaja arduamente para definir estándares y pautas para toda la industria. Eche un vistazo a sus Pautas de publicidad gráfica para obtener una referencia de los tamaños de bloques de anuncios universales que recomiendan:
Cuatro imágenes de dimensión fija. Y es importante que permanezcan en esas dimensiones también; los logotipos, líneas y exenciones de responsabilidad podrían volverse irreconocibles o ilegibles si se los aplasta en un diseño fluido. Además, las compañías que pagan por estos anuncios lo hacen en función del tamaño y la posición de los bloques. Un anuncio de 300x250px puede no ser tan prominente o efectivo cuando se muestra en un tamaño más pequeño, lo que perjudica a la compañía en cuestión.
Los anuncios están diseñados para mostrarse en un tamaño fijo, así que hasta que tengamos una mejor solución para la publicidad receptiva, es mejor respetar eso.
Construyamos rápidamente un diseño fluido genérico para demostrar nuestro problema. UNA , que contiene una y un . Todo lo que necesitamos:
Entonces podemos estilizarlo así:
sección ancho: 90%; margen: 0 auto; a un lado ancho: 30%; flotador izquierdo; articulo ancho: 65%; flotar derecho; img ancho máximo: 100%;
Con un poco de color agregado, este es el efecto que lograrás:
Con nuestro img ancho máximo: 100% Por regla general, nos hemos asegurado de que nuestras imágenes sean fluidas y nunca salgan de su contenedor principal. Tristemente, nuestro fluido aparte es más estrecho aquí que el ancho de 300px de la imagen, justo lo que no queremos que suceda.
Vamos a arreglar el ancho del lado, dejando el artículo para hacer la flexión. Como una combinación de fijo y fluido, nos referimos a este tipo de diseño como híbrido.
sección ancho: 90%; margen: 0 auto; a un lado ancho: 300px; flotador izquierdo; articulo ancho: 65%; flotar derecho; img ancho máximo: 100%;
Esto funciona en pantallas más anchas, pero tan pronto como el contenedor se vuelve demasiado pequeño, es decir: cuando 300px es más del 35% del ancho del contenedor, el artículo se empuja hacia abajo:
Podemos resolver esto en nuestro caso cambiando el margen de beneficio; colocando el lado en el artículo:
Luego, eliminando el ancho y el flotador del artículo, finalmente otorgando al margen un margen derecho para actuar como la canaleta:
sección ancho: 90%; margen: 0 auto; a un lado ancho: 300px; flotador izquierdo; margen derecho: 5%; artículo img ancho máximo: 100%;
Esto es lo que obtenemos:
Que es perfecto! ¡El contenido del artículo es fluido, mientras que el bloque de anuncios y su padre aparte tienen un ancho fijo! Incluso puede cambiar el lado a la derecha, cambiando el flotador a flotar derecho y colocando la canaleta (su margen) en el otro lado también.
Sin embargo, surgen problemas cuando el contenido del artículo comienza a ocupar más espacio vertical que el contenido. Este es el resultado:
Hay hacks para evitar esto; Podríamos dar a un lado un relleno de fondo masivo, luego un igual de masivo negativo margen inferior. Entonces con un desbordamiento: oculto Alargamos artificialmente el lado, ocultando lo que sobresale.
O podríamos usar el posicionamiento y arreglar el lado en la parte superior derecha del artículo, dándole al artículo algo de relleno para dejar espacio para él..
Ninguno de estos es ideal, cada uno presenta sus propios problemas únicos..
Qué?! Te oigo decir ...
Está bien. Los diseños de las mesas (que Dios descanse en sus almas) eran bastante buenos para organizar diseños híbridos, así que saquemos una hoja de su libro. Usando CSS podemos mostrar nuestros elementos como si fueran componentes de una tabla. Esto está absolutamente bien también; no estamos usando tablas reales en nuestro marcado (sería malo ya que no estamos trabajando con datos tabulares). Simplemente vamos a apoyarnos en las mesas para propósitos de exhibición., Sin cambiar el significado semántico. de nuestro documento.
Volviendo a nuestro diseño original (donde el lado y el artículo estaban lado a lado) podemos alterar el CSS para sugerir bloques de construcción tipo tabla. Nuestra sección contenedora se convierte en la tabla, el artículo y aparte se convierten en las celdas de la tabla dentro de ella:
sección pantalla: tabla; ancho: 90%; margen: 0 auto; aparte display: table-cell; ancho: 300px; artículo display: table-cell; img ancho máximo: 100%;
Lo que nos da:
Hmm, no del todo bien. Necesitamos alterar la alineación vertical de nuestras celdas, porque la imagen y el texto aquí están sentados en la misma línea de base.
aparte display: table-cell; alineación vertical: superior; ancho: 300px; artículo display: table-cell; alineación vertical: superior;
Ahora, cada vez que el artículo o el artículo a un lado crecen verticalmente, el otro crece con él. Sin embargo, el acuerdo depende del DOM; el elemento de celda de la tabla que aparece primero en el documento también aparece primero (a la izquierda) de nuestro diseño de tabla.
Y, por supuesto, también podemos envolver todo esto en una consulta de medios, de modo que este diseño solo se active en pantallas más grandes. En pantallas más pequeñas, el lado se sentará cuidadosamente sobre el artículo. Echa un vistazo a la demostración para ver cómo se comporta esto..
El uso de la visualización de tablas CSS es compatible con todos los navegadores modernos, pero solo fue adoptado por Internet Explorer con el lanzamiento de IE8.
Por lo tanto, para los navegadores anteriores, sería prudente incluir condicionalmente una hoja de estilo alternativa, que le ofrezca una solución de diseño alternativa:
(o simplemente puedes ignorar IE7 y más abajo ...)
Como Tim también menciona en su libro, los teléfonos con Windows 7 también se cargarán en los estilos ie.css que acabamos de configurar. Para evitar que eso suceda, deberás alterar las condiciones:
Así que ahí lo tenemos, ¿quién hubiera pensado que los diseños de tablas podrían ayudarte en esta era de diseño web sensible? Es cierto que esta no es la solución perfecta que puede haber deseado, pero hasta que CSS Grid Layout y Flexbox ganen un poco más de tracción, esta es una excelente alternativa..
Accentsconagua