Design Responsivo - MobCamp 2014

DESIGNRESPONSIVO
POR UMA
WEB ÚNICA

@sergio_caelum
sergiolopes.org

SITE MOBILE ou
DESIGN RESPONSIVO?

MEDIDAS
FLEXÍVEIS
%,em,rem,vh

NUMA TELA
DE 320px
100%
49% 49%

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

.formulario,
.endereco {
width: 49%;
}
!
.formulario,
.endereco {
width: 100%;
}
}
CSS

DESIGNRESPONSIVO
FLEXÍVEL
ADAPTÁVEL

IMPLEMENTANDO
DESIGNRESPONSIVO

CRIAÇÃO
DESIGN IN THE BROWSER

<body>
<main> width: 90%;
90%
5% 5%

<body>
<main> width: 90%;
90%
5% 5%
1280px

<body>
<main> width: 90%;
90%
5% 5%
1280px
1152px

<body>
<main> width: 90%;
90%
5% 5%
1280px
1152px
54px 54px

<body>
<main> width: 90%;
90%
5% 5%
1280px
1152px
54px 54px
360px

<body>
<main> width: 90%;
90%
5% 5%
1280px
1152px
54px 54px
360px
324px

<body>
<main> width: 90%;
90%
5% 5%
1280px
1152px
54px 54px
360px
324px
18px 18px

<body>
<main> width: 90%;
<section>
width: 50%;
<section>
width: 50%;

<body>
<main> width: 90%;
<section>
width: 50%;
<section>
width: 50%;
33% 33% 33% 33% 33% 33%

<body>
<main> font-size: 125%;

<body>
<p>
<p>
<p>
16px

<body>
<p>
<p>
<p>
16px
20px

<body>
<p>
<p>
<p>
16px
20px
20px

<body>
<p>
<p>
<p>
16px
20px
20px
18px

<body>
<p>
<p>
<p>
16px
20px
20px
18px
27px

<body>
<p>
<p>
<p>
16px
20px
20px
18px
18px
27px

<p>
<p>
<p>
20px
25px
25px
22px
22px
33px
<body> font-size: 20px;

<main> font-size: 1.25em;
<section> font-size: .9em;
<h1> font-size: 1.5em;
<p>
<p>
<p>
20px
25px
25px
22px
22px
33px

<h1> font-size: 1.5em;
<p>
<p>
<p>
20px
25px
25px
22px
22px
33px

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

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

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

<p>
<p>
<p>
16px

<p>
<p>
<p>
16px
24px

<p>
<p>
<p>
16px
24px
24px

<p>
<p>
<p>
16px
24px
24px
8px

<p>
<p>
<p>
16px
24px
24px
8px
32px

<p>
<p>
<p>
16px
24px
24px
8px
8px
32px

<p>
<p>
<p>
20px
30px
30px
10px
10px
40px

<body>
<main> width: 90vw;
<section>
width: 45vw;
<section>
width: 45vw;
15
vw
15
vw
15
vw
15
vw
15
vw
15
vw

FLUÍDO...
<ul class="menu">
<li></li>
<li></li>
<li></li>
</ul>

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

<div class="main">
<h1>iOS 7</h1>
<h2>The mobile OS from a whole new perspe

<img src="iphone.png" alt="iPhone 5">

<a href="/watch">Watch the keynote</a>
<a href="/more">Learn more</a>
</div>

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

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

.news {
float: left;
width: 100%;
}
.news {
width: 50%;
}
}
.news {
width: 25%;
}
}

CSS3 MEDIA
QUERIES
BOAS PRÁTICAS

FRAMEWORKS RESPONSIVOS
TWITTER BOOTSTRAP

FRAMEWORKS RESPONSIVOS
320 and up
320px
480px
600px
768px
992px
1382px

h1, h2 {
float: left;
}
!
h1, h2 {
float: none;
}
}
MQ desktop-ﬁrst

MQ mobile-ﬁrst
/* float:none; */
!
h1, h2 {
float: left;
}
}

OBRIGADO
sergiolopes.org
@sergio_caelum

Design Responsivo - MobCamp 2014

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (6)

Más de Caelum

Más de Caelum (20)

Design Responsivo - MobCamp 2014