Aplicando conceito de Design Responsivo no AdaptiveTheme
-
Upload
gil-crespo -
Category
Technology
-
view
391 -
download
1
Transcript of Aplicando conceito de Design Responsivo no AdaptiveTheme
![Page 1: Aplicando conceito de Design Responsivo no AdaptiveTheme](https://reader033.fdocuments.net/reader033/viewer/2022052904/5582a38bd8b42a94688b5305/html5/thumbnails/1.jpg)
APLICANDO CONCEITO DE DESIGN RESPONSIVO NO
ADAPTIVETHEMEGilberto Crespo / http://gilcrespo.com
![Page 2: Aplicando conceito de Design Responsivo no AdaptiveTheme](https://reader033.fdocuments.net/reader033/viewer/2022052904/5582a38bd8b42a94688b5305/html5/thumbnails/2.jpg)
MERCADO MOBILE
![Page 3: Aplicando conceito de Design Responsivo no AdaptiveTheme](https://reader033.fdocuments.net/reader033/viewer/2022052904/5582a38bd8b42a94688b5305/html5/thumbnails/3.jpg)
MERCADO MOBILE
![Page 4: Aplicando conceito de Design Responsivo no AdaptiveTheme](https://reader033.fdocuments.net/reader033/viewer/2022052904/5582a38bd8b42a94688b5305/html5/thumbnails/4.jpg)
DESIGN RESPONSIVO
![Page 5: Aplicando conceito de Design Responsivo no AdaptiveTheme](https://reader033.fdocuments.net/reader033/viewer/2022052904/5582a38bd8b42a94688b5305/html5/thumbnails/5.jpg)
DESIGN RESPONSIVO
![Page 6: Aplicando conceito de Design Responsivo no AdaptiveTheme](https://reader033.fdocuments.net/reader033/viewer/2022052904/5582a38bd8b42a94688b5305/html5/thumbnails/6.jpg)
MOBILE FIRST
![Page 7: Aplicando conceito de Design Responsivo no AdaptiveTheme](https://reader033.fdocuments.net/reader033/viewer/2022052904/5582a38bd8b42a94688b5305/html5/thumbnails/7.jpg)
DESIGN RESPONSIVO - EXEMPLOShttp://responsivewebdesign.com/robot/http://www.acuvueprofessional.com/http://www.bostonglobe.com/
![Page 8: Aplicando conceito de Design Responsivo no AdaptiveTheme](https://reader033.fdocuments.net/reader033/viewer/2022052904/5582a38bd8b42a94688b5305/html5/thumbnails/8.jpg)
ROBOTORNOTSMARTPHONE
![Page 9: Aplicando conceito de Design Responsivo no AdaptiveTheme](https://reader033.fdocuments.net/reader033/viewer/2022052904/5582a38bd8b42a94688b5305/html5/thumbnails/9.jpg)
ROBOTORNOTTABLET
![Page 10: Aplicando conceito de Design Responsivo no AdaptiveTheme](https://reader033.fdocuments.net/reader033/viewer/2022052904/5582a38bd8b42a94688b5305/html5/thumbnails/10.jpg)
ROBOTORNOTDESKTOP
![Page 11: Aplicando conceito de Design Responsivo no AdaptiveTheme](https://reader033.fdocuments.net/reader033/viewer/2022052904/5582a38bd8b42a94688b5305/html5/thumbnails/11.jpg)
ADAPTIVETHEME
![Page 12: Aplicando conceito de Design Responsivo no AdaptiveTheme](https://reader033.fdocuments.net/reader033/viewer/2022052904/5582a38bd8b42a94688b5305/html5/thumbnails/12.jpg)
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
![Page 13: Aplicando conceito de Design Responsivo no AdaptiveTheme](https://reader033.fdocuments.net/reader033/viewer/2022052904/5582a38bd8b42a94688b5305/html5/thumbnails/13.jpg)
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)
![Page 14: Aplicando conceito de Design Responsivo no AdaptiveTheme](https://reader033.fdocuments.net/reader033/viewer/2022052904/5582a38bd8b42a94688b5305/html5/thumbnails/14.jpg)
ADAPTIVETHEMEREGIONS (HIERARQUIA DE INFORMAÇÃO)
![Page 15: Aplicando conceito de Design Responsivo no AdaptiveTheme](https://reader033.fdocuments.net/reader033/viewer/2022052904/5582a38bd8b42a94688b5305/html5/thumbnails/15.jpg)
ADAPTIVETHEMEPANELS (HIERARQUIA DE INFORMAÇÃO)
![Page 16: Aplicando conceito de Design Responsivo no AdaptiveTheme](https://reader033.fdocuments.net/reader033/viewer/2022052904/5582a38bd8b42a94688b5305/html5/thumbnails/16.jpg)
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
![Page 18: Aplicando conceito de Design Responsivo no AdaptiveTheme](https://reader033.fdocuments.net/reader033/viewer/2022052904/5582a38bd8b42a94688b5305/html5/thumbnails/18.jpg)
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%
![Page 19: Aplicando conceito de Design Responsivo no AdaptiveTheme](https://reader033.fdocuments.net/reader033/viewer/2022052904/5582a38bd8b42a94688b5305/html5/thumbnails/19.jpg)
DESIGN RESPONSIVOCONVERSÃO: PX - % (ESTRUTURA FLEXÍVEL)
Sugestão: Flexible Mathhttp://responsv.com/flexible-math/
![Page 20: Aplicando conceito de Design Responsivo no AdaptiveTheme](https://reader033.fdocuments.net/reader033/viewer/2022052904/5582a38bd8b42a94688b5305/html5/thumbnails/20.jpg)
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
![Page 21: Aplicando conceito de Design Responsivo no AdaptiveTheme](https://reader033.fdocuments.net/reader033/viewer/2022052904/5582a38bd8b42a94688b5305/html5/thumbnails/21.jpg)
DESIGN RESPONSIVOCONVERSÃO: PX - EM (TAMANHO DO TEXTO FLEXÍVEL)
Sugestão: PxtoEmhttp://pxtoem.com/
![Page 22: Aplicando conceito de Design Responsivo no AdaptiveTheme](https://reader033.fdocuments.net/reader033/viewer/2022052904/5582a38bd8b42a94688b5305/html5/thumbnails/22.jpg)
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/
![Page 23: Aplicando conceito de Design Responsivo no AdaptiveTheme](https://reader033.fdocuments.net/reader033/viewer/2022052904/5582a38bd8b42a94688b5305/html5/thumbnails/23.jpg)
PERGUNTAS ?BÓRA RANGAR ENTÃO! =)