O documento discute conceitos e técnicas de design responsivo para sites mobile, incluindo: layouts fixos, fluidos e elásticos; uso de CSS media queries para criar diferentes layouts com base nas dimensões da tela; e a meta tag viewport para adequar sites a dispositivos móveis. O design responsivo permite que um mesmo conteúdo se adapte a diferentes telas de forma flexível e usufruível.

1. usabilidade e padrões
de design mobile
Renato Bongiorno

2. usabilidade e padrões
de design mobile
Atividades e conceitos da aula:
- Layout fixo
- Layout fluído
- Layout elástico
- Layout híbrido
- Responsive Web Design

3. usabilidade e padrões
de design mobile
"A tecnologia de desenvolvimento
mobile se tornou um estilo de vida,
misterioso e confuso e que envolve
uma desconcertante velocidade de
crescimento."
Lyza Danger Gardner (@lyzadanger)
Jason Grigsby (@grigs)

4. usabilidade e padrões
de design mobile
Responsive web design

5. usabilidade e padrões
de design mobile
Responsive web design
Um site com design bonito desenvolvido
para mobile não corresponde a um site
adaptável para mobile.
A beleza muitas vezes se torna superficial...

6. usabilidade e padrões
de design mobile
Responsive web design
Conceito criado por Ethan Marcotte, Responsive Web Design
(RWD) representa uma série de técnicas de programação
de interface de sites em CSS que tem o objetivo de adaptar
layouts de acordo com a forma de utilização do dispositivo
móvel para navegação na Internet, tornando o conteúdo
acessível de forma fácil e permitindo acessibilidade ao
conteúdo do web site.

7. usabilidade e padrões
de design mobile
Responsive web design
A utilização do Responsive Web Design é uma das formas
mais rápidas e simples para adaptar websites às
especificações nos dispositivos móveis, possibilitando a
reutilização do design do website, caso este já tenha uma
versão para computadores pessoais.
Caracteriza-se pela combinação de
CSS3 media queries, fluid grid layouts e fluid images.

8. usabilidade e padrões
de design mobile
Responsive web design
Visa atender a um dos objetivos do W3C
"Uma marcação para todos os tipos de mídia"
Sua tentativa para solucionar esse problema iniciou com a revisão do CSS 2.0 de 1998:
As CSS 2.0 suportam folhas de estilo específicas para diferentes
mídias, possibilitando aos autores criar apresentação de seus
documentos para servi-los de maneira diferenciada para
navegadores visuais, dispositivos aurais, impressoras, dispositivos
braille, móveis, etc.

9. usabilidade e padrões
de design mobile
Responsive web design
Problema: Os navavegadores implementaram suporte
aceitável somente para leitura e aplicaçãopara mídia - print.
Solução - Aplicação de Técnicas para o desenvolvimento de
Responsive Web Design

10. usabilidade e padrões
de design mobile
Responsive web design
• CSS Media Queries – Permite a avaliação de certos aspectos do
navegador e do ambiente de navegação do usuário para determinar as
regras de estilo em CSS que deverão ser aplicadas. Utiliza-se de
expressões lógicas (true or false) para representação das regras
aplicadas.
• Fluid-grid layouts – Utiliza proporções relativas e absolutas para
fornecer o layout dos elementos de uma página, utilizando layout
baseado em porcentagem para adequação;
• Fluid images and media – Permite a utilização dos elementos de um
web site dentro dos limites das matrizes do navegador.

11. usabilidade e padrões
de design mobile
Responsive web design
CSS Media Queries
O funcionamento do conceito de CSS 3.0 Media Queries representa
expressões lógicas que identificam as características do navegador do
usuário, caso as regras determinadas tenham retorno verdadeiro, a
aplicação das regras para Media Query são aplicadas adaptando o layout
para o formado do dispositivo do usuário.

12. usabilidade e padrões
de design mobile
Responsive web design
CSS Media Queries
Para entender media queries é ideal relembrar formas de vincular folhas
de estilo em CSS 2.0 para diferentes tipos de mídia:
<link rel="stylesheet" type="text/css" media="print, handheld" href="foo.css">
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }
}
@media screen, print {
body { line-height: 1.2 }
}

