Material apresentado à turma 2 de Especialização em Desenvolvimento Web da UTFPR-Londrina.

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/

3. O FUTURO DO MOBILE

4. O FUTURO DO MOBILE
DA WEB

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

6. MAIS ESTATÍSTICAS
http://www.thinkwithgoogle.com/mobileplanet/en/

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/

11. E COMO FUNCIONA?

12. E COMO FUNCIONA?
É composto por 3 componentes principais:
1 - Layouts Fluídos
2 - Imagens Flexíveis
3 - Media Queries

13. LAYOUTS FLUÍDOS
São telas baseadas em
porcentagens. As telas se
adaptam de acordo com a
largura suportada pelo
dispositivo.

14. LAYOUTS FLUÍDOS
● Planejar o que pode e o que
não pode ter seu tamanho
alterado
● Representar os tamanhos
fixos em porcentagens

15. LAYOUTS FLUÍDOS

16. LAYOUTS FLUÍDOS

17. LAYOUTS FLUÍDOS
Utilize grades como base
para posicionamento e
alinhamento de blocos de
conteúdos. Utilize GRIDS!

18. Frameless
http://framelessgrid.com/
Twitter Bootstrap
http://twitter.github.com/bootstrap/
Responsive Grid System
http://www.responsivegridsystem.com/
960 Grid System
http://960.gs/
The Goldilocks Approach
http://goldilocksapproach.com/

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/

26. VAMOS FAZER UM
EXEMPLO?

27. MEDIA QUERIES
FERRAMENTAS BACANAS:
http://responsive.is
http://www.responsinator.com/
http://screenqueri.es/
http://www.opera.
com/developer/tools/mobile/

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.

30. RESPONSIVO, MAS...
Desenvolver para mobile têm vários
outros desafios, ainda mais se
queremos que o mesmo site sirva todo
mundo.

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/

32. REFERÊNCIAS
http://adaptive-images.com/
http://css-tricks.com/
http://mediaqueri.es/
http://bradfrostweb.com/blog/web/responsive-web-design-
missing-the-point/
http://www.designadaptavel.com.br/artigos/layout-fluido-ou-
liquido

33. REFERÊNCIAS
FRAIN, Ben. Responsive Web Design with HTML5
and CSS3. Ed. Packt Publishing, Abril 2012.
Livro no Google Books
Livro no Amazon

34. OBRIGADO!