O que é o webdesign responsivo?

Com toda a tecnologia e novos aparelhos eletrônicos capazes de acessar a internet, foi necessária a utilização de um novo layout na hora de criar os websites para que eles se adaptem a qualquer dispositivo por onde estejam sendo acessados. Dessa forma, não é necessário que sejam criadas diferentes versões de layout para cada aparelho e o espaço do seu dispositivo será mais bem aproveitado.

Esse “novo tipo” design é chamado de responsive web design que, traduzido para o português, significa web design responsivo. É exatamente essa capacidade de se ajustar a diferentes telas e dispositivos que faz com que o webdesign responsivo venha sendo usado cada vez mais na criação de sites.

Se seu site não tem uma versão responsiva, você precisa. Afinal, é um dos sinais que o Google usa para definir a posição de uma página na busca.

Principais características

Os sites que se utilizam dessa ferramenta de design usam colunas de largura variável. Essas colunas têm uma largura máxima definida em porcentagem e, conforme a tela vai encolhendo ou aumentando, elas se ajustam.

Também usam de imagens em tamanhos flexíveis, que se comportam de forma fluida, ao invés de se comportarem como blocos sólidos que não se adaptam , sendo assim, se ajustam da mesma forma que as colunas.

Além disso, é comum utilizarem códigos que mudam a disposição de menus e outros itens de navegação, através de Javascript ou Jquery. É por isso que alguns sites apresentam menus com várias opções em texto quando abrem num desktop e barrinhas quando abrem em um celular.

Na imagem, o mesmo site aberto em três dispositivos diferentes. As colunas variam de tamanho e o menu muda de texto para uma imagem com três barras horizontais

Por fim, um detalhe importante: a diferença do tamanho dos botões entre a interface desktop e a interface móvel. Na interface desktop os botões tendem a ser menores, pelo uso facilitado do mouse e a improbabilidade de um clique errado. Porém, para a versão móvel os botões devem ser maiores para facilitar o acesso e os cliques feitos com os dedos do usuário.

Outro ponto que pode ser explorado no web design responsivo é a redução de informação contida nas páginas. Principalmente para as versões de celulares, a redução de informação é essencial pois, normalmente, os usuários que acessam a internet pelo dispositivo móvel não tendem a ter muito tempo nem a prestar muita atenção. Logo, uma página mais limpa e de navegação mais fácil faz toda a diferença. Normalmente, menus nas barras laterais e outros itens são "escondidos" do usuário móvel, deixando que apenas conteúdo e comentários fiquem em destaque.

Outras técnicas

Um modo parecido de web design é o “Adaptive Web Design”. Muito parecido com o responsive, porém mais simples. No A.W.D a tela se ajusta de 3 à 4 tipos de tela, já pré-definidos.

Recentemente, o Google tem promovido o AMP (Accelerated Mobile Pages). Consumido principalmente pelo próprio buscador, usa uma tag ("link rel=amp") para definir uma página neste formato.

Embora conte com algumas tags específicas, tecnicamente falando, o AMP é uma página normal que segue determinadas regras (restrições, na prática), que banem iframes, formulários e limitam o número de arquivos externos, como Javascript e CSS, que podem ser carregados na página somente em formatos pré-aprovados. Além disso, browsers podem fazer uso avançado do chamado "viewport" para carregamento de imagens que estejam visíveis para o usuário naquele momento, através de um Javascript específico do AMP.

Na verdade, o AMP surge, até mesmo, como uma solução para um problema que surgiu com o design responsivo: o uso extensivo de JQuery. JQuery é ótimo para produzir certos efeitos na página, mas é pesado, depende de muitos arquivos que devem ser baixados do servidor a cada visita ao site, além de serem lentos em smartphones mais velhos.