13. usabilidade e padrões
de design mobile
Responsive web design
CSS Media Queries
Mais sobre media types - http://www.w3.org/TR/CSS2/media.html

14. usabilidade e padrões
de design mobile
Responsive web design
CSS Media Queries
Para realizar a importação de CSS 3.0 Media Querie continuamos com a
sintaxe de CSS 2.0, porém com nova sintaxe para definir a mídia:
@media screen and (min-width:480px) { /* CSS Rules */ }
<link rel="stylesheet" type="text/css" href="my.css" media="screen and (min-
width:480px)" />

15. usabilidade e padrões
de design mobile
Responsive web design
CSS Media Queries
Operadores media query:
and - Concatenação - retorna true se as condições à esquerda e à direita forem
verdadeiras
only - Esconde folhas de estilo em navegadores que não suportam media query
not - negação - retorna true se a funcionalidade não existir

16. usabilidade e padrões
de design mobile
Responsive web design
Otimização de layout para desenvolvimento de
layouts “mobile-friendly”
O desenvolvimento de layouts já existentes em versões para
computadores pessoais adaptados para dispositivos móveis
devem seguir algumas recomendações, sendo estas:

17. usabilidade e padrões
de design mobile
Responsive web design
Otimização de layout para desenvolvimento
de layouts “mobile-friendly”
• Analise da estrutura do layout existente;
• Identificação das áreas do layout a serem adaptadas para
“mobile-friendly";
• Desenvolvimento do CSS adaptável;
• Aplicação de regras lógicas de Media Queries para adaptação
de um mesmo layout CSS para desktop e mobile.

18. usabilidade e padrões
de design mobile
Responsive web design
Adequação do layout a ser adaptado para dispositivos mobiles
• Identifique o tamanho ideal para resolução mínima desejável para navegação
do web site. Segundo O´Reilly 320 pixel é a resolução mínima padrão para
dispositivos mobiles.
• Identificar as regras de formatação de folha de estilo padrões para a
utilização em ambas as versões, reduzindo a necessidade de requisições de
regras repetidas para ambas versões;
• Inserir a meta informação “viewport” no cabeçalho HTML, permitindo que os
navegadores renderizem o conteúdo aplicando a ampliação máxima definida;

19. usabilidade e padrões
de design mobile
Responsive web design
Funcionalidades de mídia
As diferenças entre funcionalidades de mídia e propriedades CSS são:
- Propriedades CSS são usadas em declarações CSS que
fornecem informações sobre como apresentar o
documento.
- Funcionalidades de mídia são usadas em expressões
destinadas a descrever requisitos do dispositivo de
saída do documento

20. usabilidade e padrões
de design mobile
Responsive web design
Funcionalidades de mídia
As diferenças entre funcionalidades de mídia e propriedades CSS são:
- Propriedades CSS requerem a declaração de um valor
- Funcionalidades de mídia podem ser usadas com ou sem
declaração de um valor, exceto com os prefixos min- e max-.

21. usabilidade e padrões
de design mobile
Responsive web design
Fixed Layout
Fluid Layout
Elastic Layout
Hibrid Layout

22. usabilidade e padrões
de design mobile
Responsive web design
Fixed Layout
O desenvolvimento de websites utilizando o conceito de
layout fixo caracteriza-se pela utilização de unidades de
medidas fixas (ex.: pixels) para estruturação das áreas de
conteúdo um web site.

23. usabilidade e padrões
de design mobile
Responsive web design
Fixed Layout - Desvantagens
O principal problema apresentado por esta técnica deve-
se a não uniformidade das resoluções dos computadores
ao redor do mundo, fazendo com que um mesmo layout
definido em uma medida fixa tenha perda na visualização
do conteúdo em diferentes resoluções.

24. usabilidade e padrões
de design mobile
Responsive web design
Fixed Layout - Desvantagens
Ao visualizar um site em resoluções com medidas maiores das
definidas, áreas vazias e sem conteúdo irão aparecer.
Layouts com largura fixa funcionam bem com o tamanho padrão
de texto do navegador, mas ao aplicar-se zoom ou aumentar o
tamanho da fonte para que os espaços disponíveis aos textos se
tornem inadequados para leitura.

