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...
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 mism...
Cómo lo aplicamos
Grillas flexibles
1
2
3
Elementos multimedia flexibles, imágenes flexibles y
adaptive images
Media queries
...
En lugar de diseñar nuestra web basándonos en valores
fijos (width: 960px), el diseño fluido está pensado en
términos de pro...
Elementos multimedia flexibles
Las mismas consideraciones que con la grilla flexible, no
utilizamos valores fijos sino que p...
IMÁGENES FLEXIBLES
Las mismas consideraciones que con la grilla flexible, no
utilizamos valores fijos sino que proporcionale...
ADAPTIVE IMAGES
Las imágenes flexibles tienen la desventaja de que a
veces se pueden ver pixeladas, esta opción plantea
uti...
Media queries
Son parte de CSS3 y lo que hacen es inspeccionar las características físicas
del medio que va a mostrar nues...
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 h...
GRACIAS
Paula Serman
@paulitzim
Paula Serman
#BCU
 @bluecompany
Próxima SlideShare
Cargando en…5
×

Responsive Web Design

783 visualizaciones

Publicado el

¿Qué es el Responsive Web Design y cómo se aplica?

Publicado en: Tecnología
0 comentarios
3 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
783
En SlideShare
0
De insertados
0
Número de insertados
71
Acciones
Compartido
0
Descargas
24
Comentarios
0
Recomendaciones
3
Insertados 0
No insertados

No hay notas en la diapositiva.

Responsive Web Design

  1. 1. Responsive web Design
  2. 2. Sylvain Pellet ‘90s
  3. 3. Christopher Fritz 2000
  4. 4. rodrigo.haenggi 2007
  5. 5. Jeremy Keith hoy
  6. 6. ¿MAÑANA?
  7. 7. ¿QUÉ HACEMOS ENTONCES?
  8. 8. Responsive web Design
  9. 9. ¿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
  10. 10. 1 sitio à múltiples pantallas
  11. 11. 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 “
  12. 12. Cómo lo aplicamos Grillas flexibles 1 2 3 Elementos multimedia flexibles, imágenes flexibles y adaptive images Media queries 4 Testing
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. 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 */ }
  18. 18. TESTING @danscotton
  19. 19. 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
  20. 20. GRACIAS Paula Serman @paulitzim Paula Serman #BCU @bluecompany

×