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


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


• 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


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

/>

Technology

Layout Fluido