aplicando conceito de design responsivo no adaptivetheme

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 RESPONSIVOVÍDEOS FLEXÍVEIS

Sugestão: Fitvids.jshttp://fitvidsjs.com

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