Responsive Design - Introdução

2.444 visualizações

Publicada em

O que é, como funciona, media types (media queries), design, recomendações e frameworks, bootstrap.

Material de estudos elaborado por Marcos César // www.marcoscesar.com

Todo o conteúdo é livre e pode ser copiado, consultado sempre e divulgado em toda internet desde que citados os créditos.

cc 2013 Construsite Brasil - Desenvolvimento web.

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

Nenhuma nota no slide

Responsive Design - Introdução

  1. 1. Construsite Brasil Criação de sites L A Y O U T RESPONSIVO
  2. 2. Construsite Brasil Criação de sites RESPONSIVO PROJETAR INTERFACE FLEXÍVEL PARA DIFERENTES RESOLUÇÕES E DISPOSITIVOS, QUE TENHA FOCO NA EXPERIÊNCIA DO USUÁRIO ATRAVÉS DAS NOVAS TECNOLOGIAS DE DESENVOLVIMENTO WEB.
  3. 3. Construsite Brasil Criação de sites DE ONDE VOCÊ ACESSA E ATRAVÉS DE QUAL DISPOSITIVO?
  4. 4. Construsite Brasil Criação de sites Construsite Brasil Criação de sites
  5. 5. Construsite Brasil Criação de sites Construsite Brasil Criação de sites
  6. 6. Construsite Brasil Criação de sites Construsite Brasil Criação de sites
  7. 7. Construsite Brasil Criação de sites Construsite Brasil Criação de sites
  8. 8. Construsite Brasil Criação de sites 2010 APROXIMADAMENTE EM 2010 OS DESIGNERS E DESENVOLVEDORES DE INTERFACES COMEÇARAM A PENSAR NESTE MÉTODO DE MANTER A ESTRUTURA, PORÉM PROMOVER DIFERENCIAIS NA INTERFACE PARA MELHORAR A EXPERIÊNCIA DO USUÁRIO. ~
  9. 9. Construsite Brasil Criação de sites PRINCÍPIOS PARA UM BOM LAYOUT RESPONSIVO Construsite Brasil Criação de sites
  10. 10. Construsite Brasil Criação de sites PRINCÍPIOS PARA UM BOM LAYOUT RESPONSIVO PLANEJAMENTO WIREFRAMES/MOCKUPS/ROUGHS/DRAFTS (É A ALMA DE QUALQUER INTERFACE SURPREENDENTE. É NESTE PONTO QUE A MAIORIA DOS PROFISSIONAIS ERRAM.) Construsite Brasil Criação de sites
  11. 11. Construsite Brasil Criação de sites PRINCÍPIOS PARA UM BOM LAYOUT RESPONSIVO PLANEJAMENTO WIREFRAMES/MOCKUPS/ROUGHS/DRAFTS (É A ALMA DE QUALQUER INTERFACE SURPREENDENTE. É NESTE PONTO QUE A MAIORIA DOS PROFISSIONAIS ERRAM.) MELHORES PRÁTICAS DE DESENVOLVIMENTO ACREDITE! NINGUÉM SABE 100% CSS OU HTML. ENTÃO, ESTUDE. PRINCIPALMENTE PARA UTILIZAR UM FRAMEWORK. Construsite Brasil Criação de sites
  12. 12. Construsite Brasil Criação de sites PRINCÍPIOS PARA UM BOM LAYOUT RESPONSIVO PLANEJAMENTO WIREFRAMES/MOCKUPS/ROUGHS/DRAFTS (É A ALMA DE QUALQUER INTERFACE SURPREENDENTE. É NESTE PONTO QUE A MAIORIA DOS PROFISSIONAIS ERRAM.) MELHORES PRÁTICAS DE DESENVOLVIMENTO SAIBA COMO O USUÁRIO DOS PRINCIPAIS DISPOSITIVOS SE COMPORTA. ACREDITE! NINGUÉM SABE 100% CSS OU HTML. ENTÃO, ESTUDE. PRINCIPALMENTE PARA UTILIZAR UM FRAMEWORK. Construsite Brasil Criação de sites
  13. 13. Construsite Brasil Criação de sites QUAIS AS VANTAGENS DE DESENVOLVER UM PROJETO RESPONSIVO?
  14. 14. Construsite Brasil Criação de sites QUAIS AS VANTAGENS DE DESENVOLVER UM PROJETO RESPONSIVO? SEO- Não ao conteúdo duplicado. (http://m.meusite.com/). - Utilização dos microdados e marcações simples e semânticas.
  15. 15. Construsite Brasil Criação de sites QUAIS AS VANTAGENS DE DESENVOLVER UM PROJETO RESPONSIVO? SEO- Não ao conteúdo duplicado. (http://m.meusite.com/). - Utilização dos microdados e marcações simples e semânticas. DESIGN- Identidade visual uniforme. - Experiência do usuário é o foco. - Não se projeta para plataforma e sim para usuários.
  16. 16. Construsite Brasil Criação de sites PROGRAMAÇÃO ÚNICA- Mais produtividade no back-end. - Único banco e única linguagem. QUAIS AS VANTAGENS DE DESENVOLVER UM PROJETO RESPONSIVO? SEO- Não ao conteúdo duplicado. (http://m.meusite.com/). - Utilização dos microdados e marcações simples e semânticas. DESIGN- Identidade visual uniforme. - Experiência do usuário é o foco. - Não se projeta para plataforma e sim para usuários.
  17. 17. Construsite Brasil Criação de sites GOOGLE- Recomenda a utilização desta técnica. - Punições: 1. Sites que exibe conteúdo em flash para dispositivos móveis. 2. Sites que exibe layout para desktop em dispositivos móveis. 3. Se o usuário acessar “meusite.com/casa” e for direcionado para “m.meusite.com”. PROGRAMAÇÃO ÚNICA- Mais produtividade no back-end. - Único banco e única linguagem. DESENVOLVER UM PROJETO RESPONSIVO? SEO- Não ao conteúdo duplicado. (http://m.meusite.com/). - Utilização dos microdados e marcações simples e semânticas. DESIGN- Identidade visual uniforme. - Experiência do usuário é o foco. - Não se projeta para plataforma e sim para usuários.
  18. 18. Construsite Brasil Criação de sites Construsite Brasil Criação de sites
  19. 19. Construsite Brasil Criação de sites Construsite Brasil Criação de sites #comofaz?
  20. 20. Construsite Brasil Criação de sites ESCOLHA UM BOM FRAMEWORK PARA O SEU FRONT-END
  21. 21. Construsite Brasil Criação de sites ESCOLHA UM BOM FRAMEWORK PARA O SEU FRONT-END
  22. 22. Construsite Brasil Criação de sites ESCOLHA UM BOM FRAMEWORK PARA O SEU FRONT-END TWITTER BOOTSTRAP http://twitter.github.io/bootstrap/
  23. 23. Construsite Brasil Criação de sites ESCOLHA UM BOM FRAMEWORK PARA O SEU FRONT-END TWITTER BOOTSTRAP http://twitter.github.io/bootstrap/ FOUNDATION http://foundation.zurb.com
  24. 24. Construsite Brasil Criação de sites ESCOLHA UM BOM FRAMEWORK PARA O SEU FRONT-END TWITTER BOOTSTRAP http://twitter.github.io/bootstrap/ FOUNDATION http://foundation.zurb.com HTML5 BOILERPLATE http://html5boilerplate.com
  25. 25. Construsite Brasil Criação de sites ESCOLHA UM BOM FRAMEWORK PARA O SEU FRONT-END TWITTER BOOTSTRAP http://twitter.github.io/bootstrap/ FOUNDATION http://foundation.zurb.com HTML5 BOILERPLATE http://html5boilerplate.com PURE CSS http://purecss.io
  26. 26. Construsite Brasil Criação de sites Adobe Edge Reflow CC (Preview) Design the responsive web. http://html.adobe.com/edge/reflow/ Construsite Brasil Criação de sites
  27. 27. Construsite Brasil Criação de sites MEDIA QUERIES SEMÂNTICA HTML5 http://www.w3.org/TR/css3-mediaqueries/ CSS3 +
  28. 28. Construsite Brasil Criação de sites MEDIA QUERIES //html link <link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css"> <link rel="stylesheet" type="text/css" media="print" href="serif.css"> //stylesheet document @media screen { * { font-family: sans-serif } }
  29. 29. Construsite Brasil Criação de sites MEDIA QUERIES (MEDIA TYPES) //html link - é no atributo media que definimos para quais dispositipos, resoluções, tamanhos ou aplicações servirá nossa folha de estilo. <link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css"> <link rel=”stylesheet” media=”screen and (color)” href=”example.css” /> <link rel=”stylesheet” media=”aural and (device-aspect-ratio: 16/9)” href=”example.css” /> <link rel=”stylesheet” media=”speech and (min-device-width: 800px)” href=”example.css” /> <link rel=”stylesheet” media=”screen and (device-height: 600px)” /> <link rel=”stylesheet” media=”print and (color)” href=”http://…” /> <link rel=”stylesheet” media=”print and (monochrome)” href=”http://…” />
  30. 30. Construsite Brasil Criação de sites MEDIA QUERIES //stylesheet document @media screen { * { font-family: sans-serif } } @media all and (min-width:500px) { … } @media (min-width:500px) { … } @media all and (orientation:portrait) { … } @media all and (orientation:landscape) { … } @media (min-width: -100px) { … } @media screen and (device-width: 800px) { … } @media all and (monochrome) { … } @media all and (min-monochrome: 1) { … } @media print and (min-resolution: 300dpi) { … } @media tv and (scan: progressive) { … } (MEDIA TYPES)
  31. 31. Construsite Brasil Criação de sites MEDIA QUERIES (MEDIA TYPES) //initial scale <meta name=”viewport” content=”width=device-width, initial-scale=1” />
  32. 32. Construsite Brasil Criação de sites MEDIA QUERIES (MEDIA TYPES) NORMAL SLTYLE (width: 1024px or +) TABLET (width: 1023-768px) SMART PHONE (width: 767-479px)
  33. 33. Construsite Brasil Criação de sites MEDIA QUERIES (MEDIA TYPES)
  34. 34. Construsite Brasil Criação de sites http://mediaqueri.es (MEDIA TYPES - EXEMPLOS)
  35. 35. Construsite Brasil Criação de sites Créditos Construsite Brasil Criação de sites www.construsitebrasil.com Marcos César Desenvolvedor front-end e Designer Material elaborado por:
  36. 36. Construsite Brasil Criação de sites Referências Introdução ao Responsive Web Design. Tabeless. [acesso em 26 de junho de 2013]. Disponível em: http://tableless.com.br/introducao-ao-responsive-web-design/#.Ucwyhz7wLT0 Design Responsivo na prática: do rascunho ao digital. [acesso em 26 de junho de 2013]. Disponível em: http://tableless.com.br/design-responsivo-na-pratica-do-rascunho-ao-digita/#.UcwzRj7wLT0 Slides para Devs #3 – Responsive Web Design. Tabeless. [acesso em 26 de junho de 2013]. http://tableless.com.br/slides-para-devs-3-responsive-web-design/#.UcwzQz7wLT0 Adobe Edge Reflow CC (Preview) Design the responsive web. [acesso em 26 de junho de 2013]. http://html.adobe.com/edge/reflow/ Responsive Design - the only mobile strategy that scales. [acesso em 26 de junho de 2013]. Disponível em: http://visual.ly/responsive-design-only-mobile-strategy-scales Responsive design : 10 exemples de sites web de destinations touristiques. [acesso em 26 de junho de 2013]. Disponível em: http://www.leweboskop.fr/responsive-design-10-exemples-de-sites-web-de-destinations-touristiques/ What is Responsive Design!?. [acesso em 26 de junho de 2013]. Disponível em: http://vinaganda.com/what-is-responsive-design/ Layouts Responsivos. Bernard De Luna/Zeno Rocha . [acesso em 26 de junho de 2013]. Disponível em: http://www.slideshare.net/bernarddeluna/pdf-apresentacaolayoutsresponsivos Design Responsivo: Entenda o que é a técnica e como ela funciona. [acesso em 26 de junho de 2013]. Disponível em: http://www.midiatismo.com.br/o-mobile/design-responsivo-entenda-o-que-e-a-tecnica-e-como-ela-funciona

×