Qué es el Layout
El diseño de las páginas web habituales se divide en bloques: cabecera, menú, contenidos y pie de página. Visualmente, los bloques se disponen en varias filas y columnas. Por este motivo, hace varios años la estructura de las páginas HTML se definía mediante tablas.
El desarrollo de CSS ha permitido que se puedan realizar los mismos diseños sin utilizar tablas HTML. Las principales ventajas de diseñar la estructura de las páginas web con CSS en vez de con tablas HTML son tantas y tan importantes que no quiero ni recordar el tiempo y el esfuerzo empleados cuando esto era así. Por eso, la estructura basada en tablas dió paso a la estructura basada exclusivamente en CSS.
Layout: Término inglés con el que se conoce en entorno de diseño, los bocetos o maquetas. Es la ordenación y colocación de todos los elementos que componen una página web dentro de la ventana de un navegador. A la hora de realizar los diseños hay que tener en cuenta que un layout claro permitirá una navegación mucho más fácil y eficiente, además de una mejor experiencia de usuario.
Es importante tener el boceto / layout de nuestra web ya definido antes de ponernos manos a la obra, saber si vamos a agrupar el contenido en una sola columna, en dos, en cinco.. si va tener un ancho específico o si queremos que se adapte a cada resolución y dispositivo, etc.
Una vez sepamos esto, será más fácil empezar a teclear código. Un sitio que nos ayuda a realizar nuestros bocetos es https://ninjamock.com, tanto para escritorio como para dispositivos móviles. Tiene planes de pago y también un plan gratuito que nos puede interesar para empezar. (Funciona mejor con el motor -webkit- de Google Chrome, Opera, etc...).
Ejemplo de boceto (creado con NinjaMock):
