BLOG

Atualmente grande parte dos acessos a internet provem de celulares e outros dispositivos móveis, cujo tamanho da tela e interatividade são diferentes das telas de um computador. Seja através de celulares ou tablets, ou até mesmo TVs "inteligentes", a forma de interagir é diferente e necessita de um formato atrativo e de fácil navegabilidade.

Já não é de hoje que o volume de acessos por estes dispositivos é maior que os acessos oriundos de um computador e atender a este público não é mais opção mas sim uma obrigatoriedade. Não basta apresentar ao usuário uma versão idêntica ao layout visto no monitor de forma reduzida, é preciso disponibilizar uma versão que atenda as necessidades do visitante para que sua experiência seja condizente ao dispositivo utilizado.

Sendo assim, se criaram técnicas capazes de adaptar o conteúdo de acordo com o dispositivo utilizado, modificando elementos do layout para otimização da navegação, seja ocultando ou movendo elementos, como também ajustando tamanhos das fontes de texto e outras informações visuais.

Em linhas gerais, o site responsivo pode organizar um mesmo layout para que se ajuste perfeitamente ao dispositivo de acesso, entregado uma experiência de navegação sem prejuízos devido ao tamanho de tela ou forma de interatividade. A isso definimos um site como responsivo.

Vale ressaltar que um site responsivo não possui uma estrutura diferente ou versão específica para cada dispositivo de acesso. Ele se adapta utilizando o mesmo código de programação, identificando o tipo de aparelho através da sua resolução e orientação (vertical ou horizontal) e modifica sua aparência de acordo com o que é projetado.

Um exemplo prático: se a resolução da tela for superior a 1366 pixels de largura, apresentamos o cabeçalho com todos elementos da interface projetada. Se a resolução for entre 600 pixels e 1365, podemos diminuir os elementos, para uma melhor exibição em tablets e monitores menores. Já para resolução inferior a 600 pixels, podemos supostamente diminuir ainda mais os elementos e ocultar o menu, inserindo um ícone para que todas opções deste menu seja exibido. Indo mais além, um rodapé com três colunas pode ser re-organizado para uma única coluna com seus blocos localizados um abaixo do outro e os tamanhos de fonte podem ser ajustados para uma leitura onde o usuário está mais próximo da tela.

A criação de sites responsivos também deve atender a uma interface desenhada com uma evolução mobile first, ou seja, o seu desenho de interface deve já ser orientado a estes princípios pois o seu desenvolvimento se torna mais prático e auxilia o programador a aperfeiçoar na velocidade de carregamento do site, outra métrica muito importante da criação de web sites.

Além de melhorar a experiência do usuário, sites responsivos são favorecidos pelo ranqueamento nos mecanismos de busca. O Google, por exemplo, favorece os resultados de sites que atendem este princípio e a taxa de rejeição (usuários que acessam seu site e logo saem) é menor e o engajamento no compartilhamento de seu conteúdo em redes sociais é superior.