Click here to load reader

Aplicando conceito de Design Responsivo no AdaptiveTheme

  • View
    387

  • Download
    1

Embed Size (px)

Text of Aplicando conceito de Design Responsivo no AdaptiveTheme

  • 1. APLICANDO CONCEITO DEDESIGN RESPONSIVO NOADAPTIVETHEMEGilberto Crespo / http://gilcrespo.com

2. MERCADO MOBILE 3. MERCADO MOBILE 4. DESIGN RESPONSIVO 5. DESIGN RESPONSIVO 6. MOBILE FIRST 7. DESIGN RESPONSIVO - EXEMPLOShttp://responsivewebdesign.com/robot/http://www.acuvueprofessional.com/http://www.bostonglobe.com/ 8. ROBOTORNOTSMARTPHONE 9. ROBOTORNOTTABLET 10. ROBOTORNOTDESKTOP 11. ADAPTIVETHEME 12. ADAPTIVETHEMECARACTERSTICASFcil administrao de breakpointsAdministrao visual das regies padresPainis responsivosPolyfills para compatibilidade comnavegadores mais antigosHTML5Integrao com SASSSuporte aos mtodos de mobile first oudesktop first 13. 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 especficos) 14. ADAPTIVETHEMEREGIONS (HIERARQUIADEINFORMAO) 15. ADAPTIVETHEMEPANELS (HIERARQUIADEINFORMAO) 16. DESIGN RESPONSIVOIMAGENS FLEXVEISBsico j est pronto!Imagens adaptativas podem e deveriamser implementadas provendo melhorexperincia mobileSugesto: Foresight.jshttp://www.cdnconnect.com/docs/foresightjs/demoselement-media-queries 17. DESIGN RESPONSIVOVDEOS FLEXVEISSugesto: Fitvids.jshttp://fitvidsjs.com 18. DESIGN RESPONSIVOCONVERSO:PX - %(ESTRUTURAFLEXVEL)Frmula mgica: target / contexto= dimensoexemplos: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 RESPONSIVOCONVERSO:PX - %(ESTRUTURAFLEXVEL)Sugesto: Flexible Mathhttp://responsv.com/flexible-math/ 20. DESIGN RESPONSIVOCONVERSO:PX - EM(TAMANHODOTEXTOFLEXVEL)Frmula mgica: target / contexto= tamanho16px o tamanho da fontdefinido pelos browsers.Ento:30px/16px= 1,875emPara converter o strong, necessrio usar comobase os 30px.Ento:40px/30px= 1,333em 21. DESIGN RESPONSIVOCONVERSO:PX - EM(TAMANHODOTEXTOFLEXVEL)Sugesto: PxtoEmhttp://pxtoem.com/ 22. DESIGN RESPONSIVOFORMS (CAMPOS COMPATVEIS COMDEVICES)Procurar usar os atributos do HTML5, comoinput type: email, tel, numberDefinir a largura dos elementos em %Sugesto: IdealFormshttp://elclanrs.github.io/jq-idealforms/ 23. PERGUNTAS ?BRA RANGAR ENTO! =) 24. OBRIGADO!Gilberto Crespo / http://gilcrespo.com