Sites Responsivos Como mostrar o mesmo conteúdo
em diversos aparelhos
Feito por Gilberto Crespo
Abril/2014
Um pouco sobre mim:
= Autor de livro estrangeiro: - Responsive Web Design with jQuery
= Trabalho na área há 10 anos: - sendo 2 anos só com Responsive
= Atualmente fui contratado pela UPPERCASE: - Atuando mais em melhorar a experiência do usuário na
navegação dos sites e sistemas.
Tópicos:
= Evolução da tecnologia móvel
= Diferenças entre os termos: - Site Fluído
- Site Adaptativo
- Site Responsivo
= Principais técnicas do site Responsivo: - Estrutura flexível
- Mídia flexível
- MediaQueries
Como era o cenário antes...
Até pouco tempo atrás, site mobile significava :
- Aparelhos pequenos, tela pequena
- Recursos limitados
- Banda extremamente limitada
- Visando somente consultas rápidas ao site
E as orientações eram:
- Criar um tema separado para mobile
- Com conteúdo limitado/resumido
- Layout simplificado
Solução: Sites ou Temas distintos para Web e Mobile
Isso é da época de vocês?
Como era o cenário antes...
Cenário atual
Com a evolução dos dispositivos, a tendência atual é:
- Telas com maior dimensão e resolução
- Hardware dos aparelhos estão mais potentes
- Tags HTML5 com recursos de video
- Banda limitada
- Usuário deseja ver todo conteúdo/funcionalidades do site
Isso faz a gente seguir outra direção no desenvolvimento:
- Manter o mesmo conteúdo do site WEB
- Layout que se adapta no momento em que é visualizado
Solução: “Praticamente” mesmo site, usando Design Responsivo
Conceitos:
Fluído X
Adaptativo X
Responsivo
Nosso objetivo é acabar com a frase:
“Melhor visualizado em 1024px/768px”
Seu foco é na adaptação da estrutura.
Em outras palavras, uso de porcentagem nas medidas.
Site Fluído
http://matthewjamestaylor.com/
Seu foco é na adaptação da estrutura.
Em outras palavras, uso de porcentagem nas medidas.
Site Fluído
http://gmail.com/
780px 1600px
Site Adaptativo
Seu foco é específico na experiência do usuário.
Exemplo: Desenvolver dois sites dedicados, sendo um para cada aparelho
Site Adaptativo
Conteúdo é o mais importante
Apresentação visual
Scripts no lado do cliente
Melhoria progressiva:
É a combinação entre sites fluído + adaptativo.
Onde, existe somente uma única estrutura HTML (com navegação) seja onde ele
estiver sendo visualizado (telas grandes ou pequenas).
O uso de breakpoint é o diferencial e as adaptações serão baseadas no tamanho
da área disponível para mostrar o conteúdo, e não por tipo do dispositivo (celular,
tablet, desktop).
O cache é outra vantagem em relação ao Adaptativo.
Exemplos:
http://mediaqueri.es/
http://worldwildlife.org/
http://www.time.com/time/
Site Responsivo - (termo criado por Ethan Marcotte)
Site Responsivo - exemplos
Site Responsivo - exemplos
Site Responsivo - exemplos
<link rel="stylesheet" href="large.css"
media="only screen and (min-width:1024px)" />
<link rel="stylesheet" href="medium.css"
media="only screen and (min-width:641px) and (max-width:1024px)" />
<link rel="stylesheet" href="small.css"
media="only screen and (max-width:640px)" />
- Este código define os
Breakpoints usados no site
- MediaQueries é o “motor”
que checa qual breakpoint
executar.
- Os CSS são carregados de
acordo com o breakpoint
- É só CSS. Não tem nada
de JavaScript aqui
Site Responsivo - MediaQueries
<link rel="stylesheet" href="small.css" />
<link rel="stylesheet" href="medium.css"
media="only screen and (min-width:640px)" />
<link rel="stylesheet" href="large.css"
media="only screen and (min-width:1024px)" />
<link rel="stylesheet" href="televisao.css"
media="only screen and (min-width:1280px)" />
Site Responsivo - como reaproveitar código
MOBILE first (termo criado por Luke Wroblewski):
primeiro se desenvolve para telas menores (onde a complexidade dos elementos
são menores) e depois,
para as telas maiores (onde tem mais elementos com float, mais recursos visuais,
mais animações)
Site Responsivo – É somente a ponta do iceberg
Evitar carregamento extra
dos recursos (imagens, CSS, JS)
Site Responsivo – Carregamento condicional
Site responsivo != (desktop + mobile)
Enfim finalizamos a parte conceitual!
Está com dúvida?
Quer fazer algum comentário?
Estrutura
Flexível
Estrutura Flexível (porcentagem)
Fórmula mágica: elemento alvo / contexto = dimensão
Estrutura Flexível (CSS Grid) Foundation4 Grid ou Bootstrap Fluid Grid
Estrutura Flexível (CSS Grid) - exemplos
Estrutura Flexível (CSS Grid) - código
<div class="row">
<div class="small-2 large-4 columns">...</div>
<div class="small-4 large-4 columns">...</div>
<div class="small-6 large-4 columns">...</div>
</div>
Small:
Large:
Imagem e Vídeo
Responsivos
Não, não é isso
Imagens Flexíveis
Redimensionamento proporcional (automático)
Sugerido somente dentro dos limites do mesmo breakpoint
img {max-width:100%; height:auto;}
Imagens Flexíveis
Diferentes imagens (e tamanhos) para cada breakpoint:
Imagens Flexíveis
Sabe de naaada, inocente!
Imagens Flexíveis
Diferentes imagens (e tamanhos) para cada breakpoint:
Imagem vale mais que 1000 palavras, mas se não focarmos no
principal da imagem, o siginificado real da imagem desaparece.
Imagens Flexíveis
Diferentes imagens (e tamanhos) para cada breakpoint
• Imagens inseridas por nós
• Responsive-Images ou PictureFill
• Tem detector de devices que aceita imagens com alta definição
<picture width="500" height="500">
<source media="(min-width: 45em)" srcset="large-1.jpg 1x,
large-2.jpg 2x">
<source media="(min-width: 18em)" srcset="med-1.jpg 1x,
med-2.jpg 2x">
<source srcset="small-1.jpg 1x, small-2.jpg 2x">
<img src="small-1.jpg" alt="">
<p>Accessible text</p>
</picture>
Exemplo <picture>: proposta da W3C em aprovação
Imagens Flexíveis
Lembrando que em é uma unidade de medida e
que cada em representa 16px
Imagens Flexíveis
Redimensionamento proporcional (com foco)
- FocalPoint CSS para recortes inteligentes para imagens responsivas
Vídeos Flexíveis
FitVids.js atualmente suporta os players:
YouTube, Vimeo, Blip.tv e Viddler
Existe uma opção para usar um player próprio
customizado também.
https://github.com/davatron5000/FitVids.js
Texto
Flexível
Texto Flexível - em e rem
Fórmula mágica: elemento alvo / contexto = tamanho
Site muito útil para conversão: http://pxtoem.com/
Normal =30px e Negrito =40px
HTML = <h1>Título desse slide <strong>Incrível</strong></h1>
Certo .. mas e esse tal de REM? Como funciona?
"Imagens" Flexíveis - Títulos destacados e ícones
Não transforme títulos com fonts diferentes em imagens
plugins úteis: Lettering.js + Kern.js
Técnica de sprites = dimensão fixa
Links
Interessantes
Links Interessantes – para referências futuras
Referências em português
http://sergiolopes.org/diretorio-design-responsivo/
http://www.caelum.com.br/apostila-html-css-javascript/
Livros português:
http://www.casadocodigo.com.br/products/livro-web-design-responsivo
http://www.casadocodigo.com.br/products/livro-web-mobile
Referências em inglês
http://bradfrost.github.io/this-is-responsive/patterns.html
http://bradfrost.github.io/this-is-responsive/resources.html
http://www.scoop.it/t/gonzodesign
Livros inglês:
http://goo.gl/bcUzfm meu livro
http://www.implementingresponsivedesign.com/
Vamos às perguntas!
Conte também um pouco de sua
experiência nisso, alguma façanha ou
até mesmo improvisação que
desenvolveu
Obrigado!
Dúvidas posteriores:
http:// www.gilcrespo.com