Contención en una disposición de diseño web
Hay dos variaciones de mecanismo: encapsulación estricta, donde el elemento es contenido totalmente dentro de un cuadro; y contención suave, donde el cuadro es sugerido usando la cascada jerárquica y el espacio en blanco.
Estricto: Encapsulación
Aquí es donde usted muestra que un elemento es parte de, o un retoño de, o relacionado con (en una dirección), otro elemento, colocando al retoño dentro de los bordes de su elemento padre. El elemento padre debe ser simplemente identificado por una etiqueta que esté ya sea dentro del cuadro y hacia el origen, o ubicándolo en el borde del cuadro.
" Web host en Mexico en Okhosting.com, visitanos y contrata tu plan de hosting y dominio al mejor precio, aprovecha nuestras promociones en registro de dominios . MX "
En este ejemplo, los tres paneles pertenecen claramente al grupo "Home page - Features", porque la barra de título define un cuadro que contiene los tres objetos de más abajo.
Aquí, el título describe los tres objetos retoño: son todos "Elementos en la página de inicio"
Alternativamente, podría simplemente haber un cuadro dentro de otro cuadro que esté identificado de otro modo (p.ej. links asociados con este documento).
Más suave: Cascada jerárquica
Ésta es una alternativa más suave a una encapsulación más literal. No depende de que el elemento 'superior' acompase realmente al elemento 'inferior', pero la contención es sugerida a través de superioridad visual. El elemento 'superior' debe ser presentado cerca de los elementos 'inferiores' o retoño, y hacia el origen (ya sea hacia la izquierda, o hacia arriba, o ambos).
Aunque no hay un cuadro físico de contención, el título "Bargain flights" se aplica obviamente a todos los objetos de la lista.
Esto es sugerido porque el título está situado entre la lista y el origen de la página, y reforzado por la barra de título proyectándose un poco más a la izquierda (hacia el origen) que la lista, y supera su ancho total.
Los 3 tipos de casas pertenecen todos a la categoría "Three-bedroomed Homes" (Casas de tres dormitorios)
Aunque el título "Three-bedroomed homes" no supera el ancho total de los elementos retoño, se proyecta ligeramente a la izquierda de su borde izquierdo, y no existe otro elemento en el cuadro de imágenes creado por el espacio en blanco.
Ejemplo de demasiada encapsulación
Ésta página usa demasiada encapsulación, con el resultado de que todo se ve separado, sin nada relacionado con nada. Además no se sabe a dónde mirar primero.
Varias secciones autocontenidas, como el encabezado azul, crean obstáculos a lo largo del ancho del área de contenido
La única manera de mantener relaciones visuales en este escenario sería usar un alineamiento estricto, dándoles diferentes sangrías a los elementos para sugerir sus relaciones. La navegación alineada al centro aquí es particularmente inefectiva.
Ejemplo de encapsulación incompleta
Este recorte muestra cuadros incompletos. Su encapsulación fue iniciada pero no finalizada.
Pienso que el resultado final es peor que tener todos los cuadros o sólo usando espacios en blanco y sin cuadros. Causa una ilusión que el cerebro encuentra inquietante.