• Problemas semánticos.
• Mezcla de estructura (HTML) con presentación visual.
• Difícil de mantener.
• Problemas con lectores de pantalla.
• Problemas de tiempo de respuesta de los navegadores.

• Rígido e inflexible.
• Utilizado para versiones que deban ser impresas
• Unidades de medida absolutas (cm, mm,…).

• Muy popular.
• Se crea una capa contenedora que alberga todo el contenido de la página.
• Se asigna una anchura fija al contenedor: típicamente un tamaño de 980px, 960px o 760px.
• El contenedor se centra automáticamente cuando se muestra en una pantalla grande.
• Aparece una barra de desplazamiento horizontal cuando se muestra en una pantalla pequeña.
• Utiliza el píxel como unidad de medida principal.

Ventajas:

• Ajuste perfecto. Son sitios que hacen uso de gran cantidad de imágenes y estructuras muy complejas. Necesitan controlar exactamente el tamaño de las capas para que las imágenes acoplen perfectamente.
• Fácil de desarrollar y mantener.

Desventajas:

• Poco usabilidad en pantallas pequeñas.
• No se adaptan correctamente a dispositivos móviles.
• No se adaptan correctamente frente a un aumento de zoom o aumento del tamaño del texto.

Ejemplos:

• http://www.maxdesign.com.au/articles/css-layouts/two-fixed/
• http://www.maxdesign.com.au/articles/css-layouts/three-fixed/
• http://www.colourpixel.com/

• Utilizan unidades de medida basadas en porcentajes. El tamaño de los elementos está basado en el tamaño de los contenedores.
• Los elementos ocupan el mismo espacio independientemente del tamaño de la pantalla.
• Son la base para otros métodos modernos.

Ventajas:

• Buen manejo de los espacios en blanco.
• Más sencillo de utilizar que otros métodos.

Desventajas:

• La usabilidad en pantallas muy pequeñas o muy grandes no es demasiado buena.
• Utilizan anchura mínima o máxima para que no se desajuste demasiado el contenido.
• No hay un cambio real en la experiencia de usuario: sólo una adaptación de los tamaños. Por tanto, no hay una adaptación real a distintos tipos de dispositivos.

Ejemplos:

• http://www.maxdesign.com.au/articles/css-layouts/two-liquid/

• Utiliza la unidad de medida "em".
• El layout se ajusta al contenido.
• La anchura viene determinada por el tamaño de la fuente en el navegador del usuario.
• Se utilizan para páginas con gran contenido de texto.
• No se utiliza demasiado para el resto de sitios web.

Ventajas:

• Muy buena accesibilidad para el contenido.
• Buen control tipográfico.
• Se adaptan muy bien a pantallas pequeñas y grandes.

Desventajas:

• No tiene mucha utilidad aparte de sitios con gran contenido de texto.
• Difícil de desarrollar y mantener.

• Optimizado para resoluciones de pantalla específicas (las más habituales: teléfonos, tablets, tablets apaisadas, pantallas y pantallas grandes).
• Utiliza layouts fijos o fluidos dependiendo del dispositivo.
• Utiliza media queries CSS3 para proporcionar versiones distintas a cada dispositivo.
• Cada dispositivo carga el layout que más se adapte a él.

• Va un paso más allá del layout adaptativo.
• No hay resoluciones de pantalla específicas.
• La página entera es libre de fluir y adaptarse al espacio.
• Utiliza sobre todo layouts fluidos.
• Utiliza imágenes de tamaño flexible.
• Utiliza media queries CSS3 para corregir los errores que se producen en los puntos de ruptura del layout.

Ventajas:

• Muy buena experiencia de uso independientemente del dispositivo o tamaño de pantalla elegido.

Desventajas:

• Todos los dispositivos reciben todo el código independientemente de si lo van a utilizar o no.
• Difícil de desarrollar y testear.
• No hay un control perfecto a nivel de píxel: por tanto, puede ser difícil adaptar imágenes de tamaño fijo.

Ejemplos:

• http://designmodo.com/responsive-design-examples/
• http://foodsense.is/
• http://seesparkbox.com/

Independientemente del modelo de layout elegido, el objetivo que se persigue es:

• Proporcionar a los usuarios una buena experiencia de uso.
• Servir una página web que funcione y se comporte de manera óptima independientemente del dispositivo o tamaño de pantalla utilizado sin comprometer la experiencia de uso.

Se utilizan para layouts que no necesitan centrado vertical ni alturas de capas iguales.

Ventajas:

• Método más popular.
• Al ser el método más popular, los fallos que se producen están muy bien documentados y se han desarrollado muchos métodos para corregirlos.

Desventajas:

