RESPONSIVE WEB DESIGN
Una dirección para diferentes dispositivos.
Axel Gonzalez
Front-End Developer en k
t
c
Integrante de
HTML5Fácil
Un sitio responsivo puede adaptarse a diferentes tamaños.
¿Cómo funciona?
Media Queries (CSS3): Esta parte identifica las dimensiones de la pantalla del dispositivo. Identifica mínima altura, anchura, resolución, orientación, etc.
Grid: Nos permite acomodar nuestro contenido así como reducirlo o incrementarlo en tamaño.
¿Por que ahora?
Fuente: Mobile marketing
Todo es flexible
Imágenes
Videos
Texto
Listas
Tablas
TODO
La calidad y tamaño de imagen es importante
Adaptive Images: Deliver small images to small devices
Viewport mÁs comunes
Unidad de medida en pixeles
- 320x480 - Smartphone portrait.
- 480x320 - Smartphone landscape.
- 540x960 - Smartphone largerscreen portrait.
- 960x540 - Smartphone largerscreen landscape.
- 768x1024 - Tablet portrait
- 1024x768 - Tablet landscape, Netbook, Laptop & Desktop.
- Mayor 1024x768 - Laptop & Desktop.
Recomiendo
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
GRIDS
¿Cuántas columnas te convienen?
¿CÓmo trabajar con grids?
<div class="container">
<!--row of 1 -->
<section class="row">
<div class="col_1">col_1</div>
</section>
<!--row of 2's-->
<section class="row">
<div class="col_2">col_2</div>
<div class="col_2">col_2</div>
</section>
<!--row of 3's-->
<section class="row">
<div class="col_3">col_3</div>
<div class="col_3">col_3</div>
<div class="col_3">col_3</div>
</section>
<!--row of 4's-->
<section class="row">
<div class="col_4">col_4</div>
<div class="col_4">col_4</div>
<div class="col_4">col_4</div>
<div class="col_4">col_4</div>
</section>
</div>
Frameworks / Hacks
Responsive.js: responsivejs.com
Response: responsejs.com
Skeleton: getskeleton.com
960 Grid System: 960.gs
Responsive Grid System: rwdgrid.com
UX
user experience
eJEMPLOS
¡Muchas gracias!
¿Preguntas?
No olviden seguirme en @latiosaxe
¡Gracias #cpmx4 y @html5fácil!