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