Há um debate sobre qual técnica de criação de sites prontos para dispositivos móveis é a melhor. O Google defende a criação de web designs responsivos, enquanto Jakob Nielsen, um renomado consultor de usabilidade, endossa a criação de sites móveis dedicados (mas ele foi posteriormente criticado por alguns web designers). Uma terceira opção também está ganhando popularidade, onde o servidor web renderiza o HTML e CSS apropriados a partir do mesmo URL, dependendo do dispositivo a partir do qual uma página web do site está sendo solicitada (que tem sido referido como design responsivo + componentes do lado do servidor).
Este artigo discutirá cada um desses métodos. Exemplos reais de sites que usam um método específico são fornecidos em cada seção. O dispositivo móvel usado para testar e coletar dados para todos os exemplos é um iPhone 4 usando iOS 5.0.
Web Design Responsivo (RWD)
O web design responsivo (RWD) normalmente usa consultas de mídia CSS3 para ajustar o layout de uma página da web com base no tamanho da área de visualização do usuário.
Você usa o mesmo HTML para exibir um layout de página da web diferente para desktops, tablets, dispositivos móveis, TVs, etc.
Vantagens do Web Design Responsivo
- Paridade de conteúdo: Seu site contém o mesmo conteúdo e marcação HTML, independentemente do dispositivo usado, proporcionando aos usuários uma experiência semelhante. Isto crescerá em importância à medida que mais pessoas confiarem em seus smartphones como principal meio de acesso à Web.
- Um único URL para páginas da web: Isso torna mais fácil compartilhar e vincular seu conteúdo. Nenhum redirecionamento é necessário para levar os dispositivos à visualização otimizada (em comparação com um site móvel dedicado).
Desvantagens do Web Design Responsivo
- O conteúdo não será totalmente otimizado para dispositivos móveis: A menos que você use um abordagem mobile-firstsuas páginas da web conterão as mesmas informações que suas contrapartes para desktop. Compare isso com um site para celular separado, onde você poderia personalizar o conteúdo de uma página da web apenas para usuários de celular.
- Desempenho mais lento: A página da web média hoje tem cerca de 1,3 MB, de acordo com Dados de janeiro de 2013 do arquivo HTTP. É possível evitar downloads desnecessários ao usar o RWD, mas, na prática, a maioria dos sites de web design responsivos têm tamanho igual ou maior. 86% dos sites testados pelo pesquisador de desempenho móvel Guy Podjarny tinham tamanho igual ou superior, conforme relatado em um apresentação sobre desempenho de sites para celular.
- Pode ser mais difícil navegar no site: Os usuários móveis geralmente desejam realizar tarefas diferentes dos usuários de desktop. Eles também podem estar mais acostumados com padrões de design de UI específicos para dispositivos móveis. A menos que você personalize a estrutura de navegação para cada dispositivo, poderá haver problemas de usabilidade.
Exemplos de Web Design Responsivo
Starbucks 
O site da Starbucks é um excelente exemplo que mostra os prós e os contras do web design responsivo. Todo o seu conteúdo pode ser acessado em dispositivos móveis, cada página usa a mesma URL e não há redirecionamento. Infelizmente, o download do site deles é pesado (cerca de 15 segundos em um smartphone 3G) e é necessária muita rolagem para ler uma página da web inteira.
Resultados de desempenho:
- Tempo médio de carregamento: 14,99 segundos
- Tamanho médio da página: 1.193,88 KB
- Número de solicitações HTTP: 142
Fundo Mundial para a Vida Selvagem 
O site do World Wildlife Fund é uma boa implementação de web design responsivo. A navegação é otimizada para tarefas móveis. No entanto, o tempo de carregamento é um pouco lento em um smartphone 3G (demorou cerca de 7 segundos).
Além disso, algumas páginas internas (por exemplo, seus Formulário de adoção) não foram otimizados para dispositivos móveis e são difíceis de usar em meu dispositivo móvel. Resultados de desempenho:
- Tempo médio de carregamento: 6,91 segundos
- Tamanho médio da página: 885,97KB
- Número de solicitações HTTP: 72
O Globo de Boston 
O site Boston Globe é indiscutivelmente uma das melhores implementações de RWD para um site de grande escala. O site usa imagens responsivas e otimiza JavaScript para não prejudicar o desempenho em dispositivos móveis. Resultados de desempenho:
- Tempo médio de carregamento: 5,55 segundos
- Tamanho médio da página: 605,27KB
- Número de solicitações HTTP: 87
Recursos sobre Web Design Responsivo
Site móvel dedicado
Alguns sites otimizam a experiência dos usuários de dispositivos móveis criando um site para celular separado. A implementação mais comum é o site para desktop redirecionar para um subdomínio (por exemplo, mobile.examplesite.com para examplesite.com.)
Vantagens de um site móvel dedicado
- Mais fácil de fazer alterações separadas nos sites para celular e desktop: As alterações podem ser limitadas apenas à versão móvel ou apenas à versão desktop.
- Tempo de carregamento mais rápido: Como você está desenvolvendo apenas para sites para celular, você pode simplificar e otimizar seu site para celular especificamente para a experiência do usuário em dispositivos móveis.
- Mais fácil de navegar: A estrutura e o conteúdo da navegação são customizados para as tarefas executadas pelos usuários móveis.
Desvantagens de um site móvel dedicado
Exemplos de sites móveis dedicados
Walmart (mobile.walmart.com) 
O site móvel dedicado do Walmart atinge um tempo de carregamento extremamente rápido de 1,35 segundo. Resultados de desempenho:
- Tempo médio de carregamento: 1,35 segundos
- Tamanho médio da página: 272,29 KB
- Número de solicitações HTTP: 45
Amazônia (www.amazon.com/gp/aw/h.html) 
Assim como o Walmart, as páginas móveis separadas da Amazon são mais rápidas do que os designs web responsivos que testei (com tempo de carregamento de 2,25 segundos). O que é estranho, entretanto, é que nem todas as páginas do site possuem versões otimizadas para dispositivos móveis. Por exemplo, se você fizer uma pesquisa no Google a partir do seu smartphone, muitos dos resultados do Google apontam para páginas para desktop que não redirecionam para uma versão otimizada para celular.
Além disso, se você acessar a página móvel diretamente de seu desktop, não será redirecionado para a versão desktop. Resultados de desempenho:
- Tempo médio de carregamento: 2,25 segundos
- Tamanho médio da página: 103,66KB
- Número de solicitações HTTP: 16
BBC (www.bbc.co.uk/mobile) 
As páginas móveis separadas da BBC são rápidas em comparação com as páginas responsivas que testei (3,40 segundos), mas quase metade desse tempo é gasto redirecionando usuários móveis para a página móvel (1,65 segundos). Ao contrário das páginas móveis separadas da Amazon, se você acessar uma página móvel a partir de um desktop, será automaticamente redirecionado de volta para a versão desktop. Resultados de desempenho:
- Tempo médio de carregamento: 3,40 segundos
- Tamanho médio da página: 56,04KB
- Número de solicitações HTTP: 22
Recursos em sites móveis dedicados
RESS: HTML e CSS diferentes do mesmo URL
Este método de criação de um site pronto para dispositivos móveis usa programação do lado do servidor para renderizar CSS e HTML personalizados para diferentes dispositivos. Os usuários móveis receberiam um conjunto de códigos, enquanto os usuários de desktop receberiam um conjunto diferente de códigos. O objetivo principal desta implementação é melhorar o desempenho do site. Este método funciona melhor quando combinado com um web design responsivo.
Esta implementação foi chamada de web design responsivo + componentes do lado do servidor (RESS). Ao usar esse método, é importante incluir o cabeçalho HTTP Vary (leia sobre isso no guia do Google para a construção de sites otimizados para smartphones) para que os robôs rastreiem as versões desktop e móvel.
Vantagens do RESS
- Mais fácil de navegar: A estrutura de navegação pode ser customizada para as diferentes tarefas realizadas por usuários móveis e desktop.
- Menos inchaço da página: Em vez de confiar
display: none;ouvisibility: hidden;para ocultar elementos da página para dispositivos móveis, eles podem ser removidos do HTML ou CSS. Isso reduzirá a quantidade de dados baixados e acelerará o tempo de carregamento. - Tempo de carregamento mais rápido: JavaScript desnecessário pode ser removido do HTML, o que libera CPU, memória e cache no dispositivo móvel.
Desvantagens do RESS
- Mais recursos do servidor: Construir dinamicamente o HTML aumentará a carga no servidor.
- Requer detecção de dispositivo: Os usuários móveis precisarão ser detectados. A detecção do dispositivo não é confiável.
Exemplos de RESS
CNN 
A versão móvel usa HTML e CSS otimizados para desempenho móvel, enquanto a versão desktop usa significativamente mais solicitações HTTP e JavaScript. A navegação também foi adaptada para tarefas específicas de dispositivos móveis. Resultados de desempenho:
- Tempo médio de carregamento: 3,46 segundos
- Tamanho médio da página: 163,12 KB
- Número de solicitações HTTP: 28
Como 
Assim como a CNN, o HTML e CSS da versão móvel do eHow são ajustados para desempenho. A navegação de nível superior é a mesma para ambos os sites, com ênfase na busca e em seus sete canais de conteúdo. Resultados de desempenho:
- Tempo médio de carregamento: 6,15 segundos
- Tamanho médio da página: 188,95 KB
- Número de solicitações HTTP: 31
SlideShare 
As versões para celular e desktop do SlideShare são completamente diferentes. A versão móvel usa um web design responsivo, enquanto a versão desktop não. Cada site usa HTML e CSS completamente diferentes.
Há significativamente menos JavaScript na versão móvel. Cada site também usa uma estrutura de navegação diferente. Resultados de desempenho:
- Tempo médio de carregamento: 6,15 segundos
- Tamanho médio da página: 188,95 KB
- Número de solicitações HTTP: 31
WordPress.com 
As versões para celular e desktop do WordPress.com são quase idênticas, com algumas diferenças:
Resultados de desempenho:
- Tempo médio de carregamento: 2,77 segundos
- Tamanho médio da página: 118,40KB
- Número de solicitações HTTP: 19
Recursos no RESS
- Usuários Drupal: O Detecção de celular A classe PHP pode ser usada para lidar com a detecção do agente do usuário, enquanto o Drupal Theme Switch mudará para um tema otimizado para dispositivos móveis. Para adicionar a dica do cabeçalho HTTP Vary ao cabeçalho HTTP, use a função drupal_add_http_header.
- Usuários do WordPress: A solução mais fácil é ir com WPTuchmas este plugin não adiciona o cabeçalho HTTP Vary. Alternativamente, você pode ir com Qualquer alternador de tema móvel para mudar para um tema otimizado para celular. Aprender como modificar os cabeçalhos HTTP do seu site WordPress.
Resumo
Em teoria, web design responsivo é a melhor solução. Mas, na prática, a maioria dos sites RWD não são implementados de maneira ideal e resultam em tempos de carregamento mais lentos. De acordo com meus testes, ter um site móvel dedicado resulta em tempos de carregamento mais rápidos, mas há desvantagens significativas nessa implementação.
Eu só aceitaria isso se o desempenho fosse a principal prioridade. Minha preferência pessoal é combinar um web design responsivo e HTML diferente do mesmo URL (RESS). Isso oferece todos os benefícios do RWD, ao mesmo tempo que supera suas duas maiores desvantagens (mais arquivos para download e tempo de carregamento mais lento).
Se você estiver procurando ajuda para criar um site responsivo, confira MidiaPro em Harrisburg, PA. Aqui estão alguns trabalhos que eles fizeram para revendedores de barcos! Que método você está usando para criar sites otimizados para celular? Por favor, compartilhe sua opinião sobre este assunto nos comentários.
