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 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
• 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 {
float: left;
padding: 1em;
width: 50%;
}

Alterando todo
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}

Utilizando layout fluido
• Para converter um layout baseado em pixels para
um baseado em proporções:

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:
content="width=device-width,
user-scalable=no" />
content="width=device-width,
minimum-scale=1, maximum-scale=1" />

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
• 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

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/

Exemplo PictureFill
http://www.fa7.edu.br/webmobile/picturefill.zip

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'
/>

Layout Fluido

Mais conteúdo relacionado

Mais procurados (20)

Destaque (20)

Semelhante a Layout Fluido (20)

Mais de Eduardo Mendes (20)

Último (20)

Layout Fluido