25. usabilidade e padrões
de design mobile
Responsive web design
Fixed Layout - Vantagens
Fornecem ao desenvolvedor mais controle sobre o layout e
posicionamento dos objetos.

26. usabilidade e padrões
de design mobile
Responsive web design
Fluid Layout
O desenvolvimento de websites utilizando o conceito de layout
fluído caracteriza-se pela utilização de porcentagens para
estruturação das áreas de conteúdo um web site.

27. usabilidade e padrões
de design mobile
Responsive web design
Fluid Layout - Vantagens
A principal vantagem na utilização de layout fluído está na
possibilidade de adaptar o layout de um web site a qualquer tipo
de dispositivo, sem que áreas fiquem fora do campo de visão do
visitante.

28. usabilidade e padrões
de design mobile
Responsive web design
Fluid Layout - Desvantagens
Em resoluções muito pequenas, a leitura do texto pode ser
comprometida, por tornar-se extremamente estreitas.
Inversamente, se a resolução for muito grande, as linhas podem
tornar-se longas demais para uma boa legibilidade.

29. usabilidade e padrões
de design mobile
Responsive web design
Elastic Layout
Layouts elásticos funcionam configurando a largura dos
elementos em relação ao tamanho da fonte em vez de em relação
à largura dos navegadores.

30. usabilidade e padrões
de design mobile
Responsive web design
Elastic Layout - Vantagens
Configurando a largura em ems - quando o tamanho da fonte
aumentar, o layout todo será redimensionado.
Permite manter o comprimento das linhas de acordo com um
tamanho legível e é extremamente útil para pessoas com visão
reduzida.

31. usabilidade e padrões
de design mobile
Responsive web design
Elastic Layout - Desvantagens
Assim como layouts fixos, podem não utilizar toda área útil
adequadamente.
Como todo layout aumenta quando o texto aumenta, podem
surgir barras de rolagens indesejadas horizontais.

32. usabilidade e padrões
de design mobile
Responsive web design
Elastic Layout + Fluid Layout
Layouts híbridos podem ser uma solução adequada para seus
layouts:
- Larguras em ems
- Larguras máximas em %

33. usabilidade e padrões
de design mobile
Responsive web design
Atividade 01 - Desenvolver um layout
nas 04 possibilidades de layout.

34. usabilidade e padrões
de design mobile
Responsive web design
Atividade 02 - A partir do layout
desenvolvido, aplicar a configuração através
de media query da seguinte forma:
● De 760px a 1000px - 03 colunas
● De 400px a 760px - 02 colunas
● Abaixo de 400px - 01 coluna

35. usabilidade e padrões
de design mobile
meta viewport
Utilizada para "servir" o layout nos dispositivos
móveis e afeta diretamente a forma como o
usuário utiliza seu website.
<meta name="viewport" content="
width=device-width, initial-scale=1.0,
maximun-scale=1" />

36. usabilidade e padrões
de design mobile
meta viewport

37. usabilidade e padrões
de design mobile
THE FLUID FORMULA
Como converter corretamente as medidas de
um layout fixo em fluido?
The fluid formula:
target (tamanho elemento em px) = result*100 (%)
content (tamanho total do elemento pai)

38. usabilidade e padrões
de design mobile
THE FLUID FORMULA

39. usabilidade e padrões
de design mobile
THE FLUID FORMULA
● Top = (960px / 960px) * 100 = 100%
● Left = (240px/960px) * 100 = 25%
● Right = (240px/960px) * 100 = 25%
● Center = (460px / 960px) * 100 = 47.91%

40. usabilidade e padrões
de design mobile
media queries
recomendation w3c 2012
http://www.w3.org/TR/css3-mediaqueries/

41. usabilidade e padrões
de design mobile
exercicio media queries

42. usabilidade e padrões
de design mobile
exercicio media queries

43. usabilidade e padrões
de design mobile
exercicio media queries

44. usabilidade e padrões
de design mobile
exercicio media queries
width = 1280px width = 640px width = 320px