2012-08-06

Web design: como se adaptar à onda do mobile

Hoje em dia os web sites têm que se adaptar a uma realidade de imprevisibilidade quanto ao tamanho de ecrã e dispositivo de acesso: ecrãs com resoluções de 1920, 1600, 1280, 1024, 800, 640, 360, 240, etc. transformam num desafio sofisticado qualquer trabalho de desenvolvimento de web.

Mas a questão não é desenhar para estes ecrãs: a questão, salienta um artigo de Jeffrey Zeldman, é que é mesmo impossível saber as dimensões dos ecrãs dos utilizadores.

Essas alterações têm repercussões fortes no design visual: cada vez mais se distingue um trabalho de design gráfico para suportes tradicionais, de um trabalho de webdesign que implica já uma sabedoria técnica que inclui design de comunicação (não-visual).

Mais do que nunca é preciso dizer: o modo de pensar em design gráfico para impressão não pode ser usado para desenvolver em web. São mundos muito diferentes.

As adaptações do web design passam pela forma como a aplicação de servidor gera as imagens em vários tamanhos e a forma como o webdesign se torna inteligente para se adaptar dinamicamente à dimensão do ecrã que está a ser usado (sobretudo largura).

Do lado do HTML também existem cuidados a ter: os menus para ecrã grande não funcionam bem em ecrã pequeno, especialmente os "dropdown".

Há claramente duas formas de ver o design em web: o webdesign promocional ou institucional e o design de webapps que se centra em interfaces estandardizadas essencialmente com formulários, botões, caixas de seleção e outros "controlos". Jquery Mobile é um excelente exemplo.

Pelo meio é possível usar o Jquery Mobile numa filosofia "website promocional" para dar melhor aspeto aos formulários e botões dos sites.

Inicialmente a web funcionava bem com os "websites feios", mas o desejo de controlo dos web designers começou a complicar a situação. Um exemplo: os links que eram azuis e sublinhados deixaram de o ser e as pessoas começaram a ter dificuldade em saber que podiam clicar em certas partes das páginas.

Depois veio o tempo dos "pseudoportais" e os layouts web eram considerados melhores quanto mais complicados fossem. Com a "web 2.0" e os blogs, um novo movimento de simplicidade renasceu e trouxe consigo o melhor de dois mundos: simplicidade e flexibilidade dos layouts, continuando a dar ao web designer um bom grau de controlo do aspeto dos sites.

Mas é de admitir que a margem de manobra que existia antigamente - a de considerar que os sites tinham 970-990 píxeis de largura e pronto -, já deixou de existir. Neste momento cerca de 10% das visitas aos sites são a partir de dispositivos móveis e não são mais apenas devido aos custos de Internet.

Embora estes problemas não sejam novos, a realidade é que só agora os tablets e smartphones estão "a pegar": o Android está a invadir completamente os mercados e em breve espera-se que muita da web seja servida a pequenos (e relativamente limitados) dispositivos. A "Internet lenta" desta primeira fase de smartphones veio no fundo ajudar a trazer os web designers de volta à simplicidade.

Antigamente procurava-se criar versões diferentes do layout e detetar a nível de servidor que tipo de dispositivo estava a fazer o pedido, mas o esmagamento no valor de mercado dos web sites, que agora são considerados quase mercadoria, levaram os profissionais de web a tentar conseguir formas mais práticas de ultrapassar os problemas. Algumas filosofias emergiram:

1. Responsive web design

O termo "responsive web design" foi cunhado por Ethan Marcotte, e basicamente significa a) Imagens flexíveis; b) Grelhas fluídas; c) CSS Media Queries. Não significa portanto escolher um layout diferente conforme o dispositivo, mas fazer um único layout que tem a capacidade de se ajustar no momento em que o tamanho da área de visualização é alterado pelo utilizador, por exemplo a redimensionar uma janela ou rodar o tablet. A operação ocorre totalmente (ou por vezes quase totalmente) no dispositivo "cliente".

As soluções podem ou não incluir Javascript mas, no mínimo, o CSS tem que ser operado dinamicamente para dar um comportamento aos elementos da página de forma a que se adaptem automaticamente.

Uma característica desta filosofia é o uso de percentagens e "em" em vez de píxeis nas definições CSS. Mas um dos problemas é que os espaços publicitários não são muito fluídos...

Veja um web design "responsive" e teste-o alterando aos poucos o tamanho da janela de visualização. Ele adapta-se fabulosamente ao tamanho da área.

2. Adaptive web design

O web design adaptativo é mais abrangente e há quem considere que o adaptive web design inclui o responsive web design.

Enquanto que o responsive web design opera apenas a nível de layout, o adaptive web design opera também a nível de conteúdo. Adiciona-lhe o chamado "progressive enhancement", ou melhoramento progressivo. A ideia disto é centrar totalmente no utilizador e dar-lhe experiências mais ricas possível para o tipo de dispositivo que usa, tentanto chegar ao maior número possível de utilizadores. O pensamento centra-se em entregar conteúdo com qualidade. E para isso é necessário simplificar: pensar no utilizador, não no browser.

A ideia de "design targeting" permite tomar decisões sobre incluir determinados conteúdos típicos de computadores mais potentes (ex: vídeo), ou definir as dimensões das imagens. Ou seja, baseia-se em detetar as características de dispositivo cliente e decidir se serve ou não determinados conteúdos. A abordagem é mais baseada em que conteúdo se entrega ao utilizador que está em determinado ambiente.

3. Adaptive web layout

Esta abordagem é centrada em layout e define-se por formar um layout a partir de múltiplas larguras fixas. Mas pode ser considerada uma forma de responsive web design ou ser conjugada com partes de layout fluído para criar uma melhor experiência.

Nesta o web designer pode ter mais controlo sobre o design visual mas a adaptação ao ecrã pode não ser tão perfeita porque ocorre aos "saltos" ou deixa margens demasiadamente grandes conforme as dimensões dos ecrãs. No entanto pode ser bastante mais simples de implementar.

Testar web design em smartphones e tablets

O Responsive Web Design Tester permite simular a dimensão de ecrã e visualizar o site que está a desenvolver.

Sem comentários:

Enviar um comentário