Uma das questões mais complicadas e de maior atrito quando está tentando aprovar um layout com o cliente é explicar este conceito, pois é um pouco difícil para o leigo entender.

Primeiramente, uma breve explicação, caso nem mesmo você, que gostaria de se tornar um web designer, entenda claramente ainda: computadores de diferentes usuários e configurações utilizam diferentes resoluções. Mas o que é resolução? Uma pergunta essencial que deve ser respondida antes de prosseguirmos.

Basicamente, trata-se da quantidade de pixels que um monitor está configurado para exibir. Quanto mais pixels, maior a resolução e, conseqüentemente, melhor a qualidade de imagem, pois tem mais “definição”. Caso ainda precise de mais esclarecimentos sobre isso, acesse o link:
https://www.tecmundo.com.br/video/947-o-que-e-resolucao-.htm

Para complicar ainda mais, o mesmo monitor do mesmo usuário pode ter diversas resoluções. Aí, entramos na parte de configuração de tela do usuário. Por exemplo: o sistema operacional (Windows ou MacOS) do usuário pode ter a possibilidade de configuração de 800 x 600 (800 pixels de largura por 600 pixels de altura), 1024 x 768, entre tantas outras. Para piorar, temos também as resoluções de celular, que podem variar bastante também, como: 320 x 480, e muitas outras resoluções.

Conforme fomos avançando com a tecnologia e os monitores grandes foram ficando mais baratos, o padrão de resolução foi mudando. No final dos anos 90 / início dos anos 2000, o padrão mais utilizado era 800 x 600 – aproximadamente 80% dos usuários. Logo depois passou a ser 1024 x 768. Mas por que todas estas informações são importantes? Porque, como é uma questão complexa de entender, você vai precisar de bastante informação para explicar ao seu cliente. Caso contrário, a falta de entendimento pode se tornar atrito. Segue um link com a lista de padrões de resolução de tela: https://pt.wikipedia.org/wiki/Lista_de_resolu%C3%A7%C3%B5es_de_v%C3%ADdeo

Ter este entendimento claro também vai ajudar na elaboração de outros materiais, como animações, vídeos e imagens digitais para diferentes mídias.

Além disso, você também precisa ter este entendimento sólido para criar os layouts, pois, qualquer programa gráfico que utilizar, vai precisar definir uma resolução do documento para começar a criação. E, ainda, vai precisar definir um padrão de resolução que você vai criar os layouts que melhor consegue demonstrar este conceito junto aos seus clientes. Sendo que este padrão pode mudar de tempos em tempos. Como comentei acima que, o padrão de uso de resolução por usuários muda de tempos em tempos, você também vai precisar mudar a resolução de como cria os layouts dos sites para aprovação.

Prosseguindo, vou demonstrar um pouco como eu faço a aprovação dos layouts, nos dias de hoje. Primeiro, tenho alguns documentos padrões com a resolução máxima das telas de hoje – 1920 x 1080 – full HD. Você já deve ter ouvido falar deste padrão, pois é uma resolução bastante utilizada por TVs modernas, certo? Pois é. Mas não ainda pelos computadores desktop. Como sei disso? Consulto constantemente as estatísticas de uso de resoluções:

W3School:
http://www.w3schools.com/browsers/browsers_display.asp

Mundo a fora:
http://www.w3counter.com/globalstats.php

Wikipédia:
http://en.wikipedia.org/wiki/Display_resolution

Levando estas informações em consideração, decidi fazer o seguinte para o início da criação dos layouts: Minha área total é de 1920 x 1080. Sendo que faço uma marcação de uma área de resolução “wide” – 1366 x 768. E ainda faço mais uma marcação segura – 1024 x 768. Mas espere: não acabou ainda. Estas resoluções são telas cheias. Porém, os navegadores possuem interface e botões que tomam espaço nesta área.

Teoricamente, tem que descontar o tamanho destas áreas também, para você conseguir saber qual área você pode utilizar para exibir sua interface gráfica e informações importantes. No final das contas, tenho um documento inicial desta forma:

