design responsivo - mobcamp 2014

123
DESIGN RESPONSIVO POR UMA WEB ÚNICA

Upload: caelum

Post on 08-Sep-2014

655 views

Category:

Technology


0 download

DESCRIPTION

Palestra de Design Responsivo do Sérgio Lopes na MobCamp 2014

TRANSCRIPT

Page 1: Design Responsivo - MobCamp 2014

DESIGN RESPONSIVO

POR UMA

WEB ÚNICA

Page 2: Design Responsivo - MobCamp 2014

@sergio_caelumsergiolopes.org

Page 3: Design Responsivo - MobCamp 2014

sergiolopes.org

Page 4: Design Responsivo - MobCamp 2014

SITE MOBILE ou DESIGN RESPONSIVO?

Page 5: Design Responsivo - MobCamp 2014

NÃO EXISTE MOBILE

Page 6: Design Responsivo - MobCamp 2014

ONE WEB

Page 7: Design Responsivo - MobCamp 2014

DESIGN RESPONSIVO

Page 8: Design Responsivo - MobCamp 2014

LAYOUT FLUÍDO

Page 9: Design Responsivo - MobCamp 2014
Page 10: Design Responsivo - MobCamp 2014

960px

470px470px

Page 11: Design Responsivo - MobCamp 2014

MEDIDAS FLEXÍVEIS

Page 12: Design Responsivo - MobCamp 2014

MEDIDAS FLEXÍVEIS

%, em, rem, vh

Page 13: Design Responsivo - MobCamp 2014

100%

49%49%

Page 14: Design Responsivo - MobCamp 2014

PROPORÇÕES

Page 15: Design Responsivo - MobCamp 2014

NUMA TELA DE 320px

100%

49% 49%

Page 16: Design Responsivo - MobCamp 2014

LAYOUT CONDICIONAL

Page 17: Design Responsivo - MobCamp 2014

NUMA TELA DE 320px

Page 18: Design Responsivo - MobCamp 2014

.formulario,

.endereco { width: 49%;}!

@media (max-width: 600px) { .formulario, .endereço { width: 100%; }}

CSS

Page 19: Design Responsivo - MobCamp 2014

.formulario,

.endereco { width: 49%;}!

@media (max-width: 600px) { .formulario, .endereco { width: 100%; }}

CSS

Page 20: Design Responsivo - MobCamp 2014

CSS3 MEDIA QUERIES

Page 21: Design Responsivo - MobCamp 2014

.formulario,

.endereco { width: 49%;}!

@media (max-width: 600px) { .formulario, .endereco { width: 100%; }}

CSS

Page 22: Design Responsivo - MobCamp 2014

DESIGN RESPONSIVO FLEXÍVEL ADAPTÁVEL

Page 23: Design Responsivo - MobCamp 2014
Page 24: Design Responsivo - MobCamp 2014
Page 25: Design Responsivo - MobCamp 2014
Page 26: Design Responsivo - MobCamp 2014

IMPLEMENTANDO DESIGN RESPONSIVO

Page 27: Design Responsivo - MobCamp 2014

CRIAÇÃOPHOTOSHOP?

Page 28: Design Responsivo - MobCamp 2014
Page 29: Design Responsivo - MobCamp 2014
Page 30: Design Responsivo - MobCamp 2014

CRIAÇÃODESIGN IN THE BROWSER

Page 31: Design Responsivo - MobCamp 2014

LAYOUT FLUÍDO

Page 32: Design Responsivo - MobCamp 2014

MEDIDAS FLEXÍVEIS

Page 33: Design Responsivo - MobCamp 2014

%

Page 34: Design Responsivo - MobCamp 2014

<body>

Page 35: Design Responsivo - MobCamp 2014

<body> <main> width: 90%;

Page 36: Design Responsivo - MobCamp 2014

<body> <main> width: 90%;

90%

Page 37: Design Responsivo - MobCamp 2014

