Layout Fluido
-
Upload
eduardo-mendes-de-oliveira -
Category
Technology
-
view
452 -
download
4
description
Transcript of Layout Fluido
LAYOUT FLUIDO
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
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
Layout fixo
Layout fixo
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
Medidas flexíveis
• As mais utilizadas
• %
• em
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
% body {
/* largura total da tela */ width: 100%;
} section {
/* 1/3 da página */ width: 33.33333%;
/* padding de 10% do pai */ padding: 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%
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 */ }
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%; }
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
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;
}
Quais os valores reais
article { font-size: 1.25em; } h1 { font-size: 2em; } p { font-size: 0.9em; }
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
Quais os valores reais
article { font-size: 1.25rem; } h1 { font-size: 2rem; } p { font-size: 0.9rem; }
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
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
Utilizando o layout fluido
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
Layout .olhar { width: 25%; float: left;}
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%;
}
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
Box model
• Não é o width que determina a largura final • O tamanho final de cada elemento é
section {float: left;padding: 5%; width: 40%;
}
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;
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
Alteração do box-sizing
section { box-sizing: border-box; float: left; padding: 1em; width: 50%;}
Alterando todo
*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
Utilizando o layout fluido
Utilizando layout fluido
• Para converter um layout baseado em pixels para um baseado em proporções:
Utilizando layout fluido
Utilizando layout fluido
Utilizando layout fluido
Utilizando layout fluido
Utilizando layout fluido
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%; !} !!
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" />
Restrição ao layout fluido
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
Restrição ao Layout Fluido
• Imagine este design em uma tela muito grande
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
Restrição ao Layout Fluido
body { max-width: 2000px; margin-left: auto; margin-right: auto; width: 100%;}
Imagens flexíveis
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
Recursos flexíveis • É possível aplicar a mesma ideia para outros recursos
img, iframe, object, embed, video { height: auto; max-width: 100%; }
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
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
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
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
Prefira CSS
• Vantagens
• renderizado no navegador do cliente
• ajustado para o tamanho da tela
• ajustado para a resolução
• facilita manutenções futuras
Bordas arredondadas
• Utiliza-se através da regra border-radius
Bordas arredondadas
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
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
http://icomoon.io/app/
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>
Imagens ideais para cada resolução
• Uma imagem de 960px para Desktop, mas que não faz sentido ser enviada para o mobile
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); }}
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
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)); }
Futuro
• <picture>
<picture>
<source src="mobile.jpg">
<source src="grande.jpg”
media="(min-width: 700px)”>
<img src="fallback.jpg”>
</picture>
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/
http://www.fa7.edu.br/webmobile/picturefill.zip
Exemplo PictureFill
PictureFill
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
Sencha IoSRC
<img src='http://sencha.com/files/u.jpg' alt='My large image'/>
Sencha IoSrc <img
src='http://src.sencha.io/http://sencha.com/files/u.jpg'
alt='My smaller image'
/>
Sencha IoSrc <img
src='http://src.sencha.io/320/200/http://sencha.com/files/u.jpg'
alt='My constrained image'
width='320'
height='200'
/>