Responsive Web Design

Abstract

From computers to tablets and smartphones, the term ubiquity, combined with the diversity of devices available in the market, has changed the way we access and share information. It has become more and more important to offer solid user experiences to an increasing number of contexts. Responsive Web Design offers a set of tools to support the creation of web pages that adapt to any screen size. We use fluid grids, flexible images and media queries to adapt web pages regardless of the device's screen dimensions. Hoping to contribute with new resources to the responsive design area, this dissertation describes how a tool was developed which allows web sites' navigation to automatically adapt, according to different patterns. The main goal is to make designers' and developers' work easier by providing adaptive menus that adjust to the screen size. However, different use contexts cannot be limited to the screen size. Thinking on the specific case of mobile devices, which are with us wherever we go, different connectivity conditions (from strong wireless networks to limited 3G connections) may have an impact on the user experience. That's why optimization is such an important topic in responsive web design. Furthermore, touch screens open new opportunities to interact directly with the website and its content. Taking advantage of this new set of interactions, the featured tool reflects this optimization to approach user experience to each context.

Dos computadores aos tablets e smartphones, a noção de ubiquidade, aliada à diversidade de dispositivos disponíveis no mercado, mudou a forma como acedemos e partilhamos informação nos dias de hoje. É cada vez mais importante oferecer experiências de utilização consistente para um crescente número de contextos. O Responsive Web Design oferece um conjunto de ferramentas que permitem criar páginas web que respondem ao tamanho de qualquer ecrã. São utilizadas grids fluidas, imagens flexíveis e media queries para adaptar as páginas web independentemente das dimensões de ecrã do dispositivo. Na expetativa de contribuir com novos recursos para a área do responsive design, ao longo desta dissertação é descrito o desenvolvimento de uma ferramenta que permite adaptar automaticamente a navegação dos sites e aplicações web, tendo em conta diferentes soluções padrão. O seu objetivo consiste em facilitar o trabalho dos designers e developers, apresentando sempre um menu adaptado ao tamanho do ecrã. No entanto, os diferentes contextos de utilização não se podem limitar apenas ao tamanho do ecrã. Pensando no caso concreto dos dispositivos móveis, que nos acompanham para qualquer lugar, diferentes condições de conectividade (desde fortes redes wireless, a conexões 3G limitadas) podem ter impacto na experiência de utilização. A otimização é, por isso, um fator importante em responsive web design. Além disso, os ecrãs sensíveis ao toque abrem novas oportunidades para interagir com o site e com o seu o conteúdo. De forma a tirar partido deste tipo de interações, a ferramenta desenvolvida reflete esta otimização, tentando assim aproximar a experiência de utilização ao contexto utilizado.