<body> <main> width: 90%;

90%5% 5%

Page 38: Design Responsivo - MobCamp 2014

<body> <main> width: 90%;

90%5% 5%

1280px

Page 39: Design Responsivo - MobCamp 2014

<body> <main> width: 90%;

90%5% 5%

1280px

1152px

Page 40: Design Responsivo - MobCamp 2014

<body> <main> width: 90%;

90%5% 5%

1280px

1152px54px 54px

Page 41: Design Responsivo - MobCamp 2014

<body> <main> width: 90%;

90%5% 5%

1280px

1152px54px 54px

360px

Page 42: Design Responsivo - MobCamp 2014

<body> <main> width: 90%;

90%5% 5%

1280px

1152px54px 54px

360px

324px

Page 43: Design Responsivo - MobCamp 2014

<body> <main> width: 90%;

90%5% 5%

1280px

1152px54px 54px

360px

324px18px 18px

Page 44: Design Responsivo - MobCamp 2014

<body> <main> width: 90%;

Page 45: Design Responsivo - MobCamp 2014

<body> <main> width: 90%;

<section> width: 50%;

<section> width: 50%;

Page 46: Design Responsivo - MobCamp 2014

<body> <main> width: 90%;

<section> width: 50%;

<section> width: 50%;

33% 33% 33% 33% 33% 33%

Page 47: Design Responsivo - MobCamp 2014

%font-size

Page 48: Design Responsivo - MobCamp 2014

<body>

Page 49: Design Responsivo - MobCamp 2014

<body>

<main> font-size: 125%;

Page 50: Design Responsivo - MobCamp 2014

<body>

<main> font-size: 125%;

<p>

Page 51: Design Responsivo - MobCamp 2014

<body>

<main> font-size: 125%;

<section> font-size: 90%;

<p>

Page 52: Design Responsivo - MobCamp 2014

<body>

<main> font-size: 125%;

<section> font-size: 90%;

<h1> font-size: 150%;

<p>

Page 53: Design Responsivo - MobCamp 2014

<body>

<main> font-size: 125%;

<section> font-size: 90%;

<h1> font-size: 150%;

<p><p>

<p>

Page 54: Design Responsivo - MobCamp 2014

<body>

<main> font-size: 125%;

<section> font-size: 90%;

<h1> font-size: 150%;

<p><p>

<p>

16px

Page 55: Design Responsivo - MobCamp 2014

<body>

<main> font-size: 125%;

<section> font-size: 90%;

<h1> font-size: 150%;

<p><p>

<p>

16px

20px

Page 56: Design Responsivo - MobCamp 2014

<body>

<main> font-size: 125%;

<section> font-size: 90%;

<h1> font-size: 150%;

<p><p>

<p>

16px

20px

20px

Page 57: Design Responsivo - MobCamp 2014

<body>

<main> font-size: 125%;

<section> font-size: 90%;

<h1> font-size: 150%;

<p><p>

<p>

16px

20px

20px

18px

Page 58: Design Responsivo - MobCamp 2014

<body>

<main> font-size: 125%;

<section> font-size: 90%;

<h1> font-size: 150%;

<p><p>

<p>

16px

20px

20px

18px

27px

Page 59: Design Responsivo - MobCamp 2014

<body>

<main> font-size: 125%;

<section> font-size: 90%;

<h1> font-size: 150%;

<p><p>

<p>

16px

20px

20px

18px

18px

27px

Page 60: Design Responsivo - MobCamp 2014

<main> font-size: 125%;

<section> font-size: 90%;

<h1> font-size: 150%;

<p><p>

<p>

20px

25px

25px

22px

22px

33px

<body> font-size: 20px;

Page 61: Design Responsivo - MobCamp 2014

<main> font-size: 1.25em;

<section> font-size: .9em;

<h1> font-size: 1.5em;

<p><p>

<p>

20px

25px

25px

22px

22px

33px

<body> font-size: 20px;

