No primeiro artigo, Otimizando um site de e-Commerce para dispositivos móveis – Parte 1: Começando, nós mostramos como o DecalGirl.com, uma empresa que cria skins para dispositivos móveis, começou a explorar as melhores estratégias para abordar este projeto. Depois de terem trabalhado duro, avaliamos seu progresso na Parte 2.
O terceiro artigo, Parte 3: Design e Compatibilidade, seguiu os desafios
da compatibilidade de dispositivos e adaptação de um website originalmente
construído sem a mobilidade em mente.
Agora, na parte 4 e final, revisamos a implementação e o lançamento do site mobile.
Desing da página interna
Na Parte 3, Trugbild e Peters elaboraram designs para o site mobile. Ambas as partes concordaram com o design de Peters. Uma vez que a homepage estava decidida, o estilo e o número das páginas interinas deveria ser decidido também.
Trugbild criou mockups para 14 páginas internas, usando um background cinza-preto para o checkout e para as páginas de compra para produtos individuais, e um laranja vibrante para os backgrounds das páginas orientadas para navegação.
Páginas
laranjas de produtos
Petergostou do design, mas decidiu que não queria utilizar o background laranja, argumentando que o laranja tirava atenção dos thumbnails dos produtos. Então, Trugbild produziu backgrounds cinza-pretos para todas as páginas.
Páginas
interiores cinza-preto
O site mobile tinha todos os elementos visuais completos. Agora, Trugbild tinha que codificar o layout e o design de todas as páginas. O trabalho de Peter era garantir que a funcionalidade e os códigos do lado do servidor estivessem funcionando.
Páginas
de produto cinza-preto
A codificação acabou sendo difícil
O processo de codificação de Peters acabou tomando muito mais tempo do que ele esperava. Trugbild entregou os gráficos da página final em 7 de fevereiro, e entregou os arquivos markup – todos os CSS, as imagens, HTML e linguagem JavaScript – para o site mobile funcionar corretamente em 17 de fevereiro. Peters então estava correndo contra o tempo.
Mais uma vez, o vasto conhecimento de Peters em código e em desenvolvimento de websdites veio a calhar. Mais cedo durante o processo, a MobilizeToday descobriu que Peters, cofundador e CEO do DecalGirl.com, ocupa uma posição única no que diz respeito à otimização mobile desse site: ele é o desenvolvedor original de todo o website, incluindo o carrinho de compras customizado.
Enquanto estava preparando o markup e os elementos do site mobile para o lançamento, Peters encontrou alguns problemas pelo caminho. A página de informação do cartão de credito do usuário não tinha um formulário de endereço para cobrança, e ele foi facilmente adicionado. Peters queria ter uma rápida funcionalidade de busca adicionada às páginas de produtos, de modo que, no momento em que os usuários começassem a digitar, as listas começassem a ser filtradas baseadas em cada letra que fosse digitada. Trugbild criou o markup para essa funcionalidade em cerca de um dia.
Trugbild também sugeriu a Peters adicionar o que é chamado de “Infinite Scroll,” permitindo que os usuários façam o scroll ao longo de uma lista, que é maior do que o espaço de visualização na página, até que elas atinjam o fim de todos os itens da lista, em vez de ter que clicar em botões de “Próximo” ou “Anterior” para se movimentar entre as páginas. Peters concordou e adicionou essa funcionalidade ao site.
Lançamento do site mobile
O desafio acabou se mostrando ótimo para Peters, que deixou o site mobile operacional – desenvolvendo e testando o código a partir de 17 de fevereiro. Na data que este artigo foi escrito (11 de abril), Peters tinha movido o desenvolvimento do site mobile para um endereço mobile publicamente disponível – m.decalgirl.com – com funcionalidade limitada.
Homepage da DecalGirl.com, topo à esquerda
Para o lançamento do site mobile, Peters garantiu que as funcionalidade básicas de navegação e de compra estivessem funcionando. Ele conseguiu fazer a função de filtro funcionar somente nas listas “Produtos” e “Dispositivos”. Peters conseguiu preparar o checkout do usuário, mas não
terminou. O último passo do processamento do cartão de credito e a criação do recibo do usuário e seu envio não estavam prontos para o lançamento.
Peters também teve que escolher em que focar seu tempo. Então, ele escolheu gastar tudo no front-end, as inúmeras opções de produtos que precisavam ser escritas e testadas.
Mais tempo e testes são necessários
O grande tempo gasto para implementação e para o lançamento foi descrito por Peters. Ele disse, “Muito do código front-end teve que ser completamente reescrito. Estou descobrindo que um dos problemas de um site complexo como este – e me baseando apenas em funções estáticas dos mockups – é que ele não leva em consideração a diferença entre produtos diferentes”.
As skins para dispositivos móveis de Peters têm múltiplas opções na hora da compra – desde cor até tamanho e toques adicionais, como um brilho maior ou revestimento de cor. Todas essas opções de variáveis ajustam o preço e as informações exibidas no carrinho durante o checkout. Peters diz: “existem cerca de 100 opções específicas para os produtos, para enumerar, para testar e para escrever o código”.
Ao começar a construir essa páginas, Peters notou que a navegação parecia
atravancada – outra variável que não poderia ter sido descoberta em um mockup estático.
Depois de o site mobile estar pronto e operacional, mesmo que com funcionalidade limitada, Peters disse: “ao me aprofundar nele, eu tive que basicamente reescrever todo o site – scripting, formatação de dados, componentes AJAX e mais – para suportar isso. É um processo bastante envolvente, especialmente devido à complexidade das nossas linhas de produtos. É muito mais trabalho do que eu havia antecipado e, mesmo alocando todo o meu tempo para isso, está demorando um pouco”.
Nas próximas semanas e meses, Peters espera deixar seu site mobile completamente operacional.
⁂ Texto original disponível em http://www.practicalecommerce.com/articles/2705-Optimizing-an-Ecommerce-Site-for-Mobile-Devices-Part-4-Implementation-and-Launch