Responsive Web Design

7,456 views
7,318 views

Published on

Apresentação sobre Responsive Web Design, conceito, fundamentos teóricos e técnicas vigentes.

Published in: Technology

Responsive Web Design

  1. 1. Responsive Web Design Talita Pagani MStech | @talitapagani
  2. 2. Quem sou• Programadora / Tester na Mstech• Bacharel em Ciência da Computação – Pós-graduanda em Gerenciamento de Projetos• Articulista no Tableless• Palestrante em eventos de front-end e curadora do FrontInterior
  3. 3. Alinhando expectativasO que é este minicurso O que não é este minicurso• Introdução ao conceito de • Curso avançado de Responsive Web Design desenvolvimento web (RWD) ou Design • Curso de Mobile First Responsivo (apesar de ser• Apresentações de mencionado) exemplos e fundamentos básicos de RWD • Curso de HTML, CSS e• Bootstrap para quem padrões web deseja iniciar o desenvolvimento de sites responsivos
  4. 4. Conceito
  5. 5. Fonte: http://www.siliconbeachtraining.co.uk/blog/wp-content/uploads/2012/05/Responsive-Web-Design.jpg Saindo da zona de conforto
  6. 6. “Dia-a-dia, cresce o número dedispositivos, plataformas enavegadores em que o seu siteprecisa funcionar. O DesignResponsivo representa uma mudançafundamental na forma como iremosconstruir sites na próxima década.”Jeffrey Veen
  7. 7. “O número total de pessoas acessando a web através de dispositivos móveis irá superar o acesso via desktop em 2015.”International Data Corporation (IDC)http://www.idc.com/getdoc.jsp?containerId=prUS23028711
  8. 8. Responsive Design é...• Adaptação de páginas web para – Diferentes resoluções – Diferentes orientações de tela – Distintas plataformas de interação – Otimização de performance
  9. 9. Responsive Design não é...• Adaptação de layout considerando apenas dispositivos diferentes• Apenas layout fluído• Layout adaptativo• Miniaturização de um site
  10. 10. Estes sites possuem umlayout responsivo...
  11. 11. Este não...
  12. 12. Muito menos este!Veja você mesmo: http://www2.warnerbros.com/spacejam/movie/jam.htm
  13. 13. Quem “inventou” isso?
  14. 14. Fonte: http://www.alistapart.com/articles/responsive-web-design
  15. 15. Cenário atualFonte: http://www.artistechnewmedia.com/thenest/wp-content/uploads/2012/03/responsive-web-design.jpg
  16. 16. Fonte: http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  17. 17. Mobile no Brasil 2008: 794 usuários de telefonia móvel / 100 mil habitantes Fonte: IBGE 2011: 40 milhões Fonte: G1 de usuários de celular com acesso à internet
  18. 18. Conceitos de um layout responsivo• Controle do viewport• Grids adaptativas• Imagens flexíveis• CSS Media Queries
  19. 19. ViewportFonte: http://www.iconfinder.com/icondetails/81865/512/_icon
  20. 20. Viewport• Aréa de visualização onde o site aparece Largura de tela ≠ Resolução• Customização do viewport: definir resolução inicial e evitar miniaturização
  21. 21. Páginas sem definição de viewportFonte: http://thecodinghumanist.com/blog/archives/2012/1/25/using-the-viewport-meta-tag-for-fun-and-profit http://www.html5today.it/tutorial/mobile-web-development-meta-tag-viewport-visualizzazione-ottimale
  22. 22. Metatag viewport <name="viewport" content="">• Parâmetros – width/height: valor ou device-[width/height] <name="viewport" content=“width=device-width"> – initial-scale: 0 a 10 <name="viewport" content=“width=device-width, initial-scale=1"> – user-scalable: yes/no <name="viewport" content=“width=device-width, initial-scale=1, user-scalable=no"> – minimum-scale, maximum-scale: 0.25 a 10 <name="viewport" content=“width=device-width, initial-scale=1, maximum-scale=1.5">
  23. 23. Páginas com definição de viewportFonte: http://thecodinghumanist.com/blog/archives/2012/1/25/using-the-viewport-meta-tag-for-fun-and-profit http://www.html5today.it/tutorial/mobile-web-development-meta-tag-viewport-visualizzazione-ottimale
  24. 24. Futura implementação para CSS3@viewport { width: 320px; height: device-height; zoom: 1; max-zoom: 2; min-zoom: 0.5;}
  25. 25. Fonte Aa
  26. 26. Fontesbody { font: normal 100% Cambria, Georgia, serif;}• Fonte padrão de 16px na maioria dos browsers• Para os demais elementos, uso da medida relativa em – Tamanho desejado ÷ contexto = resultado – Ex.: 24 ÷ 16 = 1.5h1 { font-size: 1.5em; /* 24px / 16px */ font-style: italic; font-weight: normal;}
  27. 27. Fontes• Para este códigoh1 span { }• Onde desejamos ter uma fonte de 11px, iremos dividir a fonte desejada pelo novo contexto, 24px – 11 ÷ 24 = 0.458333333333333 – Contexto = tamanho da fonte do elemento ancestralh1 span { font: bold 0.458333333333333em Calibri, Optima,Arial, sans-serif; /* 11px / 24px */ color: #747474; letter-spacing: 0.15em;}
  28. 28. GridsFonte: http://www.agencyofrecord.com/library/resources338/images/articles/responsive_web_design_grids.jpg
  29. 29. Grid
  30. 30. Grid
  31. 31. 940pxGrid40px20px 460px 460px
  32. 32. Grids Flexíveis• Transforme as larguras fixas em larguras variáveis – Mesma fórmula: Tamanho desejado ÷ contexto = resultado – Unidade diferente: %
  33. 33. <div> width: 960px <header> width: 940px; margin-left: 10px; margin-right: 10px <article> <aside>width: 570px; margin-left: 10px; margin-right: width: 315px; margin-left: 10px; 10px; padding-right: 10px; margin-right: 10px; padding-left: 25px; <section> <section> <section> width: width: width: 160px 160px 160px
  34. 34. <div> max-width: 960px <header> width: 940 / 960; margin-left: 10px; margin-right: 10px <article> <aside>width: 570 / 960; margin-left: 10px; margin- width: 315 / 960; margin-left: right: 10px; padding-right: 10px; 10px; margin-right: 10px; padding-left: 25px;<section> <section> <section>width: 160 width: 160 width: 160 / 570 / 570 / 570
  35. 35. <div> max-width: 960px <header> width: 97.91666666666667%; margin-left: 10px; margin-right: 10px <article> <aside>width: 59.375%; margin-left: 10px; margin-right: width: 32.8125%; margin-left: 10px; padding-right: 10px; 10px; margin-right: 10px; padding-left: 25px; <section> <section> <section> width: width: width: 28.0701754 28.0701754 28.0701754 3859649% 3859649% 3859649%
  36. 36. Margin e padding relativos• Margin – Considera a largura do elemento-pai• Padding – Considera a largura do próprio elemento
  37. 37. <div> max-width: 960px <header> width: 97.91666666666667%; margin-left: 10 / 940; margin-right: 10 / 940 <article> <aside>width: 59.375%; margin-left: 10 / 940; margin- width: 32.8125%; margin-left: 10 right: 10 / 940; padding-right: 10 / 570; / 940; margin-right: 10 / 940; padding-left: 25 / 315; <section> <section> <section> width: width: width:28.0701754 28.0701754 28.0701754 3859649% 3859649% 3859649%
  38. 38. <div> max-width: 960px <header> width: 97.91666666666667%; margin-left: 1.04166666666667%; margin-right: 1.04166666666667% <article> <aside> width: 59.375%; margin-left: width: 32.8125%; margin-left: 1.04166666666667%; margin-right: 1.04166666666667%; margin- 1.04166666666667%; padding-right: right: 1.04166666666667%; 1.75438596491228%; padding-left: 7.93650793650794%; <section> <section> <section> width: width: width:28.0701754 28.0701754 28.0701754 3859649% 3859649% 3859649%
  39. 39. Considerando a largura docontainer também de formarelativa, dado o contexto de1280px para a página
  40. 40. <div> width: 960 / 1280 <header> width: 97.91666666666667%; margin-left: 1.04166666666667%; margin-right: 1.04166666666667% <article> <aside> width: 59.375%; margin-left: width: 32.8125%; margin-left: 1.04166666666667%; margin-right: 1.04166666666667%; margin- 1.04166666666667%; padding-right: right: 1.04166666666667%; 1.75438596491228%; padding-left: 7.93650793650794%; <section> <section> <section> width: width: width:28.0701754 28.0701754 28.0701754 3859649% 3859649% 3859649%
  41. 41. <div> width: 75% <header> width: 97.91666666666667%; margin-left: 1.04166666666667%; margin-right: 1.04166666666667% <article> <aside> width: 59.375%; margin-left: width: 32.8125%; margin-left: 1.04166666666667%; margin-right: 1.04166666666667%; margin- 1.04166666666667%; padding-right: right: 1.04166666666667%; 1.75438596491228%; padding-left: 7.93650793650794%; <section> <section> <section> width: width: width:28.0701754 28.0701754 28.0701754 3859649% 3859649% 3859649%
  42. 42. Imagens
  43. 43. Imagens dimensionáveis• Utilize também medidas relativas• Inserir a imagem em um container com dimensões relativas
  44. 44. <figure> <img src="robot.jpg"alt="" /> <figcaption>Lo, the robotwalks</figcaption></ figure>
  45. 45. figure { width: 48.7341772%;}figure img { max-width: 100%;}
  46. 46. figure { width: 48.7341772%;}img,embed,object,video { max-width: 100%;}
  47. 47. Ou... (ainda não implementado na especificação)<picture> <source media=“(orientation:landscape)” srcset=“long1.jpg 1x,long2.jpg 2x” /> <source media=“(orientation:portrait)” srcset=“tall1.jpg 1x,tall2.jpg 2x” /> <img src=“fallback.jpg” /></picture>
  48. 48. Mas já é válido para vídeos<video> <source type=“video/webm”src=“small.webm” media=“all and(max-width: 480px)”/> <source type=“video/webm”src=“large.webm” media=“all and(min-width: 481px)”/></video>
  49. 49. Background também pode serresponsivo• Propriedade background-size do CSS3 – background-size: <largura> <altura>;http://www.w3schools.com/css3/tryit.as p?filename=trycss3_background-size
  50. 50. Media QueriesFonte: http://dribbble.s3.amazonaws.com/users/4465/screenshots/494207/responsive_design.png
  51. 51. Media Queries• Expressões condicionais para aplicar diferentes regras CSS dependendo da largura do viewport, orientação da tela e/ou aspect ratio.
  52. 52. Sintaxe básica @media <mediatype> <operador> <característica>• Mediatype: all, screen, print, braille, print, handheld, etc...• Operadores lógicos: and / or• Característica: width, height, device-width, device-height, orientation, aspect-radio, etc...
  53. 53. Exemplos• screen and (max-width:480px) – Resolução máxima no viewport de 480px• @media all and (orientation:landscape) – Orientação “paisagem”• @media screen and (device-aspect-ratio: 16/9) – Monitores 16:9 (ex.: resolução de 1280 x 720px)• @media screen and (min-width: 400px) and (max-width: 700px) – Tela com resolução mínima de 400px e máxima de 700px
  54. 54. Formas de aplicar• Propriedade “media” da tag <link> – <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />• Direto no CSS – @media screen and (min-width: 600px) and (max-width: 900px) { .class { background: #333; } }
  55. 55. Definindo ranges• Preciso criar folhas de estilo para todas as resoluções possíveis e imagináveis? – NÃO! – Defina ranges (faixas de valores) • 320px (iPhone retrato) • 480px (iPhone paisagem) • 768px (iPad retrato) • 1024px (iPad paisagem)
  56. 56. Fonte: http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning
  57. 57. /* WIDE DESKTOP LAYOUT----------------------------------------------- */@media screen and (min-width: 1176px) { }/* TABLET LAYOUT----------------------------------------------- */@media screen and (min-width: 768px) and (max-width:991px) { }/* MOBILE LAYOUT (PORTRAIT/320PX)----------------------------------------------- */@media screen and (max-width: 767px) { }/* WIDE MOBILE LAYOUT (LANDSCAPE/480PX)----------------------------------------------- */@media screen and (min-width: 480px) and (max-width:767px) { }
  58. 58. Experiência do Usuário
  59. 59. Diferentes dispositivos,diferentes interações• Botões• Campos de formulários• Áreas de clique
  60. 60. Fonte: http://mobile.smashingmagazine.com/2012/06/28/responsive-menus-enhancing-navigation-on-mobile-websites/
  61. 61. Faça wireframes e protótiposFonte: http://dolody.com/#!/masterpiece/responsive-design-streamlining-your-process.html
  62. 62. Mobile First• Projete e otimize primeiro para telas menores• Progressive Enhancement – Assegure as funcionalidades básicas a qualquer dispositivo – Versões mais avançadas podem ser visualizadas em browsers e dispositivos melhores
  63. 63. Progressive Enhancement X Graceful Degradation
  64. 64. Usabilidade• Foco em tarefas primárias• Eleve o conteúdo com o qual as pessoas se importam – Liste as funcionalidades que os usuários possam gostar – Determine a audiência• Dê ao usuário um caminho lógico a seguir• Utilização simples e óbvia• Terminologia “centrada no usuário”
  65. 65. Usabilidade• Qual a necessidade de seus usuários ao acessar o seu site através de um dispositivos móvel?• Que recursos ele utilizam?• Quais recursos são cruciais para eles quando estão acessando via mobile?• Quais as frustrações?• Quais dispositivos são utilizados para este acesso?
  66. 66. Ferramentas
  67. 67. • Golden Grid System – http://goldengridsystem.com/• The 1140 CSS Grid – http://cssgrid.net/• Fluid Grids – http://csswizardry.com/fluid-grids/• The Responsive Calculator – http://rwdcalc.com/
  68. 68. • FitText – http://fittextjs.com/• Respond.js – https://github.com/scottjehl/Respond• Fluid Grids – http://csswizardry.com/fluid-grids/• The Responsive Calculator – http://rwdcalc.com/• Responsive Grid System – http://www.responsivegridsystem.com/
  69. 69. • CSS3-mediaqueries-js – http://code.google.com/p/css3-mediaqueries- js/• Bootstrap – http://twitter.github.com/bootstrap/• Responsive Plugin – http://www.responsiveplugin.com/• Gridpak – http://gridpak.com/
  70. 70. Exemplos
  71. 71. http://www.themaninblue.com/experiment/ResolutionLayout/http://www.alistapart.com/d/responsive-web-design/ex/ex-site-larger.htmlhttp://wet-boew.github.com/wet-boew/index-eng.htmlhttp://www.anderssonwise.com/
  72. 72. http://foodsense.is/http://forefathersgroup.com/http://2012.newadventuresconf.com/Muitos outros exemplos aqui:http://mediaqueri.es/
  73. 73. Conclusões
  74. 74. Vantagens do DesignResponsivo• Um único código• Uma única URL• Economia de tempo e dinheiro• Melhoria para SEO• Melhor desempenho• Amplo suporte
  75. 75. Design Responsivo ou versão mobile?Design Responsivo Versão mobile• Reduzir algumas • Subconjunto de informações funcionalidades da• Rearranjo de layout aplicação desktop para beneficiar • Tarefas mais focadas diferentes resoluções • Corte de alguns de tela caminhos de interação• Utilizar os padrões de interface de mobile
  76. 76. Design Responsivo ou versão mobile?Design Responsivo Versão mobileSites de Aplicaçõesconteúdo
  77. 77. ReferênciasEthan, M. “Responsive Web Design”, 2010. Disponível em:<http://www.alistapart.com/articles/responsive-web-design/>.Dagobert. “Introduction au Responsive Web Design”, 2012.Disponível em: <http://www.slideshare.net/agencedagobert/le-responsive-design-par-dagobert>.Pagani, T. “Usabilidade em Dispositivos Móveis”, 2012. Disponívelem: <http://talitapagani.github.com/FrontInCuritiba-2012/>.Byttebier, T. “Responsive Web Design”, 2011. Disponível em: <http://www.slideshare.net/bytte/responsive-web-design-10389263>.
  78. 78. ReferênciasW3C. “Media Queries”, 2012. Disponível em:<http://www.w3.org/TR/css3-mediaqueries/>.Web Designer Wall. “CSS3 Media Queries”. 2010. Disponível em:<http://webdesignerwall.com/tutorials/css3-media-queries>.Eis, D. “Introdução sobre Media Queries”, 2009. Disponível em:<http://tableless.com.br/introducao-sobre-media-queries/>.Bovens, A. “Responsive design: techniques and tricks to prepareyour website for the multi-screen future”, 2012. Disponível em: <http://www.slideshare.net/andreasbovens/responsive-design-techniques-and-tricks-to-prepare-your-websites-for-the-multiscreen-future>.
  79. 79. ReferênciasBovens, A. “An introduction to meta viewport and @viewport”,2011. Disponível em: < http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/>.Marcotte, E. “Responsive Web Design”. New York: A Book Apart,2011.
  80. 80. Obrigada.
  81. 81. Responsive Web Design Talita Pagani MStech | @talitapagani | talita.cpb@gmail.com
  82. 82. Perguntas?

×