• Necesitan ser reseteados (clearfix). Si se utilizan media queries para personalizar la apariencia en función del dispositivo será necesario hacer un clear para cada adaptación.
• No se pueden alinear en vertical.
• Las alturas de las capas no son iguales.
• Dependen del orden en que aparezcan las capas en el HTML.

Se utilizan cuando se necesitan layouts con las siguientes características:

• Sitios que necesitan alineación vertical.
• Para evitar tener que realizar el clear de los floats cuando se utilizan media queries.
• Para realizar menús horizontales utilizando listas.

Ventajas:

• Posibilidad de alineación vertical.
• No necesitan hacer clear en diseños complejos adaptados a muchos dispositivos con media queries.

Desventajas:

• Las alturas de las capas no son iguales.
• Dependen del orden en que aparezcan las capas en el HTML.
• Tienen un fallo que consiste en crear un espacio en blanco adicional (whitespace bug) entre los elementos. La solución si utilizamos listas consiste en utilizar tipos de documento HTML5 y no cerrar los elementos <li>. En este enlace se muestra el problema.

Ejemplo de galería con inline-block: http://karenmenezes.com/inlineblockgrid/

La propiedad display: table automáticamente transforma la apariencia de una capa en la de una tabla. De esta manera se consigue un diseño basado en columnas de manera muy sencilla sin tener que utilizar tablas reales (que, recordemos, no son recomendables).

Sin embargo, para tener un control total es necesario replicar la estructura de una tabla utilizando divs, por lo que se termina cayendo en el mismo error que al diseñar utilizando tablas.

<div class="tableWrap">    
  <div class="tableBlock">    

    <div class="tableRow">
      <div class="tableCell"> </div>
      <div class="tableCell"> </div>
      <div class="tableCell"> </div>
    </div>

    <div class="tableRow">
      <div class="tableCell"> </div>
      <div class="tableCell"> </div>
      <div class="tableCell"> </div>
    </div>

  </div>
</div> 

Ventajas:

• Posibilidad de alineación vertical.
• Permite crear capas de alturas iguales.

Desventajas:

• Es necesario crear <div> adicionales para simular la estructura de las tablas. No obstante, la especificación indica que no es obligatorio.
• Dependen del orden en que aparezcan las capas en el HTML.
• Para separar las celdas no se pueden utilizar los márgenes: hay que utilizar la propiedad border-collapse del elemento padre.
• Es posible que el contenido traspase los límites de las celdas.
• Es difícil de adaptar para crear diseños responsivos con varios puntos de ruptura.
• Problemas con IE6 y IE7.

FlexBox ofrece un mecanismo muy completo para realizar layouts. Tiene una gran variedad de opciones y es muy versátil.

Para aprender a manejar FlexBox se pueden consultar estos tutoriales:

• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• https://developer.mozilla.org/es/docs/Web/Guide/CSS/Cajas_flexibles
• http://demo.agektmr.com/flexbox/

Ventajas:

• Independencia del orden en que aparezcan las capas en el HTML. Elimina la necesidad de utilizar JavaScript para esto.
• Ofrecen alineación vertical.
• Permiten crear capas con la misma altura.
• Permiten la estructura en filas o columnas de manera sencilla.
• Ofrecen una gran flexibilidad en cuanto a las opciones a utilizar.
• Las cajas pueden ocupar automáticamente el espacio disponible, crecer o menguar a petición.

Desventajas:

• Existe una especificación inicial que ha quedado desfasada (hay que tener cuidado al buscar tutoriales en Internet).
• La sintaxis es algo compleja.
• Es necesario utilizar prefijos para soportar todos los navegadores.
• No es compatible con IE9 y anteriores.

El modelo de Grid Layout (rejilla) es un modelo que está actualmente en desarrollo. Su funcionamiento consiste en definir una serie de zonas dispuestas a modo de rejilla para a continuación asignar cada capa o sección a la zona correspondiente. El borrador de la especificación está disponible en http://www.w3.org/TR/css3-grid-layout/.

Tiene múltiples ventajas, entre las que destacan las siguientes:

• Eliminación total de la necesidad de definir capas contenedoras. Bastará con tener una capa para cada área independiente de la página.
• Independencia del orden en que aparezcan las capas en el HTML.
• Independencia completa entre HTML y presentación visual.

Todavía no ha sido implementado de manera estándar por los navegadores. Sólo está soportado por el navegador Internet Explorer 11 (aunque soporta una versión desfasada de la especificación) y el navegador Chrome de manera experimental (para ello hay que activar la característica "Habilitar funciones experimentales de Web Platform" en el menú chrome://flags.

Puedes consultar más información en https://css-tricks.com/snippets/css/complete-guide-grid/.

Además, se puede utilizar esta técnica a través de este polyfill: https://github.com/FremyCompany/css-grid-polyfill.