Presentacion Iniciación al Responsive Web Design
52
Iniciación al Responsive Web Design Betabeers Almería 26 de octubre de 2012
description
Slides de la charla sobre RWD que impartimos en Betabeers Almería junto a @valgreens
Transcript of Presentacion Iniciación al Responsive Web Design
Iniciación alResponsive Web Design
Betabeers Almería26 de octubre de 2012
@manoloruiz @valgreens
Antes de nada… vamos a remontarnos al principio de
la navegación móvil
Apps nativas
Mobile version
¿En qué punto estamos?
Y aquí estamos jodidos
Necesitamos una solución (razonablemente) económica
Responsive Web DesignResponsive
Diseño “sensible” al contexto en el que se visualiza
“sensible”
betabeers.com
betabeers.com
smashingmagazine.com
smashingmagazine.com
smashingmagazine.com
smashingmagazine.com
usatoday.com(Versión móvil no responsive)
usatoday.com(Versión móvil no responsive)
Con RWD podemos reposicionar bloques según la resolución…
… y podemos modificar la interactividad de la página para adaptarla a interfaces táctiles.
¡Respeta las bases del diseño, madafaca!
¿Mobile first?
Be responsive my friend
1. Hay algo más allá de los 960px
2. Layouts fluidos
3. Imágenes/vídeos flexibles
4. Media Queries
1Layout fluido
Objetivo÷
Contexto
#sidebar{ width: 25%; /* 250px/1000px */ margin-right: 2%; /* 20px/1000px */}
250px
1000px
16px ≃ 1em
2Padding y border
*{ -moz-box-sizing: border-box; box-sizing: border-box;}
.box{ width: 100px; border: 5px solid; padding: 20px;}
Content-box
border-box
150px
100px
3Imágenes flexibles
<div class=”img-container”> <img src=”img/foto.jpg” alt=”gatitos” /></div>
.img-container {width: 30%;}
.img-container img {max-width: 100%;}
Imágenes de fondo
.cabecera{ max-width: 55%; background: url(img.png) no-repeat right 40%; background-size: 45% auto;}
• auto
• length
• cover
• contain
Background-size
4Media Queries
@media screen and (max-width:320px){ #sidebar{ float: none; width: 100%; }}
Media Queries
@media screen and (min-width:700px){ #sidebar{ float: right; width: 30%; }}
Media Queries
<link rel="stylesheet" href="phone.css"media="only screen and (min-width: 320px)and (max-width : 480px)">
Más Media Queries
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Meta Viewport
320px480px
768px1024px
+1200px +1800px
Breakpoints populares
Pero...las medidas de los dispositivos más
populares no son para siempre
“El uso de media queries debería estar dictado por el contenido, no por los
dispositivos. O, dicho de otra forma, pongamos la media query en el punto
donde el diseño se rompa.”– Javier Usobiaga y Marta Armada –
swwweet.com/training
Extendiendo queries
• max-height / min-height
• device-with / device-height
• orientation(landscape / portrait)
• min-device-pixel-ratio
twitter.github.com/bootstrap foundation.zurb.com
Gracias :)@manoloruiz@valgreens
