dica1

Falar de desenvolvimento web para mobile é de extrema importância nos dias atuais. Sabemos que os celulares, androids, smartphones e blackberrys estão invadindo o mercado fazendo com que os profissionais da área de desenvolvimento sejam desafiados a criar soluções que atendam esse nicho de mercado.

Veremos aqui 4 dicas interessantes para começar a pensar em desenvolver para Mobile.

[Offtopic: Antes de continuar você pode querer ler:  Unity – A tipografia oficial da Copa do Mundo 2010 é de um brasileiro e Mito – Usuários não utilizam a barra de rolagem.]

foto by umpcportal.com

1 – Siga os padrões web!

Antigamente não existia um padrão de codificação para desenvolvimento web, depois da criação do W3C (World Wide Web Consortium) consórcio de gestão da web,  pôde-se após a proposta do XHTML determinar uma padronização de códigos para o desenvolvimento web.

Hoje já existe o HTML5 que veio com toda a certeza revolucionar, e com essa revolução propor padrões de desenvolvimento para a internet mobile que possam atingir o maior número de dispositivos possíveis.

2 – Procure fazer os layouts com tamanhos menores!

É preciso desenvolver seus layouts para mobile em tamanhos que possam se adequar a tela desses dispositivos móveis, focando sempre no conteúdo e a forma como esse conteúdo será exibido para o usuário.

3 – Faça testes, se possível no iPhone.

O desenvolvimento web mobile para a plataforma do iPhone realmente é um novo caminho que vai com toda certeza nortear esse novo desafio para os desenvolvedores. A Apple é uma empresa que disponibiliza informações de como os designers poderão criar ícones e imagens para seus produtos.

O suporte dado por eles é um diferencial e com o iPhone não poderia ser diferente. O iPhone é uma proposta de dispositivo mobile que pode ser tomada como exemplo para criação de sites. Porém existem outros aparelhos que também poderemos usar nestes testes.

4 – Seja Objetivo

O público que faz uso da web mobile são no geral pessoas que não tem muito tempo disponível, por isso é importante que o foco do desenvolvimento mobile seja o conteúdo que deve estar bem organizado e estruturado para uma leitura rápida e dinâmica.

Existem uma infinidade de emuladores de browsers mobiles para fazermos testes e assim podermos estar antenados com o que tem de novo na web em relação ao desenvolvimento Mobile.

Podemos destacar os browsers Webki, Opera Mobile, Opera Mini, outros browsers como do Blackberry, S60.

A fonte estampada na famosa Jabulani e no uniforme das seleções patrocinadas pela adidas na Copa da África 2010 tem o toque de um brasileiro. O Designer tipográfico Yomar Augusto foi quem definiu a forma final da Unity no período em que trabalhava na agência 180 Amsterdam.

Antes de continuar você pode querer ler:  Uma análise da caixa de busca do portal ESPN Brasil e Transforme seu Perfil em um Infográfico.

Segundo Yomar Augustos, o nome Unity foi inspirado no ideal de estabelecer a unidade nos países africanos após o apartheid. Em uma entrevista para revista Info Exame da editora Abril, Yomar declara que foi Fantástico saber que sua criação foi vista por quase 30 bilhões de pessoas no mundo interio.

Veja mais detalhes sobre Yomar Augustos no blog Tipos do Brasil.

Existem diversas maneiras de colher dados para conhecer o perfil do internauta.

Antes de continuar você pode querer ler Mito – Usuários não utilizam a barra de rolagem e 5 Melhores Galerias de sites para Inspiração.

O site Íonz encontrou uma forma bem criativa de abastecer seu banco de dados com o perfil dos navegantes. Fizeram um sistema onde você responde à algumas perguntas, baseado nas respostas o sistema gera um infográfico traçando seu perfil, destacando suas preferências e mostrando a dos demais internautas.

Depois do infográfico gerado você tem a opção de personalizar e salvar como Papel de Parede do seu computador. Experimente, bem legal.

Há uma longa e antiga discussão entre os Web Designers se o usuário utiliza ou não a barra de rolagem ao navegar no site, impulssionado por esta duvida, muitos projetistas preferem apertar “acima da dobra”* todo conteúdo considerado de maior importância.

Antes de continuar você pode querer ler Uma análise da caixa de busca do portal ESPN Brasil e Cuidado para não estar traumatizando seus usuários.

*Acima da dobra é um termo referente ao conteúdo localizado na metade superior da primeira página de um jornal.  É comumente utilizado na web para descrever a área que você vê em um site antes de ter que rolar a página.

Neste excelente artigo The myth of the page fold: evidence from user testing mostra que foram feitas mais de 800 seções de testes no período de 6 anos constatando que as pessoas não tem problema em utilizar a rolagem do site.

Assim como no jornal onde o objetivo é que ele seja todo lido e não apenas o conteúdo acima da dobra, o site deve ser planejado para que o usuário seja atraído a navegar por toda a página.

Sendo assim uma das coisas que pode definir se o usuário vai rolar ou não a página é o posicionamento do conteúdo. No texto citado acima o autor mostra que menos conteúdo acima da dobra incentiva o usuário rolar a página em busca de mais  conteúdo.

Outra prática também citada no texto é posicionar o conteúdo abaixo da dobra de forma que parte dele apareça na área visível da página.

Um ótimo exemplo é o site da 37 Signals, o conteúdo está bem distribuído em uma longa página e a cada etapa da rolagem o usuário têm próximo de se a possibilidade de acessar as páginas dos produtos caso seja convencido.

Outro detalhe muito interessante é que no rodapé foram posicionadas as mesmas opções que estão no topo do site, poupando o usuário em ter que rolar até o início da página para acessar os produtos.

Alguns posts sobre o assunto que vale a pena conferir:
Myth #3: People don’t scroll
Scrolling and Attention
Life Below 600px
Screen Resolution and Page Layout

Lista com 5 galerias para Web Designers que estejam em busca de inspiração ou queiram acompanhar as tendências na criação de sites.

Antes de continuar você pode querer ler Uma análise da caixa de busca do portal ESPN Brasil e Grande Botão de Chamada a ação.

1.The Drawar

2.Site Inspire

3.Design Shack – CSS Gallery

4.Siiimple

5. Grid Based Design

Dependendo do termo pesquisado o twitter vai te indicar perfis relacionados e posicionar resultados relevantes no topo da pesquisa.