Logo E-Commerce Brasil

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

Por: Redação E-Commerce Brasil

Equipe de jornalismo E-Commerce Brasil

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”.