Produzindo layouts para clientes que possuem tablets com diferentes proporções de tela

 Você já deve ter acompanhado alguns movimentos onde laboratórios optam por trocar o sistema operacional dos tablets utilizados pela força de vendas, já acompanhamos trocas de iOS para Android e de Android para iOS.

Como o Tabmedia atende os dois sistemas operacionais, até então, você só precisou estar atento ao tablet utilizado pelo cliente e produzir o conteúdo em função disso ok? Mas ultimamente temos percebido movimentos onde clientes passam a utilizar ao mesmo tempo tablets iOS e Android ou tablets Android com diferentes resoluções, esse cenário impacta a forma com que você precisa produzir os conteúdos e esse artigo foi produzido para lhe apoiar nesse processo. Boa leitura e boa criação. 

Para entendermos melhor, tanto o problema quanto a solução, precisamos entender o básico dos conceitos abaixo, sendo os três últimos possíveis soluções a serem adotadas:

• Proporção de tela
• Resolução de tela
• Design Responsivo
• Design Adaptativo

Proporção de tela

É a relação entre a largura e a altura da tela do tablet. Quando nos deparamos com telas de tablets mais quadradas e outras mais retangulares, estamos visualizando proporções diferentes. Abaixo temos uma imagem que irá mostrar estas diferentes proporções e algumas informações técnicas importantes complementando. É importante pontuar que não existem somente estas dimensões e nem somente estas proporções de tela, mas estas mostradas são algumas que vimos com frequência em tablets.

Resolução de tela

É a quantidade de pixels que compõem a tela. Podemos ter uma tela com 9,7 polegadas de tamanho e de proporção 4:3, e neste mesmo tamanho e proporção de tela ter uma resolução de 1024x768, ou de 2048x1536. É importante dizer que, quanto maior a resolução mais detalhada ficará a imagem em tela. Existem nomenclaturas que resumem o conceito Resolução de tela e que são utilizadas em vídeos (por exemplo: 720p, 1080i ou 1080p, …) e também em televisores (por exemplo: HD, Full HD, 4K, …).

Design Responsivo

Por meio de código é possível criarmos um layout que irá levar em consideração a relação entre, tamanho, proporção e resolução de tela. Possibilitando que este layout seja visualizada em qualquer tela de qualquer dispositivo. Este conceito é muito utilizado em sites e apps, caso seja necessário implementar o Design Responsivo, é importante aplica-lo tanto na criação quanto na programação de seu layout.

Na primeira imagem temos três telas, cada uma de uma proporções diferente todas estão acessando o mesmo site. Na segunda imagem temos as mesmas três telas, acessando o mesmo site e com diferenças destacadas. Há destaques no menu, pois conforme o tamanho de tela o menu pode não caber, e se tronar um botão que ao ser clicado irá aparecer por cima da tela, se tornando assim um menu retrátil. Nas linhas circuladas, observamos a adição de uma coluna ou seja, os objetos foram distribuídos conforme o tamanho de tela. E essa é a função do design responsivo, é adaptar o layout conforme a proporção, tamanho e resolução da tela, ocorrendo uma nova diagramação deste layout.

Design Adaptativo

A diferença aqui é que, com Design Adaptativo, você irá criar um layout de uma única proporção, com um limite de tamanho e de resolução. E utilizando a programação, adaptar o layout conforme a o tamanho e a resolução da tela. Apesar, dessa forma limitar mais o layout de se adaptar a tela, a vantagem é que para se fazer isso, leva-se muito menos tempo, e consequentemente acaba sendo muito menos custoso.

Aqui usamos dois exemplos, na primeira imagem o layout se mantem na proporção 4:3, já na segunda imagem a proporção mantida é a 16:10. Perceba que temos que fixar em uma proporção, e quando o layout é aberto em outras proporções são criados vazios em cima e em baixo, ou nas laterais, esquerda e direita. Estes espaços sobrando em tela podem ser preenchido, com cor, degrade, imagem e etc. Porem não fará parte do layout.

Conclusão e códigos de auxílios

Para os Visual Aid, recomendamos normalmente a implementação do Design Adaptativo, devido a questões como:

• Performance
• Agilidade na criação dos layouts
• Agilidade na programação dos layouts elaborados
• Facilidades geradas para a manutenção e atualização do Visual Aid
• Facilidades geradas para subir os arquivos
• Possibilidades de melhores animações e interações
• Valor mais acessível

Abaixo iremos disponibilizar dois pacotes de códigos sendo o primeiro um exemplo de Design Responsivo, e segundo um exemplo de Design Adaptativo.

• Exemplo de Design Responsivo
• Exemplo de Design Adaptativo criando bordas

Matéria escrita por Rafael Nascimento, CEO e CTO da Rihz (https://rihz.com.br/) em parceria com a Tabmedia.

Ainda com dúvidas?

Entre em contato  via Whats App 

0800 101 2018 

Equipe Tabmedia