Responsive Web Design

responsive web design

GUILHERME COSTAPG WEB DESIGN2012 - ESAD

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.

introdução



Há uma década atrás, o acesso à World

Wide Web estava praticamente reservado

ao aparelho onde a mesma se difundiu: o

computador. Nos dias que correm, para

além do nosso computador pessoal - que,

por si só, poderá assumir um de inúmeros

tamanhos e feitios - podemos utilizar uma

infindável panóplia de outros electrodo-

mésticos para aceder à Web, tais como:

telemóvel; leitor de mp3; consola de jogos;

televisão, etc.

Cada um destes aparelhos assume um

posicionamento próprio e específico na

forma como divulga o conteúdo de uma

plataforma Web. Devido aos diferentes

tamanhos de ecrã presentes em cada um

destes aparelhos, o espectro de resoluções

utilizadas no acesso à internet aumenta

exponencialmente.

contextualização



Todos os aparelhos que acedem à Webhttp://www.montparnas.com

web

“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.

o que é “responsive web design?”


Exemplos de Responsive Webhttp://www.awwwards.com/50-examples-of-responsive-web-design.html


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.

como funciona o conceito “responsive web design”



Página pessoal de Ethan Marcottehttp://www.ethanmarcotte.com


Página pessoal de Simon Collisonhttp://www.colly.com

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.

arquitectura da informação



Organização do conteúdo de uma plataforma webhttp://www.awwwards.com

desktop iPad iPhone

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.

“responsive web design” vs layout fluído vs flash

- layout fluído



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.

“responsive web design” vs layout fluído vs flash

-flash


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.

conclusão


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

bibliografia e webgrafia


Technology

Responsive Web Design