design responsivo - mobcamp 2014
Post on 08-Sep-2014
655 Views
Preview:
DESCRIPTION
TRANSCRIPT
DESIGN RESPONSIVO
POR UMA
WEB ÚNICA
@sergio_caelumsergiolopes.org
sergiolopes.org
SITE MOBILE ou DESIGN RESPONSIVO?
NÃO EXISTE MOBILE
ONE WEB
DESIGN RESPONSIVO
LAYOUT FLUÍDO
960px
470px470px
MEDIDAS FLEXÍVEIS
MEDIDAS FLEXÍVEIS
%, em, rem, vh
100%
49%49%
PROPORÇÕES
NUMA TELA DE 320px
100%
49% 49%
LAYOUT CONDICIONAL
NUMA TELA DE 320px
.formulario,
.endereco { width: 49%;}!
@media (max-width: 600px) { .formulario, .endereço { width: 100%; }}
CSS
.formulario,
.endereco { width: 49%;}!
@media (max-width: 600px) { .formulario, .endereco { width: 100%; }}
CSS
CSS3 MEDIA QUERIES
.formulario,
.endereco { width: 49%;}!
@media (max-width: 600px) { .formulario, .endereco { width: 100%; }}
CSS
DESIGN RESPONSIVO FLEXÍVEL ADAPTÁVEL
IMPLEMENTANDO DESIGN RESPONSIVO
CRIAÇÃOPHOTOSHOP?
CRIAÇÃODESIGN IN THE BROWSER
LAYOUT FLUÍDO
MEDIDAS FLEXÍVEIS
%
<body>
<body> <main> width: 90%;
<body> <main> width: 90%;
90%
<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
1152px54px 54px
<body> <main> width: 90%;
90%5% 5%
1280px
1152px54px 54px
360px
<body> <main> width: 90%;
90%5% 5%
1280px
1152px54px 54px
360px
324px
<body> <main> width: 90%;
90%5% 5%
1280px
1152px54px 54px
360px
324px18px 18px
<body> <main> width: 90%;
<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%
%font-size
<body>
<body>
<main> font-size: 125%;
<body>
<main> font-size: 125%;
<p>
<body>
<main> font-size: 125%;
<section> font-size: 90%;
<p>
<body>
<main> font-size: 125%;
<section> font-size: 90%;
<h1> font-size: 150%;
<p>
<body>
<main> font-size: 125%;
<section> font-size: 90%;
<h1> font-size: 150%;
<p><p>
<p>
<body>
<main> font-size: 125%;
<section> font-size: 90%;
<h1> font-size: 150%;
<p><p>
<p>
16px
<body>
<main> font-size: 125%;
<section> font-size: 90%;
<h1> font-size: 150%;
<p><p>
<p>
16px
20px
<body>
<main> font-size: 125%;
<section> font-size: 90%;
<h1> font-size: 150%;
<p><p>
<p>
16px
20px
20px
<body>
<main> font-size: 125%;
<section> font-size: 90%;
<h1> font-size: 150%;
<p><p>
<p>
16px
20px
20px
18px
<body>
<main> font-size: 125%;
<section> font-size: 90%;
<h1> font-size: 150%;
<p><p>
<p>
16px
20px
20px
18px
27px
<body>
<main> font-size: 125%;
<section> font-size: 90%;
<h1> font-size: 150%;
<p><p>
<p>
16px
20px
20px
18px
18px
27px
<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;
<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;
<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;
%font-size
em
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;
<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;
em
rem
<main> font-size: 1.5rem;
<main> font-size: 1.5rem;
<p>
<main> font-size: 1.5rem;
<section> font-size: .5rem;
<p>
<main> font-size: 1.5rem;
<section> font-size: .5rem;
<h1> font-size: 2rem;
<p>
<main> font-size: 1.5rem;
<section> font-size: .5rem;
<h1> font-size: 2rem;
<p><p>
<p>
<main> font-size: 1.5rem;
<section> font-size: .5rem;
<h1> font-size: 2rem;
<p><p>
<p>
16px
<main> font-size: 1.5rem;
<section> font-size: .5rem;
<h1> font-size: 2rem;
<p><p>
<p>
16px
24px
<main> font-size: 1.5rem;
<section> font-size: .5rem;
<h1> font-size: 2rem;
<p><p>
<p>
16px
24px
24px
<main> font-size: 1.5rem;
<section> font-size: .5rem;
<h1> font-size: 2rem;
<p><p>
<p>
16px
24px
24px
8px
<main> font-size: 1.5rem;
<section> font-size: .5rem;
<h1> font-size: 2rem;
<p><p>
<p>
16px
24px
24px
8px
32px
<main> font-size: 1.5rem;
<section> font-size: .5rem;
<h1> font-size: 2rem;
<p><p>
<p>
16px
24px
24px
8px
8px
32px
<main> font-size: 1.5rem;
<section> font-size: .5rem;
<h1> font-size: 2rem;
<p><p>
<p>
20px
30px
30px
10px
10px
40px
<main> font-size: 1.5rem;
<section> font-size: .5rem;
<h1> font-size: 2rem;
<p><p>
<p>
20px
30px
30px
10px
10px
40px
<html>
vw & vhVIEWPORT UNITS
<body> <main> width: 90vw;
<section> width: 45vw;
<section> width: 45vw;
15vw
15vw
15vw
15vw
15vw
15vw
PRÁTICA
FLUÍDO...
<ul class="menu"><li><!-- home --></li><li><!-- menu --></li><li><!-- busca --></li></ul>
FLUÍDO...
.menu {margin: 2%;width: 96%;}.menu > li {width: 33.3%;}
FLUÍDO...
320px
400px
<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>
.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%;}@media (min-width: 768px) {.news {width: 50%;}}@media (min-width: 1024px) {.news {width: 25%;}}
CSS3 MEDIA QUERIES
BOAS PRÁTICAS
.news {float: left;width: 100%;}@media (min-width: 768px) {.news {width: 50%;}}@media (min-width: 1024px) {.news {width: 25%;}}
FRAMEWORKS RESPONSIVOS
TWITTER BOOTSTRAP
FRAMEWORKS RESPONSIVOS
320 and up320px 480px 600px 768px 992px 1382px
BREAKPOINTS DE CONTEÚDO
MEDIA QUERIES MOBILE FIRST
h1, h2 {float: left;}!
@media (max-width: 400px) {h1, h2 {float: none;}}
MQ desktop-first
MQ mobile-first
/* float:none; */!
@media (min-width: 400px) {h1, h2 {float: left;}}
VIEWPORT
980px
<meta name="viewport" content="width=320">
320px
<meta name="viewport" content="width=device-width">
OBRIGADO sergiolopes.org @sergio_caelum
top related