Site único e responsivo ou sites dedicados?

Ao desenvolver um site para uma empresa, a equipe chega ao seguinte questionamento:

Devemos desenvolver um site único, responsivo para diferentes tamanhos de tela, ou um site dedicado especialmente para desktop e outro para mobile?

Para entender as diferenças em cada possibilidade, desenvolveram os seguintes layouts:

Bom, observando os modelos não identificamos problemas, de fato. Nota-se, porém, uma visível diferença na disposição dos elementos de um dispositivo para o outro.

Primeiro, vamos entender um pouco do que é um layout único, responsivo, e o que é um layout dedicado ao mobile.

Entendendo melhor os termos

Os sites únicos e responsivos são, basicamente, os sites que sofrem adaptações do layout de acordo com o dispositivo em que é visualizado.

Ou seja, cria-se um único modelo de site e, à medida que as especificações da tela mudam, muda-se também a disposição e tamanho dos elementos, pensando na especificidade de interação para cada tipo de dispositivo.

Já os sites mobile dedicados são uma espécie de variação do site desktop, desenvolvido em uma estrutura paralela, que aparece para o usuário somente quando requisitado de determinado dispositivo.

Se estiver acessando o site em desktop, por exemplo, temos acesso a um tipo de layout, mesmo que o layout seja reajustado responsivamente modificando as dimensões do browser.

Enquanto isso, se acessar o mesmo site via qualquer dispositivo móvel, a versão dedicada ao mobile é requisitada e o layout a ser visualizado no final é uma nova versão do mesmo site.

Nessa versão, aproveita-se ao máximo o que cada dispositivo tem a oferecer para a experiência do usuário e assemelhando-se a experiência de um App.

Nesse caso, criam-se até mesmo endereços URL diferentes para cada versão do site.

O site da Domino’s Pizza hoje é um desses casos:

Note que mesmo redimensionando o browser a URL continua a mesma, enquanto no mobile é inserido um “m.” como subdomínio.

“Ok, mas só com essas informações ainda não consigo saber qual dos dois é melhor.”

De fato! Agora sim, vamos entender um pouco mais a fundo de cada uma das opções, levantando um comparativo em algumas de suas características, para depois chegarmos (ou não) a esta conclusão.

Site único responsivo vs. Site mobile dedicado

Para deixar mais claro quais são as diferenças encontradas em cada um, podemos analisar o quadro a seguir:

Design, Os layouts acabam sendo mais simples para facilitar a adaptação dos elementos em diferentes tamanhos de tela, Maior liberdade na criação do layout, uma vez que cada um funcionará em paralelo

Domínio,Utiliza um único domínio, facilitando o compartilhamento de endereços web,Utiliza subdomínios como ”m.”, redirecionados do domínio principal, o que pode resultar em um pouco mais de tempo para ser acessado pelo usuário.

SEO,Segundo o próprio Google, recomenda-se a utilização de sites responsivos, principalmente, porque economiza recursos quando o Googlebot rastreia o site. Apesar de passar no teste do Google de Mobile Friendly Websites, os sites mobile dedicado só serão bem ranqueados se todas as versões do site oferecerem uma boa experiência de usuário. Além disso, com diversas URLs o rastreamento do Googlebot pode ficar mais lento e comprometer a atualização frequente do ranqueamento.

UX,Se as adaptações do layout não forem feitas cuidadosamente, pensando exatamente nos ganhos e perdas que cada dispositivo pode ter, a experiência do usuário na interação com o site pode ser comprometida,Uma vez que o layout será criado focado para o dispositivo, as chances de conseguir aproveitar o máximo possível dos recursos e limitações do dispositivo é muito maior, o que não significa que a simples criação de um layout dedicado irá solucionar automaticamente essa questão, dependendo muito de como isso foi pensado pelos designers.

Manutenção,A manutenção é feita diretamente na estrutura do site principal, que atualiza todas as versões aos mesmo tempo, facilitando a manutenção.,O fato de ter mais de uma página para lidar faz com que a manutenção seja mais complexa. Atualizar a página principal não tira a necessidade de atualizar as demais versões do site.

Por último, temos um tópico muito importante a ser considerado: a Performance. Justamente por isso, este tema ganhou um parágrafo dedicado especialmente para deixar claras as diferenças para cada um.

De um lado, temos o site único responsivo, que possui longos códigos HTML/CSS, conteúdo e imagens mais pesadas (uma vez que são utilizados tanto em desktop quanto em mobile) e que podem prejudicar a velocidade de carregamento.

Contudo, sempre que falamos de performance temos que tomar cuidado (o Guilherme Silveira aqui pega no pé de todos nós em relação a isso), o site pode ter uma boa performance melhor se o código e as imagens forem otimizados - no caso das imagens, otimizadas para cada media query também.

Ou seja, podemos ter uma performance melhor, porém teremos um pouco mais de trabalho.

Por outro lado, o site mobile dedicado é criado já para o contexto mobile e, além de ter um código HTML/CSS menor, carrega imagens menores e, consequentemente, menos pesadas, pensadas especificamente para este contexto, que tornam o carregamento mais rápido.

Ainda assim, é importante lembrar que, mesmo sendo pensadas para este contexto, se o designer não otimizar estas imagens corretamente, cairemos novamente no mesmo problema de peso das imagens.

Então, depois de analisar o quadro comparativo e as últimas considerações, já podemos chegar a uma conclusão, certo?

Será mesmo?

Qual opção escolher, afinal?

Depois de todas essas definições e comparação, chegamos à conclusão de que não existe uma resposta definitiva. O que existem são pesos e medidas a serem analisadas antes da tomada de decisão final.

Isto é, sempre que formos escolher uma linha para a produção de um site é importante fazer algumas considerações para entender o fator determinante para a proposta do site, como:

• Qual o objetivo do site?
• Qual o perfil do público desse site: mais usuários de desktop ou mobile?
• Quanto temos de verba?
• Como funcionará a atualização do site? Demanda de atualização contínua?

Essas e muitas outras perguntas ajudam a entender melhor qual a melhor solução para cada caso. Portanto, antes de iniciar seu projeto, é importante que tudo isso esteja bem alinhado com a equipe e o cliente.

Você já passou por uma situação assim em seus projetos? O que pensa sobre o assunto? Compartilhe suas ideias com a gente nos comentários abaixo!

Dentro do universo mobile existem ainda diversas outras questões a serem exploradas e que podem ser muito interessantes para você que trabalha (ou pretende trabalhar) nesta área.

Na Alura temos um curso muito legal sobre Web Design Responsivo e, para quem quiser se aprofundar mais ainda nos estudos, a dica é ler o livro A Web Mobile do Sérgio Lopes. ;)