aplicando conceito de design responsivo no adaptivetheme
TRANSCRIPT
APLICANDO CONCEITO DE DESIGN RESPONSIVO NO
ADAPTIVETHEMEGilberto Crespo / http://gilcrespo.com
MERCADO MOBILE
MERCADO MOBILE
DESIGN RESPONSIVO
DESIGN RESPONSIVO
MOBILE FIRST
DESIGN RESPONSIVO - EXEMPLOShttp://responsivewebdesign.com/robot/http://www.acuvueprofessional.com/http://www.bostonglobe.com/
ROBOTORNOTSMARTPHONE
ROBOTORNOTTABLET
ROBOTORNOTDESKTOP
ADAPTIVETHEME
ADAPTIVETHEMECARACTERÍSTICAS
Fácil administração de breakpointsAdministração visual das regiões padrõesPainéis responsivosPolyfills para compatibilidade comnavegadores mais antigosHTML5Integração com SASSSuporte aos métodos de mobile first oudesktop first
ADAPTIVETHEMEBREAKPOINTS (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)
ADAPTIVETHEMEREGIONS (HIERARQUIA DE INFORMAÇÃO)
ADAPTIVETHEMEPANELS (HIERARQUIA DE INFORMAÇÃO)
DESIGN RESPONSIVOIMAGENS FLEXÍVEIS
Básico já está pronto!Imagens adaptativas podem e deveriamser implementadas provendo melhorexperiência mobileSugestão: Foresight.jshttp://www.cdnconnect.com/docs/foresightjs/demos/parent-element-media-queries
DESIGN RESPONSIVOCONVERSÃO: PX - % (ESTRUTURA FLEXÍ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%
DESIGN RESPONSIVOCONVERSÃO: PX - % (ESTRUTURA FLEXÍVEL)
Sugestão: Flexible Mathhttp://responsv.com/flexible-math/
DESIGN RESPONSIVOCONVERSÃO: PX - EM (TAMANHO DO TEXTO FLEXÍ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
DESIGN RESPONSIVOCONVERSÃO: PX - EM (TAMANHO DO TEXTO FLEXÍVEL)
Sugestão: PxtoEmhttp://pxtoem.com/
DESIGN RESPONSIVOFORMS (CAMPOS COMPATÍVEIS COM DEVICES)
Procurar usar os atributos do HTML5, comoinput type: email, tel, number
Definir a largura dos elementos em %
Sugestão: IdealFormshttp://elclanrs.github.io/jq-idealforms/
PERGUNTAS ?BÓRA RANGAR ENTÃO! =)
OBRIGADO!Gilberto Crespo / http://gilcrespo.com