APLICANDO CONCEITO DEDESIGN RESPONSIVO NOADAPTIVETHEMEGilberto 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....
ROBOTORNOTSMARTPHONE
ROBOTORNOTTABLET
ROBOTORNOTDESKTOP
ADAPTIVETHEME
ADAPTIVETHEMECARACTERÍSTICASFácil administração de breakpointsAdministração visual das regiões padrõesPainéis responsivosP...
ADAPTIVETHEMEBREAKPOINTS (COMPORTAMENTOS DIFERENCIADOS)- Standard(only screen and (min-width:1025px))- Landscape tablet(on...
ADAPTIVETHEMEREGIONS (HIERARQUIADEINFORMAÇÃO)
ADAPTIVETHEMEPANELS (HIERARQUIADEINFORMAÇÃO)
DESIGN RESPONSIVOIMAGENS FLEXÍVEISBásico já está pronto!Imagens adaptativas podem e deveriamser implementadas provendo mel...
DESIGN RESPONSIVOVÍDEOS FLEXÍVEISSugestão: Fitvids.jshttp://fitvidsjs.com
DESIGN RESPONSIVOCONVERSÃO:PX - %(ESTRUTURAFLEXÍVEL)Fórmula mágica: target / contexto= dimensãoexemplos:a: 340px 340/1024=...
DESIGN RESPONSIVOCONVERSÃO:PX - %(ESTRUTURAFLEXÍVEL)Sugestão: Flexible Mathhttp://responsv.com/flexible-math/
DESIGN RESPONSIVOCONVERSÃO:PX - EM(TAMANHODOTEXTOFLEXÍVEL)Fórmula mágica: target / contexto= tamanho16px é o tamanho da fo...
DESIGN RESPONSIVOCONVERSÃO:PX - EM(TAMANHODOTEXTOFLEXÍVEL)Sugestão: PxtoEmhttp://pxtoem.com/
DESIGN RESPONSIVOFORMS (CAMPOS COMPATÍVEIS COMDEVICES)Procurar usar os atributos do HTML5, comoinput type: email, tel, num...
PERGUNTAS ?BÓRA RANGAR ENTÃO! =)
OBRIGADO!Gilberto Crespo / http://gilcrespo.com
Upcoming SlideShare
Loading in …5
×

Aplicando conceito de Design Responsivo no AdaptiveTheme

531 views

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
531
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
6
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Aplicando conceito de Design Responsivo no AdaptiveTheme

  1. 1. APLICANDO CONCEITO DEDESIGN RESPONSIVO NOADAPTIVETHEMEGilberto Crespo / http://gilcrespo.com
  2. 2. MERCADO MOBILE
  3. 3. MERCADO MOBILE
  4. 4. DESIGN RESPONSIVO
  5. 5. DESIGN RESPONSIVO
  6. 6. MOBILE FIRST
  7. 7. DESIGN RESPONSIVO - EXEMPLOShttp://responsivewebdesign.com/robot/http://www.acuvueprofessional.com/http://www.bostonglobe.com/
  8. 8. ROBOTORNOTSMARTPHONE
  9. 9. ROBOTORNOTTABLET
  10. 10. ROBOTORNOTDESKTOP
  11. 11. ADAPTIVETHEME
  12. 12. ADAPTIVETHEMECARACTERÍSTICASFá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
  13. 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 específicos)
  14. 14. ADAPTIVETHEMEREGIONS (HIERARQUIADEINFORMAÇÃO)
  15. 15. ADAPTIVETHEMEPANELS (HIERARQUIADEINFORMAÇÃO)
  16. 16. DESIGN RESPONSIVOIMAGENS FLEXÍVEISBásico já está pronto!Imagens adaptativas podem e deveriamser implementadas provendo melhorexperiência mobileSugestão: Foresight.jshttp://www.cdnconnect.com/docs/foresightjs/demoselement-media-queries
  17. 17. DESIGN RESPONSIVOVÍDEOS FLEXÍVEISSugestão: Fitvids.jshttp://fitvidsjs.com
  18. 18. DESIGN RESPONSIVOCONVERSÃO:PX - %(ESTRUTURAFLEXÍVEL)Fórmula mágica: target / contexto= dimensãoexemplos: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. 19. DESIGN RESPONSIVOCONVERSÃO:PX - %(ESTRUTURAFLEXÍVEL)Sugestão: Flexible Mathhttp://responsv.com/flexible-math/
  20. 20. DESIGN RESPONSIVOCONVERSÃO:PX - EM(TAMANHODOTEXTOFLEXÍVEL)Fórmula mágica: target / contexto= tamanho16px é o tamanho da fontdefinido pelos browsers.Então:30px/16px= 1,875emPara converter o strong, énecessário usar comobase os 30px.Então:40px/30px= 1,333em
  21. 21. DESIGN RESPONSIVOCONVERSÃO:PX - EM(TAMANHODOTEXTOFLEXÍVEL)Sugestão: PxtoEmhttp://pxtoem.com/
  22. 22. DESIGN RESPONSIVOFORMS (CAMPOS COMPATÍVEIS COMDEVICES)Procurar usar os atributos do HTML5, comoinput type: email, tel, numberDefinir a largura dos elementos em %Sugestão: IdealFormshttp://elclanrs.github.io/jq-idealforms/
  23. 23. PERGUNTAS ?BÓRA RANGAR ENTÃO! =)
  24. 24. OBRIGADO!Gilberto Crespo / http://gilcrespo.com

×