Responsive Design: Qual é a Sua Melhor Opção e Como Fazê-lo Direito

BY admin
|

O crescimento explosivo de móveis e contínua proliferação de uma variedade de dispositivos do responsive web design (RWD), a melhor opção para lojas e marcas que deseja optimizar a forma como eles interagem com os clientes em todas as digitais de pontos de contato. De acordo com o varejista da Internet, 261 milhões de consumidores americanos possuem dispositivos móveis e 66 milhões destes proprietários de dispositivos estão comprando com eles. Na verdade, o varejista da Internet tem visto um aumento de 159% nos comerciantes no IR Mobile 500 usando o responsive de 2013 a 2014 como os comerciantes empurram para se manter competitivo e para atender às necessidades dos consumidores em movimento.

versões móveis de sites de desktop têm sido uma solução popular até agora, mas a experiência muitas vezes não tem elementos críticos de branding e conteúdo e liga funcionários valiosos e orçamento com a gestão de duas versões de um site. Ao fornecer informações a partir de uma única base de código que reconhece e se adapta ao dispositivo móvel, o design responsivo resolve ambos os problemas, e a partir de uma única URL.No entanto, assim como o lançamento de um site de comércio eletrônico não é uma garantia de sucesso de negócios, um site responsivo de alto desempenho leva igual consideração e planejamento. Se não for bem feito, os sites responsivos podem trazer tantos desafios como eles resolvem: lento desempenho, caro, demorado e atrasos complexos de testes de desenvolvimento, e pode desmascarar desafios arquitetônicos que exigem a reescrita do site. Em um estudo recente do Moovweb de 12 sites responsivos, o varejista da Internet observou que o desempenho foi 513% mais lento em smartphones do que em PC e tablets, com alguns sites levando 18,24 segundos para carregar, bem acima do tempo de carga da página de melhores práticas da indústria 3.

Optimizing for Responsive: Before You Start

In a recent Magento-sponsored Internet Varejista webinar, guest speaker, Forrester Research, Inc. O analista Mark Grannan ressaltou que, como a maioria dos projetos, uma implementação bem sucedida do RWD começa com o alinhamento de objetivos de negócios e desenvolvimento. Demorando na frente para analisar padrões de tráfego móveis, criar listas de prioridades do dispositivo, e rever sua arquitetura de informação e conteúdo irá permitir que suas equipes se movam mais rápido. Conectando estreitamente as equipes de design e desenvolvimento e acelerando sua colaboração com ferramentas de prototipagem e frameworks de desenvolvimento podem igualmente melhorar o tempo para o mercado. Grannan também aconselhou que os engenheiros resolvessem os requisitos de cauda longa desde o início, como determinar se CMS ou alterações de arquitetura da web são necessárias para apoiar projetos de design responsivos, e abordar proativamente a velocidade e aceleração do local através de técnicas de otimização frontend. Por último, a Grannan recomendou a correspondência das métricas de valor de negócio (como o tráfego do site e as conversões) com o âmbito de desenvolvimento.

Optimização para resposta: Mapeie a viagem dos seus clientes

como tudo o resto, optimizando o seu site para vários dispositivos começa com o seu público – a sua composição e comportamentos.

  • que percentagem do tráfego do seu site vem através de dispositivos móveis? A maioria dos comerciantes considera 20-30% do tráfego móvel como o gatilho para considerar sensível

  • como estão a aceder ao seu site hoje? Macro tendências importam menos do que as especificidades do seu site e do seu cliente

  • que dispositivos / navegadores favorecem a população do seu cliente? É importante ter em mente que o design web responsivo é implementado usando técnicas que são incompatíveis com navegadores mais antigos (notavelmente IE8 e mais velhos). Identificar o topo dispositivos acessando o seu site irá também ajudá-lo a determinar o número de pontos de interrupção para a qual você deve projetar seu site

Otimização para o Responsável: a Definir Sua Estratégia de Conteúdo

Preparação de conteúdo para um site responsivo é um dos maiores desafios que os comerciantes terão de enfrentar, como eles terão de mudar a maneira de pensar sobre o conteúdo. É frequentemente dito que implementar um web design responsivo é mais uma questão de estratégia de conteúdo do que uma questão de design.Como Brendan Falkowski do Departamento de gravidade disse, ” Mobile First é uma metodologia que lhe pede para projetar interações pensando na tela pequena primeiro. Mobile first não é uma versão despojada de um site de desktop.”

