sites responsivos - como mostrar o mesmo conteúdo em diversos aparelhos
DESCRIPTION
Palestra para iniciantes no desenvolvimento responsivo, onde são explicada algumas técnicas para dar maior orientação ao desenvolvedor de como se aprofundar posteriormente.TRANSCRIPT
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