Estou mostrando a configuração do arquivo em Corel Draw, porém, pode fazer este mesmo desenho inicial em qualquer programa gráfico que escolha trabalhar. A área mais cinza é o meu espaço principal de primeiro carregamento. Sendo que, a altura do documento, eu modifico de acordo com a quantidade de informações que quero mostrar no layout para aprovação.

Observação importante: estas dimensões e modo de criar os layouts são os melhores que desenvolvi para a minha forma de trabalho. Dá menor quantidade de questionamentos possíveis para uma gama variada de clientes. Não significa que seja a melhor forma. Talvez você mesmo desenvolva a sua própria forma de apresentar e aprovar layouts. Mas, caso ainda não tenha, acredito que esta forma seria interessante para começar a sentir como funciona todo o processo.

Clique para fazer download do arquivo com os padrões de dimensão do layout desktop.

Como deve ter percebido, existem duas áreas laterais que dão a impressão de margens. Chamo isso de margem de segurança de exibição de informações. Seus clientes nunca repararam que a maior parte dos sites possui este espaço de segurança. Só percebem isso quando você apresenta sua proposta de layout para eles aprovarem. Isso pode trazer um questionamento. Quando isso acontece, explico toda esta questão das resoluções de tela e ainda apresento alguns grandes sites que possuem esta área de segurança de informações, como nos exemplos abaixo:

Para minha surpresa, quando fiz o print screen do Itaú, a imagem do banner está completamente distorcida. Isso serve para entender como está questão de resolução / layout é complexa. Nem mesmo o Itaú, com todo o recurso financeiro que possui, conseguiu resolver com facilidade.

A Amazon que, dispensa comentários sobre recursos financeiros para investimento em tecnologia, também possui uma margem de segurança “em branco”. Quando apresento alguns destes exemplos, eles entendem na hora.

Mas por que, mesmo com recursos financeiros infinitos, nenhuma empresa consegue aproveitar esta área da margem de segurança. Meu palpite, várias questões:
- Custo / benefício, pois se fizer uma versão do site que preveja a resolução full HD, demora mais tempo de desenvolvimento;
- Estática, pois não piora o impacto visual consideravelmente.
Além disso, se tornou quase um padrão de desenvolvimento.

É comum colocar nestas áreas de segurança elementos gráficos de continuação de layout ou padrão de fundo para dar a impressão de que a tela está preenchida por completo. Por exemplo, nos print screen que coloquei, as barras superiores avançam até o fim. Em muitos casos, a imagem do banner principal também. Isso ameniza a impressão de espaço vazio. Mas também é um fator complicador para projetar no seu layout e, especialmente, aprovar. Então, prepare seu espírito que, até conseguir achar um método consistente para obter resultados positivos para aprovação de layout sem muitos questionamentos e atritos, demora um pouco.

Segue um exemplo de imagem que faço para colocar numa estrutura de HTML simples, para enviar para o cliente:

Esta imagem tem 1920 x 3976 pixels. Como falei, não importa muito a altura da imagem. Pois coloco numa visualização em HTML, no meu servidor ou diretamente no dele (se já tiver em funcionamento) para a aprovação. A estrutura que faço a apresentação é bem simplificada. Segue o arquivo para download e ver como fica:

Clique aqui para baixar a estrutura básica de visualização de layout em HTML puro.

A única observação que faço para estrutura este HTML, na técnica que achar melhor é:
- imagem de fundo centralizada;
- tabela ou div com a altura da imagem para permitir o scroll;
- coloco num servidor online e envio somente o link para o cliente;

Existem sites que conseguem aproveitar esta área por completo? Sim – poucos, mas sim. Um bom exemplo é o Google. Não o site principal de busca, que é minimalista e seria relativamente fácil de desenvolver uma solução visual deste tipo. Mas dos seus produtos, como Google Ads, Analytics e outros. Estes são verdadeiramente responsivos. Possuem uma visualização de aproveitamento completo da área de qualquer resolução. E, claro, muito (mas muito) difícil e demorado de projetar uma solução dessas. Se algum cliente tiver a ousadia de usar alguns destes produtos do Google como exemplo, apenas explique que se tiver aproximadamente 20 mil engenhos trabalhando, poderá chegar nesta solução também.

