49
Responsive Design sem mimimi #CPBR6 @gserrano

Responsive design

Embed Size (px)

DESCRIPTION

Palestra sobre design responsivo (responsive design) apresentada no Campus Party Brasil 2013.

Citation preview

Page 1: Responsive design

Responsive Designsem mimimi

#CPBR6@gserrano

Page 2: Responsive design

Quem?

Guilherme Serrano (@gserrano)Web developer

Graduado em design (ui ui ui)

Pós em gestão empreendedoraWedeveloper e sócio do @eucompraria (eucompraria.com.br)

Experiências anteriores- iG- Itau BBA (MM Café)- Avon (MM Café)

Page 3: Responsive design

O que é responsive?

Page 4: Responsive design
Page 5: Responsive design

O que teremos no futuro?

Page 6: Responsive design

Objetivos do responsive

- Web mais acessível?- Usabilidade?- Beleza?- Reduzir custo de desenvolvimento?

Por quê?

Page 7: Responsive design

Objetivos do responsive

Empresas buscam resultados financeiros.

Como?

Mais conversão (cadastros, e-mails, ações, etc.)

Mais vendasMais visitasBranding - felicidade no uso da marca

Page 8: Responsive design
Page 9: Responsive design
Page 10: Responsive design

Como atingir os objetivos?

Melhorar a experiência

Nunca atrapalhe o usuário

Melhorar performance

Reduzir custo (código, manutenção)

Page 11: Responsive design
Page 12: Responsive design
Page 13: Responsive design

Como fazer um site responsivo?

Sem jQuerySem javascriptSem frameworks

Page 14: Responsive design

Como fazer um site responsivo?

Sem esconder conteúdo.

Page 15: Responsive design

Como fazer um site responsivo?

Sem esconder conteúdo.

Page 16: Responsive design

Sem esconder conteúdo.

Como fazer um site responsivo?

Page 17: Responsive design

Tecnologias?

- HTML- CSS - Media-queries

Page 18: Responsive design

CSS Media QueriesProvavelmente você já fez isso

<link rel="stylesheet" type="text/css" media="screen" href="screen.css">

<link rel="stylesheet" type="text/css" media="print" href="serif.css">

Page 19: Responsive design

CSS Media QueriesProvavelmente você já fez isso

<link rel="stylesheet" type="text/css" media="screen" href="screen.css">

<link rel="stylesheet" type="text/css" media="print" href="serif.css">

Page 20: Responsive design

CSS Media QueriesE isso?

@media screen { * { font-family: sans-serif }}

Page 21: Responsive design

CSS Media Queries@media (min-width:500px) { … }

@media (orientation: portrait) { … }

Page 22: Responsive design

O que faço com isso?

Como assim?

Você pode fazer quase tudo!

Page 23: Responsive design

Apps

Conteúdo

Institucional

Portfólio

Page 24: Responsive design
Page 25: Responsive design
Page 26: Responsive design

Exemplos

Institucional http://aneventapart.com/

App - http://archive.simurai.com/lab/flapps/mail/

Page 27: Responsive design

Apenas para sites pequenos?

Home da Globo.com

Page 28: Responsive design

Apenas para sites pequenos?

Globo.com voltou a usar versão mobile.

:(

Page 29: Responsive design

Dificuldades do Responsive

Page 30: Responsive design
Page 31: Responsive design

Responsive x mobile

Page 32: Responsive design
Page 33: Responsive design
Page 34: Responsive design

Responsive vs mobile

- Custo- Gerenciamento de conteúdo- Experiência do usuário- Future proof?- Manutenção de código

Page 35: Responsive design

Boas práticas do responsive

Nunca desenvolva para dispositivos.

Page 36: Responsive design

Boas práticas

Desenvolva para

pessoas features resoluções

Page 37: Responsive design

Feature detection

A melhor experiência possível em qualquer dispositivo.

Page 38: Responsive design

Ferramentas

Você PODE fazer sem frameworks.

Mas você quer?

Page 39: Responsive design
Page 40: Responsive design
Page 41: Responsive design
Page 42: Responsive design
Page 43: Responsive design

Compass

Organização do código

Sprites

Manutenção

Page 44: Responsive design

Compass

Includes

@import "header";@import "cart";@import "checkout";@import "flex-slider";@import "products";@import "account";

Page 45: Responsive design

Compass

Sprites (manutenção fácil)

@import "sprite/*.png";@include all-sprite-sprites;

Page 46: Responsive design

Bootstrap

GridResponsiveFluid

Page 47: Responsive design

Antes de implementar...

Questione

Pesquise

Teste

Valide

Page 48: Responsive design

Perguntas?@[email protected]

http://eucompraria.com.br

Page 49: Responsive design

Obrigado!