A variedade de dispositivos apresentados no mercado é vasta: uns apresentam- se com ecrãs menores, outros com ecrãs maiores, sendo que a maioria permite o acesso à Web. Assiste-se a uma variação constante, nunca antes observada, apresentando um panorama que permite aos utilizadores acederem ao conteúdo fora do tradicional ecrã do
seu computador pessoal (desktop), através de dispositivos que tornam a apresentação da interface maior ou menor, simultaneamente. Dispositivos com pequenos ecrãs tornam-se protagonistas no consumo de informação presente na Web, enquanto dispositivos como o Tablet, que são adquiridos por um número elevado de indivíduos2, apresentam um modo de aceder à Web que não se considera nem “móvel” nem “desktop”, mas que se encontra no meio de ambos. Consequentemente, há uma necessidade de desenhar para variados dispositivos, para diferentes tipos de input e para mais resoluções, uma vez que a Web se moveu para além do desktop. Os últimos anos têm mostrados que não se consegue competir com o ritmo da tecnologia, o que obriga aos tecnólogos, designers e indivíduos ligados a esta área, uma constante atualização e aprendizagem sobre o mundo digital.
Face às mudanças enunciadas, de que forma o designer deverá desenhar as interfaces para os diferentes dispositivos? Será necessário criar uma experiência personalizada para cada navegador? Ao invés de criar projetos específicos para cada situação, estes deverão ser pensados como facetas do mesmo, ou seja, deverão ser criados projetos flexíveis e que se adaptem aos diferentes dispositivos. Juntando uma grelha flexível, conteúdo multimédia fluido e media queries3 (CSS3) é criada uma interface que se adapta aos constrangimentos da janela do navegador (browser) para que o dispositivo em questão proceda ao carregamento da informação, apresentando um projeto que responde às necessidades do utilizador – estes são os três ingredientes técnicos pertenceste ao Responsive Design (Marcotte, 2011). Desta forma, podemos definir o Responsive Design como uma abordagem que sugere que a conceção e o desenvolvimento deverão responder ao comportamento do utilizador e do meio-ambiente baseado no tamanho do ecrã, da plataforma e da orientação. Tal como o utilizador consulta conteúdo no seu computador e troca para o seu telemóvel, também o website deverá, automaticamente, adaptar-se às diferentes resoluções, ou seja, este deverá estar preparado, tecnologicamente, para responder às preferências do utilizador, o que evita uma fase de desenvolvimento diferente para cada dispositivo – Figura 10.
2
O número de portugueses que utilizam o tablet triplica em 2013: três em cada quatro afirma utilizar um Tablet pessoal (Marktest, 2014).
3
Media queries é um módulo do CSS3 que permite apresentar o conteúdo adaptado a
determinadas condições, como por exemplo, a resolução do ecrã ou a altura do dispositivo (Sitepoint, 2014) - para uma descrição mais detalhada, cf. pp. 19.
Figura 10 – Responsive Design Mashable Website - diferentes dispositivos (Fonte: http://mashable.com/2012/12/11/responsive-web-design/)
Anteriormente, quando os layouts fluídos eram raros nos websites, apenas as colunas e o texto eram flexíveis, sendo que as imagens facilmente quebravam a forma do layout, bem como outros elementos da interface. Atualmente, o layout de um website agrupa-se em três categorias, de acordo com o tamanho da sua largura: tamanho-fixo, fluído e elástico ou ainda combinando os três e criando um layout híbrido. Em qualquer um destes tipos, é possível apresentar o número de colunas que desejar, onde o tipo escolhido apenas estabelece de que forma o navegador determina a largura da interface para a apresentar ao utilizador (Gillenwater, 2008).
Não importa o quão perfeito é o desenvolvimento do layout flexível, pois ele não irá funcionar se o conteúdo não for também flexível. A flexibilidade das imagens e do conteúdo multimédia de um website responsivo é considerada um dos maiores problemas na criação de uma interface, sendo que existe um conjunto de técnicas para redimensionar proporcionalmente a imagem de acordo com o tamanho do ecrã. Através do uso de media querias (CSS3) é possível definir diferentes estilos de acordo com os diversos tamanhos do ecrã, sem que isso altere o layout geral da interface, aplicando apenas a adaptação necessária – é feita uma leitura por parte do browser ao ficheiro de CSS, onde este pergunta se resolução horizontal é menor ou igual a determinado valor e consoante a resposta, aplica determinado estilo ou não (Marcotte, 2011).
Figura 11 - Think Vitamin Website - Responsive Design (Fonte:
http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/)
A Figura 11 corresponde à visualização do website Think Vitamin em diferentes tamanhos do ecrã – a primeira imagem corresponde à visualização da página em ecrãs de grandes dimensões e a segunda imagem corresponde à visualização em ecrãs com dimensões menores. Nas dimensões de um tradicional ecrã de computador, o logótipo apresenta-se no canto superior esquerdo, seguindo-se o menu também no topo da página e posteriormente é apresentando o conteúdo por baixo do menu de navegação. Quando visualizado num ecrã de dimensão menor, como apresentado na segunda imagem, a página sofre algumas adaptações, nomeadamente: as barras da lateral e do topo são removidas, simplificando o menu de navegação, que se posiciona logo a seguir ao logótipo - este mantém-se, alterando a sua posição para transmitir uma orientação vertical. O espaço em branco em torno do conteúdo visto no ecrã de grandes dimensões é maior, sendo cortado para fins práticos em ecrãs de menor dimensão. Isto permite aferir que o website é flexível com o tamanho da janela do browser, seja em dimensões
estandardizadas ou assim que a página é consultada em dispositivos com ecrãs pequenos, o layout altera-se para um formato mais legível e user-friendly (Knight, 2011).
Os dispositivos são variados não apenas por possuírem diferentes capacidades e limitações técnicas, mas porque os seus utilizadores usam-nos de formas diferentes. Esses mesmos dispositivos procuram proporcionar diferentes experiências de utilização que requerem diferentes soluções ao nível da interface: isto exige um investimento ao nível do design e das funcionalidades de cada plataforma, para que estas proporcionem experiências únicas e distintas. A combinação certa de uma experiência dirigida ao tipo de dispositivo, uma página com Responsive Design e uma interface fluída conseguem assegurar uma experiência de qualidade a quem usufrui da plataforma (Wroblewski, 2011).
É necessário continuar a aprofundar o conhecimento relativamente aos novos dispositivos, resoluções e tecnologias que estão em constante evolução com o objetivo de aumentar a qualidade da experiência do utilizador para um número elevado de utilizadores que utilizam um número elevado de diferentes dispositivos (Knight, 2011).