Otimizando um site de e-Commerce para dispositivos móveis – Parte 4: Implementação e Lançamento

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