Você provavelmente já ouviu as pessoas dizem que estamos vivendo em um “mundo pós-PC.” O que isso significa para os desenvolvedores web? Isto significa que 30% a 50% do tráfego do seu site agora vem a partir de dispositivos móveis. Isso significa que, em breve, os usuários de desktop e laptop estará em minoria na web.

Como lidamos com esta mudança tectônica no comportamento do usuário? Nós movemo-nos para além da época de m-dot ou hacks t-ponto, em um onde técnicas de design responsivo e adaptativos governar o dia – o que o W3C chama uma abordagem One Web . A parte fundamental da recomendação da W3C é que “Um Web significa fazer, na medida do razoável, a mesma informação e serviços disponíveis para os usuários, independentemente do dispositivo que estão usando.”

Para os desenvolvedores que significa que uma abordagem One Web garante que não só faz seu local de trabalho sobre os smartphones e tablets de hoje, mas pode ser para as telas inimagináveis ​​de amanhã à prova de futuro.

Atualmente, existem três abordagens populares para o desenvolvimento de uma Um Web site: usando um projeto ágil ; projetos de adaptação do lado do cliente; e projetos de adaptação do lado do servidor.

Um não é melhor ou pior do que o outro; cada um tem seus próprios pontos fortes e fracos e o desenvolvedor web sábio irá considerar as vantagens e desvantagens de cada um antes de escolher o que funciona para o seu próximo projeto.
Responsive Web Design

Web design responsivo é o Uma abordagem mais comum Web. A abordagem utiliza consultas de mídia CSS para modificar a apresentação de um sítio com base no tamanho do dispositivo de exibição. O número de locais sensíveis está a aumentar rapidamente, a partir do Boston Globe para a Disney para Indochino.

A principal vantagem dessa abordagem é que os designers podem utilizar um único modelo para todos os dispositivos, e usar apenas CSS para determinar como o conteúdo é processado em diferentes tamanhos de tela. Além disso, os designers ainda pode trabalhar em HTML e CSS, tecnologias que já estão familiarizados. Além disso, há um número crescente de responsivos-friendly, kits de ferramentas open-source como Bootstrap ou Foundation que ajudam a simplificar o processo de construção de sites sensíveis.

Por outro lado, existem alguns atalhos para um design responsivo som. Para ir responsiva, as organizações muitas vezes têm de realizar um site de reconstrução completa.

A fase de projeto e teste pode ser muito exigente, uma vez que pode ser difícil para personalizar a experiência do usuário para todos os dispositivos possíveis ou contexto. Nós todos vimos layouts de sites responsivos que se parecem com um monte de peças do puzzle que não chegam a se encaixar. Web design Responsive funciona melhor em combinação com uma abordagem mobile-first, onde o caso de uso móvel é priorizado durante o desenvolvimento. melhora progressiva é então usada para lidar com os casos de uso de tablet e desktop.

O desempenho também pode ser um pesadelo para os sites responsivos. No Mobify, que recentemente concluiu uma análise de 15 populares sites de e-commerce responsivos. Entre esses sites, as páginas iniciais carregado uma média de 87 recursos e 1,9 MB de dados. Algumas páginas de resposta eram tão grandes como 15MB .

Os números que são elevados porque uma abordagem sensível abrange todos os dispositivos. Seu usuário está usando apenas um dispositivo, mas eles têm que esperar por todos os elementos e recursos página carregar antes que eles possam usá-lo. Simplificando, o desempenho afeta a sua linha de fundo. Em smartphones, a taxa de conversão cai por um extra de 3,5 por cento quando os usuários tem que esperar apenas um segundo. Com a segunda marca de três, 57 por cento dos usuários terá deixado o seu site completamente .

Enquanto o design responsivo está se tornando rapidamente o padrão de fato, ele também cria novos desafios para os negócios on-line, incluindo como lidar com imagens, como otimizar o desempenho móvel e muitas vezes significa sites precisam ser reconstruído a partir do zero, com uma primeira abordagem móvel.
Client-Side Adaptive

