Responsive Web Design
Upcoming SlideShare
Loading in...5
×
 

Responsive Web Design

on

  • 1,181 views

Responsive Web Design

Responsive Web Design

Statistics

Views

Total Views
1,181
Views on SlideShare
1,181
Embed Views
0

Actions

Likes
2
Downloads
14
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive Web Design Responsive Web Design Presentation Transcript

  • responsive web designGUILHERME COSTAPG WEB DESIGN2012 - ESAD
  • 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
  • GUILHERME COSTAPG WEB DESIGN2012 - ESAD
  • 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
  • webGUILHERME COSTAPG WEB DESIGN Todos os aparelhos que acedem à Web2012 - ESAD http://www.montparnas.com
  • 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
  • GUILHERME COSTAPG WEB DESIGN Exemplos de Responsive Web2012 - ESAD http://www.awwwards.com/50-examples-of-responsive-web-design.html
  • 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
  • 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 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
  • desktop iPad iPhone Organização do conteúdo de uma plataforma web http://www.awwwards.comGUILHERME COSTAPG WEB DESIGN2012 - ESAD
  • “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
  • GUILHERME COSTAPG WEB DESIGN2012 - ESAD
  • “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
  • 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
  • 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