anterior
Tweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someoneShare on Facebook
QR CODE

Mobile: a internet se move? Então, mova-se!

Para inaugurar este espaço, escolhi um assunto que tem chamado muita atenção na comunidade web atual: com a expansão dos dispositivos móveis como Tablets e Smartphones, qual o futuro do desenvolvimento de sites nesses, relativamente, novos e populares formatos?

Como já deve ter percebido, a indústria Mobile vem passando por um crescimento vertiginoso em escala global e é bem provável que seja a forma de acesso à internet mais utilizada em todo o mundo em breve, superando a plataforma Desktop (basta dar uma olhada na interface do novo Windows 8 para perceber que gigantes como a Microsoft estão apostando nesse formato). E é óbvio que a maneira de criar design e programação para sites está, obrigatoriamente, acompanhando essa mudança! Atualmente, vemos que a maioria das páginas criadas ao longo de todos esses anos obviamente não foram pensadas nesses novos formatos e quem possui um dispositivo móvel já pode perceber que alguns sites ficam completamente desarrumados visualmente e com vários problemas de navegação. É interessante notar que já convivemos com boa parte dessas “novidades” há pelo menos 4 anos e muita gente ainda pensa em design para sites da mesma maneira que pensava há dez anos atrás, por exemplo. Muitos ainda preferem seguir ignorando o assunto, afinal de contas, com tantos dispositivos diferentes hoje em dia, é quase impossível criar um site para atender a todas as plataformas e isso daria muita dor de cabeça, certo?

Errado! Novas tecnologias pedem novas soluções, sempre. Você já deve ter ouvido que a necessidade é a mãe da invenção, e isto vale como máxima para o nossa profissão. Com o desafio de superar essas limitações entre formatos tão diferentes, uma tendência que ganha cada vez mais força no web design atual é o chamado Design Responsivo (Responsible Design), um conjunto de técnicas que envolvem HTML e CSS e que adaptam o layout de acordo com o dispositivo, melhorando a experiência de navegação ao aproveitar melhor a resolução e o tamanho que cada dispositivo oferece. O conceito surgiu em 2010, quando Ethan Marcotte criou o artigo “Responsive Web Design” para o blog A List Apart. Ele apresenta o arquiteto inglês Christopher Wren, que disse certa vez que arquitetura é uma arte que “objetiva a eternidade” e que todo arquiteto que se preze quer construir um prédio que seja admirado (e habitado) por séculos. Infelizmente, o web design não tem a permanência da arquitetura, é claro. Na verdade, o que é projetado para internet hoje, já estará desatualizado daqui a algumas semanas!

O Design Responsivo possui características bem específicas para sua programação. Uma delas é a chamada Media Queries, que em uma tradução livre significa “Consultas de Mídia”. São expressões que direcionam o visitante do seu site para uma folha de estilos diferente de acordo com o dispositivo que ele estiver utilizando, uma excelente solução para o problema da diversidade de formatos. Mas falaremos mais detalhadamente sobre elas em um futuro post exclusivamente sobre o assunto.

Mobile First: o carro na frente dos bois?

Ás vezes, quando invertemos algo no funcionamento de uma coisa importante e isso parece sem lógica, os mais velhos costumam dizer que “colocamos o carro na frente dos bois”. Ou seja, que estamos mudando a lógica das coisas invertendo as prioridades. Mas… no universo dos Mobiles e do Design Responsivo, talvez isso seja sim uma boa ideia! Afinal, antes mesmo de criar o layout do site, deveríamos perguntar: será que não seria mais fácil começar criando o design para Mobile e depois adaptar o modelo para Desktop?

Essa pergunta já tem uma resposta, e ela vem de encontro a uma técnica que cresce a cada dia e ganhando seus defensores: chama-se Mobile First, (“Dispositivos Móveis em Primeiro Lugar”, em tradução livre) e tem suas vantagens. Seu principal defensor e desenvolvedor é um designer de interfaces chamado Luke Wroblewski. Luke defende que “O mobile não deixa espaço para nenhum conteúdo de relevância duvidosa. Você precisa saber o que realmente importa”. Esta lógica de trabalho parte do princípio que criar primeiro para os dispositivos móveis priorizaria o conteúdo e adaptaria preferencialmente a forma (o visual do site), promovendo uma revolução na maneira como criamos o design de sites e fortalecendo os conceitos de AI, Acessibilidade e Usabilidade. Faz sentido se pensarmos que na hora de migrarmos o mesmo site para desktop, teríamos mais espaço e dificilmente haveria perda de conteúdo. E afinal de contas, conteúdo é o rei, certo? Bom, talvez não seja, mas isso já é uma outra discussão…

Depois do átomo, o pixel

Criar para espaços mais reduzidos e resoluções tão diferentes talvez seja o primeiro grande desafio do design para Mobiles. E isto passa, fundamentalmente, por uma nova visão do conceito de imagens e pixels ao qual estamos acostumados. Em telas comuns, um pixel comumente significava a menor unidade de medida na tela. Como você já deve saber, a própria palavra pixel é a soma das palavras “Picture” + “Element” – ou seja, “Elemento da Imagem”, uma espécie de átomo da fotografia. Com isso em mente, tínhamos como parâmetro criar, por exemplo, uma imagem com 1024 x 768 e vê-la ocupar toda a nossa tela nos monitores antigos, menores que os widescreen atuais. Mas, com o surgimento de novos monitores, dispositivos e plataformas o conceito mudou. E hoje temos de enxergar o pixel maneiras diferentes. Como veremos a seguir, hoje há basicamente três maneiras diferentes de tratar os picture elements:

