Esse 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 obteriam um conjunto de código, enquanto os usuários de desktop obteriam um conjunto diferente de código.
O objetivo principal desta implementação é melhorar o desempenho do site. Este método funciona melhor quando combinado com um web design responsivo. Essa 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 criar sites otimizados para smartphones) para que os robôs rastreiem as versões para desktop e dispositivos móveis.
Vantagens do RESS
- Mais fácil de navegar: A estrutura de navegação pode ser personalizada para as diferentes tarefas executadas por usuários móveis e desktop.
- Menos inchaço de página: em vez de confiar display: none;ou visibility: hidden;ocultar elementos de 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
eHow
Assim como a CNN, o HTML e CSS para a versão móvel do eHow é ajustado para desempenho. A navegação de nível superior é a mesma para os dois sites, com ênfase na pesquisa e 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
As versões móveis 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
As versões mobile e desktop do WordPress.com são quase idênticas, com algumas diferenças:
- A versão mobile tem um http-equivatributo, enquanto a versão desktop não tem ( <meta http-equiv=”x-ua-compatible” content=”IE=10″>)
- Cada um deles usa uma folha de estilo diferente
- A versão mobile coloca o novalidateatributo dentro da <form>tag, enquanto a versão desktop coloca dentro de um formulário<input>
- A versão móvel tem um link de notícias no rodapé, enquanto a versão desktop não tem um link de notícias em nenhum lugar da página
- Algum JavaScript foi removido da versão móvel
Resultados de desempenho:
- Tempo médio de carregamento: 2,77 segundos
- Tamanho médio da página: 118,40 KB
- Número de solicitações HTTP: 19
Recursos em RESS
- Usuários do Drupal: A classe Mobile Detect 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 de cabeçalho Vary HTTP no cabeçalho HTTP, use a função drupal_add_http_header.
- Usuários do WordPress: A solução mais fácil é usar o WPTouch , mas este plugin não adiciona o cabeçalho HTTP Vary. Como alternativa, você pode usar o Any Mobile Theme Switcher para alternar para um tema otimizado para dispositivos móveis. Saiba como modificar seus cabeçalhos HTTP para seu site WordPress .