Olhe para os Termos de pesquisa que os seus clientes usam e comece por definir as interações importantes para a sua loja. Priorize funções e informações para organizar a vista móvel de forma mais eficiente, e depois escalar até um site mais limpo para telas grandes. Criar uma experiência vencedora não é sobre retirar utilidade ou profundidade.

ao contrário, os usuários esperam ser capazes de realizar qualquer ação a partir de qualquer dispositivo que eles estão segurando. Isso significa Filtrar resultados de pesquisa, ler revisões, salvar listas de desejos, e verificar precisa ser universalmente acessível.

Optimização para resposta: Código e imagens

um desafio de RWD é que sua única base de código pode ser muito grande e lenta de carregar. Considere estas dicas, muitas compartilhadas por Mark Grannan no recente varejista da Internet webinar, para uma experiência móvel ótima:

  • Carga prioridade conteúdo primeiro e tarde carga (“carga lenta”) o conteúdo abaixo é para criar a percepção de um desempenho mais rápido, em vez de aguardar para exibir o conteúdo depois de tudo o que é carregado

  • Usar a tecnologia do lado do servidor para fornecer ou processar imagens de tamanho adequado para o dispositivo

  • Código de seu site para reduzir o número de viagens de ida e volta para o servidor para reduzir a latência

  • Use abra tipos de letra web, em vez de tipos de letra personalizados para reduzir página de peso

  • Considere a utilização de terceiros de aceleração provedores, como CDNs, para otimizar o desempenho através de uma gama de tecnologias e local do cache de conteúdo

Indo Responsável: Lições das Trincheiras

Skinny Ties é uma das maiores varejistas e atacadistas de gravatas nos Estados Unidos e uma das primeiras empresas a venda tradicional de gravata on-line. Assim, era apenas adequado que o varejista deve ser um dos primeiros comerciantes a desenvolver um local sensível de volta no início de 2012.

para criar a experiência excepcional do cliente que o Skinny Ties era depois, o Departamento de gravidade aumentou drasticamente a complexidade de sua taxonomia, mapeando cada atributo para um formato padronizado. Antes que os usuários pudessem navegar apenas numa árvore de categoria rígida. A taxonomia dinâmica abriu múltiplas entradas para cada produto.

a combinação de design responsivo e uma taxonomia flexível contribuiu para um aumento massivo na receita, valor SEO, e taxas de conversão em todas as plataformas e fatores de forma.

  • 58% aumento nas transações ano-a-ano

  • 20.8% aumento AOV

  • 187% aumento na receita a partir de dispositivos Android

  • 224% aumento na receita de iPads

  • 437% aumento na receita de iPhones

o Vax é um best-seller floorcare marca no reino UNIDO, e faz parte do floorcare divisão de Hong Kong, baseado em TTi, um líder global em produtos para o melhoramento da casa e indústrias de construção.

a empresa está a crescer a 40% ao ano e a empresa em linha registou um crescimento de 85%+.

a empresa tem visto um tremendo sucesso de vendas flash, ou o que ele chama de vendas de jarda.

estes eventos de cinco dias trazem mais de 3.000 utilizadores concorrentes no pico e têm sido muito bem sucedidos! Quando a empresa viu que 40% do tráfego para vendas de jarda veio de dispositivos móveis, eles sabiam que precisavam de um site móvel otimizado.

a EMEA do TTi Floorcare é o diretor Nigel Aitchison compartilhou grandes resultados de sua linha Vax após o lançamento na Magento Enterprise Edition 1.14 tema sensível, que levou apenas quatro semanas para construir e testar. Com o site sensível, a Vax viu conversão durante a sua grande venda de jarda aumentar 42% em tablets e 156% em telefones móveis.

recursos adicionais:

Internet Varejista-23 de julho de 2014: passos para alcançar sucesso de design web responsivo

Forrester Research-Jan. 16, 2014: Seis Armadilhas Do Projeto Do Site Responsivo E As Melhores Práticas Para Evitá-Los

Varejista Da Internet-2 De Maio De 2013: Skinny Laços fica um 211% esbarrar em móveis de vendas com o seu design responsivo site

Brendan Falkowski : https://speakerdeck.com/brendanfalkowski

Moovweb – julho de 2014: 8 Maneiras de Melhorar o Desempenho de Seu Site Responsivo

Magento Blog – 13 de Maio de 2014: o Magento Permite Responsivos Sites na Metade do Tempo