responsive web designGUILHERME COSTAPG WEB DESIGN2012 - ESAD
introdução                  O conceito de “Responsive Web Design”, iniciado e defendido                  pelo versátil des...
GUILHERME COSTAPG WEB DESIGN2012 - ESAD
contextualização                  Há uma década atrás, o acesso à World         Cada um destes aparelhos assume um        ...
webGUILHERME COSTAPG WEB DESIGN           Todos os aparelhos que acedem à Web2012 - ESAD                       http://www....
o que é “responsive web design?”                  “Responsive Web Design” é um conceito que defende, através da utilização...
GUILHERME COSTAPG WEB DESIGN                                          Exemplos de Responsive Web2012 - ESAD       http://w...
como funciona o conceito                  “responsive web design”                  O conceito de “Responsive Web Design” é...
Página pessoal de Ethan Marcotte                  http://www.ethanmarcotte.comGUILHERME COSTAPG WEB DESIGN2012 - ESAD
Página pessoal de Simon Collison                  http://www.colly.comGUILHERME COSTAPG WEB DESIGN2012 - ESAD
arquitectura da informação                  Um dos factores que torna o conceito de “Responsive Web Design” tão importante...
desktop                iPad               iPhone                            Organização do conteúdo de uma plataforma web ...
“responsive web design”                  vs layout fluído vs flash                  - layout fluído                  Quando s...
GUILHERME COSTAPG WEB DESIGN2012 - ESAD
“responsive web design”                  vs layout fluído vs flash                  -flash                  Os websites desen...
conclusão                  O conceito de “Responsive Web Design” é um conceito arrojado, inovador, que                  pr...
bibliografia e webgrafia                  Marcotte, Ethan (2011). Responsive Web Design. A Book Apart, Nova Iorque          ...
Upcoming SlideShare
Loading in …5
×

Responsive Web Design

1,083 views
1,017 views

Published on

Responsive Web Design

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,083
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
22
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Responsive Web Design

  1. 1. responsive web designGUILHERME COSTAPG WEB DESIGN2012 - ESAD
  2. 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 COSTAPG WEB DESIGN2012 - ESAD
  3. 3. GUILHERME COSTAPG WEB DESIGN2012 - ESAD
  4. 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 COSTAPG WEB DESIGN2012 - ESAD
  5. 5. webGUILHERME COSTAPG WEB DESIGN Todos os aparelhos que acedem à Web2012 - ESAD http://www.montparnas.com
  6. 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 COSTAPG WEB DESIGN2012 - ESAD
  7. 7. GUILHERME COSTAPG WEB DESIGN Exemplos de Responsive Web2012 - ESAD http://www.awwwards.com/50-examples-of-responsive-web-design.html
  8. 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 COSTAPG WEB DESIGN2012 - ESAD
  9. 9. Página pessoal de Ethan Marcotte http://www.ethanmarcotte.comGUILHERME COSTAPG WEB DESIGN2012 - ESAD
  10. 10. Página pessoal de Simon Collison http://www.colly.comGUILHERME COSTAPG WEB DESIGN2012 - ESAD
  11. 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 COSTAPG WEB DESIGN2012 - ESAD
  12. 12. desktop iPad iPhone Organização do conteúdo de uma plataforma web http://www.awwwards.comGUILHERME COSTAPG WEB DESIGN2012 - ESAD
  13. 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 COSTAPG WEB DESIGN2012 - ESAD
  14. 14. GUILHERME COSTAPG WEB DESIGN2012 - ESAD
  15. 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 COSTAPG WEB DESIGN2012 - ESAD
  16. 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 COSTAPG WEB DESIGN2012 - ESAD
  17. 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/2012GUILHERME COSTAPG WEB DESIGN2012 - ESAD

×