Page 62: Design Responsivo - MobCamp 2014

<main> font-size: 1.25em;

<section> font-size: 90%;

<h1> font-size: 1.5em;

<p><p>

<p>

20px

25px

25px

22px

22px

33px

<body> font-size: 20px;

Page 63: Design Responsivo - MobCamp 2014

%font-size

em

Page 64: Design Responsivo - MobCamp 2014

font-size: 120%; font-size: 1.2em;

Page 65: Design Responsivo - MobCamp 2014

<main>

<p> margin: 1em 0; max-width: 40em;

<body>

<p> margin: 1em 0; max-width: 40em;

<p> margin: 1em 0; max-width: 40em;

Page 66: Design Responsivo - MobCamp 2014

<main> font-size: 1.5em;

<p> margin: 1em 0; max-width: 40em;

<body>

<p> margin: 1em 0; max-width: 40em;

<p> margin: 1em 0; max-width: 40em;

Page 67: Design Responsivo - MobCamp 2014

em

Page 68: Design Responsivo - MobCamp 2014

rem

Page 69: Design Responsivo - MobCamp 2014
Page 70: Design Responsivo - MobCamp 2014

<main> font-size: 1.5rem;

Page 71: Design Responsivo - MobCamp 2014

<main> font-size: 1.5rem;

<p>

Page 72: Design Responsivo - MobCamp 2014

<main> font-size: 1.5rem;

<section> font-size: .5rem;

<p>

Page 73: Design Responsivo - MobCamp 2014

<main> font-size: 1.5rem;

<section> font-size: .5rem;

<h1> font-size: 2rem;

<p>

Page 74: Design Responsivo - MobCamp 2014

<main> font-size: 1.5rem;

<section> font-size: .5rem;

<h1> font-size: 2rem;

<p><p>

<p>

Page 75: Design Responsivo - MobCamp 2014

<main> font-size: 1.5rem;

<section> font-size: .5rem;

<h1> font-size: 2rem;

<p><p>

<p>

16px

Page 76: Design Responsivo - MobCamp 2014

<main> font-size: 1.5rem;

<section> font-size: .5rem;

<h1> font-size: 2rem;

<p><p>

<p>

16px

24px

Page 77: Design Responsivo - MobCamp 2014

<main> font-size: 1.5rem;

<section> font-size: .5rem;

<h1> font-size: 2rem;

<p><p>

<p>

16px

24px

24px

Page 78: Design Responsivo - MobCamp 2014

<main> font-size: 1.5rem;

<section> font-size: .5rem;

<h1> font-size: 2rem;

<p><p>

<p>

16px

24px

24px

8px

Page 79: Design Responsivo - MobCamp 2014

<main> font-size: 1.5rem;

<section> font-size: .5rem;

<h1> font-size: 2rem;

<p><p>

<p>

16px

24px

24px

8px

32px

Page 80: Design Responsivo - MobCamp 2014

<main> font-size: 1.5rem;

<section> font-size: .5rem;

<h1> font-size: 2rem;

<p><p>

<p>

16px

24px

24px

8px

8px

32px

Page 81: Design Responsivo - MobCamp 2014

<main> font-size: 1.5rem;

<section> font-size: .5rem;

<h1> font-size: 2rem;

<p><p>

<p>

20px

30px

30px

10px

10px

40px

Page 82: Design Responsivo - MobCamp 2014

<main> font-size: 1.5rem;

<section> font-size: .5rem;

<h1> font-size: 2rem;

<p><p>

<p>

20px

30px

30px

10px

10px

40px

<html>

Page 83: Design Responsivo - MobCamp 2014
Page 84: Design Responsivo - MobCamp 2014

vw & vhVIEWPORT UNITS

Page 85: Design Responsivo - MobCamp 2014

<body> <main> width: 90vw;

<section> width: 45vw;

<section> width: 45vw;

15vw

15vw

15vw

15vw