– Pixel Físico: número real de pixels que você pode colocar em uma tela, onde um ponto na tela = um pixel. Ou seja, o que você define é o que você tem e vê.

– CSS Pixel: é a representação de um pixel na tela pela maneira como você a determinaria na sua folha de estilos CSS.

– Device Pixel ou Reference Pixel: É uma marcação utilizada para adaptar um valor original para um valor ideal no tamanho da tela em que será exibido.

Para entender melhor o Device Pixel ou o Reference Pixel, pense que aparelhos como Smartphones e Tablets, além de alguns monitores, possuem uma densidade de pixels muito alta. Ou seja, eles conseguem “apertar” um grande número de pixels em suas telas, deixando as imagens com uma resolução muito melhor. A Apple, por exemplo, que é a fabricante do Iphone, conseguiu comprimir quatro pixels onde antes caberiam apenas um(!). Dessa maneira, o pixel que antes era definido como a menor unidade na tela, passa a ser uma referência ótica de unidade, e não de tamanho simplesmente. Ou seja, se na ciência o átomo pode ser dividido, fazer o mesmo com os pixels era só uma questão de tempo no web design.

Líquido faz bem á saude!

Outra boa alternativa, além do Reference Pixel para auxiliar nesse contexto, seria não usar pixels como medida padrão na criação do layout e sim porcentagens, tornando-o mais fluido e flexível, combinando as técnicas de layout líquido a marcações de CSS existentes. Hoje a maioria dos sites já usa esse recurso, pois diferentemente de outras épocas, um site hoje é visualizadopor um sem número de monitores / tamanhos / resoluções diferentes. É claro que o layout Líquido não resolveria de uma vez o problema de todos os elementos internos de uma página dentro um aparelho de proporções reduzidas, como um smartphone, mas já é um passo e uma solução importante para alguns dos desafios que enfrentará.

Pense grande… e pense pequeno!

Além de tudo o que leu até aqui, seguem alguns detalhes para você considerar na hora de fazer o seu layout já imaginando versões diferentes para Mobiles e Desktop. Habitue-se a elas, pois futuramente essas e outras considerações farão parte de seu desafio constante ao tentar criar um bom site para diversos dispositivos:

– Aproveite bem a sua área de trabalho: Na hora de determinar o tamanho do seu site na versão Smartphone, utilize sempre 320 pixels de largura como referencia. A maioria dos aparelhos tem diferentes resoluções de tela, mas esse é um bom padrão a ser seguido. É pouco espaço? Sim, por isso deverá ter em mente quais itens serão realmente necessários para a visualização do usuário.

– Utilize imagens com boa resolução: Como já mencionei, a tela do iPhone tem 4 vezes mais pixels que os modelos convencionais. Isso vai evitar que as imagens apareçam “pixelizadas”, ou seja, com aparência ruim e cheia de serrilhamentos.

– Desabilite o Zoom: Aparelhos moveis estão configurados para adaptar um site desenvolvido para desktop. Se você criou o seu site já com um tamanho certo para uma versão mobile, terá que informar ao aparelho que o Zoom não deve ser ativado. Isso pode ser feito com CSS e aqui no blog mostraremos futuramente como fazer.

– Não faça botões pequenos demais: Como é do conhecimento de todos, usuários de Smartphones e Tablets não usam mouse. E em média, o tamanho da ponta dos dedos de um usuário em uma tela é de 44px. Portanto, pense nisso na hora de criar seus botões: nem muito pequenos nem muito grandes demais. Até porque o espaço é reduzido e temos de aproveitá-lo muito bem!

– MouseOver para que?: As telas dos dispositivos mobile de hoje são touchscreen, ou seja, sensíveis ao toque. Pense bem se precisa mesmo de mais uma mudança de estado para saber se o botão foi clicado. Na maioria dos casos, o a:hover do CSS não terá mais uma grande serventia.

– Ícones são cada vez mais importantes: Se o usuário gostar de seu site e decidir coloca-lo na tela inicial para fácil acesso, lembre-se que ele precisará de um ícone bem trabalhado e bonito para compor a área de trabalho. Em um ambiente de espaço reduzido, ícones assumem uma importância significativa, portanto dê atenção especial a eles!

– Use CSS para diminuir o tempo de carregamento: Na hora de criar degradês, sombras e cantos arredondados, evite usar imagens. Vale a mesma regra que já utilizamos para Desktop: faça tudo com CSS para deixar a navegação do seu site mais rápida.

– Não esqueça do link para a versão Desktop: Scripts de detecção podem falhar e sempre se deve levar em conta que os usuários podem preferir ver o site na versão desktop. Portanto, é útil sempre deixar um botão para acesso do site na home.

Isso é tudo, ao menos por enquanto. Espero que este post tenha feito você conhecer e refletir um pouco a respeito desse assunto tão importantes e que deve ocupar boa parte das discussões sobre o web design atual . Comentem, dêem sugestões, participem. Futuramente, em outros posts, voltarei a escrever sobre o assunto, mostrando um pouco das regras de CSS3 que podemos usar na construção de sites para Mobile e como prometido falarei detalhadamente sobre Media Queries e como utilizar corretamente imagens em alta resolução. Até breve!

Próximo

Postado por

Web designer, Ilustrador e produtor visual gráfico, santista de nascimento e de coração, amo o que faço e estou muito feliz em fazer parte da equipe Microcamp.