Layout Fluido

1.884 visualizações

Publicada em

Criação de páginas com layout fluido

Publicada em: Tecnologia
0 comentários
7 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.884
No SlideShare
0
A partir de incorporações
0
Número de incorporações
7
Ações
Compartilhamentos
0
Downloads
91
Comentários
0
Gostaram
7
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Layout Fluido

  1. 1. LAYOUT FLUIDO
  2. 2. Layout Fluido • É a grande estrela hoje do Web Design Responsivo • Com a quantidade de dispositivos que renderizam página web hoje, não é possível simplesmente copiar medidas diretas do layout • O Layout Fluido utiliza medidas flexíveis
  3. 3. Layout Fixo • O layout fixo é aquele que utiliza pixels para determinar as larguras dos elementos do design • Não se adapta às alterações do campo de visão do dispositivo que o renderiza
  4. 4. Layout fixo
  5. 5. Layout fixo
  6. 6. Layout Fluido • Layouts fluidos utilizam unidades flexíveis (% , em) para larguras ao invés de pixels • Permite que haja fidelidade do design inicial da página • Layout se adapta de acordo com o campo de visão • Desafio • Se desapegar das medidas do projeto inicial
  7. 7. Medidas flexíveis • As mais utilizadas • % • em
  8. 8. Medidas Flexíveis • % • Utilizado para determinar as larguras dos elementos • A porcentagem é em relação ao tamanho do elemento pai • Pode ser utilizado para fontes • Tamanho relativo ao tamanho da fonte do elemento pai
  9. 9. % body { /* largura total da tela */ width: 100%; } section { /* 1/3 da página */ width: 33.33333%; /* padding de 10% do pai */ padding: 10%; }
  10. 10. Medidas Flexíveis • em • Normalmente utilizado para fontes • Medida sempre está relacionado à fonte base • Um font-size implícito equivale a 16px na maioria dos navegadores • 1em = 100% • 2em = 200%
  11. 11. em html { /* font-size base implícito equivalente a 16px */ } p{ /* 16px * 1.125 = 18px */ font-size: 1.125em; } h1 { /*dobro da fonte base */ font-size: 2em; } h2 { /* 50% maior do que o valor base */ font-size: 150%; /* 1.5em */ }
  12. 12. em • Pode ser usado em qualquer propriedade mas sempre significar uma relação com o tamanho da fonte • Útil quando a medida de algum elemento tem relação com texto, uma medida tipográfica • Ex: Espaçamento entre parágrafos p { margin: 0 1em; } p { margin: 0 5%; }
  13. 13. Flexibilidade nos elementos filhos • Vantagem • As medidas flexíveis afetam os elementos filhos (aninhados) • Cenário: • Quando o usuário aumenta a fonte no navegador pra ler melhor • todo o layout baseado em em é afetado
  14. 14. Os filhos herdam o tamanho base <html> <body> <article> <h1>Desenvolvimento Mobile</h1> <p>Ipsum lorum, ipsum lorum, ipsum lorum.</p> </article> </body> </html> article { font-size: 1.25em; } h1 { font-size: 2em; } p { font-size: 0.9em; }
  15. 15. Quais os valores reais article { font-size: 1.25em; } h1 { font-size: 2em; } p { font-size: 0.9em; }
  16. 16. rem • Nova medida • Como o em é relativo ao elemento pai, o gerenciamento do tamanho das fontes pode ficar complexo caso existam muitos niveis. • O rem sempre é relativo ao tamanho base do elemento root, o <html> • Para alterar tudo, altere o tamanho do font-size do elemento html
  17. 17. Quais os valores reais article { font-size: 1.25rem; } h1 { font-size: 2rem; } p { font-size: 0.9rem; }
  18. 18. No caso anterior • html e o body vão ter os 16 px base • O article terá 16px * 1.25 = 20px • O h1 tem 16px * 2 = 32px • O p vai ter 16px * 0.9 = 14px
  19. 19. viewport-units: vw e vh • Flexibiliza o tamanho de forma proporcional ao tamanho do navegador • 1vh -> 1% da largura da janela do navegador • h2 { font-size: 2vw; } • Pouco suporte dos navegadores
  20. 20. Utilizando o layout fluido
  21. 21. Utilizando o layout fluido • Mudança de paradigma • Pode ser uma tarefa árdua quando já se está acostumado a medidas fixas • O segredo é se concentrar nas proporções dos elementos do layout • Enxergar os as relações entre os elementos do layout ao invés de seus tamanhos fixos
  22. 22. Layout .olhar { width: 25%; float: left; }
  23. 23. Sobre boxes css • Suponha que existam 2 sections definidas pelas regras abaixo, eu teria um linha com 2 colunas? section { float: left; padding: 5%; width: 50%; }
  24. 24. Sobre boxes css • Cada section vai ter 60% da largura da página • Ficará uma embaixo da outra • Causa: o padding não é considerado no width • Isso é um efeito do box model
  25. 25. Box model • Não é o width que determina a largura final • O tamanho final de cada elemento é section { float: left; padding: 5%; width: 40%; }
  26. 26. Alterando o box-sizing • Fazer com o width já inclua os valores do padding e do border-width section { float: left; padding: 5%; width: 50%; } box-sizing: border-box;
  27. 27. Alteração do box-sizing • Cenário: O width do elemento está definido em relação ao elemento pai, mas você gostaria que o padding fosse uma relação com o font-size do elemento
  28. 28. Alteração do box-sizing section { box-sizing: border-box; float: left; padding: 1em; width: 50%; }
  29. 29. Alterando todo *{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
  30. 30. Utilizando o layout fluido
  31. 31. Utilizando layout fluido • Para converter um layout baseado em pixels para um baseado em proporções:
  32. 32. Utilizando layout fluido
  33. 33. Utilizando layout fluido
  34. 34. Utilizando layout fluido
  35. 35. Utilizando layout fluido
  36. 36. Utilizando layout fluido
  37. 37. Novos valores • 960/960 = 1 (100%) • 240/960 = 0,25 (25%) • 250/960 = 26,041667% • 260/960 = 27,083333% #principal {! margin: 10px 260px 0px 250px;! }! ! #principal {! margin: 10px 27.083333% 0px 26.041667%;! }! !
  38. 38. Para tudo funcionar como você espera <meta name="viewport” content="width=device-width, initial-scale=1" /> Evite: <meta name="viewport” content="width=device-width, user-scalable=no" /> <meta name="viewport” content="width=device-width, minimum-scale=1, maximum-scale=1" />
  39. 39. Restrição ao layout fluido
  40. 40. Restrição ao layout fluido • O layout fluido é a maneira de endereçar uma página aos vários dispositivos de tamanhos diferentes do dia de hoje • Mas, em certas situações, pode não ser a melhor opção deixar o layout fluir 100% sobre uma tela
  41. 41. Restrição ao Layout Fluido • Imagine este design em uma tela muito grande
  42. 42. Restrição ao layout fluido • Em telas muito grandes, alguns layouts fluidos podem ficar muito “esticados” • espaçamentos entre elementos muito grandes • É interessante pensar em um limite mínimo e máximo de tela em px • max-width • min-width
  43. 43. Restrição ao Layout Fluido body { max-width: 2000px; margin-left: auto; margin-right: auto; width: 100%; }
  44. 44. Imagens flexíveis
  45. 45. Imagens flexíveis • As imagens também precisam se adequar ao espaços de acordo com a resolução do aparelho • Regra CSS img { max-width: 100%; } limita a largura das imagens à largura do elemento que as contém
  46. 46. Recursos flexíveis • É possível aplicar a mesma ideia para outros recursos img, iframe, object, embed, video { height: auto; max-width: 100%; }
  47. 47. Imagens responsivas • Uma parte bem complicada de um bom design responsivo • As imagens possuem um número fixo de pixels • Mas e max-width: 100%; ??? • A imagem aumentar e diminui de acordo com o tamanho da tela • A imagem pode perder qualidade quando esticada
  48. 48. Imagens responsivas • Existem vários cenários onde a imagem deve responder ao contexto • Utilizar imagens diferentes, otimizadas para cada cenário: • Imagens grandes utilizadas em versão Desktop • Imagens bem definidas em telas de retina de alta resolução • Zoom nas imagens • Imagens diferentes para versões Desktop e Mobile devido ao layout
  49. 49. Por que? • Economia de bytes utilizando a imagem adequada à cada tamanho de tela • Qualidade visual na renderização de acordo com a resolução • Imagens de conteúdos diferentes para adaptação do design
  50. 50. Prefira CSS • Uma alternativa para evitar imagens responsivas é utilizar CSS • Quando possível recriar aspectos visuais do layout com técnicas que podem substituir imagens • Efeitos CSS3 • bordas arredondadas, sombras, gradientes
  51. 51. Prefira CSS • Vantagens • renderizado no navegador do cliente • ajustado para o tamanho da tela • ajustado para a resolução • facilita manutenções futuras
  52. 52. Bordas arredondadas • Utiliza-se através da regra border-radius
  53. 53. Bordas arredondadas
  54. 54. Texto e imagens • Quando possível não adicione texto às imagens • Texto é fluido e pode configurado facilmente através de CSS • Texto em imagens • não podem ser indexados no Google • não tem como alterar a posição de acordo com a resolução
  55. 55. Icon Fonts • Hoje é possível através do @font-face carregar para sua página fontes customizadas • Uma alternativa para o uso de imagens é a utilização de família de fontes de ícones • Vantagens • fontes são bem renderizadas nas telas • um arquivo só de fonte pode conter vários ícones juntos • você pode customizar cor e tamanho
  56. 56. http://icomoon.io/app/
  57. 57. Imagens e Media Queries • Na maioria dos casos é preciso utilizar imagens nos formatos clássicos (PNG, JPEG) • Cenários • Enviar imagens nos tamanhos ideais para cada tela • backgrounds • <img>
  58. 58. Imagens ideais para cada resolução • Uma imagem de 960px para Desktop, mas que não faz sentido ser enviada para o mobile
  59. 59. Imagens ideais para cada resolução • Caso de imagem de fundo .banner { background-image: url(banner-mobile.jpg); } @media (min-width: 400px) { .banner { background-image: url(banner-medio.jpg); } } @media (min-width: 700px) { .banner { background-image: url(banner-grande.jpg); } }
  60. 60. Imagem seletiva com <img> • Ainda não existe uma flexibilidade com media queries • Alternativas • Rertirar todas as tags <img> e colocar todas as imagens via CSS • Algumas imagens possuem significado semântico, não são apenas peças do layout • Utilizar JS para alterar o src da imagem de acordo com a resolução da tela • Pode haver o carregamento de todas as imagens
  61. 61. Futuro • Responsividade com HTML5 • Novo atributo srcset para a tag <img> que permite listar um conjunto de arquivos de acordo com o viewport <img srcset="mobile.jpg 400w, medio.jpg 700px, grande.jpg"> .banner { background: image-set(url(mobile.jpg) 400w, url(grande.jpg)); }
  62. 62. Futuro • <picture> <picture> <source src="mobile.jpg"> <source src="grande.jpg” media="(min-width: 700px)”> <img src="fallback.jpg”> </picture>
  63. 63. PictureFill • Semelhante a especificação de <picture>, utiliza JS e os elementos atuais do HTML5 para carregar a imagem responsivamente <div data-picture> <div data-src="mobile.jpg"></div> <div data-src="grande.jpg” data-media="(min-width: 700px)"></div> <noscript><img src="fallback.jpg"></noscript> </div> https://github.com/scottjehl/picturefill http://scottjehl.github.io/picturefill/
  64. 64. Exemplo PictureFill http://www.fa7.edu.br/webmobile/picturefill.zip
  65. 65. PictureFill
  66. 66. Soluções de servidor • Uma estratégia em que se coloca apenas uma imagem grande com boa definição um servidor externo redimensiona a imagem dinamicamente • Sencha IoSrc • http://www.sencha.com/products/io) • ReSrc • http: //www.resrc.it/ • Thumbor • https: //github.com/globocom/thumbor
  67. 67. Sencha IoSRC <img src='http://sencha.com/files/u.jpg' alt='My large image' />
  68. 68. Sencha IoSrc <img src='http://src.sencha.io/http://sencha.com/files/u.jpg' alt='My smaller image' />
  69. 69. Sencha IoSrc <img src='http://src.sencha.io/320/200/http://sencha.com/files/u.jpg' alt='My constrained image' width='320' height='200' />

×