Depois desta longa introdução, podemos tocar no tema de sites responsivos. O que são? Resumindo muito, são sites que se adaptam em qualquer resolução, inclusive para celular com resolução muito menor. Segue um link para uma explicação mais detalhada sobre o assunto:

Eu, particularmente, tenho o entendimento que site responsivo é quando todo o conteúdo de cada parte do site pode ser visto em diversas resoluções, sem o recarregamento da página. E o site com adaptação para resolução mobile envolve a criação de uma estrutura separa para visualização nas dimensões de celular. Eu gosto muito das duas formas de trabalho e acredito que cada uma tenha suas vantagens e desvantagens.

De qualquer forma, para fazer um site que se apresente de forma diferenciada em diversas resoluções, exige mais trabalho e empenho de horas. Por isso a necessidade de cobrar a mais por isso. Quanto mais resoluções diferentes o site prever, mais trabalho tem que fazer e mais dinheiro tem que cobrar. Pois para cada resolução, seja utilizando qualquer uma das técnicas, tem que planejar o layout para programar posteriormente.

Eu sempre começo a criação do projeto pelo site na versão desktop. Fica mais fácil aprovar e você tem mais “espaço” para fazer as criações gráficas para impressionar seu cliente. Além disso, uma vez que você tem os padrões de cores definidos, informações importantes, estrutura de links definidos, fica mais fácil adaptar o layout para celular.

No caso do site verdadeiramente responsivo, normalmente é feito por CSS e auxílio de bootstrap. E para cada resolução que desejamos fazer uma visualização diferente, chamamos de “break points”, que se refere à resolução (normalmente, a largura da tela) em que outro estilo será aplicado àqueles elementos de interface gráfica. Aí que entra a explicação sobre a popularidade do WordPress. Para uma explicação mais detalhada sobre o WordPress, clique aqui:
https://pt.wikipedia.org/wiki/WordPress

Inicialmente, se tornou bem popular por causa da habilidade de gerenciar o conteúdo. Porém, depois também ficou atraente por causa dos templates de interface de navegação apresentarem responsividade na navegação, pois, para fazer um site verdadeiramente responsivo do zero, com muitos recursos é bem trabalhoso e exige bastante investimento que, muitas vezes, os clientes não querem pagar.

Como deve ter percebido, isso significa que também terá que fazer um layout especial para aprovação na versão para celular. Seja utilizando a técnica responsiva ou a técnica de navegação separada. Sugiro também que apresente de uma forma diferente para conseguir aproximar a idéia da versão final. Segue um print screen da forma que eu apresento e tenho conseguido bons resultados para aprovação:

Resumindo, trata-se de uma imagem do layout com a largura real e a altura do tamanho do conteúdo. Desta forma, o cliente consegue ver todo o conteúdo que seria visualizado no primeiro carregamento e ainda imaginar como ficaria no celular. Importante sempre lembrar que o cliente sempre terá dificuldades em “imaginar” como ficaria em tal lugar. Então, temos que preparar o material da forma mais próxima possível para conseguir facilitar sua imaginação. Sempre tem um trabalho inicial maior. Mas, como estes elementos serão utilizados constantemente, vale a pena fazer este investimento de tempo inicial.

Existem diversas maneiras de preparar este arquivo de visualização. Faço em HTML puro e mando um link para o cliente ver. Segue um exemplo desta estrutura simples:

Clique aqui para baixar a estrutura básica de visualização de layout em HTML puro – versão mobile.

Sempre coloco no meu próprio servidor, ou, se o cliente já tiver um em funcionamento, coloco diretamente no dele. Por exemplo: www.meusite.com.br/clientes/nomedocliente/1.1/

Tanto para aprovação do layout desktop, quando para aprovação do layout mobile, envio um link num servidor online e oriento para fazer a visualização por um computador desktop ou laptop.