Responsive web Design

Sylvain Pellet

‘90s

Christopher Fritz

2000

rodrigo.haenggi

2007

Jeremy Keith

hoy

¿MAÑANA?

¿QUÉ HACEMOS ENTONCES?

Responsive web Design

¿QUÉ ES? El diseño web adaptativo o adaptable (en inglés, Responsive Web Design) es una técnica de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así como de media-queries en la hoja de estilo CSS, consigue adaptar el sitio web al entorno del usuario. Ethan Marcotte

1 sitio à múltiples pantallas

En lugar de adaptar los diseños a un número cada vez mayor de dispositivos web, podemos tratarlos como facetas de una misma experiencia. Ethan Marcotte

“

Cómo lo aplicamos

Grillas flexibles 1

2

3

Elementos multimedia flexibles, imágenes flexibles y adaptive images

Media queries

4 Testing

En lugar de diseñar nuestra web basándonos en valores fijos (width: 960px), el diseño fluido está pensado en términos de proporciones (width: 100%) .

GRILLAS flexibles

Nithin Viswanathan, from The Noun Project

Mayor información en:http://alistapart.com/articlesfluidgrids

Elementos multimedia flexibles Las mismas consideraciones que con la grilla flexible, no utilizamos valores fijos sino que proporcionales en nuestra hoja de estilos:

video, object {max-width:100%;}

Mayor información en: http://netmagazine.com/tutorials/create-fluid-width-videos

The Noun Project

IMÁGENES FLEXIBLES Las mismas consideraciones que con la grilla flexible, no utilizamos valores fijos sino que proporcionales en nuestra hoja de estilos:

{max-width:100%;}

José Campos, from The Noun Project

ADAPTIVE IMAGES Las imágenes flexibles tienen la desventaja de que a veces se pueden ver pixeladas, esta opción plantea utilizar una imagen distinta para cada resolución.

Mayor información en: http://adaptive-images.com

José Campos, from The Noun Project

Media queries Son parte de CSS3 y lo que hacen es inspeccionar las características físicas del medio que va a mostrar nuestro diseño (por eso media query, query es consulta en inglés). Si las características del medio utilizado por el usuario

están dentro de una condicional establecida con los Media Queries, entonces se aplicarán una serie de instrucciones CSS contenidas dentro del

mismo:

Mayor información en: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

@media (max-width: 320px) { /* Aquí van las reglas CSS para un tamaño */ } @media (min-width:320px) and (max-width: 600px) { /* Aquí van las reglas CSS para un rango de pantallas */ }

TESTING

@danscotton

Al usuario no le importa si el sitio es responsive o una versión para móviles exclusiva.

Si le importa cuando no puede hacer lo que necesita hacer.

El usuario es LO MÁS importante

GRACIAS Paula Serman

@paulitzim Paula Serman

#BCU @bluecompany