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