Responsive Web Design

1. responsive web design
GUILHERME COSTA
PG WEB DESIGN
2012 - ESAD

2. introdução
O conceito de “Responsive Web Design”, iniciado e defendido
pelo versátil designer norte-americano Ethan Marcotte, é um dos
mais recentes marcos na evolução da World Wide Web e na
defesa dos Web standards como premissa indispensável ao seu
desenvolvimento.
A forma como a Web tem evoluído, amadurecido, e a crescente
panóplia de suportes através dos quais temos acesso à internet,
estão intrinsecamente ligados à génese deste conceito. A Web
deixará de ser um espaço onde são expostos blocos de informa-
ção (sejam eles gráficos, textuais, visíveis ou audíveis) rígidos,
intransformáveis e iguais para todos os utilizadores, para passar a
ser um espaço que é reinventado a cada acesso de cada utiliza-
dor.
GUILHERME COSTA
PG WEB DESIGN
2012 - ESAD

3. GUILHERME COSTA
PG WEB DESIGN
2012 - ESAD

4. contextualização
Há uma década atrás, o acesso à World Cada um destes aparelhos assume um
Wide Web estava praticamente reservado posicionamento próprio e específico na
ao aparelho onde a mesma se difundiu: o forma como divulga o conteúdo de uma
computador. Nos dias que correm, para plataforma Web. Devido aos diferentes
além do nosso computador pessoal - que, tamanhos de ecrã presentes em cada um
por si só, poderá assumir um de inúmeros destes aparelhos, o espectro de resoluções
tamanhos e feitios - podemos utilizar uma utilizadas no acesso à internet aumenta
infindável panóplia de outros electrodo- exponencialmente.
mésticos para aceder à Web, tais como:
telemóvel; leitor de mp3; consola de jogos;
televisão, etc.
GUILHERME COSTA
PG WEB DESIGN
2012 - ESAD

5. web
GUILHERME COSTA
PG WEB DESIGN Todos os aparelhos que acedem à Web
2012 - ESAD http://www.montparnas.com

6. o que é “responsive web design?”
“Responsive Web Design” é um conceito que defende, através da utilização de
Web Standards:
- a flexibilidade das plataformas Web;
- a sua capacidade de adaptação às diferentes resoluções e tamanhos de ecrã das
plataformas físicas a partir das quais as mesmas são visitadas.
Segundo este conceito, um “Responsive Website” deverá estar munido das ferra-
mentas necessárias à organização e apresentação do seu conteúdo de uma forma
optimizada, obedecendo sempre a uma linha directriz que pretende tornar a visita
do utilizador mais eficiente, simples, clara e prazerosa.
GUILHERME COSTA
PG WEB DESIGN
2012 - ESAD

7. GUILHERME COSTA
PG WEB DESIGN Exemplos de Responsive Web
2012 - ESAD http://www.awwwards.com/50-examples-of-responsive-web-design.html

8. como funciona o conceito
“responsive web design”
O conceito de “Responsive Web Design” é um compromisso entre diversas tecno-
logias já existentes, tais como :
- layout sustentado numa grelha flexível e fluida;
- imagens e outros ficheiros media flexíveis em tamanho;
- “media queries” – um módulo presente na linguagem CSS3.
GUILHERME COSTA
PG WEB DESIGN
2012 - ESAD

9. Página pessoal de Ethan Marcotte
http://www.ethanmarcotte.com
GUILHERME COSTA
PG WEB DESIGN
2012 - ESAD

10. Página pessoal de Simon Collison
http://www.colly.com
GUILHERME COSTA
PG WEB DESIGN
2012 - ESAD

11. arquitectura da informação
Um dos factores que torna o conceito de “Responsive Web Design” tão importante
e distintivo, é o processo de arquitectura da informação a que o mesmo obriga. De
um ponto de vista meramente funcional, é importante estabelecer uma escala
hierárquica de importância relativamente à informação presente numa plataforma
Web. Em determinados suportes, com diferentes tamanhos de ecrã, a exequibili-
dade ou pertinência da apresentação de toda a informação textual e/ou gráfica,
deverá ser repensada .
É importante, então, estabelecer um plano prévio que terá influência na escolha da
informação (ou a ordem da mesma) a apresentar ao utilizador, de acordo com o
tamanho de ecrã com que o mesmo está a visualizar a página.
GUILHERME COSTA
PG WEB DESIGN
2012 - ESAD

12. desktop iPad iPhone
Organização do conteúdo de uma plataforma web
http://www.awwwards.com
GUILHERME COSTA
PG WEB DESIGN
2012 - ESAD

13. “responsive web design”
vs layout fluído vs flash
- layout fluído
Quando surgiram os primeiros layouts desenvolvidos com recurso a CSS, apareceram,
quase simultaneamente, os layouts fluidos. Teoricamente, os mesmos adaptam a infor-
mação textual (e, muito raramente, adaptam os banners e ‘backgrounds’ através da
multiplicação das suas imagens de fundo) à resolução utilizada pela plataforma do
utilizador. O resultado desta prática, porém, é muitas vezes desastroso, originando
longos textos com uma leitura difícil e dolorosa, quebras e distanciamento de blocos
de informação gráfica e/ou textual.
Conclusão: Os layouts fluidos poderão funcionar bem num reduzido espectro de res-
oluções de ecrã. A disparidade entre resoluções pode tornar esta opção inexequível
ou menos vantajosa para o utilizador, tornando a experiência menos eficiente e praz-
erosa.
GUILHERME COSTA
PG WEB DESIGN
2012 - ESAD

14. GUILHERME COSTA
PG WEB DESIGN
2012 - ESAD

15. “responsive web design”
vs layout fluído vs flash
-flash
Os websites desenvolvidos com recurso à tecnologia Flash foram os primeiros a apre-
sentar alguma flexibilidade na apresentação do seu conteúdo. Através da programa-
ção em linguagem Actionscript, é possível criar um “listener” que vai identificar qual a
resolução utilizada pelo utilizador, e adaptar o tamanho e posicionamento de diversos
elementos. No entanto, a crescente defesa e credibilização dos Web Standards, bem
como as lacunas evidentes ao nível da adaptação do Flash a páginas com mais con-
teúdo, colocam a utilização desta tecnologia de parte.
Conclusão: As plataformas em flash poderão funcionar bem em websites com pouco
conteúdo, mas apresentam lacunas graves que desaconselham a sua utilização.
GUILHERME COSTA
PG WEB DESIGN
2012 - ESAD

16. conclusão
O conceito de “Responsive Web Design” é um conceito arrojado, inovador, que
promete revolucionar a experiência do utilizador junto da World Wide Web. Pela
primeira vez, estão reunidas as condições para que o utilizador possa assumir uma
posição confortável neste processo de utilização de um meio de comunicação de
excelência. Da Web, e dos profissionais que dela fazem parte e ajudam a crescer,
espera-se uma vincada capacidade de adaptação e a oferta de premissas capazes
de revolucionar a experiência do utilizador.
GUILHERME COSTA
PG WEB DESIGN
2012 - ESAD

17. bibliografia e webgrafia
Marcotte, Ethan (2011). Responsive Web Design. A Book Apart, Nova Iorque
Vasile, Christian (2011). Introduction to Responsive Web Design,
http://www.1stwebdesigner.com/design/introduction-responsive-web-design/,
Último acesso em: 4/03/2012
GUILHERME COSTA
PG WEB DESIGN
2012 - ESAD