{ Sketch }

Com o surgimento de novos dispositivos com acesso à Internet, o design de websites teve a necessidade de conceber aplicativos que possam ser acessíveis em diferentes tamanhos de tela. Assim, o Web Design Responsivo (RWD)Do inglês: Responsive Web Design surgiu com o objetivo de conceber aplicativos web acessíveis em qualquer dispositivo, independentemente de sua resolução de vídeo [1].

O design responsivo considera a utilização de duas tecnologias para criar websites acessíveis em diferentes dispositivos e tamanhos de telas: HTML e CSS. O HTML, tecnologia de apresentação de conteúdo, utiliza a meta tag viewport para verificar o espaço, em tela, disponível para exibir o website em um navegador. O navegador web utiliza a viewport para definir a escala, ou zoom, necessário para que o website possa ocupar as dimensões fornecidas pela resolução de vídeo do dispositivo do usuário. No design responsivo a viewport deve ser definida com escala 1 em todos os documentos HTML de um website, assim como o ilustrado abaixo:

Caso não seja informada a escala da viewport para o navegador, a página web poderá ser redimensionada conforme o espaço disponível pela tela do dispositivo do usuário, o que pode ser pouco acessível para dispositivos móveis quando se trabalha com layouts de dimensões fixas. Adicionalmente, é interessante evitar o uso de dimensões fixas, sendo preferível trabalhar com dimensões relativas, com frações do espaço disponível pela tela do dispositivo do usuário. O modelo de doze grades, ou colunas, trabalha com dimensões relativas, considerando-se frações de uma resolução de alta definição, a saber, 1200px de largura. A tabela abaixo ilustra a fração correspondente por cada grade, ou coluna para o modelo de design em questão:

Embora o conceito de design responsivo, tratado nesse guia, seja formulado por meio do modelo de doze grades, essa nomenclatura será tratada, no restante do material, como doze colunas. Assim, é possível trabalhar com 12 colunas para organizar e distribuir os elementos na interface de usuário da aplicação web. Por esse modelo não utilizar dimensões fixas, cada elemento é dimensionado relativamente com base em uma fração da largura que deve ocupar da tela do dispositivo do usuário. Considere o exemplo a seguir:

Conforme o exemplo mostrado acima, o modelo de doze grades fornece até doze colunas para que você possa organizar e distribuir os elementos da interface de usuário sobre a tela de seu dispositivo. As colunas são organizadas em linhas. Cada coluna utiliza uma largura relativa, que não é fixa, mas que ocupa uma fração da largura máxima fornecida pela tela do dispositivo do usuário. Você pode estruturar a interface de usuário com base em colunas de 1 a 12, desde que a soma do número de colunas em uma linha não ultrapasse o valor máximo relativo à quantidade de colunas que as telas dos dispositivos de usuário irão fornecer, no caso 12 colunas.