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.
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)
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
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
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/