Otimizando um site de e-Commerce para dispositivos móveis – Parte 1: Começando

Texto original de Brendan Gibbons, disponível em http://www.practicalecommerce.com/articles/2358-Optimizing-an-Ecommerce-Site-for-Mobile-Devices-Part-1-Getting-Started

?

No artigo “Volunteer
for a Free Mobile-Optimized Ecommerce Site”, fizemos uma
oferta para que algum lojista online se voluntariasse para um estudo de caso para
otimização de e-commerce para celular, no qual faríamos o processo de criação de um site para
dispositivos móveis passo a passo. Dezenas de comerciantes inscreveram seus
sites e, depois de um processo de revisão, escolhemos o DecalGirl.com.

Site do DecaGirl

O trabalho de otimizar o DecalGirl.com para celular foi entregue aos desenvolvedores Steven Trugbild e Jeff Haydn, do MobilizeToday.com. Escolhemos os MobilizeToday
devido à sua expertise e ao seu interesse em otimizar o DecalGirl.com de graça.
Escolher o comerciante online foi muito mais difícil, mas baseamos nossa decisão
principalmente em três fatores: o carrinho de comprar, o design e a estrutura do
site.

O site tradicional do
DecalGirl, visualizado em um iPhone

Sobre o
DecalGirl.com

Ryan Peters e sua esposa
Amanda começaram o DecalGirl.com em 2003. Esses comerciantes online, baseados
em Lewes, Delaware (EUA), vendem skins e cases para dispositivos eletrônicos. O DecalGirl
produz e embala suas skins em sua base local, e emprega 26 pessoas. Peters diz
que é um desenvolvedor de e-Commerce desde os anos 90, e que desenvolveu
o mecanismo proprietário de e-Commerce do DecalGirl.com, que suporta cartões de
crédito, o Checkout do Google, o PayPal e o Checkout da Amazon.

Segundo Peters, o site recebe
entre 300 mil e 500 mil visitas por mês, com visualizações que chegam a entre 4 e 5 milhões. A
taxa de conversão do DecalGirl é de aproximadamente 3,66%, e entre 6% e
7% dos visitantes do site vêm de dispositivos móveis.  

No geral, a plataforma
customizada do DecalGirl.com e seu design robusto fazem dele o melhor candidato
para a otimização, e um bom estudo de caso para outros sites. Peters diz que teve interesse em otimizar o site, inicialmente, quando o iPhone original
foi lançado.

“Lançamos a versão atual
do site em 2009 e, apesar de o site funcionar em dispositivos móveis, não era
fácil”, diz Peters.

Diferentes métodos de otimização

Antes de iniciar o
processo de otimização, Peters teve que tomar decisões sobre o escopo do
projeto, incluindo a aparência do site e sua interface nos dispositivos móveis.
Steven Trugbild, do MobilizeToday, colocou as opções dentro de três grandes
categorias: método de otimização, compatibilidade e prioridades de conteúdo.

Ryan Peters

Varejistas interessados em
lançar um site para celular devem escolher entre aplicar o CSS móvel ao seu
site já existente ou lançar um diferente site para celular. Nesta série,
Trugbild e Haydn usarão a opção do CSS, que será eficaz porque o DecalGirl.com
tem poucas tabelas e contém poucos estilos inline, de acordo com Trugbild.

“Mesmo assim, esta
abordagem tem vários inconvenientes”, diz Trugbild. As principais dificuldades
serão as restrições de design causadas pelo HTML pré-definido e a necessidade
de aplicar o CSS móvel em cada página individualmente, apesar de alguns
elementos poderem ser escondidos pelo CSS.

Muitos dispositivos móveis, plataformas

Peters também teve que
escolher para quais dispositivos ele iria otimizar seu site. Apesar de ser óbvio
que os líderes de mercado iPhone e Android terão que ser considerados, Peters
pode considerar outras plataformas e browsers.

Outro elemento importante do
design que Peters terá que considerar é a ordem dos blocos de conteúdo na home
page, incluindo logo, menu, funções de busca, páginas populares e links para mídias sociais. A priorização é necessária para escolher em que ordem os
usuários de celulares verão esses objetos.

Organização
dos artigos para seguir o processo

Nos próximos três artigos, mostraremos o processo de desenvolvimento do escopo e a implementação das
mudanças. Como objetivos gerais do projeto, Peters sugeriu:

“Para o design, acredito que está consideravelmente diminuto – com a imagem mais comum sendo a imagem de um
produto… Gostaria de poder suportar mais tráfego móvel, e pegar o básico do
que for feito e estender para áreas como serviço do consumidor, gerenciamento
de contas e rastreamento de pedidos. Mesmo que eu não saiba se isso vai me
ajudar a aumentar as vendas, sei que deve melhorar a experiência em lidar com
nossa empresa no geral”.