Idiomas
Páginas
Jurídico
Responsive Web Design
¿Quién soy?
www.plainconcepts.com
UX Developer at Plain [email protected]#htmltour
Proyectos destacados:
Jesús David García Gómez
Preguntas/dudas/sugerencias
#htmltour
Dispositivos
Índice
• Grid Flexible• Imágenes flexibles• Media queries• Progressive Enhacement vs Graceful degradation• Progressive Enhacement
Grid Flexible
• Web fluida.
• Cuando la web se redimensione, toda la web se irá amoldando al ancho disponible.
• Utilizar porcentajes y em’s.
• No utilizar medidas fijas.
¿Cómo se hace?
• Fijamos unas medidas base (fijas)
• Aplicamos la siguiente función:• Objetivo / contenedor = resultado.
Consideraciones
• Si es para un margen, el contenedor es el que contiene al elemento al que le queremos aplicar el margen.
• Si es para un padding, el contenedor es el propio elemento al que le queremos aplicar el padding.
Imágenes Flexibles
• Imágenes fluidas.
• Utilizamos max-width al 100%.img {
max-width: 100%}
• Envolveremos la imagen con una capa para dar el tamaño deseado.
Imágenes Flexibles
• Y si max-width no se soporta?
width: 100%.
• Problema: la imagen puede pixelarse.
• Si la imagen es grande, no da problemas.
Background
• Imagen de x pixeles, replicada en x/y
• Background-size
background-size: auto; /*se verá en tamaño original*/background-size: 180px 90px; /*se verá al tamñao especificado*/background-size: contain; /*se ajusta al tamaño de la ventana manteniendo el aspect ratio*/background-size: cover; /*cubre todo el background*/
Media Queries
• Adaptar nuestra web según el entorno.
• Se utiliza la propiedad media si estamos en el elemento link.
<link rel="stylesheet" href="main.css" media="screen" /> <link rel="stylesheet" href="paper.css" media="print" />
@media
• Nos permite definir el media type y características físicas del dispositivo
@media screen and (min-width: 1024px) { body { font-size: 100%; }}
Media types
• Screen: Monitor a color.• Projection: proyectores.• Braille: dispositivos táctiles braille.• Tv: televisores.• Etc.
http://www.w3.org/TR/CSS21/media.html#media-types
Queries
Progressive Enhacemen vs Graceful degradation
Graceful degradation
• Mejor experiencia de usuario posible.
• Orientado al navegador.
• Énfasis en la tolerancia a fallos.
Progressive Enhancement
• Orientado al contenido.
• Hacer versión con funcionalidad básica.
• Mejorar a partir de dicha funcionalidad.
Separación en capas
¿Cómo se hace?
• Markup: HTML bien formado, para la interoperabilidad.
• Styling: Mejora progresiva del look-and-feel del diseño, para navegadores con mejores características (ej. Navegadores webkit, IE9/10, etc.)
• Behaviors: Mejoramos el sitio añadiendo características interactivas usando javascript.
Beneficios
• Accesibilidad: Contenido alcanzable para todos los usuarios.
• Portabilidad: Soporte cross-browser y cross-device.
• Modularidad: Componentes desacoplados.
• Rendimiento: Mejoras en términos de tiempo de carga.
Guidelines
• Separar HTML, CSS y Javascript en ficheros diferentes.
• Evitar código específico de un navegador y usar detección de características, no detección de navegador.
• Hacer pruebas con javascript desactivado, para comprobar que no podemos hacer y presentar una alternativa.
No todo es de color de rosa
• Utilizar progressive enhancement requiere más trabajo.
• Requiere revisar la semántica y la flexibilidad del markup.
• Escribir css extra para aprovechar las características de CSS3 y html5, cuando es soportado.
Progressive Enhacement 2.0
OMG CSS OMG JS
Nice CSS Nice JS
Base CSS Base JS
HTML
En Resumen
• Filosofía de desarrollo web.
• Nos permite crear webs con accesibilidad universal.
• Requiere aprendizaje, disciplina y experiencia.
• Recompensa de la inversión es alta.
Preguntas/dudas/sugerencias
#htmltour
Top Related