15vw

15vw

Page 86: Design Responsivo - MobCamp 2014
Page 87: Design Responsivo - MobCamp 2014

PRÁTICA

Page 88: Design Responsivo - MobCamp 2014
Page 89: Design Responsivo - MobCamp 2014
Page 90: Design Responsivo - MobCamp 2014
Page 91: Design Responsivo - MobCamp 2014
Page 92: Design Responsivo - MobCamp 2014

FLUÍDO...

<ul class="menu"><li><!-- home --></li><li><!-- menu --></li><li><!-- busca --></li></ul>

Page 93: Design Responsivo - MobCamp 2014

FLUÍDO...

.menu {margin: 2%;width: 96%;}.menu > li {width: 33.3%;}

Page 94: Design Responsivo - MobCamp 2014

FLUÍDO...

320px

400px

Page 95: Design Responsivo - MobCamp 2014
Page 96: Design Responsivo - MobCamp 2014

<div class="main"><h1>iOS 7</h1><h2>The mobile OS from a whole new perspective.</h2><img src="iphone.png" alt="iPhone 5"><a href="/watch">Watch the keynote</a><a href="/more">Learn more</a></div>

Page 97: Design Responsivo - MobCamp 2014
Page 98: Design Responsivo - MobCamp 2014

.main img { position: relative; top: -1em;}

Page 99: Design Responsivo - MobCamp 2014
Page 100: Design Responsivo - MobCamp 2014

.main img {position: relative;top: -1em;}!

@media (min-width: 400px) {.main img { top: -2em;}}

Page 101: Design Responsivo - MobCamp 2014
Page 102: Design Responsivo - MobCamp 2014
Page 103: Design Responsivo - MobCamp 2014

.news {float: left;width: 100%;}@media (min-width: 768px) {.news {width: 50%;}}@media (min-width: 1024px) {.news {width: 25%;}}

Page 104: Design Responsivo - MobCamp 2014

CSS3 MEDIA QUERIES

BOAS PRÁTICAS

Page 105: Design Responsivo - MobCamp 2014

.news {float: left;width: 100%;}@media (min-width: 768px) {.news {width: 50%;}}@media (min-width: 1024px) {.news {width: 25%;}}

Page 106: Design Responsivo - MobCamp 2014

FRAMEWORKS RESPONSIVOS

TWITTER BOOTSTRAP

Page 107: Design Responsivo - MobCamp 2014

FRAMEWORKS RESPONSIVOS

320 and up320px 480px 600px 768px 992px 1382px

Page 108: Design Responsivo - MobCamp 2014

BREAKPOINTS DE CONTEÚDO

Page 109: Design Responsivo - MobCamp 2014
Page 110: Design Responsivo - MobCamp 2014
Page 111: Design Responsivo - MobCamp 2014

MEDIA QUERIES MOBILE FIRST

Page 112: Design Responsivo - MobCamp 2014
Page 113: Design Responsivo - MobCamp 2014

h1, h2 {float: left;}!

@media (max-width: 400px) {h1, h2 {float: none;}}

MQ desktop-first

Page 114: Design Responsivo - MobCamp 2014

MQ mobile-first

/* float:none; */!

@media (min-width: 400px) {h1, h2 {float: left;}}

Page 115: Design Responsivo - MobCamp 2014
Page 116: Design Responsivo - MobCamp 2014
Page 117: Design Responsivo - MobCamp 2014

VIEWPORT

Page 118: Design Responsivo - MobCamp 2014

980px

Page 119: Design Responsivo - MobCamp 2014

<meta name="viewport" content="width=320">

Page 120: Design Responsivo - MobCamp 2014

320px

Page 121: Design Responsivo - MobCamp 2014

<meta name="viewport" content="width=device-width">

Page 122: Design Responsivo - MobCamp 2014
Page 123: Design Responsivo - MobCamp 2014

OBRIGADO sergiolopes.org @sergio_caelum