O documento discute como aplicar design responsivo no tema AdaptiveTheme para WordPress. Ele explica como o AdaptiveTheme usa breakpoints e regiões para fornecer experiências diferenciadas em dispositivos móveis e desktops e recomenda ferramentas para imagens, vídeos e formulários flexíveis entre telas.

1. APLICANDO CONCEITO DE
DESIGN RESPONSIVO NO
ADAPTIVETHEME
Gilberto Crespo / http://gilcrespo.com

2. MERCADO MOBILE

3. MERCADO MOBILE

4. DESIGN RESPONSIVO

5. DESIGN RESPONSIVO

6. MOBILE FIRST

7. DESIGN RESPONSIVO - EXEMPLOS
http://responsivewebdesign.com/robot/
http://www.acuvueprofessional.com/
http://www.bostonglobe.com/

8. ROBOTORNOT
SMARTPHONE

9. ROBOTORNOT
TABLET

10. ROBOTORNOT
DESKTOP

11. ADAPTIVETHEME

12. ADAPTIVETHEME
CARACTERÍSTICAS
Fácil administração de breakpoints
Administração visual das regiões padrões
Painéis responsivos
Polyfills para compatibilidade com
navegadores mais antigos
HTML5
Integração com SASS
Suporte aos métodos de mobile first ou
desktop first

13. ADAPTIVETHEME
BREAKPOINTS (COMPORTAMENTOS DIFERENCIADOS)
- Standard
(only screen and (min-width:1025px))
- Landscape tablet
(only screen and (min-width:769px) and (max-width:1024px))
- Portrait tablet
(only screen and (min-width:481px) and (max-width:768px))
- Landscape smartphone
(only screen and (min-width:321px) and (max-width:480px))
- Portrait smartphone
(only screen and (max-width:320px))
- Custom
(para micro breakpoints ou mais específicos)

14. ADAPTIVETHEME
REGIONS (HIERARQUIADEINFORMAÇÃO)

15. ADAPTIVETHEME
PANELS (HIERARQUIADEINFORMAÇÃO)

16. DESIGN RESPONSIVO
IMAGENS FLEXÍVEIS
Básico já está pronto!
Imagens adaptativas podem e deveriam
ser implementadas provendo melhor
experiência mobile
Sugestão: Foresight.js
http://www.cdnconnect.com/docs/foresightjs/demos
element-media-queries

17. DESIGN RESPONSIVO
VÍDEOS FLEXÍVEIS
Sugestão: Fitvids.js
http://fitvidsjs.com

18. DESIGN RESPONSIVO
CONVERSÃO:PX - %(ESTRUTURAFLEXÍVEL)
Fórmula mágica: target / contexto= dimensão
exemplos:
a: 340px 340/1024= 33,203125%
b: 684px 684/1024= 66,796875%
c: 200px 200/1024= 19,53125%
d: 400px 400/1024= 39,0625%
e: 424px 424/1024= 41,40625%

19. DESIGN RESPONSIVO
CONVERSÃO:PX - %(ESTRUTURAFLEXÍVEL)
Sugestão: Flexible Math
http://responsv.com/flexible-math/

20. DESIGN RESPONSIVO
CONVERSÃO:PX - EM(TAMANHODOTEXTOFLEXÍVEL)
Fórmula mágica: target / contexto= tamanho
16px é o tamanho da font
definido pelos browsers.
Então:
30px/16px= 1,875em
Para converter o strong, é
necessário usar como
base os 30px.
Então:
40px/30px= 1,333em

21. DESIGN RESPONSIVO
CONVERSÃO:PX - EM(TAMANHODOTEXTOFLEXÍVEL)
Sugestão: PxtoEm
http://pxtoem.com/

22. DESIGN RESPONSIVO
FORMS (CAMPOS COMPATÍVEIS COMDEVICES)
Procurar usar os atributos do HTML5, como
input type: email, tel, number
Definir a largura dos elementos em %
Sugestão: IdealForms
http://elclanrs.github.io/jq-idealforms/

23. PERGUNTAS ?
BÓRA RANGAR ENTÃO! =)

24. OBRIGADO!
Gilberto Crespo / http://gilcrespo.com