O Design Responsivo da rede Robô Livre
Um dos desafios ao criar a versão 2.0 da rede de conteúdos de robótica livre robolivre.org era a dificuldade que teríamos de criar uma interface que fosse funcional tanto em computadores com mais recursos, quanto nos laptops UCA (Um Computador por Aluno) e sua resolução de tela bem baixa (800 x 480px). Para você ter uma ideia, os celulares mais populares hoje com o sistema Android ou iOS, tem resolução mais alta que o laptop UCA.
O Planejamento
No planejamento as regras eram claras :)
- Os alunos que usassem seu UCA na escola para acessar a rede não poderiam ter nenhuma funcionalidade sacrificada pela baixa resolução da tela.
- Os usuários com equipamentos mais robustos também não poderiam sofrer com funcionalidades diminuidas só pelo fato de precisarmos atender bem o público do UCA. Não seria justo.
A solução então seria criarmos duas versões do site? Certo? Errado! Precisávamos adotar Responsive Design ou Design Responsivo como o caminho. Técnica que proporciona criar apenas um arquivo HTML com a estrutura da página, e na folha de estilo CSS mudar a apresentação da página dependendo do tamanho da resolução da tela do dispositivo usado. Desta forma não teríamos que criar um site para cada público, o que acabaria multiplicando e muito o trabalho. Contudo o trabalho ainda foi pesado para garantir a qualidade da experiência do usuário, pela quantidade de recursos que a rede oferece (e ainda vai oferecer).
O UCA era só o começo
O desafio já era grande, mas já que teríamos o Design Responsivo no núcleo do planejamento da interface da rede Robô Livre, por que não aproveitar para atender também aos usuários de tablets e smartphones com tela sensível ao toque? Já é um clichê dizer que o mercado de dispositivos móveis não pára de crescer, mas é verdade. Por isso foi um caminho natural. Criamos estilos para atender desde telas dos computadores de mesa, passando por laptops, netbooks, o amado UCA, tablets e chegando aos smartphones. O site mostra o mesmo conteúdo todavia, para oferecer a melhor forma de navegar, a apresentação dos elementos muda em cada dispositivo.
Acreditamos que Design Responsivo casa perfeitamente com a nossa filosofia, respeita a diversidade das plataformas, mostra bem o poder da Web e ajuda a todos terem acesso à informação sem se preocupar com os recursos que possuem. Se ainda não fez, confira como o site é visto em alguns destes diferentes dispositivos navegando pela galeria de imagens no início deste post ou acessando robolivre.org no seu celular, tablet ou UCA.
Os mais curiosos e quem quiser mais informações técnicas podem entrar em contato conosco.