Você já encontrou uma situação em que texto e blocos que se encaixam perfeitamente no layout do Photoshop por algum motivo teimosamente não desejam obedecer no layout - não se encaixam na largura especificada pelo layout? Ao mesmo tempo, o designer e o designer de layout usam a mesma grade, por exemplo, a grade do Bootstrap 3.
Depois de analisar um número significativo de sites, cheguei à conclusão de que, no meio de designers e designers de layout, um erro comum surgiu.
A grade de inicialização, como um exemplo comum de grade, configura um layout de 12 colunas, que em telas de 1200 px ou mais de largura tem dimensões entre colunas de 30 px e margens laterais de conteúdo de 15 px à esquerda e à direita. Considerando que a largura das colunas é definida pelo designer em pixels e o designer de layout como uma porcentagem, o erro descrito abaixo não é imediatamente perceptível.
Como um designer trabalha com uma grade? Normalmente, essa grade é gerada por algum serviço, baixado e instalado no Photoshop. Como o designer de layout trabalha com a grade? A malha é retirada da estrutura do Bootstrap 3.
Então, qual é o problema se as dimensões da grade (colunas e intervalos) forem iguais?
A essência do problema está na conveniente propriedade CSS "box-sizing" com o valor "border-box", que é definido por padrão no bootstrap. Por esse motivo, o designer considera a largura das margens laterais além da largura do conteúdo (1170px mais as margens laterais de 15px à direita e à esquerda), e o próprio designer de layout, sem o saber, as inclui na largura do conteúdo (1170px, incluindo margens laterais de 15px, ou seja, A largura do conteúdo é 1140px). Assim, verifica-se que, no projeto em diferentes estágios, duas grades diferentes são usadas e o designer do layout tem uma mais estreita.
Este erro também ocorre ao usar grades diferentes do Bootstrap. Aparentemente, nasceu com o advento da "caixa de fronteira".
A solução é simples - ajuste o tamanho do contêiner: "container {width: 1200px;}" (1170px - conteúdo mais 15px de indentação à direita e à esquerda). Também é necessário realizar o ajuste apropriado do contêiner pela quantidade de espaçamento lateral para telas de outras resoluções.
Parece-me que não faz sentido argumentar sobre quem é responsável por corrigir o erro. É uma boa forma para o designer esclarecer essa pergunta com o designer de layout, e ele deve se lembrar desse recurso ao usar a "caixa de borda" para a grade. As correções de erros em uma estrutura ampla também aumentarão o número de sites que correspondem estritamente ao design.