Responsive Web Design

¿Quién soy?

www.plainconcepts.com

UX Developer at Plain Conceptsdgarcia@plainconcepts.com#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