Front end basics - Responsive Web Design

  • 441 views
Uploaded on

My slides -in spanish- about "Responsive Web Design".

My slides -in spanish- about "Responsive Web Design".

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
441
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
30
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. FRONT-END BASICSResponsive Web Design(RWD)/ ♣ Octubre 2012Nadal Soler @nadalsol
  • 2. RESPONSIVE WEB DESIGN (RWD)Responsive Architecture¿WTF is RWD?Ingredientes para RWDRecursos
  • 3. RESPONSIVE ARCHITECTUREActualmente 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. RESPONSIVE ARCHITECTURE¿TIENE SENTIDO?Del libro , deEthan Marcotte.“Fragmentar nuestro contenido a través de diferentesexperiencias "dispositivo optimizadas" es unpropósito insostenible. La alternativa a esto se llamaResponsive Architecture: crear sitios no sólo másflexibles, sino que también se adapten al medio quelos renderiza.”"Responsive Web Design"
  • 5. ¿WTF IS:NOT RWD?No es el nombre de la banda de moda, ni de ninguna revista detendencias.Una web con RWD no es una web móvil ya que los contenidos yperformance no están optimizados.Para hacer una web móvil deberíamos usar *, para servir loscontenidos adecuados al medio: "copys" resumidos, imágenes máspequeñas y optimizadas, funcionalidad básica, etc…* Server-Side Device DetectionTechniques.SSDDT
  • 6. ¿WTF IS RWD?La finalidad del RWD es hacer que la web se visualicecorrectamente en distintos contextos (dispositivos), conindependencia 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 unaexperiencia completa: diseño adaptable + contenido adecuado yoptimizado.“Responsive Web Design = Diseño WebAdaptable/Adaptativo/Responsivo”SSDDT
  • 7. INGREDIENTES PARA RWD1.2. *3.* No sólo imágenes sino cualquier otro media: videos, flash, carousels…Grid flexibleImágenes flexiblesCSS3 Media Queries
  • 8. GRID FLEXIBLE“Retícula fluida o elástica, que se adapta a cambiosde resolución de pantalla y dimensiones delviewport.”
  • 9. GRID FLEXIBLECARACTERÍSTICASFlexible Typesetting, o fuentes escalables en medidas relativas (em).Evitar usar px!
  • 10. GRID FLEXIBLECARACTERÍSTICASGrid (columnas) y espacios horizontales (widths, margins, paddings) enporcentajes (%).
  • 11. GRID FLEXIBLEEN 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 undiseño.
  • 12. GRID FLEXIBLE*, en* Redimensiona la ventana del navegadorpara ver como secomporta.Flexible Grid (demo) A List Apart
  • 13. IMÁGENES FLEXIBLES“Imágenes elásticas, que se escalan según cambiosde resolución de pantalla y dimensiones delviewport.”
  • 14. IMÁGENES FLEXIBLES¿CÓMO HACER UNA IMAGEN FLEXIBLE?Encapsular-la dentro de un contenedor de bloque (p.e. un <span> condisplay:block).Definir un ancho en porcentaje (%) a dicho contenedor, para que estesea flexible. El valor del porcentaje determinará su ancho en funciónde su padre.Opcionalmente el contenedor puede ir flotado.Establecer display:block y max-width:100% a la imagen. Dejar susatributos HTML width y height vacíos.
  • 15. IMÁGENES FLEXIBLESEjemplo. 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 combined with a percentage width class */display:block;}.flexImg img {display:block;max-width:100%;}.wp25 {width:25%;}.floatR {float:right;}
  • 16. IMÁGENES FLEXIBLESEjemplo. En estecaso la imagen flexibleocuparía el 25% desu contenedor padre:
  • 17. IMÁGENES FLEXIBLESSi necesitamos quela imagen sea un enlace podemos sustituir el tag<span>por un <a>(usando el mismo CSS queen 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 combined with a percentage width class */display:block;}.flexImg img {display:block;max-width:100%;}.wp25 {width:25%;}.floatR {float:right;}
  • 18. IMÁGENES FLEXIBLESEjemplos con tamaños de imagen distintos:** Redimensiona la ventana del navegador para ver como secomporta el layout eimágenes flexibles, junto con losmedia queries.Responsive Web Design (demo)
  • 19. CSS3 MEDIA QUERIESDel libro , deEthan Marcotte.“Ningún diseño, fijo o fluido, escala bien más allá delcontexto para el que fue originalmente diseñado.”"Responsive Web Design"
  • 20. CSS3 MEDIA QUERIESPROBLEMASCOMUNESLAYOUTSFLEXIBLESImágenes irreconocibles (demasiado pequeñas o recortadas poroverflow:hidden).Márgenes demasiado grandes.Lineas de texto demasiado cortas (o demasiado largas).Elementos de navegación rotos dificultando legibilidad.Otros problemas…
  • 21. CSS3 MEDIA QUERIES¿Cómo crear un diseño que pueda adaptarse a cambios de resoluciónde pantalla y dimensiones del viewport?¿Cómo hacer diseños más responsive?LAYOUTSFLEXIBLES+MEDIA QUERIES
  • 22. CSS3 MEDIA QUERIES¿QUÉ SON YPARA QUÉ SIRVEN?Son un robusto mecanismo, creado por la W3C, para identificar no sólolos tipos de media, sino también para inspeccionar las característicasfísicas de los dispositivos y navegadores que renderizan el contenido.¿Sigues sin saber dequéva esto?mediaqueri.esRobot or Not?
  • 23. CSS3 MEDIA QUERIESDISTINTASNOMENCLATURASSepueden 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. CSS3 MEDIA QUERIESCAPACIDADESDE LOSDISPOSITIVOSA DETECTARwidthheightdevice-widthdevice-heightorientationand many more…Lista completa en .W3C Media Queries - Features
  • 25. CSS3 MEDIA QUERIESCONSIDERACIONESRecaudar información detallada sobre los dispositivos ynavegadores de tu target, saber qué características de los mediaqueries 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 detoda 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 estableceelnivel 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. CSS3 MEDIA QUERIESCOMPATIBILIDADAlgunos navegadores aún no las soportan*, aunque existen scripts parasolucionarlo:*css3-mediaqueries-jsrespond.jsWhen can I use CSS3 Media Queries?
  • 27. CSS3 MEDIA QUERIESEJEMPLO 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. CSS3 MEDIA QUERIESLO 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 descargarinnecesariamente.El redimensionado es "CPU and memory intensive" por parte delnavegador.Utilizar Media Queries para servir distintas imágenes no es lo ideal(aunque las escondamos vía CSS muchos navegadores las descargande 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. CSS3 MEDIA QUERIESRESPONSIVE WEBDESIGN STILLROCKS!“Planear el diseño para tamaños diferentes y pensarmodularmente acerca de bloques y como ubicarlossegún tamaño de pantalla, es bueno.”
  • 30. RECURSOS, de Ethan Marcotte., de SmashingMagazine., de Opera Software.. Rapid Prototyping of Fluid Layouts, Adaptive CSS andResponsive Design., de Jason Grigsby., de Net Magazine.Responsive Web DesignDeveloping RWD With Opera Mobile EmulatorOpera Mobile EmulatorProtoFluidCSS Media Query for Mobile is Fool’s Gold50 fantastic tools for responsive web design
  • 31. DUDAS, PREGUNTAS, BOSTEZOS…☛ The End ☚