Mesmo com a explosão do mercado mobile alguns proprietários de sites ainda acreditam que são poucos os usuários que optam por navegar pela versão mobile de um site. Bom, é hora de acordar e perceber que nunca foi tão importante tornar seu site "móvel". Uma olhada rápida em alguns dados vai mostrar a você o quanto isso passou a ser importante.

De acordo com a Apple, o uso de mobile devices aumentou mais de 140% em 2009. Experts estão prevendo que até 2013 serão mais de 1.1 Bilhões de smartphones em uso. Outros tipos de mobile devices estão sendo lançados a cada mês (iPad, eBook readers, PDA’s, etc...)

MOBILE WEB DESIGN

Fazer design para mobile devices pode ser um pouco complicado. Existem muitos aparelhos diferentes com capacidade de navegar na web, cada um com capacidades tecnológicas diferente, browser diferente, resoluções e tamanhos de tela diferentes. Por esses motivos temos que desistir do controle total e de algumas sofistificações e aceitar nosso objetivo principal de fazer sites simples e usáveis e não bonitos e excitantes.

SCREEN SIZE & RESOLUTION

Telefones diferentes e sistemas operacionais diferentes obviamente tem resoluções diferentes. Um artigo publicado pelo PhoneArea.com mencionou que metade de todo o tráfego de smartphones é via iPhone. O uso de Androids cresceu para 11%, Blackberry caiu para 7% e Symbian OS (Nokia) ficou com 25%, caindo um pouco.

Muito parecido com web design tradicional, você provavelmente vai direcionar seu design para o denominador comum. Hoje em dia na web você geralmente faz algo com uma janela de 1024 x 768. Quando falamos em mobile, mais de 75% dos aparelhos tem uma tela com resolução de 240x320 pixels ou mais.

Com base nisso você tem duas opções. Uma é tentar ficar nessa janela para garantir uma boa experiência para uma grande audiência. Ou você pode fazer seu site mobile fluido (onde o design se adapta a janela, ao espaço) e deixar o browser decidir o tamanho.

Para estatísticas atualizadas confira http://www.webdevelopersnotes.com/articles/mobile-web-browser-usage-stat...

BROWSER CAPABILITIES

Outro desafio comum no 'mobile design' é o suporte tecnologico de cada aparelho. Atualmente poucos aparelhos tem suporte para flash e quase nenhum deles faz um bom trabalho com javascript. Por essas razões é importante tentar manter seu site o mais simples possível. Priorizar um código simples XHTML e CSS é a melhor opção.

Mesmo que o browser não tenha suporte para CSS (alguns não tem) ele consegue renderizar HTML e o site será usável.

COMMON BROWSERS

Creating a Mobile Version of Your Site

Full Capable Browsers

  • Mobile Safari (iPhone, iPad, iPod Touch)
  • Opera Moble (Smartphone compatable)
  • Blackberry Browser (Blackberry’s with varying levels of support)

Esses browsers se comportam muito bem, muitas vezes perdem apenas algumas capacidades como Flash ou Javascript. No entanto isso não significa que você não deva se preocupar com a experiência do usuário. Lembre que na versão mobile você não poderá usar elementos como OnClick ou hover, então mesmo que o usuário esteja entrando no site via iPad, você precisa garantir que ele terá uma boa experiência.

Constrained Browsers

  • Opera Mini
  • Blackberry Browser (dependendo do modelo do Blackberry)

Esses browsers simplificam o site o máximo possível automaticamente antes de mostrá-lo para o usuário. Isso pode ser bom e ruim. Pode significar que você terá menos coisas com que se preocupar quando os usuários entrarem em seu site, no entanto também significa que você terá menos controle.

Text Browsers

Muitos browsers mobile são incapazes de renderizar gráficos ou layouts mais complexos. Existem vários níveis de capacidade com text based browsers. Alguns tem suporte CSS enquanto outros conseguem apensar renderizar HTML ou WAP-HTML.

Planning & Approach

Existem várias maneiras diferentes de você deixar seu site 'mobile friendly'. Cada uma dessas maneiras pode funcionar perfeitamente, depende da situação. A melhor maneira de decidir é entender os prós e contras de cada técnica e então desenvolver um plano que melhor resolva seu caso.

1. Alterar o Design mantendo o Conteúdo

O primeiro método, e mais obvio, é alterar a aparência do design para que ele melhor se enquadre no mobile browser sem alterar a estrutura do site e o conteúdo. As pessoas tipicamente simplificam a navegação, removem elementos desnecessários de design e 'encolhem' o design para caber na tela.

Isso não apenas vai economizar a banda dos usuários (que muitas vezes é paga por megabyte), como também vai facilitar bastante no acesso ao conteúdo.

2. Tweaking Design & Content

Enquanto alterar o design vai deixar seu site mobile “friendly” não podemos esquecer outro fato importante para mobile web users, eles estão acessando seu conteúdo de um aparelho móvel, o que é muito diferente de acessar de um desktop. Pense na situação comum, um usuário precisa encontrar uma informação, não consegue ter acesso a um computador e não quer esperar. A informação que eles vão procurar depende da situação, mas é bom que a informação esteja disponível de um jeito fácil e prático. Um exemplo comum é o IMDB.com (internet movie database), se alguém estiver conferindo a versão móvel do site é porque está realmente interessada em algumas informações. Então essas informações precisam estar disponíveis de um jeito bacana.

