Web Design Responsivo

  • View
    271

  • Download
    1

Embed Size (px)

DESCRIPTION

Técnicas para criar páginas web que se adaptem ao campo de renderização

Text of Web Design Responsivo

  • 1. DESIGN RESPONSIVO

2. Projetar para uma web De forma geral: Todos os dispositivos devem ser capaz de acessar seu site No exclua usurios baseado no dispositivo ounavegador que ele usa Separe contedo do comportamento e daapresentao Separe CSS e JS No adicione informaes de comportamento eapresentao junto com o cdigo 3. HTML5 de relance 4. Tags semnticas e Em comparao com a antiga tag

no hnenhuma diferena entre em termos deapresentao Mas no futuro os motores de pesquisa sebeneficiaro conseguindo diferenciar o que seja ocontedo real de outros elementos 5. Tags semnticas e Artigos representam um bloco completo decontedo Uma seo um pedao do todo Artigos (article) podem ser compostos de mliplassees (section) Sees podem ter vrios artigos 6. Tags semnticas e um conteiner para contedo (geralmenteimagens) e fornece uma legenda paraaquele contedo indica que um determinado contedo a navegaoda pgina 7. TtuloSubttulo
  • Navegao
TtuloContedoTtuloContedoPrincipais linksCartao 1.1Copyright 2013. 8. O elemento agora tem uma srie de novosvalores para o atributo type, que permite que osnavegadores faam coisas bacanas, dependendo doseu valor. color date datetime datetime-local email month number range search tel time url 9. Web Design Responsivo 10. Web Design Responsivo Capacidade de adaptar websites para que seadequem aos dispositivos mveis Desafios grande gama de dispositivos mveis diversidade de navegadores nos aparelhos 11. Estratgias de adaptao 12. EstratgiasNo fazer nadaO contedo paraDesktop existente omesmo que enviadopara os dispositivosmveis sem nenhumamudana ou otimizaode layoutMulti dispositivoO mesmo contedo enviado para desktop emobile, mas estilos escripts apropriadospara o tamanho fsicode destinoVerso mobile especficaDispositivos mveis edesktop recebemverses diferentesapropriadas ao seutamanho especfico 13. No fazer nada Contedo prprio para Desktop enviado para odispositivo mvel de forma inalterada 14. No fazer nadaVantagens Desvantagens Menos trabalho paradesenvolver No h necessidade demanter cpias separadas decontedos ou estilos No otimiza a experincia dousurio Contedos largos ecomplexos que podemempobrecer a performanceOK: Pginas leves que possuem contedo flexvel e fluente,pginas que so organizadas de forma mais verticalRUIM: Pginas com layouts complexos, que possuem itens decontedo grandes (imagens) ou que utilizam plugins como flash 15. Contedo adaptado Mesma pgina enviada para os dispositivosdesktop e mobile Entretanto, CSS e outros contedos podem seadaptar ao tamanho fsico do dispositivodesktop.cssmobile.css 16. Contedo adaptadoVantagens Desvantagens Usar o mesmo contedoreduz o trabalho dedesenvolvimento Boa experincia paratamanhos fsicos mltiplos Pode ser difcil converter ocontedo para este modelo,dependendo da complexidadeda pgina Uso inapropriado de estilospode fazer esta estratgia falharOK: Pginas com semntica bem definida por HTML e utilizaCSS e JS para definir aparncia e comportamentoRUIM: Pginas complexas com animaes, vdeos e grandesimagens incorporadas, cujo a diferena para mobile seria muitogrande 17. Verso Mobile Especfica Verso de contedo especfica para mobile enviada para os dispositivos mveis Envolve algum redirecionamento do lado doservidor 18. Contedo especficoVantagens Desvantagens Cada tamanho fsico temuma experincia melhor Verses podem serdesenvolvidas de maneiraindependente Aumenta o trabalho dedesenvolvimento A verificao do tipo dedispositivo no servidor podefalharOK: Pginas complexas e que possuem uma grande diferenade um tamanho fsico para o outro; sites que possuemindependncia de desenvolvimento das versesRUIM: Pginas simples que podem ter seu contedo adaptadofacilmente 19. Web Design Responsivo 20. Ethan Marcotte 21. ProblemasUm site precisa funcionar em um nmero de aparelhos,plataforma e navegadores que cresce a cada dia 22. Web Design Responsivo Origem: A List Apart, Ethan Marcotte, 2010Ao invs de adptar designs desconectados para cada umdo nmero cada vez maior de dispositivos web, podemostrat-los como faces da mesma experincia.Ns podemos projetar para uma experincia ideal devisualizao, e embutir tecnologias padronizadas nosnossos designs no somente para torn-los mais flexveis,mas mais adaptados para a mdia que os renderiza. 23. Web Design Responsivo Conjunto de abordagens para adaptar ocontedo plataforma utilizada pelo usurio Pginas se adaptam a todo tipo de dispositivo Como fazer: design flexvel e adaptvel navegador dispositivo contexto do usurio 24. Web Design Responsivo Conjunto de abordagens para adaptar ocontedo plataforma utilizada pelo usurio resolues diferentes orientaes de tela diferentes plataformas de interao diversas otimizao de performance 25. Desafios Diferentes navegadores esto disponveis Chrome, Opera, Safari Capacidade para tecnologias de cada navegador varia muito Muitos dos antigos navegadores no suportam um JS ou CSScorretamente Dispositivos mveis so menores e mais lentos Redes mveis podem ter limites de acesso e transferncia Complicaes para contedos ricos Interfaces mveis obrigam-nos a repensar nossos websites Se ele consegue renderizar uma verso desktop, no quer dizer queseja a melhor opo 26. No responsivo 27. http://interim.it/ 28. http://www.bostonglobe.com/ 29. Web Desing ResponsivoAsmesmaspginasparatodososdisposi0vos 30. Mas ser possvelter somente um conjunto de pginaspara todas as mdias? 31. Web Design Responsivo Priorizao do Contedo Projetar para o contedo que realmente importa No apenas um design menor Completa reestruturao de contedo Contedo til e com foco 32. Web Design ResponsivoWebDesignResponsivoGridLayoutFluidoCSSMediaQueriesImagens emdiasflexveisControledoViewport 33. Design Responsivo Um conjunto de regras CSS diferente soaplicadas a partir da avaliao de certascaractersticas do navegador em usoMedia queries Utilizao de medidas proporcionais (%,em) invs tamanhos absolutos (px) paraos elementos do layoutGrid LayoutFluido Atravs de CSS fazer com que imagensmdias se adaptem para caber no layoutde acordo com as restries de tamanhoImagens erecursos flexveis 34. Web Desing ResponsivoAsmesmaspginasHTMLeCSSparatodososdisposi0vos 35. Viewport e Zoom 36. Viewport Um pixel no mundo Desktop Em um tela de computador normalmente 1px 1px Uma imagem com largura de 200px ir ocupar 200pxda tela fsica do monitor Se o tamanho for definido em % o valor ser calculado proporcional ao tamanho da janelado navegador 37. Viewport Os navegadores mobile tentam exibir pginasweb feitas para desktop Ajuste automtico do zoom 38. Viewport Viewport o espao disponvel no navegadorpara uma pgina ser renderizada tamanho da janela do navegador, menos: barra de ferramentas barra de rolagem navegao 39. Viewport Principais parmetros para content width/height: valor ou device-[width|height] name=viewport content=width=device-width initial-scale: define o zoom inicial, 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, user-scalable=no, maximum-scale=1.5 40. Viewport e CSS@viewport {width: 320px;height: device-height;zoom: 1;max-zoom: 2;min-zoom: 0.5;} 41. Zoom e o Pixel O zoom uma funcionalidade presente emnavegadores modernos Consideres uma imagem de 150px em uma pgina aplica-se zoom de 200% a imagem passa a ocupar 300px na tela 42. Zoom e o Pixel O Zoom altera a visualizao, mas no modifica ocdigo a imagem continua a ser descrita com 150px 150 CSS pixels + 200% zoom -> 300 pixels fsicos 43. Viewport e o Zoom O viewport diminui quando se aumenta o zoom aumenta quando se diminui o zoom O viewport medido em CSS pixels 44. Exemplos Imagem de 320x356px, iPhone, viewport padrohttp://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html 45. Exemplos Viewport com a mesma largura da imagem 49. Configurao ideal O zoom tambm no deve estar alterado!!@media screen and (min-width: 481px){ }!@media screen, print and (max-width: 480px){ }!@media all and (orientation:landscape) { } !@media screen and (monochrome) { } !@media screen and (color) { } ! 60. Exemplohttp://www.fa7.edu.br/webmobile/mq_inicial.zip 61. Exemplo Media Querie 62. Exemplo de Media Querie 63. Exemplo de Media Querie 64. Operadores em MediaQueries Conjuno (and)@media (max-width: 600px)and (orientation: portrait) { } Disjuno (,)@media (min-width: 300px),(min-height: 300px) { } Negao (not)@media not print and (max-width: 600px)and(orientation: portrait) { } 65. Breakpoints 66. Breakpoints Apesar de existirem vrios parmetros para mediaqueries, apenas alguns so usados de fato a grande maioria dos sites no requer todos osparmetros maior parte: altura e largura do dispositivo em que momento escrever regras para umaresoluo diferente? 67. Breakpoints Ponto em que o layout quebra Delimitador das regras CSS para atenderem novasespecificaes Aquele tamanho em que novos ajustes precisamser realizados no layout para que ocorra a melhorexperincia possvel do layout 68. Abordagens sobrebreakpoints No incio dos estudos do Web Design Responsivo breakpoints de acordo com a resoluo de dispositivosespecficos Para smartphones@media only screen and (min-device-width :320px) and (max-device-width : 480px) Para desktops@media only screen and (min-width : 1224px) 69. 320 and Up@media print { }@media only screen and (min-width: 480px) { ... }@media only screen and (min-width: 600px) { ... }@media only screen and (min-width: 768px) { ... }@media only screen and (min-width: 992px) { ... }@media only screen and (min-width: 1382px) { ... } 70. Less Framework/* Tablet Layout */@media only screen and (min-width: 768px) and (max-width: 991px) { ... }/* Mobile Layout */@media only screen and (max-width: 767px) { ... }/* Layout largo de mobile */@media only