Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

Front end basics - Responsive Web Design

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Próximo SlideShare
Usabilidad web
Usabilidad web
Cargando en…3
×

Eche un vistazo a continuación

1 de 32 Anuncio

Más Contenido Relacionado

Anuncio

Similares a Front end basics - Responsive Web Design (20)

Más reciente (20)

Anuncio

Front end basics - Responsive Web Design

  1. 1. FRONT-END BASICS Responsive Web Design (RWD) / ♣ Octubre 2012Nadal Soler @nadalsol
  2. 2. RESPONSIVE WEB DESIGN (RWD) Responsive Architecture ¿WTF is RWD? Ingredientes para RWD Recursos
  3. 3. RESPONSIVE ARCHITECTURE Actualmente diseñamos para más dispositivos que nunca (mobile, desktop, tablet, smart tv…). Cada medio es distinto (ancho mínimo de pantalla, densidad de pixel, n° de colores, fuentes, navegador…).
  4. 4. RESPONSIVE ARCHITECTURE ¿TIENE SENTIDO? Del libro , deEthan Marcotte. “Fragmentar nuestro contenido a través de diferentes experiencias "dispositivo optimizadas" es un propósito insostenible. La alternativa a esto se llama Responsive Architecture: crear sitios no sólo más flexibles, sino que también se adapten al medio que los renderiza.” "Responsive Web Design"
  5. 5. ¿WTF IS:NOT RWD? No es el nombre de la banda de moda, ni de ninguna revista de tendencias. Una web con RWD no es una web móvil ya que los contenidos y performance no están optimizados. Para hacer una web móvil deberíamos usar *, para servir los contenidos adecuados al medio: "copys" resumidos, imágenes más pequeñas y optimizadas, funcionalidad básica, etc… * Server-Side Device DetectionTechniques. SSDDT
  6. 6. ¿WTF IS RWD? La finalidad del RWD es hacer que la web se visualice correctamente en distintos contextos (dispositivos), con independencia del tamaño de pantalla o resolución del mismo, mejorando la experiencia de cada tipo de usuario (mobile, desktop, smart tv, whatever…). El RWD se puede combinar con las para ofrecer una experiencia completa: diseño adaptable + contenido adecuado y optimizado. “Responsive Web Design = Diseño Web Adaptable/Adaptativo/Responsivo” SSDDT
  7. 7. INGREDIENTES PARA RWD 1. 2. * 3. * No sólo imágenes sino cualquier otro media: videos, flash, carousels… Grid flexible Imágenes flexibles CSS3 Media Queries
  8. 8. GRID FLEXIBLE “Retícula fluida o elástica, que se adapta a cambios de resolución de pantalla y dimensiones del viewport.”
  9. 9. GRID FLEXIBLE CARACTERÍSTICAS Flexible Typesetting, o fuentes escalables en medidas relativas (em). Evitar usar px!
  10. 10. GRID FLEXIBLE CARACTERÍSTICAS Grid (columnas) y espacios horizontales (widths, margins, paddings) en porcentajes (%).
  11. 11. GRID FLEXIBLE EN DEFINITIVA…THINK FLEXIBLE! Romper con el hábito de traducir los pixels de Photoshop a CSS. Focalizar nuestra atención en las proporciones que hay trás un diseño.
  12. 12. GRID FLEXIBLE *, en * Redimensiona la ventana del navegador para ver como secomporta. Flexible Grid (demo) A List Apart
  13. 13. IMÁGENES FLEXIBLES “Imágenes elásticas, que se escalan según cambios de resolución de pantalla y dimensiones del viewport.”
  14. 14. IMÁGENES FLEXIBLES ¿CÓMO HACER UNA IMAGEN FLEXIBLE? Encapsular-la dentro de un contenedor de bloque (p.e. un <span> con display:block). Definir un ancho en porcentaje (%) a dicho contenedor, para que este sea flexible. El valor del porcentaje determinará su ancho en función de su padre. Opcionalmente el contenedor puede ir flotado. Establecer display:block y max-width:100% a la imagen. Dejar sus atributos HTML width y height vacíos.
  15. 15. IMÁGENES FLEXIBLES Ejemplo. En estecaso la imagen flexibleocuparía el 25% desu contenedor padre: <span class="flexImg wp25 floatR"> <img src="img/responsive_sample_l.jpg" alt=" " /> </span> .flexImg { /* The flexible image wrapper, could be <a> or <span>. Should be com bined with a percentage width class */ display:block; } .flexImg img { display:block; max-width:100%; } .wp25 { width:25%; } .floatR { float:right; }
  16. 16. IMÁGENES FLEXIBLES Ejemplo. En estecaso la imagen flexibleocuparía el 25% desu contenedor padre:
  17. 17. IMÁGENES FLEXIBLES Si necesitamos quela imagen sea un enlace podemos sustituir el tag<span>por un <a>(usando el mismo CSS que en el ejemplo anterior): <a href="#" class="flexImg wp25 floatR"> <img src="img/responsive_sample_l.jpg" alt=" " /> </a> .flexImg { /* The flexible image wrapper, could be <a> or <span>. Should be com bined with a percentage width class */ display:block; } .flexImg img { display:block; max-width:100%; } .wp25 { width:25%; } .floatR { float:right; }
  18. 18. IMÁGENES FLEXIBLES Ejemplos con tamaños de imagen distintos: * * Redimensiona la ventana del navegador para ver como secomporta el layout eimágenes flexibles, junto con los media queries. Responsive Web Design (demo)
  19. 19. CSS3 MEDIA QUERIES Del libro , deEthan Marcotte. “Ningún diseño, fijo o fluido, escala bien más allá del contexto para el que fue originalmente diseñado.” "Responsive Web Design"
  20. 20. CSS3 MEDIA QUERIES PROBLEMASCOMUNESLAYOUTSFLEXIBLES Imágenes irreconocibles (demasiado pequeñas o recortadas por overflow:hidden). Márgenes demasiado grandes. Lineas de texto demasiado cortas (o demasiado largas). Elementos de navegación rotos dificultando legibilidad. Otros problemas…
  21. 21. CSS3 MEDIA QUERIES ¿Cómo crear un diseño que pueda adaptarse a cambios de resolución de pantalla y dimensiones del viewport? ¿Cómo hacer diseños más responsive? LAYOUTSFLEXIBLES + MEDIA QUERIES
  22. 22. CSS3 MEDIA QUERIES ¿QUÉ SON YPARA QUÉ SIRVEN? Son un robusto mecanismo, creado por la W3C, para identificar no sólo los tipos de media, sino también para inspeccionar las características físicas de los dispositivos y navegadores que renderizan el contenido. ¿Sigues sin saber dequéva esto? mediaqueri.es Robot or Not?
  23. 23. CSS3 MEDIA QUERIES DISTINTASNOMENCLATURAS Sepueden encadenar múltiples queries juntas mediantela keyword“and” @media screen and (min-width:1024px) { body { font-size:100%; } } <link rel="stylesheet" href="wide.css" media="screen and (min-width:1024px)" /> @import url("wide.css") screen and (min-width:1024px); @media screen and (min-device-width:480px) and (orientation:landscape) { … }
  24. 24. CSS3 MEDIA QUERIES CAPACIDADESDE LOSDISPOSITIVOSA DETECTAR width height device-width device-height orientation and many more… Lista completa en .W3C Media Queries - Features
  25. 25. CSS3 MEDIA QUERIES CONSIDERACIONES Recaudar información detallada sobre los dispositivos y navegadores de tu target, saber qué características de los media queries soportan, y testear acorde. Width y height hacen referencia al viewport o ventana del navegador, mientras que device-width y device-height miden las dimensiones de toda la pantalla. Añadir este meta tag en el HTML: Esto hacequeel ancho del viewport del navegador sea igual al ancho dela pantalla del dispositivo, y estableceel nivel dezoom al 100%. Con esto logramos mayorconsistenciacon el tamaño actual del dispositivo. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  26. 26. CSS3 MEDIA QUERIES COMPATIBILIDAD Algunos navegadores aún no las soportan*, aunque existen scripts para solucionarlo: * css3-mediaqueries-js respond.js When can I use CSS3 Media Queries?
  27. 27. CSS3 MEDIA QUERIES EJEMPLO PRÁCTICO /* Small screen */ @media screen and (max-width:600px), screen and (max-device-width:480px) { /* our CSS here... */ } /* Still small (but scaling up) */ @media screen and (min-width:600px) { /* our CSS here... */ } /* Desktop */ @media screen and (min-width:860px) { /* our CSS here... */ } /* Wide screen */ @media screen and (min-width:1200px) { /* our CSS here... */ }
  28. 28. CSS3 MEDIA QUERIES LO QUE NO MOLA :( Según Jason Grigsby en su artículo : Se añade más código CSS (en la web mobile la velocidad importa!). Dejar que el navegador escale las imágenes es una mala idea: Imágenes grandes = Grandes ficheros a descargar innecesariamente. El redimensionado es "CPU and memory intensive" por parte del navegador. Utilizar Media Queries para servir distintas imágenes no es lo ideal (aunque las escondamos vía CSS muchos navegadores las descargan de todos modos). Las Media Queries no optimizan el HTML o el JavaScript. Las Media Queries no estan bien soportadas. Ignoran el contexto mobile. Tener una web mobile separada es bueno. CSS Media Query for Mobile is Fool’s Gold
  29. 29. CSS3 MEDIA QUERIES RESPONSIVE WEBDESIGN STILLROCKS! “Planear el diseño para tamaños diferentes y pensar modularmente acerca de bloques y como ubicarlos según tamaño de pantalla, es bueno.”
  30. 30. RECURSOS , de Ethan Marcotte. , de Smashing Magazine. , de Opera Software. . Rapid Prototyping of Fluid Layouts, Adaptive CSS and Responsive Design. , de Jason Grigsby. , de Net Magazine. Responsive Web Design Developing RWD With Opera Mobile Emulator Opera Mobile Emulator ProtoFluid CSS Media Query for Mobile is Fool’s Gold 50 fantastic tools for responsive web design
  31. 31. DUDAS, PREGUNTAS, BOSTEZOS… ☛ The End ☚

×