Mobile Sites Completamente Diferentes

Algumas vezes os usuários vão acessar seu site tantas vezes via mobile, ou terão necessidades tão diferentes, que faz sentido desenvolver uma nova versão do seu site para mobile users. Isso liberta você de algumas restrições e permite que você crie uma versão móvel melhor, mais otimizada.

Sites como Twitter e Facebook são bons exemplos. Ambos tem muitos usuários mobile e o objetivo das ações dos usuários mobile é significativamente diferente dos usuários que acessam via computador.

Creating a Mobile Version of Your Site

É importante que caso você tenha uma versão específica mobile de seu site, você dê a opção para o usuário voltar a versão standard se preferir.

MOBILE USABILITY

Mesmo versões “usáveis” de mobile browsers como o Safari podem ser complicados e difíceis de usar. Precisamos encarar, tem muitas coisas que trabalham contra um usuário mobile. A tela é pequena, as teclas são pequenas, o software ainda não é muito sofisticado...

Fazer o máximo que puder para deixar seu mobile site o mais usável possível é o que vai diferenciar você. Existem alguns pontos chave para deixar seu mobile site mais usável:

  • Simplifique seu site
  • Tenha um mecanismo bom de busca
  • Deixe a navegação fácil

SIMPLIFIQUE

Creating a Mobile Version of Your Site

O primeiro passo a ser dado por qualquer mobile site é a simplificação. Sugiro verificar o seguinte:

  • Determine quais opções do usuário são necessárias na versão mobile
  • Remova qualquer conteúdo que não se aplique a essas necessidades
  • Remova gráficos e estilos que possam atrapalhar a versão mobile
  • Transforme layouts multi-column em layouts simples de uma coluna/li>

NAVEGAÇÃO

Creating a Mobile Version of Your Site

Muitos mobile web designers vão colocar a navegação em destaque no topo da página. Assim o usuário já vê de cara a facilidade de acesso do site.

BUSCA

Creating a Mobile Version of Your Site

Ter uma função de busca de alta qualidade é outra boa maneira de maximizar usabilidade.

TÉCNICAS PARA FAZER UM SITE MOBILE ESPECÍFICO

Qualquer um pode fazer a versão mobile de seu site, mas não basta apenas fazer, você precisa ter usuários.

1. MOBILE STYLING

Se você estiver simplesmente mudando o design e escondendo elementos desnecessários, um 'mobile style sheet' pode ser um bom approach.

CREATING A HANDHELD MEDIA LINK

A primeira técnica requer simplesmente que você adicione um media=”handheld” attribute no seu stylesheet mark-up, por exemplo:

Você pode então simplificar o máximo que quiser ou fazer mobile styling no mobile.css stylesheet, talvez alterando a largura, escondendo uma terceira coluna ou movendo a navegação para o topo da página.

#pageWidth { width: auto; } #columnThree { display: none; } #mainNavigation { position: absolute; top: 0; left: 0; }

DOING AN @MEDIA INCLUDE

Se você estiver incluindo um estilo específico mobile styling através de uma stylesheet existente você deve usar o seguinte código: @media handheld { /* rules for handheld devices */ }

OR

@import "handheld.css" handheld;

2.MOBILE DETECTION

Creating a Mobile Version of Your Site

Um método mais sofisticado seria detectar o browser e decidir mandar os usuários para uma versão específica do site que melhor se adapte as necessidades dele.

O benefício é que você pode customizar completamente a experiência do usuário. Não apenas em layout (que pode ser feito via stylesheet) mas também em conteúdo e arquitetura da informação.

O truque é garantir que o seu método de detecção e redirecionamento funcione bem e esteja atualizado, se um novo browser entrar no mercado ele não pode ser ignorado.

Felizmente existem alguns bons plug-ins e scripts disponíveis para ajudar você com isso. Se estiver interessado nesse tipo de approach sugiro o seguinte:

MOBILE DETECTION SCRIPTS

3. Mobile Specific URLS

Creating a Mobile Version of Your Site

Para sites com muito tráfego móvel faz sentido ter um site específico mobile.

Exemplos comuns disso são Facebook, Twitter e Bank of America. Os três promovem a versão mobile do site de uma maneira específica para encorajar usuários.

THE BOTTOM LINE

Existem tantas variáveis no mundo do mobile web design que vai ser complicado de você encontrar a solução perfeita para todas elas. Por isso você acabará fazendo as escolhes mais corretas para a sua audiência.

Quanto mais você entender a tecnologia que eles estão usando, que conteúdo eles querem e como querem acessar a informação, melhor você conseguirá agradá-los. Se você não entender esses pontos, estará apenas adivinhando.

O crescimento do mercado mobile é tão grande que você deveria estar pensando sobre isso (ou implementado) imediatamente.

Sobre o Autor

Esse é um guest post escrito pelos caras do WpBlogHost, que acabaram de lançar seu primeiro free wordpress magazine theme - MagZine.

About the author of this post

Would like to write a guest post for us?

If you would be interested in writing some guest articles or even become a regular contributor, send us an email to abduzeedo[at]abduzeedo.com requesting a contributor account.