Design Responsivo

5.698 visualizações

Publicada em

Material apresentado à turma 2 de Especialização em Desenvolvimento Web da UTFPR-Londrina.

Publicada em: Tecnologia
2 comentários
28 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
5.698
No SlideShare
0
A partir de incorporações
0
Número de incorporações
35
Ações
Compartilhamentos
0
Downloads
0
Comentários
2
Gostaram
28
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Design Responsivo

  1. 1. DESIGN RESPONSIVO por Rennan M. Rodrigues Programador de Interfaces Agência Digital ICOMP | grupo AVADORA
  2. 2. O QUE É?“É o design de um site que se adapta aocomportamento do usuário com base notamanho da tela, plataforma eorientação.”http://www.thismanslife.co.uk/projects/lab/responsiveillustration/
  3. 3. O FUTURO DO MOBILE
  4. 4. O FUTURO DO MOBILE DA WEB
  5. 5. ATÉ O ANO DE 2015...“O número total de pessoas que terãoacesso à internet em dispositivosmóveis irá ultrapassar os acessos viadesktop.” INTERNATIONAL DATA CORPORATION http://www.idc.com/getdoc.jsp?containerId=prUS23028711
  6. 6. MAIS ESTATÍSTICAShttp://www.thinkwithgoogle.com/mobileplanet/en/
  7. 7. COMO SURGIU?A expressão Design Responsivo foisugerida por EthanMarcotte, em um blogchamado A List Apart.25/05/10 - Post originalhttp://www.alistapart.com/articles/responsive-web-design/
  8. 8. E COMO FUNCIONA?
  9. 9. E COMO FUNCIONA?É composto por 3 componentes principais:1 - Layouts Fluídos2 - Imagens Flexíveis3 - Media Queries
  10. 10. LAYOUTS FLUÍDOSSão telas baseadas emporcentagens. As telas seadaptam de acordo com alargura suportada pelodispositivo.
  11. 11. LAYOUTS FLUÍDOS● Planejar o que pode e o que não pode ter seu tamanho alterado● Representar os tamanhos fixos em porcentagens
  12. 12. LAYOUTS FLUÍDOS
  13. 13. LAYOUTS FLUÍDOS
  14. 14. LAYOUTS FLUÍDOSUtilize grades como basepara posicionamento ealinhamento de blocos deconteúdos. Utilize GRIDS!
  15. 15. Framelesshttp://framelessgrid.com/Twitter Bootstraphttp://twitter.github.com/bootstrap/Responsive Grid Systemhttp://www.responsivegridsystem.com/960 Grid Systemhttp://960.gs/The Goldilocks Approachhttp://goldilocksapproach.com/
  16. 16. IMAGENS FLEXÍVEISÉ possível fazer com que a imagemtenha o redimensionamento automáticodefinindo no CSS largura e altura com %.DEMONSTRAÇÃO:http://webdesignerwall.com/demo/responsive-css-tricks/
  17. 17. MAS ISSO GERA O SEGUINTE PROBLEMA...Não adianta reduzirmos alargura da imagem em % seela possuir 2Mb de tamanho.E se eu acessar do meusmartphone via 3g?
  18. 18. Para resolver esse problema, estásendo discutido uma nova forma demarcação onde o browserselecionaria o melhor arquivo deimagem a ser utilizado de acordo comacordo com os parâmetrosescolhidos.CONHEÇA O RICGResponsive Image Community Grouphttp://www.w3.org/community/respimg/
  19. 19. IMAGENS FLEXÍVEISComo ainda está em fase de discussão,existem várias propostas, mas já foramdesenvolvidos alguns polyfills que fazem omesmo propósito.ALGUNS POLYFILLShttp://adaptive-images.com/http://wil.to/picturefill/
  20. 20. MEDIA QUERIESPodemos especificar condições de CSSS deacordo com a capacidade de exibição dodispositivo.Por exemplo, com algumas linhas de CSS épossível mudar a maneira que o conteúdo seráexibido, como sua altura, aspect radio,orientação (landscape ou portrait) e assim pordiante.
  21. 21. MEDIA QUERIESO browser ou a aplicação lê asexpressões definidas na query, caso odispositivo se encaixe nestasrequisições, o CSS será aplicado.
  22. 22. O uso de Media Queries setornou recomendação desde19 de Junho de 2012.http://www.w3.org/TR/css3-mediaqueries/
  23. 23. VAMOS FAZER UM EXEMPLO?
  24. 24. MEDIA QUERIESFERRAMENTAS BACANAS:http://responsive.ishttp://www.responsinator.com/http://screenqueri.es/http://www.opera.com/developer/tools/mobile/
  25. 25. MEDIA QUERIESO QUE UM CSS COM MEDIA QUERES É CAPAZDE FAZER?http://j.mp/respSimpsons
  26. 26. RESPONSIVO, MAS...Só usar media-queries e trocar tudo praporcentagem no CSS não vai fazer doseu site responsivo ou com a melhorexperiência para o usuário.
  27. 27. RESPONSIVO, MAS...Desenvolver para mobile têm váriosoutros desafios, ainda mais sequeremos que o mesmo site sirva todomundo.
  28. 28. RESPONSIVO, MAS... O CONTEÚDO É QUE IMPORTA OTIMIZAR É ESSENCIAL FOCO NA EXPERIÊNCIA DO USUÁRIO MOBILE FIRST!http://www.abookapart.com/products/mobile-first/
  29. 29. REFERÊNCIAShttp://adaptive-images.com/http://css-tricks.com/http://mediaqueri.es/http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/http://www.designadaptavel.com.br/artigos/layout-fluido-ou-liquido
  30. 30. REFERÊNCIASFRAIN, Ben. Responsive Web Design with HTML5and CSS3. Ed. Packt Publishing, Abril 2012.Livro no Google BooksLivro no Amazon
  31. 31. OBRIGADO!

×