Boas práticas de programação com Object Calisthenics
Design Responsivo
1. DESIGN RESPONSIVO
por Rennan M. Rodrigues
Programador de Interfaces
Agência Digital ICOMP | grupo AVADORA
2. O QUE É?
“É o design de um site que se adapta ao
comportamento do usuário com base no
tamanho da tela, plataforma e
orientação.”
http://www.thismanslife.co.
uk/projects/lab/responsiveillustration/
5. ATÉ O ANO DE 2015...
“O número total de pessoas que terão
acesso à internet em dispositivos
móveis irá ultrapassar os acessos via
desktop.”
INTERNATIONAL DATA CORPORATION
http://www.idc.com/getdoc.jsp?containerId=prUS23028711
10. COMO SURGIU?
A expressão Design Responsivo foi
sugerida por Ethan
Marcotte, em um blog
chamado A List Apart.
25/05/10 - Post original
http://www.alistapart.com/articles/responsive-web-design/
19. IMAGENS FLEXÍVEIS
É possível fazer com que a imagem
tenha o redimensionamento automático
definindo no CSS largura e altura com %.
DEMONSTRAÇÃO:
http://webdesignerwall.com/demo/responsive-css-tricks/
20. MAS ISSO GERA O
SEGUINTE PROBLEMA...
Não adianta reduzirmos a
largura da imagem em % se
ela possuir 2Mb de tamanho.
E se eu acessar do meu
smartphone via 3g?
21. Para resolver esse problema, está
sendo discutido uma nova forma de
marcação onde o browser
selecionaria o melhor arquivo de
imagem a ser utilizado de acordo com
acordo com os parâmetros
escolhidos.
CONHEÇA O RICG
Responsive Image Community Group
http://www.w3.org/community/respimg/
22. IMAGENS FLEXÍVEIS
Como ainda está em fase de discussão,
existem várias propostas, mas já foram
desenvolvidos alguns polyfills que fazem o
mesmo propósito.
ALGUNS POLYFILLS
http://adaptive-images.com/
http://wil.to/picturefill/
23. MEDIA QUERIES
Podemos especificar condições de CSSS de
acordo com a capacidade de exibição do
dispositivo.
Por exemplo, com algumas linhas de CSS é
possível mudar a maneira que o conteúdo será
exibido, como sua altura, aspect radio,
orientação (landscape ou portrait) e assim por
diante.
24. MEDIA QUERIES
O browser ou a aplicação lê as
expressões definidas na query, caso o
dispositivo se encaixe nestas
requisições, o CSS será aplicado.
25. O uso de Media Queries se
tornou recomendação desde
19 de Junho de 2012.
http://www.w3.org/TR/css3-
mediaqueries/
28. MEDIA QUERIES
O QUE UM CSS COM MEDIA QUERES É CAPAZ
DE FAZER?
http://j.mp/respSimpsons
29. RESPONSIVO, MAS...
Só usar media-queries e trocar tudo pra
porcentagem no CSS não vai fazer do
seu site responsivo ou com a melhor
experiência para o usuário.
31. RESPONSIVO, MAS...
O CONTEÚDO É QUE IMPORTA
OTIMIZAR É ESSENCIAL
FOCO NA EXPERIÊNCIA DO USUÁRIO
MOBILE FIRST!
http://www.abookapart.com/products/mobile-first/