Design Responsivo - MobCamp 2014

Download Design Responsivo - MobCamp 2014

Post on 08-Sep-2014

635 views

Category:

Technology

0 download

Embed Size (px)

DESCRIPTION

Palestra de Design Responsivo do Srgio Lopes na MobCamp 2014

TRANSCRIPT

<ul><li> DESIGNRESPONSIVO POR UMA WEB NICA </li> <li> @sergio_caelum sergiolopes.org </li> <li> sergiolopes.org </li> <li> SITE MOBILE ou DESIGN RESPONSIVO? </li> <li> NO EXISTE MOBILE </li> <li> ONE WEB </li> <li> DESIGNRESPONSIVO </li> <li> LAYOUT FLUDO </li> <li> 960px 470px470px </li> <li> MEDIDAS FLEXVEIS </li> <li> MEDIDAS FLEXVEIS %,em,rem,vh </li> <li> 100% 49%49% </li> <li> PROPORES </li> <li> NUMA TELA DE 320px 100% 49% 49% </li> <li> LAYOUT CONDICIONAL </li> <li> NUMA TELA DE 320px </li> <li> .formulario, .endereco { width: 49%; } ! @media (max-width: 600px) { .formulario, .endereo { width: 100%; } } CSS </li> <li> .formulario, .endereco { width: 49%; } ! @media (max-width: 600px) { .formulario, .endereco { width: 100%; } } CSS </li> <li> CSS3 MEDIA QUERIES </li> <li> .formulario, .endereco { width: 49%; } ! @media (max-width: 600px) { .formulario, .endereco { width: 100%; } } CSS </li> <li> DESIGNRESPONSIVO FLEXVEL ADAPTVEL </li> <li> IMPLEMENTANDO DESIGNRESPONSIVO </li> <li> CRIAO PHOTOSHOP? </li> <li> CRIAO DESIGN IN THE BROWSER </li> <li> LAYOUT FLUDO </li> <li> MEDIDAS FLEXVEIS </li> <li> % </li> <li> width: 90%; </li> <li> width: 90%; 90% </li> <li> width: 90%; 90% 5% 5% </li> <li> width: 90%; 90% 5% 5% 1280px </li> <li> width: 90%; 90% 5% 5% 1280px 1152px </li> <li> width: 90%; 90% 5% 5% 1280px 1152px 54px 54px </li> <li> width: 90%; 90% 5% 5% 1280px 1152px 54px 54px 360px </li> <li> width: 90%; 90% 5% 5% 1280px 1152px 54px 54px 360px 324px </li> <li> width: 90%; 90% 5% 5% 1280px 1152px 54px 54px 360px 324px 18px 18px </li> <li> width: 90%; </li> <li> width: 90%; width: 50%; width: 50%; </li> <li> width: 90%; width: 50%; width: 50%; 33% 33% 33% 33% 33% 33% </li> <li> % font-size </li> <li> font-size: 125%; </li> <li> font-size: 125%; </li> <li> font-size: 125%; font-size: 90%; </li> <li> font-size: 125%; font-size: 90%; font-size: 150%; </li> <li> font-size: 125%; font-size: 90%; font-size: 150%; </li> <li> font-size: 125%; font-size: 90%; font-size: 150%; <p> 16px </p></li> <li> font-size: 125%; font-size: 90%; font-size: 150%; <p> 16px 20px </p></li> <li> font-size: 125%; font-size: 90%; font-size: 150%; <p> 16px 20px 20px </p></li> <li> font-size: 125%; font-size: 90%; font-size: 150%; <p> 16px 20px 20px 18px </p></li> <li> font-size: 125%; font-size: 90%; font-size: 150%; <p> 16px 20px 20px 18px 27px </p></li> <li> font-size: 125%; font-size: 90%; font-size: 150%; <p> 16px 20px 20px 18px 18px 27px </p></li> <li> font-size: 125%; font-size: 90%; font-size: 150%; <p> 20px 25px 25px 22px 22px 33px </p> font-size: 20px; </li> <li> font-size: 1.25em; font-size: .9em; font-size: 1.5em; <p> 20px 25px 25px 22px 22px 33px </p> font-size: 20px; </li> <li> font-size: 1.25em; font-size: 90%; font-size: 1.5em; <p> 20px 25px 25px 22px 22px 33px </p> font-size: 20px; </li> <li> % font-size em </li> <li> font-size: 120%; font-size: 1.2em; </li> <li> <p> margin: 1em 0; max-width: 40em; </p> <p> margin: 1em 0; max-width: 40em; </p><p> margin: 1em 0; max-width: 40em; </p></li> <li> font-size: 1.5em; <p> margin: 1em 0; max-width: 40em; </p> <p> margin: 1em 0; max-width: 40em; </p><p> margin: 1em 0; max-width: 40em; </p></li> <li> em </li> <li> rem </li> <li> font-size: 1.5rem; </li> <li> font-size: 1.5rem; </li> <li> font-size: 1.5rem; font-size: .5rem; </li> <li> font-size: 1.5rem; font-size: .5rem; font-size: 2rem; </li> <li> font-size: 1.5rem; font-size: .5rem; font-size: 2rem; </li> <li> font-size: 1.5rem; font-size: .5rem; font-size: 2rem; <p> 16px </p></li> <li> font-size: 1.5rem; font-size: .5rem; font-size: 2rem; <p> 16px 24px </p></li> <li> font-size: 1.5rem; font-size: .5rem; font-size: 2rem; <p> 16px 24px 24px </p></li> <li> font-size: 1.5rem; font-size: .5rem; font-size: 2rem; <p> 16px 24px 24px 8px </p></li> <li> font-size: 1.5rem; font-size: .5rem; font-size: 2rem; <p> 16px 24px 24px 8px 32px </p></li> <li> font-size: 1.5rem; font-size: .5rem; font-size: 2rem; <p> 16px 24px 24px 8px 8px 32px </p></li> <li> font-size: 1.5rem; font-size: .5rem; font-size: 2rem; <p> 20px 30px 30px 10px 10px 40px </p></li> <li> font-size: 1.5rem; font-size: .5rem; font-size: 2rem; <p> 20px 30px 30px 10px 10px 40px </p></li> <li> vw &amp; vhVIEWPORT UNITS </li> <li> width: 90vw; width: 45vw; width: 45vw; 15 vw 15 vw 15 vw 15 vw 15 vw 15 vw </li> <li> PRTICA </li> <li> FLUDO... </li> <li> FLUDO... .menu { margin: 2%; width: 96%; } .menu &gt; li { width: 33.3%; } </li> <li> FLUDO... 320px 400px </li> <li> <div> iOS 7 The mobile OS from a whole new perspe Watch the keynote Learn more </div> </li> <li> .main img { position: relative; top: -1em; } </li> <li> .main img { position: relative; top: -1em; } ! @media (min-width: 400px) { .main img { top: -2em; } } </li> <li> .news { float: left; width: 100%; } @media (min-width: 768px) { .news { width: 50%; } } @media (min-width: 1024px) { .news { width: 25%; } } </li> <li> CSS3 MEDIA QUERIES BOAS PRTICAS </li> <li> .news { float: left; width: 100%; } @media (min-width: 768px) { .news { width: 50%; } } @media (min-width: 1024px) { .news { width: 25%; } } </li> <li> FRAMEWORKS RESPONSIVOS TWITTER BOOTSTRAP </li> <li> FRAMEWORKS RESPONSIVOS 320 and up 320px 480px 600px 768px 992px 1382px </li> <li> BREAKPOINTS DE CONTEDO </li> <li> MEDIA QUERIES MOBILE FIRST </li> <li> h1, h2 { float: left; } ! @media (max-width: 400px) { h1, h2 { float: none; } } MQ desktop-rst </li> <li> MQ mobile-rst /* float:none; */ ! @media (min-width: 400px) { h1, h2 { float: left; } } </li> <li> VIEWPORT </li> <li> 980px </li> <li> 320px </li> <li> OBRIGADO sergiolopes.org @sergio_caelum </li> </ul>