Adaptive projeto baseia-se nos princípios de design responsivo para oferecer experiências de usuário que são dirigidos a dispositivos e contextos específicos. Ele usa JavaScript para enriquecer sites com funcionalidades avançadas e personalização. Por exemplo, os sites adaptativos proporcionam imagens com qualidade Retina só exibe Retina (como o novo iPad), enquanto de definição padrão exibe receber imagens de qualidade inferior.

Há duas abordagens para o desenvolvimento adaptativo – aquela em que as adaptações ocorrem no lado do cliente, no navegador do usuário, e outro em que o servidor web faz o trabalho pesado de detectar vários dispositivos e carregar o modelo correto. Exemplos de sites adaptativas do lado do cliente incluem Threadless e Ideeli. Um dos pontos fortes da abordagem de modelagem adaptável é a capacidade de reutilizar um conjunto de HTML e JavaScript em todos os dispositivos, simplificando o gerenciamento e testes de mudança.

A abordagem adaptativa do lado do cliente significa que você não tem que reconstruir o seu site a partir do zero. Em vez disso, você pode construir sobre o conteúdo existente e ainda oferece um layout mobile-responsivo. Para os desenvolvedores experientes, esta abordagem também permite que você especificamente alvo dispositivos específicos ou resoluções de tela. Por exemplo, para muitos de moda on-line clientes de varejo da Mobify, 95% do seu tráfego móvel vem de iPhones. Adaptativa do lado do cliente significa que eles podem otimizar especificamente para smartphones da Apple.

Ao contrário de design responsivo, modelos adaptáveis ​​garantir que apenas os recursos necessários são carregados pelo dispositivo do cliente. Porque dispositivo e recurso de detecção é deslocado para o próprio dispositivo móvel, redes CDN como Akamai e EdgeCast pode usar a maioria de sua funcionalidade de cache sem interromper a experiência do usuário.

A abordagem adaptativa do lado do cliente tem uma elevada barreira para a entrada do projeto responsivo. Os desenvolvedores precisam ter uma sólida compreensão de JavaScript para usar esta técnica. Também depende de modelos existentes de um site como o fundamento. Finalmente, porque as adaptações do lado do cliente são uma espécie de camada em cima de sua base de código existente, você precisa mantê-los como seu site como um todo evolui.
Adaptive Server-Side

Podemos alcançar a abordagem adaptativa do lado do servidor em uma variedade de maneiras, através de plugins do lado do servidor e detecção de agente de usuário personalizada. Sites que usam adaptativa do lado do servidor incluem Etsy, One Reis Lane e OnlineShoes.com.

Por que escolher adaptativa do lado do servidor? Ele normalmente oferece modelos distintos para cada um dos dispositivos, permitindo uma maior personalização, e mantém a lógica de detecção de dispositivo no servidor, permitindo que páginas móveis menores que carregam mais rápido. Além disso, existem inúmeros plugins do lado do servidor disponíveis para sistemas comuns CMSs e comércio eletrônico, como Magento.

Esta abordagem não é para os fracos de coração-lo normalmente requer mudanças significativas para seus sistemas de back-end, o que pode resultar em uma execução longa (e caro). O requisito para gerenciar vários modelos aumenta os custos de manutenção em curso. Finalmente, esta abordagem pode encontrar problemas de desempenho quando os servidores estão sob carga pesada. Quando a detecção de agente de usuário móvel é executado no servidor, um monte de mecanismos de cache comuns desenvolvidos pelos CDNs como Akamai necessidade de ser desligado. Isso pode resultar em uma experiência de usuário mais lento para os visitantes móveis e desktop.

É claro que muitas empresas ainda estão lutando com as noções básicas de resposta e eles não estão preparados para enfrentar os sabores mais sofisticados de adaptação. Cada vez mais, a concorrência e tráfego móvel, no entanto, irá conduzir mais e mais organizações para chutar os pneus em todas as três abordagens, e escolher o que funciona melhor para seus usuários.