O documento discute estratégias para criar layouts responsivos utilizando medidas flexíveis como porcentagens e unidades em. Aborda como converter layouts fixos para fluidos, utilizar imagens responsivas e limitar layouts fluidos em telas muito grandes.
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. 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
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
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. %
body {
/* largura total da tela */
width: 100%;
}
section {
/* 1/3 da página */
width: 33.33333%;
/* padding de 10% do pai */
padding: 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. 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. 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. 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. 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. Quais os valores reais
article {
font-size: 1.25em;
}
h1 {
font-size: 2em;
}
p {
font-size: 0.9em;
}
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. Quais os valores reais
article {
font-size: 1.25rem;
}
h1 {
font-size: 2rem;
}
p {
font-size: 0.9rem;
}
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. 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
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
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. 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. 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. 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. 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
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
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. Restrição ao Layout Fluido
body {
max-width: 2000px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
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. Recursos flexíveis
• É possível aplicar a mesma ideia para outros recursos
img,
iframe,
object,
embed,
video {
height: auto;
max-width: 100%;
}
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. 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. 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. 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. Prefira CSS
• Vantagens
• renderizado no navegador do cliente
• ajustado para o tamanho da tela
• ajustado para a resolução
• facilita manutenções futuras
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. 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
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. Imagens ideais para cada
resolução
• Uma imagem de 960px para Desktop, mas que
não faz sentido ser enviada para o mobile
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. 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. 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));
}
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/
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. Sencha IoSRC
<img
src='http://sencha.com/files/u.jpg'
alt='My large image'
/>