O arquivo do layout deve ter 1920px de largura total e o conteúdo/elementos devem respeitar a largura total de 1200px, conforme o grid abaixo. Os elementos das páginas são organizados por seções, dentro de cada seção pode ter uma ou mais fileiras, essas fileiras podem ter uma ou mais colunas onde posicionamos os elementos como textos, imagens, vídeos, etc. (Seção > Fileira > Coluna > Elementos). Essa estrutura é utilizada para garantir o bom comportamento dos elementos do site em todos os tamanhos de tela e dispositivos.

Conforme a largura da tela diminuí, o número de colunas de cada fileira vai se ajustando para se adaptar ao tamanho da tela. Uma fileira de 4 colunas por exemplo, pode passar ser de 2 colunas após atingir uma largura específica. Faça o teste com a largura desta página e veja o comportamento das colunas.

Os valores de largura não são absolutos, eles são geralmente específicados em porcentagens da largura total. A largura das colunas definida em pixels é ilustrativa e referente ao tamanho máximo delas (considerando a largura máxima de 1200px do conteúdo). Ou seja, uma imagem que irá ocupar uma coluna com 50% da largura do grid não deve ter mais do que 590px de largura.

Os elementos são posicionados dentro das colunas com alinhamento fixo à esquerda, centro ou direita e devem respeitar as margens de cada coluna. Todos os elementos são "abraçados" por uma caixa retangular invisível que define suas margens. Em uma imagem com sombras, por exemplo, a sombra é considerada e deve respeitar as margens e alinhamentos definidos para o grid.

É possível usar elementos com a largura total da página (que é limitada em 1920px de largura), como banners. O ideal é trabalhar com essas duas opções, largura total (1920px) ou largura do grid (1200px), não é recomendado fazer fileiras com larguras muito variadas.

A altura da página é variável de acordo com a largura e quantidade de elementos/conteúdo, por conta disso ela geralmente não é definida para as seções, fileiras e colunas, apenas elementos podem ter uma altura fixa, como no caso de imagens e ícones.

ATENÇÃO:

Não é recomendado utilizar imagens de fundo muito elaboradas pois podem atrapalhar a legibilidade do conteúdo do site conforme a largura da tela varia e também comprometer o desempenho do site por conta das dimensões da imagem. O ideal é trabalhar com fundos lisos, gradientes ou "patterns" (imagens menores que são repetidas na vertical e/ou horizontal).

Elementos sobrepostos geralmente criam problemas de responsividade e devem ser usados com moderação.

Imagens que contem textos e/ou que tem cortes específicos precisam de uma versão mobile para garantir a legibilidade, como banners, gráficos, etc. A largura total para a versão mobile é de 768px.