Quem trabalha com internet e mesmo aqueles que precisam disponibilizar sua página de web na rede, sabem a importância de ter um conteúdo de qualidade e uma arquitetura do site diferenciada dos demais. Qualquer empresa precisa estar atenta às novas demandas de mercado e conhecer as necessidades dos clientes. Hoje, uma demanda emergente é o design responsivo.

A técnica, não é exatamente nova, mas vem ganhando força com o crescimento da aquisição dos brasileiros por aparelhos tecnológicos como smartphones e tablets com resoluções das mais diversas possíveis. E ainda, o acesso à internet por TVS e navegadores da Internet Explorer a Mozilla Firefox e até mesmo o uso através do notebook e iMacs da Apple.

Isso só confirma como a estrutura de um site precisa estar adaptada a esta realidade. Acredite, é melhor investir em um site responsivo do que criar uma plataforma diferente para cada dispositivo tecnológico. O site responsivo ainda não pode ser considerado a solução de todos os problemas, tais como peso e velocidade de carregamento, porém é uma alternativa que pode e deve ser empreendida. O design responsivo pode ser considerado como uma solução que traz vantagens ao que diz respeito aos custos e benefícios.

Conhecendo os padrões da internet

Uma das grandes dificuldades em desenvolver sites ainda é igualar as ferramentas baseadas em web, mesmo com o uso de padrões de W3C, pois esses recursos não podem ser considerados tão padronizados, a Internet Explorer é um exemplo disso. Com tantos navegadores e sistemas operacionais disponíveis, o desenvolvimento de um site precisa estar preocupado com todos esses requisitos.

De que forma os navegadores interpretam os sites?

Dois termos fundamentais para entender como os navegadores interpretam cada site podem ser chamados de User Agent e Media Queries. Na primeira que pode ser definida literalmente como “agente do usuário” serão identificadas as técnicas que envolvem os usuários quando ele está usando seu site seja através do navegador desktop ou no celular. Ou seja, esta função é a responsável por analisar e diferenciar o site mobile do site normal e ainda realizar apenas uma verificação de navegador e sistema operacional.

E os Media Queries? Esses podem ser traduzidos literalmente como “conferência de mídia” e são parte da propriedade do código de estilo (CSS) das páginas da web. Nesta técnica serão verificadas quais as mídias de fato são carregadas e com isso determinam um estilo a ela. O conceito de design responsivo atualmente faz uso dessa função a fim de modificar os tamanhos, formatos e dimensões de acordo com o tamanho da tela a ser usada.

Um exemplo disso pode ser confirmado ao abrir a tela do site da Logomotiva que se redimensiona a tela do navegador em uso e, então, a função do CSS permitirá a identificação e de acordo com a especificação do site, não será alterado o visual da página e nenhuma alteração no conteúdo disponilizado e sim, apenas a forma como o conteúdo está disposto.

No entanto, os media queries não bastam para criar uma medida para cada resolução existente. De acordo com o site Midiatismo, a recomendação é usar poucas media queries e fazer o layout fluir entre os breakpoints. E mais, não usar pixels nas medidas e priorizar o uso de layouts mais fluidos e flexíveis com base em porcentagens e ems.

Até pode ser possível criar um site mobile sem usar media queries, porém o site não seria capaz de aproveitar todo o potencial de cada dispositivo. Essa técnica permite ajustar o design de forma a adaptá-lo a melhor experiência do usuário.

Como os buscadores interpretam o design responsivo de um site?

Mesmo a técnica sendo defendida há algum tempo foi quando o Google recomendou que o site responsivo contribui para as técnicas de SEO (otimização para buscadores), que a técnica ganhou mais força. O que acontece é que se torna muito mais fácil para o Google compreender um layout responsivo que se adapta a qualquer tela do computador do que o mesmo site com o mesmo conteúdo em plataformas distintas.

A recomendação do Google é que os webmasters possam se adaptar e seguir a melhor prática da indústria de forma a usar as técnicas do site responsivo, disponibilizar o melhor código HTML de forma, que possam ser acessados por qualquer dispositivo e com o uso de apenas media queries de CSS para definir qual a melhor maneira da informação ser renderizada.

Qual o design mais favorece o seu site?

Com o uso cada vez mais frequente da técnica de design responsivo outros nomes e teorias foram criados para definir esta forma de desenvolvimento. Definições como design líquido, adaptativo, fluído e fixo estão sendo muito usados para nomear a técnica.

Ainda, não foi estipulado um consenso sobre um nome padrão e tudo vai depender do profissional e dos autores que possuem visões distintas sobre o tema. Mas é fato que o termo “design responsivo” já foi aceito e difundido pelo mercado.

Entenda como funciona cada conceito:

Design de largura fixa: Esta estrutura era uma das mais usadas até bem pouco tempo e atualmente ainda é utilizada. Neste formato, a página possui um tamanho fixo para tudo de forma que independe de onde está sendo visualizado. Um exemplo disso é seu um site possui um tamanho 1280×800 este terá o mesmo tamanho em qualquer instância. Com esta técnica um desenvolvedor acaba por ser condicionado a desenvolver um site para desktop e outro totalmente diferente para o acesso de smartphones.

Design líquido ou fluído: Mesmo com outros nomes esta técnica ainda possui como característica ser menos complexa do que o design adaptativo. O principal objetivo deste design é construir tudo em porcentagens e nunca fazer uso de números fixos na sua arquitetura e desenvolvimento. Na utilização estrutura ainda será necessário criar uma versão para desktop e outra para dispositivo móvel. Porém, com uma vantagem que no desktop ele será melhor adaptado a vários tamanhos de tela ao contrário do fixo, que acaba por ser igual para todos.

Design responsivo ou adaptativo: Aqui a técnica consiste em desenvolver um site construído de forma que ele possibilite se adaptar melhor a tela em que está sendo carregado. Ou seja, ele faz uso de media queries com o intuito de definir como o site deverá se adaptar a cada resolução de tela. Nesta definição são usadas uma junção de design fluido e design fixo. No entanto, muitos defendem que os dois são a mesma coisa. Já outros autores defendem que há pequenas diferenças para a definição de cada um.

Atenção:

Mesmo com cada técnica tendo uma característica que a define, em um único site podem ser utilizadas três técnicas distintas como a junção de blocos de porcentagens, blocos fixos e com o uso de media queries em diferentes telas.

Como começar a desenvolver o site responsivo?

Depois de ler isso tudo paira a seguinte dúvida: qual a melhor técnica a ser empregada para desenvolver o site responsivo? Uma recomendação é utilizar frameworks que já trabalhem com design responsivo. Esta é uma estrutura de código já pronta que possui variadas linhas em CSS, HTML e JavaScript  inscritas, o que ajuda no trabalho do desenvolvedor do site.