Começou o segundo dia! Infelizmente como tenho voo marcado para hoje à tarde só vou poder assistir às comunicações da manhã. Aqui fica o resumo dos acontecimentos.

Bulletproof web design

Dan Cederholm

Na primeiro comunicação da manhã, Dan Cederholm falou-nos sobre como conceber um website que esteja preparado para os piores cenários possíveis, ou seja, um website "à prova de bala". Os conteúdos foram basicamente os mesmos do seu último livro com o mesmo nome da comunicação.

Existem três elementos que é necessário ter atenção para desenvolver um site à prova de bala: conteúdos (tamanho do texto, quantidade do texto); edição (alterações no conteúdo, manutenção); e ambiente (testar sem imagens, sem javascript, em browsers antigos, etc...).

De seguida foram mostrados alguns exemplos de como conceber alguns elementos numa página, tais como uma barra lateral, uma caixa com conteúdos escaláveis, etc... Para quem leu o livro, os exemplos estão todos lá :)

Esta foi uma comunicação com conteúdos muito mais técnicos com exemplos de código CSS para tornar um site mais flexível.

No final, o Dan falou sobre como podemos validar o nosso código e fazer mini-testes de usabilidade através do uso de algumas ferramentas. Para estes mini-testes de usabilidade devemos testar o layout sem imagens, sem javascript, sem css, entre outros, e ver como se comporta o website sem estes elementos.

Beyond a Code Audit

Robin Christopherson

O Robin é o chefe dos serviços de acessibilidade da AbilityNet e é deficiente visual.
Ao começar, ele ligou o seu screen reader e mostrou-nos como navega na Internet. Mostrou o site da Amazon e como as imagens sem texto "alt" são uma enorme frustração para o deficiente visual que navega na Internet. Foram mostradas várias versões (redesigns) da Amazon (de um ano atrás, de um mês atrás e desta semana). O redesign que a Amazon fez esta semana já tinha todas as imagens catalogadas e já era possível navegar com um screen reader de forma eficiente.

De seguida mostrou-nos um site em Flash e como é difícl para um leitor de ecrã ler os links existentes na página se este for mal desenvolvido.

Não são só os deficientes visuais que têm dificuldades ao usar um website. Os deficientes motores também têm muitas dificuldades porque não conseguem usar um rato ou um teclado com as mãos. É preciso fazer com que os comandos sejam acessíveis a qualquer tipo de dispositivo apontador.

Depois mostrou-nos um outro site em Flash (um tutorial sobre a acessibilidade do Flash concebido pela Adobe) que conseguia ser facilmente lido por um leitor de ecrã, no entanto havia zonas no site em que os conteúdos eram falados (som) e não haviam legendas sobre o que estava a ser dito. Por um lado é acessível a deficientes visuais, mas ao mesmo tempo não é acessível a deficientes auditivos.

De seguida, o JavaScript. Muitos sites que dependem de JavaScript para executar acções são inacessíveis para utilizadores que não usam o rato e só usam o teclado ou outro dispositivo apontador. É preciso ter alternativas para estes comandos.

Foram apresentadas várias formas de usar um website usando alto contraste, navegação com teclado, leitura de ecrã e todos os problemas associados a cada uma destas técnicas quando os sites não são acessíveis.

Depois foi mostrado um exemplo de como um daltónico vê, por exemplo, o mapa do metro de Londres. Existem regras que devem ser seguidas no contraste das cores para que elas não sejam confundidas por uma pessoa com daltonismo.

Finalmente, o Robin mostrou-nos um filme sobre o trabalho da AbilityNet em que eles fazem testes de usabilidade com utilizadores deficientes. Desta forma conseguem obter um conjunto de resultados mais alargado sobre a experiência do utilizador porque além das dificuldades normais que um utilizador "normal" pode sentir, existem ainda as dificuldades que um utilizador com alguma incapacidade (física ou mental) pode sentir.

Mobile Web Design

Cameron Moll

Na última comunicação em que estive presente, Cameron Moll falou-nos sobre como desenvolver websites para dispositivos móveis.

A principal dificuldade na criação de uma aplicação ou website para este meio é a enorme variedade de marcas e software que existem no mercado. Com tantos milhões de telemóveis e outros aparelhos móveis existentes no mundo, não existe um standard que funcione bem em todos eles. Dessa forma, usa-se o XHTML, WML, etc, mas o suporte dos dispositivos é muito limitado.

Outra dificuldade que os designers sentem é derivada da tentativa de desenvolver uma versão móvel do website com um design parecido com a versão normal. Este é um erro comum. Quando falamos de web móvel temos que conceber os conteúdos para esse meio e não pensar demasiado no layout.

Como forma de testar o layout é necessário usar dispositivos móveis e não emuladores. Nem sempre os emuladores conseguem demonstrar como um determinado dispositivo acede à informação e a disponibiliza.

Os métodos que o Cameron propõe para transformar um site para uma versão móvel são os seguintes:

Não fazer nada

Podemos deixar o site como está e ver se ele é bem visualizado num dispositivo móvel, no entanto isto não é recomendado porque o tamanho das páginas é demasiado grande e não está optimizado para este meio.

Remover todas as imagens e estilos

Este é uma solução quase idêntica à anterior com a diferença de que não tem imagens nem estilos. O tamanho das páginas fica mais pequeno mas mesmo assim os conteúdos não estão optimizados para a web.

Folhas de estilo "handheld"

Esta é uma boa forma de implementar um estilo diferente à página quando é acedida por um dispositivo móvel, no entanto com a inexistência de um standard, nem todos os dispositivos compreendem esta informação e muitos ignoram esta folha de estilos, mostrando a folha de estilos normal.

Desenvolver um website específico para dispositivos móveis

Esta seria a melhor opção porque teríamos um website optimizado para estes dispositivos, no entanto os custos (tempo e recursos) podem fazer com que esta opção não tenha uma boa relação custo/benefício.

Qual o melhor método? Miniaturizar ou Mobilizar?

Depende. Ao miniaturizar estamos a criar uma versão mais pequena do website com os conteúdos mais importantes ou separados em várias páginas para não sobrecarregar o dispositivo com uma página inicial demasiado grande.
Ao mobilizar estamos a criar uma aplicação móvel que depende dos conteúdos que queremos apresentar, ou seja, se queremos ter conteúdos específicos para este meio devemos criar uma versão específica.

Finalmente, o Cameron falou-nos do futuro domínio web .mobi que irá facilitar bastante a forma como os websites serão acedidos pelos dispositivos móveis. No futuro espera-se que haja um boom do uso deste tipo de dispositivos para navegar na Internet e dessa forma é necessário criar standards e tecnologias (tal como o CSS) que permitam o desenvolvimento de websites verdadeiramente adaptados à web móvel.

Nota: web móvel é diferente de web sem fios (wireless). O conceito de web móvel está relacionado com o uso de dispositivos de reduzida dimensão e em qualquer lugar.

E assim terminou a minha experiência na @media. Infelizmente não tive tempo para assistir às restantes duas comunicações da tarde, mas já me dou por satisfeito por ter participado neste enorme evento.

Agora vou almoçar e tentar não perder o avião :)

Conteúdos Relacionados

• Conferência @media 2006 - Dia 1
• Londres
• Fotos da Conferência
• Fotos de Londres