Responsive Web Design
3 gostaram721 visualizações
O documento descreve o conceito de design web responsivo, que defende que sites devem ser capazes de se adaptar a diferentes tamanhos de tela. Isso é feito usando grids flexíveis, imagens e mídia flexíveis e media queries do CSS3. Um design web responsivo garante uma experiência de usuário eficiente e agradável em diferentes dispositivos como desktops, tablets e smartphones.
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